<template>
    <div class="" :style="height">
        <TableHeader ref="TableHeaderRef" datePicker @selectChange="selectChange">
            <template v-slot:select>
                <el-form-item label="模板策略">
                    <el-select v-model="Template" @change="changetype" placeholder="请选择模版" value-key="id" filterable>
                        <el-option
                            v-for="item in templatePolicy"
                            :key="item.id"
                            :label="item.name"
                            :value="item"
                        ></el-option>
                    </el-select>
                </el-form-item>
                <el-form-item label="报表类型">
                    <el-input readonly type="text" value="分析报表"></el-input>
                    <!--                            <el-select-->
                    <!--                                :disabled="true"-->
                    <!--                                v-model="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>
            </template>
            <template #operation>
                <el-button icon="el-icon-Download" type="primary" @click="exportEvent">导出excel</el-button>
                <el-button icon="el-icon-Download" :loading="loading" @click="exportReport" type="primary">
                    下载报告
                </el-button>
            </template>
        </TableHeader>
        <div class="box">
            <div id="luckysheet" :style="`height: calc(${tableStore.table.height} )`"></div>
        </div>
    </div>
</template>
<script setup lang="ts">
import { onMounted, ref, provide } from 'vue'
import 'splitpanes/dist/splitpanes.css'
import { Splitpanes, Pane } from 'splitpanes'
import TableStore from '@/utils/tableStore'
import PointTree from '@/components/tree/pqs/pointTree.vue'
import TableHeader from '@/components/table/header/index.vue'
import { useDictData } from '@/stores/dictData'
import { exportModelJB } from '@/api/harmonic-boot/harmonic'
import { mainHeight } from '@/utils/layout'
import { getTemplateByDept } from '@/api/harmonic-boot/luckyexcel'
import { exportExcel } from '@/views/system/reportForms/export.js'
import { ElMessage } from 'element-plus'
import { useMonitoringPoint } from '@/stores/monitoringPoint'
defineOptions({
    name: 'harmonic-boot/xieboReport'
})
const monitoringPoint = useMonitoringPoint()
const showTree = ref(false)
const height = mainHeight(20)
const size = ref(19)
const dictData = useDictData()
const TableHeaderRef = ref()
const dotList: any = ref({})
const Template: any = ref({})
const reportForm: any = ref('')

const templatePolicy: any = ref([])

const tableStore = new TableStore({
    url: '/harmonic-boot/customReport/getCustomReport',
    method: 'POST',
    column: [],
    publicHeight: 30,
    beforeSearchFun: () => {
        tableStore.table.params.tempId = Template.value.id
        tableStore.table.params.lineId = monitoringPoint.state.lineId
    },
    loadCallback: () => {
        tableStore.table.data.forEach((item: any) => {
            item.data1 ? (item.data = JSON.parse(item.data1)) : ''
            item.celldata.forEach((k: any) => {
                item.data[k.r][k.c].v ? (item.data[k.r][k.c] = k.v) : ''
            })
        })

        setTimeout(() => {
            luckysheet.create({
                container: 'luckysheet',
                title: '', // 表 头名
                lang: 'zh', // 中文
                showtoolbar: false, // 是否显示工具栏
                showinfobar: false, // 是否显示顶部信息栏
                showsheetbar: true, // 是否显示底部sheet按钮
                allowEdit: false, // 禁止所有编辑操作（必填）
                data: tableStore.table.data
            })
        }, 10)
    }
})
const loading = ref(false)
provide('tableStore', tableStore)

onMounted(() => {
    TableHeaderRef.value.setTheDate(4)
    const dom = document.getElementById('navigation-splitpanes')
    if (dom) {
        size.value = Math.round((180 / dom.offsetHeight) * 120)
    }
})
getTemplateByDept({ id: dictData.state.area[0].id })
    .then((res: any) => {
        templatePolicy.value = res.data
        Template.value = res.data[0]
        reportForm.value = res.data[0]?.reportForm
        showTree.value = true
        TableHeaderRef.value.onComSearch()
    })
    .catch((err: any) => {
        showTree.value = true
    })
const changetype = (val: any) => {
    reportForm.value = val.reportForm
}
const selectChange = () => {
    if (tableStore.table.data.length != 0) {
        setTimeout(() => {
            luckysheet && luckysheet?.resize()
        }, 10)
    }
}

const exportEvent = () => {
    exportExcel(luckysheet.getAllSheets(), '统计报表下载')
}
const exportReport = () => {
    loading.value = true
    let form = new FormData()
    form.append('isUrl', false)
    form.append('lineIndex', monitoringPoint.state.lineId)
    form.append('startTime', TableHeaderRef.value.datePickerRef.timeValue[0])
    form.append('endTime', TableHeaderRef.value.datePickerRef.timeValue[1])
    form.append('type', 0)
    form.append('name', monitoringPoint.state.lineName.split('>').pop())
    ElMessage({
        message: '下载报告中,请稍等.....',
        duration: 1000
    })
    exportModelJB(form)
        .then(async res => {
            if (res == undefined) {
                loading.value = false
                return
            }
            let blob = new Blob([res], {
                type: 'application/vnd.openxmlformats-officedocument.wordprocessingml.document'
            })

            const url = window.URL.createObjectURL(blob)
            const link = document.createElement('a') // 创建a标签
            link.href = url
            link.download =
                monitoringPoint.state.lineName.split('>').pop() +
                TableHeaderRef.value.datePickerRef.timeValue[0] +
                '_' +
                TableHeaderRef.value.datePickerRef.timeValue[1] // 设置下载的文件名
            document.body.appendChild(link)
            link.click() //执行下载
            document.body.removeChild(link)
            loading.value = false
        })
        .catch(() => {
            loading.value = false
        })
}
</script>
<style lang="scss">
.splitpanes.default-theme .splitpanes__pane {
    background: #eaeef1;
}

.box {
    padding: 10px;
}
</style>
