<template>
    <div class="wrapper">
        <el-dialog
            title=""
            :visible.sync="ifOpen"
            width="70%"
            append-to-body
            :close-on-click-modal="false"
            @open="openChart"
            @close="closeDialog"
        >
            <template #title>
                <div style="display: flex; align-items: center">
                    <img src="../../assets/img/signalPrefix.png" alt="" />
                    <span
                        style="
                            padding: 0 15px 0 10px;
                            font-size: 20px;
                            font-weight: bold;
                        "
                        >组塔监测</span
                    >
                    <img src="../../assets/img/lineSuffix.png" alt="" />
                </div>
            </template>
            <div class="content">
                <div class="cont-lef">
                    <div class="sel-top">{{proData.proName}}</div>
                    <div
                      :class="['single-sel', { isActive: currentSelIndex === item.value }]"
                      v-for="item in deviceRange"
                      :key="item.value"
                      @click="handleEnvir(item)"
                      >{{ item.label }}</div
                    >
                </div>
                <div class="cont-rig">
                    <!-- <div class="rig-top">
                        <el-date-picker
                            v-model="dateVal"
                            type="date"
                            value-format="yyyy-MM-dd"
                            placeholder="请选择日期"
                        >
                        </el-date-picker>
                        <el-button
                            style="margin-left: 10px"
                            type="primary"
                            icon="el-icon-search"
                            size="mini"
                            @click="queryDate"
                            >搜索</el-button
                        >
                    </div> -->
                    <div class="rig-charts">
                        <div class="charts-up">
                            <div id="pullWetChart"></div> 
                        </div>
                    </div>
                </div>
            </div>
        </el-dialog>
    </div>
</template>

<script>
import {
  queryDeviceByProApi,
  queryEnvironmentInfoByIdApi,
  getTowerDevAttributeRecordByDevice,
  queryWarnInfoByIdApi
} from '@/api/substation/substation'
import * as echarts from 'echarts'
export default {
    name: 'pullDialog',
    components: {},
    props: {
      ifOpen: {
        type: Boolean,
        default: false
      },
      proData: {
        type: Object,
        default: {}
      },
    },
    data() {
        return {
            open: false,
            deviceVal: undefined,
            deviceRange: [],
            dateVal: '',
            selList: [
                { id: 1, name: '一号环境' },
                { id: 2, name: '二号环境' },
                { id: 3, name: '三号环境' },
            ],
            currentSelIndex: null
        }
    },
    mounted() {
        
    },
    methods: {
        //获取设备列表
        async getDeviceData(proId) {
            let res = await queryDeviceByProApi({
                proId,
                devType: 118
            })
            if(res.data.data.length !== 0) {
                this.deviceVal = res.data.data[0].devId;
                this.currentSelIndex = res.data.data[0].devId;
                this.deviceRange = res.data.data.map(item => {
                return {
                    label: item.devName,
                    value: item.devId
                }
                })
                this.deviceVal = this.proData.id;
                this.currentSelIndex = this.proData.id;
                await this.getChartsData(this.deviceVal)
            }
        },
        //获取echart数据
        async getChartsData(devId) {
            this.desHander()
            let res = await getTowerDevAttributeRecordByDevice({devId}) 
            // console.log(res)
           
            this.generateCharts(res.data.slice(0,9)) 
        },
        //打开时触发
        openChart() {
          this.$nextTick(() => {
            this.getDeviceData(this.proData.proId)
          })
        },
        // 点击设备
        handleEnvir(val) {
            this.currentSelIndex = val.value
            // this.generateCharts()
            this.getChartsData(val.value)
        },
        queryDate() {
            console.log(this.dateVal)
        },
        //渲染echart
        generateCharts(list) {
            console.log(list)
            let tempArr = list.map(item => {
                return Number(item.jcValue)
            })
            let tempXList = list.map(item => {
                return item.xtime
            })
            // 拉力图表
            let tempOption = {
                tooltip: {
                trigger: 'axis',
                axisPointer: {
                    type: 'shadow'
                },
                valueFormatter:(value) => {
                    return value + 'N'
                }
                },
                grid: {
                left: '3%',
                right: '4%',
                bottom: '3%',
                containLabel: true
                },
                xAxis: [
                {
                    type: 'category',
                    data: tempXList,
                    axisTick: {
                    alignWithLabel: true
                    }
                }
                ],
                yAxis: [
                {
                    type: 'value',
                    name: '°'
                }
                ],
                series: [
                {
                    name: '拉力',
                    type: 'bar',
                    barWidth: '40%',
                    data: tempArr,
                    itemStyle:{
                    // 设置柱状渐变色
                    color: new echarts.graphic.LinearGradient(0, 0, 1, 1, [
                        {
                        offset: 0,
                        color: '#007FFF'
                        },
                        {
                        offset: 1,
                        color: '#93D4EA'
                        }
                    ]),
                    borderRadius: [3, 3, 0, 0],
                    }
                }
                ]
            };
            let tempChart = echarts.init(document.querySelector('#pullWetChart'))
            tempChart.dispose()
            tempChart.setOption(tempOption)
            
        },
        // 销毁实例
        desHander(){
            let myChart = echarts.init(document.querySelector('#pullWetChart'));
            myChart.dispose();
        },
        closeDialog() {
          echarts.init(document.getElementById('#pullWetChart')).dispose()
          this.$emit('closeDialog')
        }
    },
}
</script>

<style lang="scss" scoped>
.content {
    height: 600px;
    display: flex;
    justify-content: space-between;

    .cont-lef {
        width: 25%;
        height: 100%;
        margin-right: 15px;
        border: 1px solid #c6d8fa;
        border-radius: 10px;

        .sel-top {
            width: 100%;
            box-sizing: border-box;
            padding: 20px 40px;
            background-color: #d3e4fa;
            font-size: 18px;
            color: #000;
        }

        .single-sel {
            width: 100%;
            box-sizing: border-box;
            padding: 20px 40px;
            font-size: 16px;
            color: #000;
            border-bottom: 1px solid #ced1d5;
            cursor: pointer;
        }

        .isActive{

          background-color: #d3e4fa;

        }

    }

    .cont-rig {
        flex: 1;
        display: flex;
        flex-direction: column;

        .rig-top {
            width: 100%;
            display: flex;
            margin-bottom: 10px;
        }

        .rig-charts {
            flex: 1;
            display: flex;
            flex-direction: column;
            justify-content: space-between;

            .charts-up,
            .charts-down {
                width: 100%;
                height: 100%;
                display: flex;
                justify-content: space-between;

                div {
                    width: 100%;
                    height: 100%;
                    border: 1px dashed #98bbda;
                    border-radius: 5px;
                    box-sizing: border-box;
                    padding: 10px;
                }
            }
        }
    }
}
</style>
