<template>
    <div>
        <el-form :inline="true" :model="form" class="demo-form-inline">
            <el-form-item>
                <Area @click="handleNodeClick" @clickFn="clickFn" ref="area" class="box"></Area>
            </el-form-item>
            <el-form-item label="统计类型:">
                <el-select v-model="form.statisticalType" placeholder="请选择统计类型" clearable @change="changeFn">
                    <el-option
                        v-for="item in classificationData"
                        :key="item.id"
                        :label="item.name"
                        :value="{
                            label: item.name,
                            value: item.id,
                            name: item.name,
                            id: item.id,
                            code: item.code,
                            sort: item.sort
                        }"
                    ></el-option>
                </el-select>
            </el-form-item>

            <el-form-item>
                <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>

        <el-row id="echarts">
            <el-col :span="12" :style="`height: ${vhh};overflow: hidden`" id="fbdtc">
                <div class="wzhi">
                    <el-button type="text" icon="el-icon-download" title="生成图片" @click="download">下载</el-button>
                </div>
                <echarts-2
                    :substationDetailVOList="substationDetailVOList"
                    :title="title"
                    :jsonData="jsonData"
                    @sendData="send"
                    @sendData1="send1"
                    @sendData2="send2"
                    @fatherMethod="onSubmit"
                    ref="child2"
                ></echarts-2>
            </el-col>
            <el-col :span="12">
                <el-row>
                    <el-col :span="24" :style="`height: ${vh};overflow: hidden;`">
                        <echarts-1
                            :distributionData="distributionData"
                            :titleName="titleName"
                            :title="title"
                            ref="child1"
                        ></echarts-1>
                    </el-col>
                    <el-col :span="24">
                        <el-table
                            class="xiaoshou"
                            stripe
                            :data="distributionData"
                            :height="vth"
                            border
                            style="width: 100%"
                            header-cell-class-name="table_header"
                            highlight-current-row
                        >
                            <el-table-column
                                prop="qy"
                                :label="
                                    this.titleA == '电压等级'
                                        ? '电压等级'
                                        : this.titleA == '终端厂家'
                                        ? '终端厂家'
                                        : this.titleA == '干扰源类型'
                                        ? '干扰源类型'
                                        : this.titleA == '电网拓扑'
                                        ? '区域'
                                        : ''
                                "
                                align="center"
                                show-overflow-tooltip
                            ></el-table-column>
                            <el-table-column
                                prop="jcd"
                                label="监测点数(个数)"
                                align="center"
                                sortable
                            ></el-table-column>
                            <el-table-column prop="zc" label="通讯正常(个数)" sortable align="center"></el-table-column>
                            <el-table-column prop="zd" label="通讯中断(个数)" sortable align="center"></el-table-column>
                        </el-table>
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
import Area from '@/views/components/Area/Area.vue'
import { dicData } from '../../../../../assets/commjs/dictypeData'
import { getAreaLineDetailData } from '@/api/distribution'
import echarts1 from '@/views/Event-boot/Region/components/distribution/Echarts/echarts1.vue'
import echarts2 from '@/views/Event-boot/Region/components/distribution/Echarts/echarts2.vue'
export default {
    components: { echarts1, echarts2, Area },
    data() {
        return {
            vh: null,
            vhh: null,
            vth: null,
            form: {
                deptIndex: JSON.parse(window.sessionStorage.getItem('Info')).deptId,
                monitorFlag: 2,
                powerFlag: 2,
                serverName: 'event-boot',
                statisticalType: {}
            },
            title: '',
            titleName: '电网拓扑',
            titleA: '电网拓扑',
            h: null,
            zoom: null,
            substationDetailVOList: '',
            //   height: null,
            isLoading: false,

            jsonData: [],
            distributionData: [],
            classificationData: [],
            id: ''
        }
    },
    created() {
        // this.dictionaries();
        // this.title = JSON.parse(window.sessionStorage.getItem("Info")).deptName;
        // this.china();
        // this.manufactor();
        // this.area();
        this.getclassificationData()
        // this.onUpdateCover();
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.$emit('Loading', true)
        setTimeout(() => {
            this.$emit('Loading', false)
        }, 1000)
        this.onSubmit()

        // console.log(this.$refs["child"].form.deptIndex);
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 430 + 'px'
            this.vhh = window.sessionStorage.getItem('appheight') - 120 + 'px'
            this.vth = window.sessionStorage.getItem('appheight') / 2 - 105 + 'px'
            let heightd = window.sessionStorage.getItem('appheight') - 155
            this.h = heightd / 2 + 'px'
            this.zoom = 1 / document.body.style.zoom
        },

        changeFn(val) {
            this.titleName = val.name
        },
        clickFn(data) {
            this.jsonData = data[0].children
            // console.log(this.jsonData);
        },
        send(data) {
            // console.log(data, "1111111111111111");
            this.distributionData = data.data
            this.form.deptIndex = data.id
            this.title = data.name
            this.$nextTick(() => {
                this.$refs.child1.domain()
            })
            this.$refs.area.form.valueTitle = data.name
        },
        send1(data) {
            this.$refs.area.form.valueTitle = data
        },
        send2(data) {
            this.$refs.area.form.valueTitle = data.name
            this.form.deptIndex = data.id
        },
        // dmo元素里的内容转换为canvas,并将canvas下载为图片
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('echarts'), {
                scale: 2
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '图表.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                // document.body.appendChild(creatIMg);
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        },
        //获取统计类型
        getclassificationData() {
            var code = 'Statistical_Type'
            this.classificationData = dicData(code, ['Report_Type'])
            this.form.statisticalType = this.classificationData[0]
        },

        // 查询
        onSubmit() {
            this.$emit('Loading', true)
            // console.log(this.title);
            this.titleA = this.titleName
            if (this.form.deptIndex == JSON.parse(window.sessionStorage.getItem('Info')).deptId) {
                this.$refs.area.form.valueTitle = '中国'
                this.title = JSON.parse(window.sessionStorage.getItem('Info')).deptName
            }
            this.$refs.child2.isfanhui = false
            // this.$refs.child2.echarts();
            getAreaLineDetailData(this.form).then(res => {
                this.substationDetailVOList = res.data.substationDetailVOList
                let table = []
                for (var i = 0; i < res.data.areaValue.length; i++) {
                    let t = {
                        qy: res.data.areaValue[i][0],
                        jcd: res.data.areaValue[i][1],
                        zc: res.data.areaValue[i][2],
                        zd: res.data.areaValue[i][3]
                    }
                    table.push(t)
                }
                this.distributionData = table
                this.$nextTick(() => {
                    this.$refs.child1.domain()
                    this.$refs.child2.echarts()
                })
            })
            setTimeout(() => {
                this.$emit('Loading', false)
            }, 1000)
        },

        //获取子组件数据
        // onUpdateCover(data) {
        //   console.log(data);
        //   // let tableData = data.data.areaValue
        //   let table = [];
        //   for (var i = 0; i < data.data.areaValue.length; i++) {
        //     let t = {
        //       qy: data.data.areaValue[i][0],
        //       jcd: data.data.areaValue[i][1],
        //       zc: data.data.areaValue[i][2],
        //       zd: data.data.areaValue[i][3],
        //     };
        //     table.push(t);
        //   }
        //   this.distributionData = table;
        // },

        // 切换选项
        handleNodeClick(data) {
            this.form.deptIndex = data.id
            this.title = data.areaName
            this.$refs.area.form.options[0].children.forEach(item => {
                item.children.forEach(item1 => {
                    if (this.title == item1.areaName) {
                        this.title = item.areaName
                    }
                    item1.children.forEach(item2 => {
                        if (this.title == item2.areaName) {
                            this.title = item.areaName
                        }
                    })
                })
            })
        }
    }
}
</script>
<style lang="less" scoped>
@import url('../../../../../styles/comStyle.less');
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}

ul li > .el-tree .el-tree-node__content {
    height: auto;
    padding: 0 20px;
}

.el-tree-node__label {
    font-weight: normal;
}

.el-tree > .is-current .el-tree-node__label {
    font-weight: 700;
    color: #409eff;
}

.el-tree > .is-current .el-tree-node__children .el-tree-node__label {
    font-weight: normal;
    color: #606266;
}

.el-popper {
    z-index: 9999;
}
.ification_col {
    display: inline-block;
    width: 20px;
    height: 10px;
}
.box {
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
}
.smallBlock {
    display: inline-block;
    width: 15px;
    height: 10px;
    border-radius: 3px;
}
.wzhi {
    position: absolute;
    top: 0;
    //font-weight: 550;
    // margin-top: 10px;
    right: 20px;
    z-index: 1;
    font-size: 14px;
}
.xiaoshou {
    cursor: pointer !important;
}
</style>
