<template>
    <el-container v-loading="loading" style="position: relative" id="dept">
        <el-aside v-show="view" width="280px" id="drag-dept-left">
            <div></div>
            <TreeTemplat
                :heights="225"
                @eleMenuData="getTreeText"
                :checkbox="checkbox"
                :tablename="tablename"
                ref="commonTree"
                @treeClick="treeClick"
                @trigger="treeClick"
            ></TreeTemplat>
        </el-aside>
        <div id="drag-dept">
            <i
                @click="changeview"
                :class="view ? 'el-icon-caret-left' : 'el-icon-caret-right'"
                style="
                    font-size: 18px;
                    cursor: pointer;
                    margin-right: 2%;
                    width: 50px;
                    height: 50px;
                    background: rgba(6, 70, 122, 0);
                "
            ></i>
            <i></i>
        </div>
        <el-main id="drag-dept-right ">
            <div class="bm-view" id="container " :style="'height:' + (vh - 20) + 'px ;position: relative;'">
                <div class="boxTop">
                    <el-form ref="form" :inline="true" :model="form" label-width="80px">
                        <el-form-item label="模板:">
                            <el-select
                                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
                                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"
                                size="mini"
                                type="primary"
                                icon="el-icon-search"
                                @click="Template"
                            >
                                查询
                            </el-button>

                            <el-button
                                @click="downloadExcel"
                                class="buttons"
                                size="mini"
                                type="primary"
                                icon="el-icon-download"
                            >
                                导出excel
                            </el-button>
                        </el-form-item>
                    </el-form>
                </div>
                <div
                    class="luckysheetBox"
                    style="padding: 0; margin: 0"
                    :style="`width:${vw - 70}px;height: ${vh - 255}px;`"
                ></div>
                <div
                    id="luckysheet"
                    style="padding: 0; margin: 0"
                    :style="`width:${vw - 60}px;height: ${vh - 185}px;margin-top: 50px;`"
                ></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/components/cgytree/TimeintervalTemplat.vue'
import TreeTemplat from '@/views/components/cgytree/TreeTemplat.vue'
import LuckyExcel from 'luckyexcel'
export default {
    components: { TreeTemplat, Timeinterval },
    props: {},
    data() {
        return {
            options: [],
            zoom: '', //图表焦点校验
            form: {
                TemplateId: '',
                MonitoringId: '',
                reportForm: ''
            },
            reportFormList: [
                {
                    value: '1',
                    label: '分析报表'
                },
                {
                    value: '2',
                    label: '统计报表'
                },
                {
                    value: '3',
                    label: '自定义报表'
                }
            ],
            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() {},
    mounted() {
        this.deptId = JSON.parse(window.sessionStorage.getItem('Info')).deptId
        this.zoom = 1 / document.body.style.zoom

        this.setHeight()
        window.addEventListener('resize', this.setHeight)

        this.bindResize()
    },
    beforeDestroy() {
        window.removeEventListener('resize', this.setHeight)
    },
    methods: {
        setHeight() {
            this.zoom = 1 / document.body.style.zoom
            this.vh = window.sessionStorage.getItem('appheight')
            this.vw =
                document.getElementById('app-main-in').offsetWidth -
                document.getElementById('drag-dept-left').offsetWidth
        },
        async getTemplateLists() {
            await getTemplateByDept({ id: this.deptId }).then(res => {
                if (res != undefined && res.code == 'A0000') {
                    res.data.forEach(item => {
                        if (item.activation == 1) {
                            this.form.TemplateId = item
                            return
                        }
                    })
                    this.options = res.data
                    setTimeout(() => {
                        this.Template()
                    }, 0)
                }
            })
        },
        // 选择模板
        async Template() {
            let _this = this
            await getCustomReport({
                startTime: this.$refs.Timeinterval.timeValue[0],
                endTime: 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: "8696be1d170e05b7d848accc059f4558",
            }).then(res => {
                jquery.getJSON(res.data[1], null, function (list) {
                    _this.list = list
                    _this.init()
                })
            })

            // .then((res) => {
            //   console.log("res", res.data);
            //   let Datalist = JSON.parse(res.data);

            //   console.log(`13323`, JSON.parse(res.data));
            //   this.list = Datalist;

            //   this.init();
            // });
        },

        // 树点击节点定位
        async treeClick(e) {
            if (e.level == 6) {
                this.form.MonitoringId = e.id
            }

            if (this.flag) {
                this.form.MonitoringId = e.id
                this.getTemplateLists()
                this.flag = false
            }
        },
        //显示切换
        changeview() {
            if (this.view) {
                this.view = false
                this.$nextTick(() => {
                    // this.builmap();
                })
            } else {
                this.view = true
                this.$nextTick(() => {
                    // this.builmap();
                })
            }
        },

        /**
         * 缩放条拖动进而改变左侧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: {}
}
</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%;
}
.overview_scroll::-webkit-scrollbar {
    width: 2px;
    height: 1px;
    background: rgba(6, 70, 122, 0.013);
}

.overview_scroll::-webkit-scrollbar-thumb {
    border-radius: 4px;
    margin-right: 5px;
    -webkit-box-shadow: inset 0 0 0px #0090b411;
    background: #03c1cf0e;
}

/**拖拽条样式 */
#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;
}

.overview_scroll::-webkit-scrollbar {
    width: 2px;
    height: 1px;
    background: rgba(6, 70, 122, 0.013);
}
::-webkit-scrollbar {
    width: 5px;
    height: 0px;
}
.el-tabs--border-card > .el-tabs__header {
    background-color: #124da5;
    border-bottom: 2px solid #e4e7ed;
    margin: 0;
}
.el-tabs__header {
    padding: 0;
    position: relative;
    margin: 0 px;
}
.el-tabs--border-card > .el-tabs__content {
    padding: 0px;
}
.el-tabs__content {
    overflow: hidden;
    position: relative;
}
.el-aside,
.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>
