<template>
    <div class="machine-state-trend">
        <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="stateTrendChart"></div>
    </div>
</template>

<script>
    export default {
        props: {
            pollingRequestTime: {}
        },
        watch: {
            pollingRequestTime (newVal, oldVal) {
                // 请求设备状态趋势图图表数据
                this.getMachineStateTrendEchartData()
            }
        },
        data () {
            return {
                // 开始时间
                startTime: '',
                // 结束时间
                endTime: '',
                // 图表时间数据
                echartTimeData: [],
                // 图表故障率数据
                echartFailureData: [],
                // 图表运行率数据
                echartRunningData: [],
                // 图表待机率数据
                echartLoadingData: []
            }
        },
        methods: {
            // 渲染echarts图表
            renderEcharts () {
                let domItem = document.getElementById('stateTrendChart')
                echarts.dispose(domItem)
                let echart = echarts.init(domItem)
                let echartTimeData = this.echartTimeData
                let echartFailureData = this.echartFailureData
                let echartRunningData = this.echartRunningData
                let echartLoadingData = this.echartLoadingData
                echart.setOption({
                    tooltip: {
                        trigger: 'axis'
                    },
                    grid: {
                        left: 60,
                        right: 110,
                        top: 30,
                        bottom: 30
                    },
                    color: ['#7460ee', '#15e067', '#ee295c'],
                    legend: {
                        orient: 'vertical',
                        top: 'center',
                        left: '85%',
                        data: ['故障', '运行', '待机'],
                        itemGap: 10,
                        itemWidth: 15,
                        itemHeight: 12,
                        textStyle: {
                            color: '#00b4ff',
                            fontSize: 14
                        }
                    },
                    xAxis: [{
                        name: '',
                        type: 'category',
                        axisTick: {
                            'alignWithLabel': true
                        },
                        axisLabel: {
                            color: '#00b4ff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3569fd'
                            }
                        },
                        data: echartTimeData
                    }],
                    yAxis: [{
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            color: '#00b4ff',
                            formatter: '{value}%'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#234eb6'
                            }

                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3569fd'
                            }
                        },
                        name: ''
                    }],
                    series: [{
                        data: echartLoadingData,
                        name: '待机',
                        stack: 'one',
                        type: 'bar'
                        // label: {
                        //     show: true
                        // }
                    }, {
                        data: echartRunningData,
                        name: '运行',
                        stack: 'one',
                        type: 'bar'
                        // label: {
                        //     show: true
                        // }
                    }, {
                        data: echartFailureData,
                        name: '故障',
                        stack: 'one',
                        type: 'bar'
                        // label: {
                        //     show: true
                        // }
                    }]
                })
            },
            // 点击确认按钮
            doConfirmClick () {
                if (this.startTime !== '' && this.endTime !== '') {
                    if (this.startTime > this.endTime) {
                        this.$message.warning('设备状态趋势图开始时间不能大于结束时间！')
                    } else {
                        // 请求设备状态趋势图图表数据
                        this.getMachineStateTrendEchartData()
                    }
                } else {
                    this.$message.warning('设备状态趋势图开始时间和结束时间不能为空！')
                }
            },
            // 点击重置按钮
            doRestClick () {
                this.startTime = ''
                this.endTime = ''
                // 请求设备状态趋势图图表数据
                this.getMachineStateTrendEchartData()
            },
            // 请求设备状态趋势图图表数据
            getMachineStateTrendEchartData () {
                let queryParams = { beginTime: this.startTime, endTime: this.endTime }
                this.$fetch('report-controller/stateTrend-get', queryParams).then(response => {
                    this.echartTimeData = []
                    this.echartFailureData = []
                    this.echartRunningData = []
                    this.echartLoadingData = []
                    for (let item of response) {
                        this.echartTimeData.push(item.date)
                        this.echartFailureData.push(item.errorStatePercent)
                        this.echartRunningData.push(item.runStatePercent)
                        this.echartLoadingData.push(item.loadStatePercent)
                    }
                    // 渲染echarts图表
                    this.renderEcharts()
                })
            }
        }
    }
</script>

<style lang="scss" scoped>
    .machine-state-trend {
        width: 607px;
        height: 414px;
        position: absolute;
        overflow: hidden;
        top: 632px;
        left: 1302px;

        .search-pack {
            width: 607px;
            height: 60px;
            margin-top: 30px;
            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;
                    }
                }
            }
        }

        #stateTrendChart {
            height: 300px;
            width: 607px;
        }
    }
</style>