<template>
    <div class="table-box">
        <ProTable ref="proTable" :columns="columns" row-key="${pkColumn.javaField}" :request-api="list${BusinessName}Api" >
            <!-- 表格 header 按钮 -->
            <template #tableHeader="scope">
                <el-button type="primary" v-auth="['${moduleName}:${businessName}:add']" icon="CirclePlus" @click="openDialog(1, '${functionName}新增')">
                    新增
                </el-button>
                <el-button type="primary" v-auth="['${moduleName}:${businessName}:import']" icon="Upload" plain @click="batchAdd">
                    导入
                </el-button>
                <el-button type="primary" v-auth="['${moduleName}:${businessName}:export']" icon="Download" plain @click="downloadFile">
                    导出
                </el-button>
                <el-button
                    type="danger"
                    v-auth="['${moduleName}:${businessName}:remove']"
                    icon="Delete"
                    plain
                    :disabled="!scope.isSelected"
                    @click="batchDelete(scope.selectedListIds)"
                >
                    批量删除
                </el-button>
            </template>
            <!-- 表格操作 -->
            <template #operation="scope">
                <el-button
                    type="primary"
                    link
                    icon="View"
                    v-auth="['${moduleName}:${businessName}:query']"
                    @click="openDialog(3, '${functionName}查看', scope.row)"
                >
                    查看
                </el-button>
                <el-button
                    type="primary"
                    link
                    icon="EditPen"
                    v-auth="['${moduleName}:${businessName}:edit']"
                    @click="openDialog(2, '${functionName}编辑', scope.row)"
                >
                    编辑
                </el-button>
                <el-button type="primary" link icon="Delete" v-auth="['${moduleName}:${businessName}:remove']" @click="delete${BusinessName}(scope.row)">
                    删除
                </el-button>
            </template>
        </ProTable>
        <FormDialog ref="formDialogRef" />
        <ImportExcel ref="dialogRef" />
    </div>
</template>

