<template>
    <el-space direction="vertical" alignment="normal" :size="16">
        <div>
            <el-button type="primary" @click="handleAdd">新增模板</el-button>
            <el-button type="danger" @click="handleBatchDelete" plain :disabled="isDisabled">批量删除</el-button>
        </div>
        <ProTable ref="proTableRef" :columns="columns" :tableData="pager.lists" :loading="pager.loading" :maxHeight="530">
            <template #name="{ row }">
                <el-space>
                    <span>{{ row.name }}</span>
                    <span v-if="row.isDefault" class="px-[6px] border border-solid border-[#12BB37] rounded-[4px] text-[#12BB37]">
                        {{ tagName(row) }}
                    </span>
                </el-space>
            </template>
            <template #postId="{ row }">
                <span>{{ typeName(row) }}</span>
            </template>
            <template #status="{ row }">
                <el-switch v-model="row.status" :active-value="1" :inactive-value="0" :before-change="() => handleBeforeChange(row)" />
            </template>
            <template #operation="{ row }">
                <el-button type="primary" link @click="handleEdit(row)">编辑</el-button>
                <el-button type="primary" link @click="handleDelete(row)">删除</el-button>
            </template>
        </ProTable>
        <div class="flex justify-end mt-4">
            <pagination v-model="pager" @change="getLists" />
        </div>
    </el-space>
    <template-drawer ref="templateDrawerRef" @refreshList="getLists" />
</template>

<script setup lang="ts">
import useHandleData from '@/hooks/useHandleData'
import templateDrawer from '../components/template-drawer.vue'
import { usePaging } from '@/hooks/usePaging'
import feedback from '@/utils/feedback'
import { templateDelete, templateLists } from '@/api/summary'

const props = defineProps({
    queryParams: {
        type: Object,
        default: () => ({
            name: '',
            type: '',
            status: null
        })
    }
})
const emit = defineEmits(['handleEdit', 'handleDelete'])

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: templateLists,
    params: props.queryParams
})
getLists()
const proTableRef = ref()
const columns = reactive([
    { type: 'selection', width: 70 },
    { prop: 'name', label: '模板名称', width: 180 },
    { prop: 'postId', label: '模板类型', width: 180 },
    { prop: 'createTime', label: '创建时间', width: 180 },
    { prop: 'updateTime', label: '更新时间', width: 180 },
    { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
const typeName = computed(() => row => row.postId == 5 ? '电销' : '招生')
const tagName = computed(() => row => row.isDefault == 1 ? `默认${typeName.value(row)}模板` : '')
const templateDrawerRef = ref<InstanceType<typeof templateDrawer>>()
const handleAdd = () => {
    openDrawer()
}
const handleEdit = row => {
    const { id } = row
    openDrawer(id)
}
const openDrawer = (id?: number) => {
    templateDrawerRef.value?.openDrawer({
        title: !id ? '新增模板' : '编辑模板',
        width: 500,
        data: {
            id,
            showFooter: true
        }
    })
}
const isDisabled = computed(() => proTableRef?.value?.selectedListIds?.length == 0)
const handleDelete = row => {
    deleteCommon(row)
}
const handleBatchDelete = () => {
    deleteCommon()
}
const deleteCommon = async (row?: any) => {
    if (row) proTableRef.value.tableRef.toggleRowSelection(row, true)
    const ids = proTableRef.value.selectedListIds
    const message = '是否要删除选中的模板?'
    const flag = await useHandleData(message)
    if (flag) {
        try {
            await templateDelete({ ids })
            feedback.msgSuccess('删除成功')
            getLists()
        } catch (error) {}
    }
    proTableRef.value.tableRef.clearSelection()
}
const handleBeforeChange = row => {
    const { id, status } = row
    return new Promise(async resolve => {
        try {
            const text = '确定' + `${status === 1 ? '停用' : '启用'}该模板?`
            await feedback.confirm(text)
            return resolve(true)
        } catch (error) {}
    })
}
defineExpose({
    resetPage,
    resetParams,
    getLists
})
</script>
<style scoped></style>
