<template>
    <el-container style="position: relative; padding: 0px" id="dept">
        <el-aside v-show="view" style="width: 315px" id="drag-dept-left">
            <div></div>
            <TreeTemplat
                :heights="60"
                @eleMenuData="getTreeText"
                :checkbox="checkbox"
                :tablename="tablename"
                ref="commonTree"
                @treeClick="treeClick"
                @trigger="treeClick"
            ></TreeTemplat>
        </el-aside>
        <div id="drag-dept">
            <el-tooltip class="item" effect="dark" :content="view ? '收缩' : '展开'" placement="top-start">
                <i
                    @click="changeview"
                    :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                    style="
                        font-size: 18px;
                        z-index: 2000;
                        cursor: pointer;
                        margin-right: 2%;
                        width: 30px;
                        height: 30px;
                        background: rgba(6, 70, 122, 0);
                    "
                ></i>
            </el-tooltip>
        </div>
        <el-main id="drag-dept-right " v-loading="loading" element-loading-text="数据加载中">
            <div class="bm-view" id="container " :style="'height:' + vh + 'px ;position: relative;padding: 10px'">
                <!-- <div class="boxTop"> -->
                <el-form ref="form" :inline="true" :model="form">
                    <el-form-item label="模板:" style="margin-left: 10px">
                        <el-select
                            @change="changetype"
                            style="width: 180px"
                            value-key="id"
                            :popper-append-to-body="false"
                            v-model="form.TemplateId"
                            placeholder="请选择模板"
                        >
                            <el-option
                                v-for="item in options"
                                :key="item.id"
                                :label="item.name"
                                :value="item"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="报表类型:">
                        <el-select
                            :disabled="true"
                            v-model="form.reportForm"
                            :popper-append-to-body="false"
                            placeholder="请选择报表类型"
                        >
                            <el-option
                                v-for="item in reportFormList"
                                :key="item.value"
                                :label="item.label"
                                :value="item.value"
                            ></el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item>
                        <Timeinterval ref="Timeinterval" :interval="3" />
                    </el-form-item>
                    <el-form-item>
                        <el-button class="buttons" type="primary" icon="el-icon-search" @click="Template">
                            查询
                        </el-button>

                        <el-button @click="downloadExcel" class="buttons" type="primary" icon="el-icon-download">
                            导出excel
                        </el-button>
                    </el-form-item>
                </el-form>
                <!-- </div>  :style="`width:${vw - 320}px;height: ${vh - 140}px;height: ${vh - 70}px`"-->
                <!-- <div
       
          class="luckysheetBox"
          style="padding: 0; margin-top: 50px"
          
        ></div> -->
                <div
                    id="luckysheet"
                    style="padding: 0; margin: 0; cursor: pointer"
                    :style="`width:calc(100vw - 380px);height:calc(100vh - 160px);`"
                ></div>
            </div>
        </el-main>
    </el-container>
