<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>{{ tagName(row) }}</span>
                </el-space>
            </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>
    </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 { postLists } from '@/api/org/post'
import feedback from '@/utils/feedback'

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

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: postLists,
    params: props.queryParams
})
getLists()
const proTableRef = ref()
const columns = reactive([
    { type: 'selection', width: 70 },
    { prop: 'name', label: '模板名称', width: 180 },
    { prop: 'type', label: '模板类型', width: 180 },
    { prop: 'status', label: '模板状态', width: 180 },
    { prop: 'createTime', label: '创建时间', width: 180 },
    { prop: 'updateTime', label: '更新时间', width: 180 },
    { prop: 'operation', label: '操作', fixed: 'right', width: 250 }
])
const enumType: Record<number, string> = {
    1: '电销',
    2: '招生'
}
const typeName = computed(() => row => enumType[row.type])
const tagName = computed(() => row => row.isDefault == 1 ? `默认${typeName.value(row)}模板` : '')
const templateDrawerRef = ref<InstanceType<typeof templateDrawer>>()
const handleAdd = () => {
    templateDrawerRef.value?.openDrawer({
        title: '新增模板',
        width: 500,
        data: {}
    })
}
const handleEdit = row => {
    templateDrawerRef.value?.openDrawer({
        title: '新增模板',
        width: 500,
        data: { ...row }
    })
}
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) {
        console.log(ids)
    }
    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>
