<template>
    <div class="machine-utilization-rate">
        <div id="utilizationChart"></div>
        <div class="search-pack">
            <el-date-picker
                style="width: 135px;"
                class="date-picker-reset"
                v-model="startTime"
                type="date"
                placeholder="开始时间">
            </el-date-picker>
            <span class="middle-text">至</span>
            <el-date-picker
                style="width: 135px;"
                class="date-picker-reset"
                v-model="endTime"
                type="date"
                placeholder="结束时间">
            </el-date-picker>
            <el-button
                class="ml-10"
                type="primary"
                size="small"
                @click="doConfirmClick()">
                确定
            </el-button>
            <el-button
                size="small"
                @click="doRestClick()">
                重置
            </el-button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            pollingRequestTime: {}
        },
        watch: {
            pollingRequestTime (newVal, oldVal) {
                // 请求设备利用率图表数据
                this.getOeuEchartData()
            }
        },
        data () {
            return {
                // 开始时间
                startTime: '',
                // 结束时间
                endTime: '',
                // 设备利用率
                machineUtilizationRate: []
            }
        },
        methods: {
            // 渲染echarts图表
            renderEcharts () {
                let domItem = document.getElementById('utilizationChart')
                echarts.dispose(domItem)
                let echart = echarts.init(domItem)
                let machineUtilizationRate = this.machineUtilizationRate
                echart.setOption({
                    toolbox: {
                        'show': false
                    },
                    grid: {
                        left: 30,
                        right: 30,
                        top: 30,
                        bottom: 30
                    },
                    series: [
                        {
                            name: '设备利用率',
                            type: 'gauge',
                            detail: {formatter: '{value}%'},
                            axisLabel: { show: false },
                            splitLine: { show: false },
                            axisTick: { show: false },
                            itemStyle: { show: false },
                            axisLine: {
                                lineStyle: {
                                    width: 10,
                                    color: [[0, '#0ea418'], [1, '#02fb66']]
                                }
                            },
                            data: machineUtilizationRate
                        }
                    ]
                })
            },
            // 点击确认按钮
            doConfirmClick () {
                if (this.startTime !== '' && this.endTime !== '') {
                    if (this.startTime > this.endTime) {
                        this.$message.warning('设备利用率图表开始时间不能大于结束时间！')
                    } else {
                        // 请求设备利用率图表数据
                        this.getOeuEchartData()
                    }
                } else {
                    this.$message.warning('设备利用率图表开始时间和结束时间不能为空！')
                }
            },
            // 点击重置按钮
            doRestClick () {
                this.startTime = ''
                this.endTime = ''
                // 请求设备利用率图表数据
                this.getOeuEchartData()
            },
            // 请求设备利用率图表数据
            getOeuEchartData () {
                let queryParams = { beginTime: this.startTime, endTime: this.endTime }
                this.$fetch('report-controller/oeu-get', queryParams).then(response => {
                    this.machineUtilizationRate = []
                    this.machineUtilizationRate.push({
                        value: _.cloneDeep(response)
                    })
                    // 渲染echarts图表
                    this.renderEcharts()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    // 设备录用率
    .machine-utilization-rate {
        position: absolute;
        width: 534px;
        height: 413px;
        top: 166px;
        left: 56px;
        overflow: hidden;

        #utilizationChart {
            width: 534px;
            height: 300px;
            margin-top: 28px;
        }

        .search-pack {
            width: 534px;
            height: 60px;
            line-height: 60px;
            text-align: center;
            .middle-text {
                font-size: 18px;
                padding: 0 10px;
                color: #00b4ff;
            }
            /deep/ .date-picker-reset {
                .el-input__inner {
                    background-color: #102040;
                    color: #00b4ff;
                    border: 1px solid #2563ca;
                }
                input::-webkit-input-placeholder {
                    color: #00b4ff;
                }
                .el-input__prefix {
                    .el-input__icon.el-icon-date {
                        color: #00b4ff;
                    }
                }
            }
        }
    }
</style>