<template>
    <div class="default-main">
        <TableHeader datePicker ref="refheader">
            <template v-slot:select>
                <el-form-item label="关键字筛选">
                    <el-input maxlength="32" show-word-limit 
                        v-model.trim="tableStore.table.params.name"
                        placeholder="请输入关键字"
                        clearable
                    ></el-input>
                </el-form-item>
                <!-- <el-form-item label="流程阶段">
                    <el-select v-model.trim="tableStore.table.params.process" clearable placeholder="请选择">
                        <el-option label="功能调试" :value="2"></el-option>
                        <el-option label="出厂调试" :value="3"></el-option>
                        <el-option label="正式投运" :value="4"></el-option>
                    </el-select>
                </el-form-item> -->
            </template>
            <template v-slot:operation>
                <el-button type="primary" icon="el-icon-Download" @click="exportTab">导出</el-button>
            </template>
        </TableHeader>
        <Table ref="tableRef" />
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide } from 'vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { queryByCode, queryByid, queryCsDictTree } from '@/api/system-boot/dictTree'
import { buildExportBaseName } from '@/utils/echartMethod'
defineOptions({
    name: 'manage/monthly'
})
const refheader = ref()
const devModelOptions: any = ref([])
queryByCode('Device_Type').then(res => {
    queryByid(res.data.id).then(res => {
        devModelOptions.value = res.data.map((item: any) => {
            return {
                value: item.id,
                label: item.name,
                ...item
            }
        })
    })
    tableStore.index()
})
const tableStore = new TableStore({
    url: '/cs-harmonic-boot/statisticsData/halfMonthReport',
    method: 'POST',
    isWebPaging: true,
    exportName: '半月报功能',
    column: [
        {
            title: '序号',
            width: 80,
            formatter: (row: any) => {
                return (tableStore.table.params.pageNum - 1) * tableStore.table.params.pageSize + row.rowIndex + 1
            }
        },
        { title: '工程名称', field: 'engineeringName', minWidth: 150 },
        { title: '项目名称', field: 'projectName', minWidth: 150 },
        { title: '设备名称', field: 'devName', minWidth: 150 },
        { title: '监测点名称', field: 'lineName', minWidth: 150 },
        {
            title: '投运时间',
            field: 'operationalTime',
            width: 180,
            sortable: true
        },
        {
            title: '数据更新时间',
            field: 'latestTime',
            width: 180,
            sortable: true
            // formatter: (row: any) => {
            //     return row.cellValue || '/'
            // }
        },

        // {
        //     title: '设备型号',
        //     field: 'devType',
        //     width: 130,
        //     formatter: row => {
        //         return devModelOptions.value.filter((item: any) => item.value == row.cellValue)[0]?.label
        //     }
        // },
        // { title: 'Mac地址', field: 'mac', width: 140 },
        // {
        //     title: '流程阶段',
        //     field: 'process',
        //     width: 100,
        //     fixed: 'right',
        //     render: 'tag',
        //     custom: {
        //         2: 'warning',
        //         3: 'warning',
        //         4: 'success'
        //     },
        //     replaceValue: {
        //         2: '功能调试',
        //         3: '出厂调试',
        //         4: '正式投运'
        //     },
        //     minWidth: 80
        // },
        {
            title: '运行状态',
            field: 'operationalStatus',
            render: 'tag',
            fixed: 'right',
            width: 100,
            custom: {
                停运: 'danger',
                在运: 'success'
            },
            replaceValue: {
                在运: '在运',
                停运: '停运'
            }
        },
        {
            title: '通讯状态',
            field: 'communicationStatus',
            width: 100,
            fixed: 'right',
            render: 'tag',
            custom: {
                离线: 'danger',
                在线: 'success'
            },
            replaceValue: {
                离线: '离线',
                在线: '在线'
            }
        },

        { title: '在线率(%)', fixed: 'right', width: 100, field: 'onlineRate', sortable: true },
        { title: '完整性(%)', fixed: 'right', width: 100, field: 'integrity', sortable: true }
    ],
    beforeSearchFun: () => {},
    exportProcessingData: () => {
        tableStore.table.allData = tableStore.table.allData.filter(item => {
            item.process = item.process == 2 ? '功能调试' : item.process == 3 ? '出厂调试' : '正式投运'
            return item
        })
    },
    loadCallback: () => {
        let name = tableStore.table.params.name
        let data = tableStore.table.copyData.filter(item => {
            // 处理latestTime默认值
            item.latestTime = item.latestTime || '/'
            // 需要检查的字段列表
            const fieldsToCheck = ['projectName', 'engineeringName', 'mac', 'devName', 'lineName']

            // 检查任何一个字段包含搜索名称
            return fieldsToCheck.some(field => item[field]?.includes(name))
        })

        tableStore.table.copyData = JSON.parse(JSON.stringify(data))
        tableStore.table.total = tableStore.table.copyData.length
        if (data.length == 0) {
            tableStore.table.data = []
        } else {
            tableStore.table.data = JSON.parse(
                JSON.stringify(
                    window.XEUtils.chunk(data, tableStore.table.params.pageSize)[tableStore.table.params.pageNum - 1]
                )
            )
        }
    }
})

provide('tableStore', tableStore)
// tableStore.table.params.process = 4
tableStore.table.params.name = ''
const tableRef = ref()
const exportTab = () => {
    tableRef.value.getRef()?.exportData({
        filename: buildExportBaseName({ feature: '半月报功能' }), // 文件名字
        sheetName: 'Sheet1',
        type: 'xlsx', //导出文件类型 xlsx 和 csv
        useStyle: true,
        data: tableStore.table.copyData.filter(item => {
            item.process = item.process == 2 ? '功能调试' : item.process == 3 ? '出厂调试' : '正式投运'
            return item
        }), // 数据源 // 过滤那个字段导出
        columnFilterMethod: function (column: any) {
            return !(
                column.column.title === undefined ||
                column.column.title === '序号' ||
                column.column.title === '操作'
            )
        }
    })
}

onMounted(() => {})
setTimeout(() => {
    // tableStore.table.height = mainHeight(200).height as any
}, 0)
const addMenu = () => {}
</script>
<style></style>