</template>
<script>
import jquery from 'jquery'
import { getCustomReport, getTemplateByDept } from '@/api/templateConfiguration'
import { exportExcel } from '@/views/components/luckyexcel/export'
import Timeinterval from '@/views/cgy-components/cgytree/TimeintervalTemplat.vue'
import TreeTemplat from '@/views/cgy-components/cgytree/TreeTemplat.vue'
import LuckyExcel from 'luckyexcel'
export default {
    name: 'reportsview',
    components: { TreeTemplat, Timeinterval },
    props: {},
    data() {
        return {
            options: [],
            zoom: '', //图表焦点校验
            form: {
                TemplateId: '',
                MonitoringId: '',
                reportForm: ''
            },
            reportFormList: [
                {
                    value: '1',
                    label: '分析报表'
                },
                {
                    value: '2',
                    label: '统计报表'
                },
                {
                    value: '3',
                    label: '自定义报表'
                }
            ],
            loading: true,
            loading: true,
            vh: undefined,
            vw: undefined,
            view: true,
            checkbox: false,
            tablename: 1,
            treenode: '',
            statisticalList: {}, //树上面的选择框
            data_info: [], //点位信息
            map: null, //存储地图
            flag: true,
            showtoolbar: false, //富文本框头部显示
            cellRightClickConfig: {
                copy: false, // 复制
                copyAs: false, // 复制为
                paste: false, // 粘贴
                insertRow: false, // 插入行
                insertColumn: false, // 插入列
                deleteRow: false, // 删除选中行
                deleteColumn: false, // 删除选中列
                deleteCell: false, // 删除单元格
                hideRow: false, // 隐藏选中行和显示选中行
                hideColumn: false, // 隐藏选中列和显示选中列
                rowHeight: false, // 行高
                columnWidth: false, // 列宽
                clear: false, // 清除内容
                matrix: false, // 矩阵操作选区
                sort: false, // 排序选区
                filter: false, // 筛选选区
                chart: false, // 图表生成
                image: false, // 插入图片
                link: false, // 插入链接
                data: false, // 数据验证
                cellFormat: false // 设置单元格格式
            }, //控制右键菜单
            list: [
                // {
                //   name: "Cell",
                //   index: 0,
                //   defaultRowHeight: 27,
                //   defaultColWidth: 105,
                // },
            ],
            deptId: ''
        }
    },
    created() {
        this.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
    },
    mounted() {
      this.setHeight()
        window.addEventListener('resize', this.setHeight)
        this.bindResize()

    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.vh = window.sessionStorage.getItem('appheight') - 38
            this.vw = window.sessionStorage.getItem('appwidth')
        },
        getTemplateLists() {
            // await getTemplateByDept({ id: this.form.MonitoringId }).then((res) => {
            getTemplateByDept({ id: this.deptId }).then(res => {
                if (res != undefined && res.code == 'A0000') {
                    this.options = res.data
                    res.data.forEach(item => {
                        if (item.activation == 1) {
                            this.form.TemplateId = item
                            this.form.reportForm = item.reportForm
                            return
                        }
                    })

                    setTimeout(() => {
                        this.Template()
                    }, 0)
                }
            })
        },
        // 选择模板
        async Template() {
            //debugger
            this.loading = true
            let _this = this
            await getCustomReport({
                startTime:
                    this.$refs.Timeinterval.intervald == 5
                        ? this.$refs.Timeinterval.DayTime
                        : this.$refs.Timeinterval.timeValue[0],
                endTime:
                    this.$refs.Timeinterval.intervald == 5
                        ? this.$refs.Timeinterval.DayTime
                        : this.$refs.Timeinterval.timeValue[1],
                type: this.$refs.Timeinterval.intervald,
                tempId: this.form.TemplateId.id,
                activation: this.form.TemplateId.activation,
                lineId: this.form.MonitoringId
                //lineId: this.deptId,
            }).then(response => {
                // let blob = new Blob([response], { type: "application/zip" });
                _this.list = response
                _this.init()
                this.loading = false
                // });
            })
        },

        // 树点击节点定位
        async treeClick(e) {
            // console.log(`ppp`, e);

            if (e.level == 6) {
                this.form.MonitoringId = e.id
                this.getTemplateLists()
                // this.getTemplateLists();
            }

            if (this.flag) {
                this.form.MonitoringId = e.id
                this.getTemplateLists()
                // this.getTemplateLists();
                this.flag = false
            }
        },
        //显示切换
        changeview() {
            if (this.view) {
                this.view = false
                this.$nextTick(() => {
                    // this.builmap();
                })
            } else {
                this.view = true
                this.$nextTick(() => {
                    // this.builmap();
                })
            }
        },
        changetype(val) {
            //console.log('+++++++++++++++',val)
            this.form.reportForm = val.reportForm
        },
        /**
         * 缩放条拖动进而改变左侧div宽度方法
         */
        bindResize() {
            /**开始坐标 */
            let startX
            /**开始宽度 */
            let startWidth = getScalableDivWidth()
            let luckysheet = document.getElementById('luckysheet')

            document.querySelector('#drag-dept').addEventListener('mousedown', startDrag)

            function startDrag(e) {
                startX = e.clientX
                startWidth = getScalableDivWidth()

                document.documentElement.addEventListener('mousemove', onDrag)
                document.documentElement.addEventListener('mouseup', stopDrag)
                this.vw =
                    document.getElementById('app-main-in').offsetWidth -
                    document.getElementById('drag-dept-left').offsetWidth
            }

            function onDrag(e) {
                let newWidth = startWidth + e.clientX - startX
                document.querySelector('#drag-dept-left').style.width = newWidth + 'px'
                this.vw =
                    document.getElementById('app-main-in').offsetWidth -
                    document.getElementById('drag-dept-left').offsetWidth
            }

            function stopDrag() {
                document.documentElement.removeEventListener('mousemove', onDrag)
                document.documentElement.removeEventListener('mouseup', stopDrag)
                luckysheet.style.width = '100%'
            }

            /**获取宽度 */
            function getScalableDivWidth() {
                return parseInt(window.getComputedStyle(document.querySelector('#drag-dept-left')).width, 10)
            }

            this.loading = false
        },
        //树节点触发事件
        getTreeText(menudata, treenode, nodeCom, id) {
            // console.log(menudata, treenode, nodeCom, id);
            this.menudata = menudata
            this.treenode = treenode
            this.nodeCom = nodeCom
            this.id = id
        },
        // 初始化插件
        init() {
            window.luckysheet.destroy()
            let options = {
                container: 'luckysheet', //luckysheet为容器id
                title: '',
                lang: 'zh',
                showinfobar: false,
                cellRightClickConfig: this.cellRightClickConfig,
                showtoolbar: this.showtoolbar,
                // column:8,
                // row:7,
                showtoolbarConfig: {
                    textRotateMode: false // '文本旋转方式'
                },

                data: this.list
            }
            // console.log(options);
            luckysheet.create(options)
        },
        // 下载表格
        downloadExcel() {
            // const value = this.selected;;

            exportExcel(luckysheet.getAllSheets(), '统计报表下载')
            // testaaa();
        }
    },

    computed: {},

    watch: {},
    beforeDestroy() {
        this.$destroy()
        window.removeEventListener('resize', () => {})
    }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
