<template>
    <div class="machine-operating-status">
        <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
                size="small"
                @click="doRestClick()">
                重置
            </el-button>
        </div>
        <div id="operatingStatusChart"></div>
    </div>
</template>

<script>
    export default {
        props: {
            pollingRequestTime: {}
        },
        watch: {
            pollingRequestTime (newVal, oldVal) {
                // 请求设备运行状态图表数据
                this.getMachineOperatingStatusEchartData()
            }
        },
        data () {
            return {
                // 开始时间
                startTime: '',
                // 结束时间
                endTime: '',
                // 设备运行状态图表数据
                machineOperatingStatusEchartData: []
            }
        },
        methods: {
            // 渲染echart图表
            renderEcharts () {
                let domItem = document.getElementById('operatingStatusChart')
                echarts.dispose(domItem)
                let echart = echarts.init(domItem)
                let echartData = this.machineOperatingStatusEchartData
                echart.setOption({
                    grid: {
                        left: 60,
                        right: 30,
                        top: 30,
                        bottom: 30
                    },
                    legend: {
                        orient: 'vertical',
                        top: 'center',
                        left: '85%',
                        data: ['故障', '运行', '待机'],
                        textStyle: {
                            color: '#00b4ff',
                            fontSize: 14
                        }
                    },
                    series: [
                        {
                            name: '设备运行状态',
                            type: 'pie',
                            color: ['#ee295c', '#15e067', '#7460ee'],
                            radius: ['50%', '70%'],
                            label: {
                                formatter: '{c}%',
                                fontSize: 18,
                                fontWeight: 'bold'
                            },
                            data: echartData
                        }
                    ]
                })
            },
            // 点击确认按钮
            doConfirmClick () {
                if (this.startTime !== '' && this.endTime !== '') {
                    if (this.startTime > this.endTime) {
                        this.$message.warning('设备运行状态表开始时间不能大于结束时间！')
                    } else {
                        // 请求设备运行状态图表数据
                        this.getMachineOperatingStatusEchartData()
                    }
                } else {
                    this.$message.warning('设备运行状态表开始时间和结束时间不能为空！')
                }
            },
            // 点击重置按钮
            doRestClick () {
                this.startTime = ''
                this.endTime = ''
                // 请求设备运行状态图表数据
                this.getMachineOperatingStatusEchartData()
            },
            // 请求设备运行状态图表数据
            getMachineOperatingStatusEchartData () {
                let queryParams = { beginTime: this.startTime, endTime: this.endTime }
                this.$fetch('report-controller/equState-get', queryParams).then(response => {
                    this.machineOperatingStatusEchartData = []
                    this.machineOperatingStatusEchartData = _.cloneDeep(response)
                    // 渲染echart图表
                    this.renderEcharts()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .machine-operating-status {
        position: absolute;
        overflow: hidden;
        width: 608px;
        height: 414px;
        top: 166px;
        left: 1302px;

        .search-pack {
            width: 607px;
            height: 60px;
            margin-top: 28px;
            text-align: center;
            line-height: 60px;
            .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;
                    }
                }
            }
        }

        #operatingStatusChart {
            height: 325px;
            width: 608px;
        }
    }
</style>