<template>
    <el-dialog
        title="烘干室温度折线图"
        :show-close="false"
        :close-on-press-escape="false"
        :close-on-click-modal="false"
        :visible.sync="dialogVisible"
        width="700px">
        <!-- 烘干室温度折线图 -->
        <div 
            id="temperatureLineGraph">
        </div>
        <span slot="footer" class="dialog-footer">
            <el-button class="close" size="small" @click="doCancelClick()">关闭</el-button>
        </span>
    </el-dialog>
</template>

<script>
import Moment from 'moment'
export default {
    props: {
        startTime: {},
        endTime: {},
        equipCode: {}
    },
    data () {
        return {
            echartsData: [],
            dialogVisible: false,
            // 图表X轴数据
            echartXData: [],
            // 图表Y轴数据
            echartYData: [],
            // echart元素
            domItem: ''
        }
    },
    watch: {
        dialogVisible (newVal, oldVal) {
            if (this.dialogVisible) {
                this.getTemperatureLineGraphEchartData();
            }
        }
    },
    methods: {
        doCancelClick () {
            setTimeout(() => {
                this.echartXData = [];
                this.echartYData = [];
                this.dialogVisible = false;
                echarts.dispose(this.domItem);
            }, 0)
        },
        // 渲染echarts图表
        renderEcharts () {
            let self = this;
            this.domItem = document.getElementById('temperatureLineGraph');
            let echart = echarts.init(this.domItem);
            echart.setOption({
                grid: {
                    left: 60,
                    right: 30,
                    top: 30,
                    bottom: 30
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        type: 'cross',
                        label: {
                            backgroundColor: '#6a7985'
                        }
                    }
                },
                xAxis: {
                    type: 'category',
                    data: this.echartXData
                },
                yAxis: {
                    type: 'value'
                },
                series: [{
                    data: this.echartYData,
                    type: 'line'
                }]
            })
        },
        // 请求烘干室温度趋势图表数据
        getTemperatureLineGraphEchartData () {
            let queryParams = { beginTime: this.startTime, endTime: this.endTime, equipCode: this.equipCode }
            this.$fetch('drying-room-temp-controller/temp-get', queryParams).then(res => {
                for (let item of res) {
                    this.echartXData.push(this.formatTime(item.createTime, 'HH:mm'))
                    this.echartYData.push(item.temperature)
                }
                // 渲染echarts图表
                this.renderEcharts()
            })
        },
        // 时间日期格式化
        formatTime (time, format) {
            if (time !== null && time !== '') {
                return Moment(time).format(format)
            } else {
                return '暂无'
            }
        }
    }
}
</script>

<style lang="scss" scoped>
    #temperatureLineGraph {
        margin: 0 auto;
        height: 300px;
        width: 607px;
    }
</style>