<template>
    <div class="pd10 bg" element-loading-text="数据加载中" v-loading="loading">
        <!-- <div style="background: green;height: 300px;"></div> 表单-->
        <el-form :inline="true" :model="formInline" class="demo-form-inline">
            <el-form-item label="筛选：">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>

            <el-form-item label="条件一:">
                <el-input v-model="formInline.user" placeholder="审批人"></el-input>
            </el-form-item>
            <el-form-item label="条件二:">
                <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item label="区域选择:">
                <el-select v-model="formInline.region" placeholder="活动区域">
                    <el-option label="区域一" value="shanghai"></el-option>
                    <el-option label="区域二" value="beijing"></el-option>
                </el-select>
            </el-form-item>
            <el-form-item>
                <timepicker ref="timepk" :interval="interval"></timepicker>
            </el-form-item>
            <el-form-item>
                <el-button type="primary" @click="onSubmit">查询</el-button>
            </el-form-item>
        </el-form>
        <!--表格-->
        <el-table
            ref="pltree"
            :data="tableData"
            header-cell-class-name="table_header"
            highlight-current-row
            stripe
            border
            :height="vth"
            style="width: 100%"
        >
            <el-table-column prop="date" label="日期" width="180"></el-table-column>
            <el-table-column prop="name" label="姓名" width="180"></el-table-column>
            <el-table-column prop="address" label="地址"></el-table-column>
        </el-table>

        <el-tabs type="border-card" class="mt10">
            <el-tab-pane label="用户管理">
                <!--图表-->
                <div :style="`height:${vh}`" id="ceshi2n">
                    <el-button
                        style="position: absolute; right: 10px; z-index: 20000"
                        type="text"
                        icon="el-icon-download"
                        title="生成图片"
                        @click="download"
                    >
                        下载
                    </el-button>
                    <div id="echartsft" ref="fist"></div>
                </div>
            </el-tab-pane>
            <el-tab-pane label="配置管理">
                <!--表格-->
                <el-table
                    class=""
                    ref="pltree"
                    :data="tableData"
                    header-cell-class-name="table_header"
                    highlight-current-row
                    stripe
                    border
                    :height="vth"
                    style="width: 100%"
                >
                    <el-table-column prop="date" label="日期" width="180"></el-table-column>
                    <el-table-column prop="name" label="姓名" width="180"></el-table-column>
                    <el-table-column prop="address" label="地址"></el-table-column>
                </el-table>
            </el-tab-pane>
            <el-tab-pane label="角色管理">
                <el-form :inline="true" :model="formInline" class="demo-form-inline formel">
                    <el-form-item label="条件一:">
                        <el-input class="input" v-model="formInline.user" placeholder="审批人"></el-input>
                    </el-form-item>
                    <el-form-item label="条件二:">
                        <el-select class="select" v-model="formInline.region" placeholder="活动区域">
                            <el-option label="区域一" value="shanghai"></el-option>
                            <el-option label="区域二" value="beijing"></el-option>
                        </el-select>
                    </el-form-item>

                    <!-- <el-form-item >
                <timepicker ref="timepk"   :interval="interval" ></timepicker>
              </el-form-item> -->
                    <el-form-item>
                        <el-button class="ceshi" type="primary" @click="onSubmit">查询</el-button>
                    </el-form-item>
                </el-form>

                <el-row class="mt20" :gutter="10">
                    <el-col :span="12">
                        <div class="lefth" :style="`height:${vh}`">左边内容</div>
                    </el-col>
                    <el-col :span="12">
                        <div class="righth" :style="`height:${vh}`">右边内容</div>
                    </el-col>
                </el-row>
            </el-tab-pane>
            <el-tab-pane label="定时任务补偿">定时任务补偿</el-tab-pane>
        </el-tabs>
    </div>
</template>

