<template>
    <div class="pd10" v-loading="isLoading" element-loading-text="数据加载中">
        <el-row>
            <el-col :span="24">
                <el-form :inline="true">
                    <el-form-item>
                        <Area @click="handleNodeClick" ref="area"></Area>
                    </el-form-item>
                    <el-form-item>
                        <Timeinterval :interval="interval" ref="interval"></Timeinterval>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="el-icon-search" @click="researchFn">查询</el-button>
                    </el-form-item>
                </el-form>
            </el-col>
            <el-col :span="24">
                <el-tabs v-model="activeName" @tab-click="handleClick" type="border-card">
                    <div class="wzhi">
                        <el-button
                            type="text"
                            icon="el-icon-download"
                            v-if="activeName == 'first'"
                            title="生成图片"
                            @click="download"
                        >
                            下载
                        </el-button>
                    </div>
                    <!-- 图形 -->
                    <el-tab-pane label="图形" name="first" :style="'height:' + vh + ';'">
                        <Graphical
                            @Loading="Loading"
                            id="echarts"
                            :timeFlag="timeFlag"
                            v-if="activeName == 'first'"
                            ref="child"
                            :item="item"
                            :intervald="intervald"
                            :deptIndex="deptIndex"
                        ></Graphical>
                    </el-tab-pane>
                    <!-- 表格 -->
                    <el-tab-pane label="表格" name="second" :style="'height:' + vh + ';'">
                        <Tableabove
                            @Loading="Loading"
                            :timeFlag="timeFlag"
                            v-if="activeName == 'second'"
                            ref="child1"
                            :item="item"
                            :deptIndex="deptIndex"
                            :intervald="intervald"
                            :region="region"
                        ></Tableabove>
                    </el-tab-pane>
                </el-tabs>
            </el-col>
        </el-row>
    </div>
</template>

<script>
import html2canvas from 'html2canvas'
// import Timeinterval from "@/views/components/Timeinterval.vue";
import Timeinterval from '@/views/components/TimePicker/index4'
import { deptTree } from '@/api/admin/dept'
import Graphical from './components/overview/Graphical'
import Tableabove from './components/overview/Tableabove'
import Area from '@/views/components/Area/Area.vue'
import jquery from 'jquery'
export default {
    name: 'areaview',
    components: { Graphical, Tableabove, Timeinterval, Area },
    data() {
        return {
            vh: null,
            device: null,
            activeName: 'first', //区分是那个节点
            type: '图形',
            interval: 3,
            intervald: '',
            timeFlag: '',
            item: ['', ''],
            deptIndex: '',
            region: '全国',
            isLoading: false
        }
    },
    created() {
        this.deptIndex = JSON.parse(window.sessionStorage.getItem('Info')).deptId
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.device = window.devicePixelRatio

        this.timeFlag = this.$refs.interval.timeFlag
        this.item = this.$refs.interval.timeValue
        this.intervald = this.$refs.interval.intervald
        // this.$refs.child.Graphical();
        if (this.$route.params.mapid4 != undefined && this.$route.params.mapName4 != undefined) {
            setTimeout(() => {
                this.RoutingChanges(this.$route.params.mapid4, this.$route.params.mapName4)
            }, 700)
        } else {
            this.researchFn()
        }
    },
    watch: {
        $route: {
            handler: function (val, oldVal) {
                if (val.params.mapid4 != undefined && val.params.mapName4 != undefined) {
                    setTimeout(() => {
                        this.RoutingChanges(val.params.mapid4, val.params.mapName4)
                    }, 700)
                }
            },
            // 深度观察监听
            deep: true
        }
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 118 + 'px'
        },
        RoutingChanges(id, name) {
            this.deptIndex = id
            this.region = name
            this.$refs.area.form.valueTitle = name

            this.researchFn()
        },
        Loading(e) {
            this.isLoading = e
        },
        handleClick(tab, event) {
            this.isLoading = true

            //   console.log(tab, event);
            this.type = tab.label
            setTimeout(() => {
                this.isLoading = false
            }, 1500)
        },
        handleNodeClick(data) {
            this.deptIndex = data.id
            this.region = data.name
        },
        //查询
        researchFn() {
            this.timeFlag = this.$refs.interval.timeFlag
            this.item = this.$refs.interval.timeValue
            this.intervald = this.$refs.interval.intervald
            setTimeout(() => {
                if (this.type == '图形') {
                    this.$refs.child.Graphical()
                } else if (this.type == '表格') {
                    this.$refs.child1.tableabove()
                }
            }, 100)
        },
        // 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;
}
.wzhi {
    position: absolute;
    //font-weight: 550;
    // margin-top: 10px;
    right: 10px;
    top: 15px;
    z-index: 1;
    font-size: 14px;
}
</style>
