<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true" class="demo-form-inline">
                    <el-form-item>
                        <Area @click="handleNodeClick" ref="Area"></Area>
                    </el-form-item>
                    <el-form-item>
                        <Timeinterval :interval="3" ref="interval"></Timeinterval>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" class="ml10" icon="el-icon-search" @click="click">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="24">
                <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                    <!-- 图形 -->
                    <el-tab-pane label="暂降原因及类型统计" name="first" :style="'height:' + vh + ';overflow: hidden;'">
                        <div class="wzhi">
                            <el-button
                                type="text"
                                icon="el-icon-download"
                                v-if="activeName == 'first'"
                                title="生成图片"
                                @click="download"
                            >
                                下载
                            </el-button>
                        </div>
                        <Reason
                            id="echarts"
                            ref="child"
                            :item="item"
                            :deptIndex="deptIndex"
                            v-if="activeName == 'first'"
                        ></Reason>
                    </el-tab-pane>
                    <!-- 表格 -->
                    <el-tab-pane
                        label="电压容忍度曲线兼容性统计"
                        name="second"
                        :style="'height:' + vh + ';overflow: hidden;'"
                    >
                        <Tolerance
                            ref="child1"
                            :item="item"
                            :deptIndex="deptIndex"
                            v-if="activeName == 'second'"
                        ></Tolerance>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
import Area from '@/views/components/Area/Area.vue'
import Timeinterval from '@/views/components/TimePicker/index4'
import Reason from './components/statistics/Reason'
import Tolerance from './components/statistics/Tolerance'
export default {
    name: 'areastatic',
    components: { Reason, Tolerance, Timeinterval, Area },
    data() {
        return {
            isLoading: false,
            vh: null,
            device: null,
            isshow: false,
            activeName: 'first', //区分是那个节点
            interval: 1,
            deptIndex: '',
            item: ['', ''],
            type: '暂降原因及类型统计',
            areaData: null
            // timeData:null,
        }
    },
    created() {
        // this.dictionaries();
        this.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.device = window.devicePixelRatio
        this.item = this.$refs.interval.timeValue
        // this.click()
        this.isLoading = true
        setTimeout(() => {
            this.isLoading = false
        }, 1000)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 117 + 'px'
        },
        handleClick(tab, event) {
            // console.log(tab.label);
            this.isLoading = true
            this.type = tab.label
            setTimeout(() => {
                this.isLoading = false
            }, 1500)
        },
        handleNodeClick(data) {
            this.deptIndex = data.id
        },
        click() {
            this.item = this.$refs.interval.timeValue
            ;(this.isLoading = true),
                setTimeout(() => {
                    if (this.type == '暂降原因及类型统计') {
                        this.$refs.child.query()
                    } else if (this.type == '电压容忍度曲线兼容性统计') {
                        if (this.$refs.child1.radio == 'F47') {
                            this.$refs.child1.$refs.grandson2.semif()
                        } else if (this.$refs.child1.radio == 'ITIC') {
                            this.$refs.child1.$refs.grandson.iticData()
                        }
                    }
                }, 100)
            setTimeout(() => {
                this.isLoading = false
            }, 1000)
        },
        // 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() // 下载之后把创建的元素删除
            })
        }
    }
}
</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;
}
::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 5px;
}
::v-deep .el-table .cell {
    text-align: center;
}
::v-deep .el-tabs--border-card > .el-tabs__content {
    padding: 10px;
}
::v-deep .el-form-item--small.el-form-item {
    margin-bottom: 5px;
}
.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
    height: auto;
    max-height: 274px;
    padding: 0;
    overflow: hidden;
    overflow-y: auto;
}

.el-select-dropdown__item.selected {
    font-weight: normal;
}

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;
}
.wzhi {
    z-index: 1;
    font-size: 14px;
    //font-weight: 550;
    // margin-top: 10px;
    right: 10px;
    position: absolute;
}
</style>
