<template>
    <div>
        <el-form ref="form" :inline="true" :model="form" label-width="80px">
            <el-form-item>
                <Timeinterval ref="Timeinterval" :interval="3" />
            </el-form-item>
            <el-form-item><el-button type="primary" icon="el-icon-search" @click="query">查询</el-button></el-form-item>
        </el-form>
        <el-row :gutter="50" id="echarts">
            <div class="wzhi">
                <el-button type="text" icon="el-icon-download" title="生成图片" @click="download">下载</el-button>
            </div>
            <el-col :span="16">
                <month ref="month" :timeFlag="timeFlag" :item="item" :intervald="intervald" />
            </el-col>
            <el-col :span="8">
                <el-row :style="`height: ${vh};overflow: hidden;`">
                    <el-col :span="24">
                        <TemporaryReason :timeFlag="timeFlag" ref="TemporaryReason" :item="item" />
                    </el-col>
                </el-row>
                <el-row :style="`height: ${vh};overflow: hidden;`">
                    <el-col :span="24">
                        <TemporaryGeneral ref="TemporaryGeneral" :item="item" />
                    </el-col>
                </el-row>
            </el-col>
        </el-row>
    </div>
</template>
<script>
import html2canvas from 'html2canvas'
import month from '@/views/Event-boot/components/echarts/month'
import TemporaryReason from '@/views/Event-boot/components/echarts/TemporaryReason'
import TemporaryGeneral from '@/views/Event-boot/components/echarts/TemporaryGeneral'
import Timeinterval from '@/views/components/TimePicker/index4'
export default {
    components: { Timeinterval, month, TemporaryReason, TemporaryGeneral },
    props: {},
    data() {
        return {
            item: ['', ''],
            form: {},
            tableData: [],
            vh: undefined,
            timeFlag: '',
            loading: false,
            interval: '',
            zoom: '', //图表焦点校验
            intervald: ''
        }
    },
    created() {
        this.$emit('Loading', true)
    },
    mounted() {
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.item = this.$refs.Timeinterval.timeValue
        this.timeFlag = this.$refs.Timeinterval.timeFlag
        this.intervald = this.$refs.Timeinterval.intervald
        setTimeout(() => {
            this.$emit('Loading', false)
        }, 1500)
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = (window.sessionStorage.getItem('appheight') - 200) / 2 + 'px'
        },
        query() {
            this.item = this.$refs.Timeinterval.timeValue
            this.timeFlag = this.$refs.Timeinterval.timeFlag
            this.intervald = this.$refs.Timeinterval.intervald

            setTimeout(() => {
                this.$emit('Loading', true)
                this.$refs.month.query()
                this.$refs.TemporaryReason.query()
                this.$refs.TemporaryGeneral.query()
                setTimeout(() => {
                    this.$emit('Loading', false)
                }, 1500)
            }, 0)
        },
        // 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() // 下载之后把创建的元素删除
            })
        }
    },

    computed: {},

    watch: {}
}
</script>
<style lang="scss" scoped>
.wzhi {
    z-index: 1;
    font-size: 14px;
    //font-weight: 550;
    // margin-top: 10px;
    right: 30px;
    position: absolute;
}
</style>