<script setup lang="tsx" name="${BusinessName}">
    import { ref, reactive } from 'vue'
    import { useHandleData } from '@/hooks/useHandleData'
    import { useDownload } from '@/hooks/useDownload'
    import { ElMessageBox } from 'element-plus'
    import ProTable from '@/components/ProTable/index.vue'
    import ImportExcel from '@/components/ImportExcel/index.vue'
    import FormDialog from '@/components/FormDialog/index.vue'
    import { ProTableInstance, ColumnProps } from '@/components/ProTable/interface'
    import {
        list${BusinessName}Api,
        del${BusinessName}Api,
        add${BusinessName}Api,
        update${BusinessName}Api,
        importTemplateApi,
        import${BusinessName}DataApi,
        export${BusinessName}Api,
        get${BusinessName}Api
    } from '@/api/modules/${moduleName}/${businessName}'
        #if(${dicts} != '')
        import { getDictsApi } from '@/api/modules/system/dictData'
        #end

    // ProTable 实例
    const proTable = ref<ProTableInstance>()

    // 删除${functionName}信息
    const delete${BusinessName} = async (params: any) => {
        await useHandleData(del${BusinessName}Api, params.${pkColumn.javaField}, '删除【' + params.${pkColumn.javaField} + '】${functionName}')
        proTable.value?.getTableList()
    }

    // 批量删除${functionName}信息
    const batchDelete = async (ids: string[]) => {
        await useHandleData(del${BusinessName}Api, ids, '删除所选${functionName}信息')
        proTable.value?.clearSelection()
        proTable.value?.getTableList()
    }

    // 导出${functionName}列表
    const downloadFile = async () => {
        ElMessageBox.confirm('确认导出${functionName}数据?', '温馨提示', { type: 'warning' }).then(() =>
            useDownload(export${BusinessName}Api, '${functionName}列表', proTable.value?.searchParam)
        )
    }

    // 批量添加${functionName}
    const dialogRef = ref<InstanceType<typeof ImportExcel> | null>(null)
    const batchAdd = () => {
        const params = {
            title: '${functionName}',
            tempApi: importTemplateApi,
            importApi: import${BusinessName}DataApi,
            getTableList: proTable.value?.getTableList
        }
        dialogRef.value?.acceptParams(params)
    }

    const formDialogRef = ref<InstanceType<typeof FormDialog> | null>(null)
    // 打开弹框的功能
    const openDialog = async (type: number, title: string, row?: any) => {
        let res = { data: {} }
        if (row?.${pkColumn.javaField}) {
            res = await get${BusinessName}Api(row?.${pkColumn.javaField} || null)
        }
        // 重置表单
        setItemsOptions()
        const params = {
            title,
            width: 580,
            isEdit: type !== 3,
            itemsOptions: itemsOptions,
            model: type == 1 ? {} : res.data,
            api: type == 1 ? add${BusinessName}Api : update${BusinessName}Api,
            getTableList: proTable.value?.getTableList
        }
        formDialogRef.value?.openDialog(params)
    }

    // 表格配置项
    const columns = reactive<ColumnProps<any>[]>([
        { type: 'selection', fixed: 'left', width: 70 },
        #foreach($column in $columns)
            #set($javaField=$column.javaField)
            #set($parentheseIndex=$column.columnComment.indexOf("（"))
            #if($parentheseIndex != -1)
                #set($comment=$column.columnComment.substring(0, $parentheseIndex))
            #else
                #set($comment=$column.columnComment)
            #end
            #if($column.pk)
                { prop: '${javaField}', label: '${comment}' },
            #elseif($column.list && $column.htmlType == "datetime")
                {
                    prop: '${javaField}',
                    label: '${comment}',
                    #if($column.query)
                        search: {
                            el: 'date-picker',
                            props: { type: 'datetimerange', valueFormat: 'YYYY-MM-DD HH:mm:ss' }
                        },
                    #else
                    #end
                    width: 120
                },
            #elseif($column.list && "" != $column.dictType)
                {
                    prop: '${javaField}',
                    label: '${comment}',
                    tag: true,
                    enum: () => getDictsApi('$column.dictType'),
                    #if($column.query)
                        search: {
                            el: 'tree-select'
                        },
                    #else
                    #end
                    fieldNames: { label: 'dictLabel', value: 'dictValue' }
                },
            #elseif($column.list && "" != $javaField)
                {
                    prop: '${javaField}',
                    label: '${comment}',
                    #if($column.query)
                        search: {
                            el: 'input'
                        },
                    #else
                    #end
                    width: 120
                },
            #end
        #end
        { prop: 'operation', label: '操作', width: 230, fixed: 'right' }
    ])
    // 表单配置项
    let itemsOptions: ProForm.ItemsOptions[] = []
    const setItemsOptions = () => {
        itemsOptions = [
            #foreach($column in $columns)
                #set($field=$column.javaField)
                #if($column.insert && !$column.pk)
                    #if(($column.usableColumn) || (!$column.superColumn))
                        #set($parentheseIndex=$column.columnComment.indexOf("（"))
                        #if($parentheseIndex != -1)
                            #set($comment=$column.columnComment.substring(0, $parentheseIndex))
                        #else
                            #set($comment=$column.columnComment)
                        #end
                        #set($dictType=$column.dictType)
                        #if($column.htmlType == "input")
                            {
                                label: '${comment}',
                                prop: '${field}',
                                #if($column.required)
                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
                                #else
                                #end
                                compOptions: {
                                    placeholder: '请输入${comment}'
                                }
                            },
                        #elseif($column.htmlType == "select" && "" != $dictType)
                            {
                                label: '${comment}',
                                prop: '${field}',
                                #if($column.required)
                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
                                #else
                                #end
                                compOptions: {
                                    elTagName: 'select',
                                    labelKey: 'dictLabel',
                                    valueKey: 'dictValue',
                                    enum: () => getDictsApi('$dictType'),
                                    placeholder: '请选择${comment}'
                                }
                            },
                        #elseif($column.htmlType == "checkbox" && "" != $dictType)
                            {
                                label: '${comment}',
                                prop: '${field}',
                                #if($column.required)
                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
                                #else
                                #end
                                compOptions: {
                                    elTagName: 'checkbox-group',
                                    labelKey: 'dictLabel',
                                    valueKey: 'dictValue',
                                    enum: () => getDictsApi('$dictType'),
                                    placeholder: '请选择${comment}'
                                }
                            },
                        #elseif($column.htmlType == "radio" && "" != $dictType)
                            {
                                label: '${comment}',
                                prop: '${field}',
                                #if($column.required)
                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
                                #else
                                #end
                                options: {
                                    labelKey: 'dictLabel',
                                    valueKey: 'dictValue'
                                },
                                compOptions: {
                                    elTagName: 'radio-group',
                                    labelKey: 'dictLabel',
                                    valueKey: 'dictValue',
                                    enum: () => getDictsApi('$dictType'),
                                    placeholder: '请选择${comment}'
                                }
                            },
                        #elseif($column.htmlType == "datetime")
                            {
                                label: '${comment}',
                                prop: '${field}',
                                #if($column.required)
                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'change'}],
                                #else
                                #end
                                compOptions: {
                                    elTagName: 'date-picker',
                                    type: 'date',
                                    placeholder: '请选择${comment}'
                                }
                            },
                        #elseif($column.htmlType == "textarea")
                            {
                                label: '${comment}',
                                prop: '${field}',
                                #if($column.required)
                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
                                #else
                                #end
                                compOptions: {
                                    type: 'textarea',
                                    clearable: true,
                                    placeholder: '请输入内容'
                                }
                            },
                        #else
                            {
                                label: '${comment}',
                                prop: '${field}',
                                #if($column.required)
                                    rules: [{required: true, message: '${comment}不能为空', trigger: 'blur'}],
                                #else
                                #end
                                compOptions: {
                                    placeholder: '请输入${comment}'
                                }
                            },
                        #end
                    #end
                #end
            #end
        ]
    }
</script>
