<template>
    <div class="default-main">
        <el-row v-show="show && lookShow">
            <el-col :span="10">
                <div class="custom-table-header">
                    <div class="title">报表列表</div>
                    <el-button :icon="Plus" type="primary" @click="addRole" class="ml10">新增报表</el-button>
                </div>
                <Table ref="tableRef" @currentChange="currentChange" />
            </el-col>
            <el-col :span="14">
                <div class="custom-table-header">
                    <div class="title">模版绑定</div>

                    <el-button type="primary" icon="el-icon-Plus" @click="add">新增模版</el-button>
                    <el-button type="primary" icon="el-icon-Select" @click="save">保存</el-button>
                </div>
                <div :style="height">
                    <vxe-table
                        ref="tableRef1"
                        v-bind="defaultAttribute"
                        :data="templateList"
                        height="auto"
                        style="width: 100%"
                    >
                        <vxe-column type="checkbox" width="60"></vxe-column>
                        <vxe-column field="name" title="模版名称"></vxe-column>
                        <vxe-column field="wiringMethod" title="接线方式">
                            <template #default="{ row }">
                                {{ volConTypeList.find(item => item.id == row.wiringMethod)?.name || '/' }}
                            </template>
                        </vxe-column>

                        <!-- <vxe-column field="createTime" title="创建时间"></vxe-column> -->
                        <vxe-column field="sort" title="排序" width="80px"></vxe-column>
                        <vxe-column field="createTime" title="操作" width="180px">
                            <template #default="{ row }">
                                <el-button type="primary" link @click="lookView(row)" size="small">查看</el-button>
                                <el-button
                                    style="margin-left: 4px"
                                    type="primary"
                                    link
                                    size="small"
                                    @click="templateModification(row)"
                                    class="ml10 mr10"
                                >
                                    编辑
                                </el-button>
                                <el-popconfirm
                                    @confirm="templateRemove(row)"
                                    title="确定删除吗？"
                                    confirm-button-type="danger"
                                >
                                    <template #reference>
                                        <el-button style="margin-left: 4px" type="danger" size="small" link>
                                            刪除
                                        </el-button>
                                    </template>
                                </el-popconfirm>
                            </template>
                        </vxe-column>
                    </vxe-table>
                </div>
            </el-col>
        </el-row>

        <luckysheet ref="luckysheetRef" v-if="!show" @shutDown="shutDown" />
        <!-- 查看 -->
        <look ref="lookRef" v-if="!lookShow" @shutDown="shutDown" />
        <!-- 绑定 -->
        <department ref="departmentRef" />
        <PopupForm ref="popupRef"></PopupForm>
    </div>