<script>
//时间组件
import timepicker from '../../components/TimePicker/index4'
//echarts共公样式
import yan from '@/assets/commjs/color'
//字典表
import { dicData } from '@/assets/commjs/dictypeData'
export default {
    name: 'yanshi',
    computed: {
        // vth() {
        //   return window.sessionStorage.getItem("appheight")/2 - 120;
        // },
    },
    data() {
        return {
            vh: null,
            vth: null,
            loading: false,
            zoom: '',
            interval: 3,
            //表单参数
            formInline: {
                user: '',
                region: ''
            },
            //表格数据
            tableData: [
                {
                    date: '2016-05-02',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-04',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-01',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                },
                {
                    date: '2016-05-03',
                    name: '王小虎',
                    address: '上海市普陀区金沙江路 1518 弄'
                }
            ],
            xdata: ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
            yadta: [5, 40, 60, 110, 40, 100, 70, 50, 20, 110, 40, 10],
            yadta1: [10, 30, 40, 120, 50, 90, 60, 40, 15, 60, 30, 15],
            myChartes: ''
        }
    },
    //子组件
    components: {
        timepicker
    },
    //侦听器
    watch: {},

    created() {},
    mounted() {
        this.resizeEchartdgty()
        this.setHeight()
        window.addEventListener('resize', this.setHeight)
        //延迟加载
        // this.$nextTick(() => {
        this.getqueryData()
        // });
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') / 2 - 6 + 'px'
            this.vth = window.sessionStorage.getItem('appheight') / 2 - 120
            if (this.myChartes !== '') {
                this.myChartes.resize()
            }
        },
        onSubmit() {},
        //下载
        download() {
            // 转换成canvas
            html2canvas(document.getElementById('ceshi2n'), {
                //backgroundColor: 'white',
                background: '#fff',
                scale: 1
            }).then(function (canvas) {
                // 创建a标签，实现下载
                var creatIMg = document.createElement('a')
                creatIMg.download = '演示Echarts.png' // 设置下载的文件名，
                creatIMg.href = canvas.toDataURL() // 下载url
                creatIMg.click()
                creatIMg.remove() // 下载之后把创建的元素删除
            })
        },
        //图表自适应监听
        resizeEchartdgty() {
            var elementResizeDetectorMaker = require('element-resize-detector')
            if (document.getElementById('ceshi2n')) {
                var erd = elementResizeDetectorMaker()
                erd.listenTo(document.getElementById('ceshi2n'), element => {
                    let domeId = document.getElementById('ceshi2n')
                    let domeId2 = document.getElementById('echartsft')
                    domeId2.style.width = domeId.offsetWidth - 10 + 'px'
                    if (this.myChartes !== '') {
                        this.myChartes.resize()
                    }
                })
            }
        },
        //查询
        getqueryData() {
            this.loading = true
            ;(this.xdata = ['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月']),
                (this.yadta = [5, 40, 60, 110, 80, 100, 70, 50, 20, 110, 40, 50]),
                (this.yadta1 = [10, 30, 40, 120, 50, 90, 80, 40, 15, 90, 30, 15])
            setTimeout(() => {
                this.getEcharts()
            }, 500)
        },

        //图表渲染
        getEcharts() {
            const echarts = require('echarts')
            let domID1 = document.getElementById('echartsft')
            setTimeout(() => {
                //domID1.style.width = window.sessionStorage.getItem("appwidth") - 30 + "px";
                domID1.style.width = document.getElementById('ceshi2n').offsetWidth - 10 + 'px'
                domID1.style.height = window.sessionStorage.getItem('appheight') / 2 - 6 + 'px'
            }, 0)
            var myChartes = echarts.init(domID1)
            this.myChartes = myChartes
            myChartes.clear()
            let echartsColor = JSON.parse(window.localStorage.echartsColor)
            let option = {
                //backgroundColor: "#00211f",
                title: {
                    text: '演示echarts',
                    left: 'center',
                    textStyle: {
                        fontSize: yan.EchartObject.titleNamefontSize1,
                        color: echartsColor.WordColor
                    }
                },
                tooltip: {
                    trigger: 'axis',
                    axisPointer: {
                        // 坐标轴指示器，坐标轴触发有效
                        type: 'shadow' // 默认为直线，可选为：'line' | 'shadow'
                    }
                },
                grid: yan.EchartObject.grid4,
                legend: {
                    data: ['预警下发', '消息发布'],
                    top: '8%',
                    textStyle: {
                        color: echartsColor.WordColor,
                        fontSize: 16
                    },
                    itemWidth: 12,
                    itemHeight: 10
                    // itemGap: 35
                },
                xAxis: {
                    type: 'category',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    data: this.xdata,
                    axisLine: {
                        lineStyle: {
                            color: echartsColor.WordColor
                        }
                    },
                    axisLabel: {
                        // interval: 0,
                        // rotate: 40,
                        textStyle: {
                            fontFamily: 'Microsoft YaHei',
                            fontWeight: 600,
                            fontSize: 16
                        }
                    }
                },

                yAxis: {
                    name: '单位：元',
                    nameTextStyle: {
                        color: echartsColor.WordColor
                    },
                    type: 'value',
                    max: '150',
                    axisLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.WordColor
                        }
                    },
                    splitLine: {
                        show: true,
                        lineStyle: {
                            color: echartsColor.WordColor
                        }
                    },
                    axisLabel: {
                        textStyle: {
                            fontWeight: 600
                        }
                    }
                },
                series: [
                    {
                        name: '预警下发',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            normal: {
                                color: '#00bff2'
                            }
                        },
                        data: this.yadta
                    },
                    {
                        name: '消息发布',
                        type: 'bar',
                        barWidth: '25%',
                        itemStyle: {
                            normal: {
                                color: '#fecb12'
                            }
                        },
                        data: this.yadta1
                    }
                ]
            }
            myChartes.setOption(option)
            window.echartsArr.push(myChartes)
            // setTimeout(() => {
            //     myChartes.resize();
            //   }, 100);
            let _this = this
            _this.$erd.listenTo(_this.$refs.fist, element => {
                _this.$nextTick(() => {
                    //domID1.style.width = window.sessionStorage.getItem("appwidth") - 45 + "px"
                    domID1.style.width = document.getElementById('ceshi2n').offsetWidth - 10 + 'px'
                    //domID1.style.height = window.sessionStorage.getItem("appheight")/2 - 100 + "px";
                    _this.myChartes.resize()
                })
            })
            this.loading = false
            // window.onresize = function () {
            //   myChartes.resize();
            // };
        }
    }
}
</script>
<!-- <style lang="less" scoped>
//布局使用的公共演示
@import url("../../../styles/comStyle.less");
</style> -->

