<template>
    <div class="machine-utilization-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="utilizationTrendChart"></div>
    </div>
</template>

<script>
    export default {
        props: {
            pollingRequestTime: {}
        },
        watch: {
            pollingRequestTime (newVal, oldVal) {
                // 请求设备利用率趋势图表数据
                this.getOeuTrendEchartData()
            }
        },
        data () {
            return {
                // 开始时间
                startTime: '',
                // 结束时间
                endTime: '',
                // 图表X轴数据
                echartXData: [],
                // 图表Y轴数据
                echartYData: []
            }
        },
        methods: {
            // 渲染echarts图表
            renderEcharts () {
                let domItem = document.getElementById('utilizationTrendChart')
                echarts.dispose(domItem)
                let echart = echarts.init(domItem)
                let echartXData = this.echartXData
                let echartYData = this.echartYData
                echart.setOption({
                    grid: {
                        left: 60,
                        right: 30,
                        top: 30,
                        bottom: 30
                    },
                    xAxis: {
                        type: 'category',
                        data: echartXData,
                        axisLabel: {
                            color: '#00b4ff'
                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3569fd'
                            }
                        }
                    },
                    yAxis: {
                        type: 'value',
                        min: 0,
                        max: 100,
                        axisLabel: {
                            color: '#00b4ff',
                            formatter: '{value}%'
                        },
                        splitLine: {
                            lineStyle: {
                                color: '#234eb6'
                            }

                        },
                        axisLine: {
                            lineStyle: {
                                color: '#3569fd'
                            }
                        }
                    },
                    series: [{
                        data: echartYData,
                        type: 'line',
                        yAxisIndex: 0,
                        symbolSize: 12,
                        itemStyle: {
                            normal: {
                                color: '#14d563',
                                lineStyle: {
                                    width: 2
                                }
                            }
                        }
                    }]
                })
            },
            // 点击确认按钮
            doConfirmClick () {
                if (this.startTime !== '' && this.endTime !== '') {
                    if (this.startTime > this.endTime) {
                        this.$message.warning('设备利用率趋势图开始时间不能大于结束时间！')
                    } else {
                        // 请求设备利用率趋势图表数据
                        this.getOeuTrendEchartData()
                    }
                } else {
                    this.$message.warning('设备利用率趋势图开始时间和结束时间不能为空！')
                }
            },
            // 点击重置按钮
            doRestClick () {
                this.startTime = ''
                this.endTime = ''
                // 请求设备利用率趋势图表数据
                this.getOeuTrendEchartData()
            },
            // 请求设备利用率趋势图表数据
            getOeuTrendEchartData () {
                let queryParams = { beginTime: this.startTime, endTime: this.endTime }
                this.$fetch('report-controller/oeuTrend-get', queryParams).then(response => {
                    this.echartXData = []
                    this.echartYData = []
                    for (let item of response) {
                        this.echartXData.push(item.date)
                        this.echartYData.push(item.percent)
                    }
                    // 渲染echarts图表
                    this.renderEcharts()
                })
            }
        }
    }
</script>

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

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

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