<template>
    <div class="report-sheet-panel">
        <TableHeader ref="tableHeaderRef" datePicker  :showSearch="false">
            <template #select>
                <el-form-item label="模板策略">
                    <el-select
                        v-model="template"
                        placeholder="请选择模版"
                        value-key="id"
                        @change="changeType"
                    >
                        <el-option
                            v-for="item in templatePolicy"
                            :key="item.id"
                            :label="item.excelName"
                            :value="item"
                        />
                    </el-select>
                </el-form-item>
            </template>
            <template #operation>
                <el-button icon="el-icon-Search" type="primary" @click="loadSheetData">查询</el-button>
                <el-button icon="el-icon-Download" type="primary" @click="exportEvent">报表生成</el-button>
            </template>
        </TableHeader>
        <div v-if="lineFlag" class="box report-zl-box">
            <div class="report-zl-sheet-wrap">
                <div
                    id="luckysheet"
                    class="report-zl-sheet"
                    v-loading="tableStore.table.loading"
                    element-loading-background="rgba(255, 255, 255, 0.85)"
                ></div>
                <el-empty
                    v-show="!tableStore.table.loading && tableStore.table.data.length === 0"
                    class="report-zl-empty"
                    description="暂无数据"
                />
            </div>
        </div>
        <el-empty v-else class="report-zl-sheet" description="治理监测点暂不支持出报表" />
    </div>
</template>

<script setup lang="ts">
import { ref, provide, watch, onUnmounted } from 'vue'
import TableStore from '@/utils/tableStore'
import TableHeader from '@/components/table/header/index.vue'
import { destroyLuckysheet, exportLuckysheetFile, renderLuckysheetReport } from '@/utils/luckysheetHelper'
import { ElMessage } from 'element-plus'

defineOptions({
    name: 'ReportSheet',
})

const props = defineProps<{
    dotList: Record<string, any>
    lineFlag: boolean
    templatePolicy: any[]
    active: boolean
}>()

const tableHeaderRef = ref()
const template = ref<any>({})
const reportForm = ref('')
const exportName = ref('')

const tableStore = new TableStore({
    url: '/cs-harmonic-boot/customReport/getCustomReport',
    method: 'POST',
    column: [],
    showPage: false,
    beforeSearchFun: () => {
        tableStore.table.params.tempId = template.value.id
        tableStore.table.params.lineId = props.dotList.id
        destroyLuckysheet()
        delete tableStore.table.params.searchBeginTime
        delete tableStore.table.params.searchEndTime
        delete tableStore.table.params.timeFlag
    },
    loadCallback: () => {
        exportName.value = props.dotList.name
        if (tableStore.table.data.length > 0) {
            renderLuckysheetReport('luckysheet', tableStore.table.data, { allowEdit: false })
        } else {
            destroyLuckysheet()
        }
    },
})

provide('tableStore', tableStore)
tableStore.table.params.resourceType = 1
tableStore.table.params.customType = null

const changeType = (val: any) => {
    reportForm.value = val.reportForm
}

const loadSheetData = () => {
    if(!props.lineFlag){
        tableStore.table.loading = false
        ElMessage.warning('治理监测点暂不支持出报表!')
        return
    }
    if (!props.active  || !props.dotList?.id || !template.value?.id) {
        tableStore.table.loading = false
        return
    }
    setTimeout(() => {
        tableStore.index()
    }, 500)
}

const exportEvent = () => {
    if (!props.lineFlag) {
        return ElMessage.warning('治理监测点暂不支持出报表!')
    }
    const now = new Date()
    exportLuckysheetFile(
        {
            subject: exportName.value,
            feature: '统计报表',
            date: tableHeaderRef.value?.datePickerRef?.timeValue?.[1] || now
        },
        tableStore.table.data.length > 0
    )
}

watch(
    () => props.templatePolicy,
    (list) => {
        if (!list?.length) return
        template.value = list[0]
        reportForm.value = list[0]?.excelType
        loadSheetData()
    },
    { immediate: true }
)

watch(
    () => [props.dotList?.id, props.lineFlag, props.active, template.value?.id] as const,
    () => {
        if (!props.active) {
            destroyLuckysheet()
            return
        }
        loadSheetData()
    }
)

watch(
    () => props.active,
    (active) => {
        if (!active) {
            destroyLuckysheet()
            return
        }
        if (tableStore.table.data.length > 0) {
            renderLuckysheetReport('luckysheet', tableStore.table.data, { allowEdit: false })
        }
    }
)

onUnmounted(() => {
    destroyLuckysheet()
})
</script>

<style lang="scss" scoped>
.report-sheet-panel {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.box {
    flex: 1;
    min-height: 0;
    padding: 10px 0;
    overflow: hidden;
}

.report-zl-box {
    display: flex;
    flex-direction: column;
}

.report-zl-sheet-wrap {
    flex: 1;
    min-height: 0;
    position: relative;
}

.report-zl-sheet {
    height: 100%;
}

.report-zl-empty {
    position: absolute;
    inset: 0;
    height: 100%;
    background: #fff;
}
</style>
