<template>
    <div class="machine-failure-rate">
        <div id="failureChart"></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"
                @click="doConfirmClick()"
                type="primary"
                size="small">
                确定
            </el-button>
            <el-button
                @click="doRestClick()"
                size="small">
                重置
            </el-button>
        </div>
    </div>
</template>

<script>
    export default {
        props: {
            pollingRequestTime: {}
        },
        watch: {
            pollingRequestTime (newVal, oldVal) {
                // 请求设备故障率图表数据
                this.getMachineFilureEchartData()
            }
        },
        data () {
            return {
                // 开始时间
                startTime: '',
                // 结束时间
                endTime: '',
                // 设备故障率
                machineFilureRate: []
            }
        },
        methods: {
            // 渲染echarts图表
            renderEcharts () {
                let domItem = document.getElementById('failureChart')
                echarts.dispose(domItem)
                let echart = echarts.init(domItem)
                let machineFilureRate = this.machineFilureRate
                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, '#b90b38'], [1, '#ee295c']]
                                }
                            },
                            data: machineFilureRate
                        }
                    ]
                })
            },
            // 点击确认按钮
            doConfirmClick () {
                if (this.startTime !== '' && this.endTime !== '') {
                    if (this.startTime > this.endTime) {
                        this.$message.warning('设备故障率图标开始时间不能大于结束时间！')
                    } else {
                        // 请求设备故障率图表数据
                        this.getMachineFilureEchartData()
                    }
                } else {
                    this.$message.warning('设备故障率图标开始时间不能大于结束时间！')
                }
            },
            // 点击重置按钮
            doRestClick () {
                this.startTime = ''
                this.endTime = ''
                // 请求设备故障率图表数据
                // this.getMachineFilureEchartData()
            },
            // 请求设备故障率图表数据
            getMachineFilureEchartData () {
                let queryParams = { beginTime: this.startTime, endTime: this.endTime }
                this.$fetch('report-controller/efr-get', queryParams).then(response => {
                    this.machineFilureRate = []
                    this.machineFilureRate.push({
                        value: _.cloneDeep(response)
                    })
                    // 渲染echarts图表
                    this.renderEcharts()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .machine-failure-rate{
        position: absolute;
        overflow: hidden;
        width: 534px;
        height: 414px;
        top: 633px;
        left: 56px;

        #failureChart {
            width: 534px;
            height: 301px;
            margin-top: 27px;
        }

        .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>