</template>
<script setup lang="ts">
import { ref, onMounted, provide, nextTick } from 'vue'
import { Plus } from '@element-plus/icons-vue'
import TableStore from '@/utils/tableStore'
import Table from '@/components/table/index.vue'
import TableHeader from '@/components/table/header/index.vue'
import { delTemplate, deleteSysExcel, getTemplateList, bandRelation, queryList } from '@/api/harmonic-boot/luckyexcel'
import { useDictData } from '@/stores/dictData'
import { ElMessage } from 'element-plus'
import { defaultAttribute } from '@/components/table/defaultAttribute'
import luckysheet from './luckysheet.vue'
import look from './look.vue'
import { mainHeight } from '@/utils/layout'
import PopupForm from './PopupForm.vue'
import department from './department.vue'
const dictData = useDictData()
defineOptions({
    name: 'govern/reportForms/index'
})
const height = mainHeight(80)
const volConTypeList: any = dictData.getBasicData('Dev_Connect')
const luckysheetRef = ref()
const lookRef = ref()
const departmentRef = ref()
const show = ref(true)
const lookShow = ref(true)
const popupRef = ref()
const tableRef = ref()
const tableRef1 = ref()
const templateList = ref([])
const menuListId = ref([])
const defaultProps = {
    children: 'children',
    label: 'name'
}
const reportFormList = [
    {
        value: '1',
        label: '分析报表'
    },
    {
        value: '2',
        label: '统计报表'
    },
    {
        value: '4',
        label: '治理前后对比报表'
    },
    {
        value: '3',
        label: '自定义报表'
    }
]
const tableStore: any = new TableStore({
    // url: '/cs-harmonic-boot/customReport/getTemplateList',
    url: '/cs-harmonic-boot/sysExcel/querySysExcel',
    method: 'POST',
    publicHeight: 60,
    showPage: false,
    column: [
        { field: 'excelName', title: '报表名称' },
        {
            field: 'excelType',
            title: '报表类型',
            formatter: row => {
                return reportFormList.filter(item => item.value == row.cellValue)[0]?.label || '/' //row.cellValue
            }
        },
        {
            field: 'sort',
            title: '排序',
            width: '80px'
        },
        {
            title: '操作',
            fixed: 'right',
            width: '150',
            render: 'buttons',
            buttons: [
                {
                    name: 'edit',
                    title: '编辑',
                    type: 'primary',
                    icon: 'el-icon-Plus',
                    render: 'basicButton',
                    click: row => {
                        popupRef.value.open('编辑报表', row)
                    }
                },

                {
                    name: 'del',
                    text: '删除',
                    type: 'danger',
                    icon: 'el-icon-Delete',
                    render: 'confirmButton',
                    popconfirm: {
                        confirmButtonText: '确认',
                        cancelButtonText: '取消',
                        confirmButtonType: 'danger',
                        title: '确定删除？'
                    },
                    click: row => {
                        deleteSysExcel({ id: row.id }).then(res => {
                            ElMessage.success('删除成功')
                            tableStore.index()
                        })
                    }
                }
            ]
        }
    ],

    loadCallback: () => {
        tableRef.value.getRef().setCurrentRow(tableStore.table.data[0])
        menuListId.value = tableStore.table.data[0].id
        // currentChange({
        //     row: tableStore.table.data[0]
        // })
        getTemplate()
    }
})

provide('tableStore', tableStore)
// 查看
const lookView = (row: any) => {
    lookShow.value = false
    setTimeout(() => {
        lookRef.value.open(row)
    }, 10)
}
// 修改模版
const templateModification = (row: any) => {
    show.value = false
    setTimeout(() => {
        luckysheetRef.value.open('编辑报表模板', row)
    }, 10)
}
// 删除模版
const templateRemove = (row: any) => {
    delTemplate({ tempId: row.id, deptId: row.deptId }).then(res => {
        ElMessage.success('删除成功')
        getTemplate()
    })
}
// 关闭
const shutDown = () => {
    show.value = true
    lookShow.value = true
    getTemplate()
}
const addRole = () => {
    // add()
    popupRef.value.open('新增报表')
}
const add = () => {
    show.value = false
    setTimeout(() => {
        luckysheetRef.value.open('新增报表模板')
    }, 10)
}
// 查询绑定模版
const currentChange = (data: any) => {
    tableRef1.value.clearCheckboxRow()
    menuListId.value = data.row.id
    queryList({ id: data.row.id }).then((res: any) => {
        let ids = res.data.map(item => item.id)
        tableRef1.value.setCheckboxRow(
            templateList.value.filter(item => ids.includes(item.id)),
            true
        )
    })
}
// 保存模版
const save = () => {
    bandRelation({
        modelIds: tableRef1.value.getCheckboxRecords().map(item => item.id),
        id: menuListId.value
    })
        .then(() => {
            ElMessage.success('操作成功!')
        })
        .catch(() => {})
}
const getTemplate = () => {
    getTemplateList({
        pageNum: 1,
        pageSize: 10000
    }).then(res => {
        templateList.value = res.data
        currentChange({
            row: { id: menuListId.value }
        })
    })
}
onMounted(() => {
    tableStore.index()
})
</script>
<style scoped>
.custom-tree-node {
    flex: 1;
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 14px;
    padding-right: 8px;
}
</style>