@import url('../../../styles/comStyle.less');
</style>
<style lang="scss" scoped>
ul {
    list-style-type: none;
    padding: 0;
}
li {
    display: inline-block;
    margin: 0 10px;
}
a {
    color: #42b983;
}
.wrap {
    display: flex;
    justify-content: space-around;
}
#container {
    width: 100%;
    height: 83vh;
    border: 1px solid rgb(0, 183, 255);
}
#container2 {
    width: 500px;
    height: 500px;
    border: 3px solid pink;
}
#drag-dept-left {
    min-width: 220px;
    max-width: 35%;
}

/**拖拽条样式 */
#drag-dept {
    display: flex;
    justify-content: center;
    align-items: center;
    position: relative;
    top: 10;
    right: 0;
    width: 4px;
    background-color: #04607c2a;
    box-shadow: 0px 0px 1px rgba(0, 0, 0, 0.35);
    cursor: col-resize;
}

#drag-dept i {
    display: inline-block;
    height: 14px;
    width: 1px;
    background-color: #e9e9e9;
    margin: 0 1px;
}
.el-aside {
    overflow: hidden;
}
.el-main {
    margin-top: 0px;
}
.el-main {
    padding-top: 0px;
    padding-bottom: 0;
    padding-right: 0;
}
::v-deep .boxDiv {
    height: 25px;
    line-height: 25px;
    margin-left: 10px;
    span:first-child {
        font-weight: 600;
        margin-right: 10px;
    }
}
::v-deep .button {
    margin-right: 5px;
    background-color: $themeColor;
    color: #fff;
    height: 18px;
    line-height: 18px;
    border: 0 solid #000;
    border-radius: 2px;
    &:hover {
        cursor: pointer;
    }
}
.iconBox {
    position: absolute;
    top: 2px;
    right: 2px;
    width: 150px;
    height: 260px;
    padding: 10px;
    z-index: 2000;
    border-radius: 4px;
    border: 1px solid #ccc;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.12), 0 0 6px rgba(0, 0, 0, 0.04);
    background: rgba(255, 255, 255, 0.75) !important;

    .div {
        display: flex;

        margin-bottom: 5px;
        img {
            height: 20px;
            margin-right: 5px;
        }
        // span {
        //   line-height: 20px;
        // }
    }
}
.boxTop {
    position: absolute;
    top: -40px;
    left: 5px;
    z-index: 2000;
}
::v-deep .el-select-dropdown__list {
    display: flex;
    flex-direction: column;
    max-width: 240px;
}
.luckysheetBox {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 1500;
    // background-color: #000;
}
.anchorBL {
    display: none !important;
}
::v-deep .el-select {
    width: 150px;
}
</style>