<style lang="scss" scoped>
//只控制当前页面自定义类名控件样式，使用穿透，提高权重
::v-deep .input {
    width: 400px !important;
    border: 2px solid red !important;
}
::v-deep .select {
    width: 200px !important;
    border-radius: 15px !important;
    border: 2px dashed rgb(252, 5, 227) !important;
}
::v-deep .ceshi {
    width: 100px !important;
    height: 30px !important;
    border-radius: 15px !important;
    border: 2px dashed rgb(5, 10, 255) !important;
    background: goldenrod !important;
    font-size: 16px !important;
    color: #fff !important;
    font-weight: bold !important;
}

::v-deep .lefth {
    width: 100% !important;
    height: 500px !important;
    background: #9c9d76 !important;
}
::v-deep.righth {
    width: 100% !important;
    height: 500px !important;
    background: #9577a8 !important;
}
//使用elementui组件类名控制整个页面同一组件样式(表格举例)
//使用变量控制颜色
::v-deep .table_header {
    height: 40px;
    font-size: 16px;
    color: #fff !important;
    background-color: $taleheader !important;
}
::v-deep .el-table__row:not(.el-table__row--striped) {
    background: $taletd !important;
}
::v-deep .el-table--striped .el-table__body tr.el-table__row--striped td.el-table__cell {
    background-color: $talesprip !important;
}

::v-deep .el-table--striped .el-table__body tr.el-table__row--striped.current-row td.el-table__cell {
    background-color: $taletd !important;
}

::v-deep .el-table.el-table--enable-row-hover .el-table__body tr:hover > td {
    color: aliceblue;
    //主题色
    // background: $themeColor !important;
    //变量色
    background: $talehover !important;
}
</style>

<style scoped>
.bg {
    background-color: rgb(140, 140, 141) !important;
    height: auto !important;
}
.formel {
    background-color: rgba(6, 94, 149, 0.588) !important;
}
</style>
