<template>
	<div class="flex-column-page-wrap pageWrap bgc">
		<!-- 公用搜索组件 -->
		<LeSearchForm ref="searchForm" v-model:searchData="searchData" :forms="forms" :loading="tableOpts.options.loading"> </LeSearchForm>

		<!--  LeTable 组件使用  -->
		<LeTable
			ref="tableRef"
			v-model:searchParams="tableOpts.searchParams"
			v-bind="tableOpts"
			v-model:curRow="tableOpts.curRow"
			v-model:checked-options="checkedColumns"
			:columns="activeColumns"
		>
			<template #toolLeft>
				<el-button type="primary">全部标记已读</el-button>
				<el-button type="danger" :disabled="curSelectionRows.length === 0" @click="batch_del">
					<el-icon class="btn-icon">
						<Delete />
					</el-icon>
				</el-button>
			</template>

			<template #categorySlot="scope">
				<el-tag v-if="scope.row.category === 0" size="small" effect="plain">通知公告</el-tag>
				<el-tag v-if="scope.row.category === 1" size="small" type="info" effect="plain">系统消息</el-tag>
				<el-tag v-if="scope.row.category === 2" size="small" type="warning" effect="plain">待办通知</el-tag>
			</template>

			<template #actionSlot="scope">
				<el-tooltip content="查看" placement="bottom" effect="light">
					<el-icon class="ibt0" @click="openDetail(scope.row)">
						<View />
					</el-icon>
				</el-tooltip>
				<el-divider direction="vertical"></el-divider>
				<el-popconfirm title="确定删除吗？" @confirm="table_del(scope.row)">
					<template #reference>
						<el-icon class="ibt0">
							<Delete />
						</el-icon>
					</template>
				</el-popconfirm>
			</template>
		</LeTable>

		<message-detail v-if="visibleDetail" v-model="visibleDetail" :message-id="currentId" @closed="visibleDetail = false"> </message-detail>
	</div>
</template>
<script lang="tsx" setup>
import message from '@/api/system/message'
import { nextTick, ref, watch } from 'vue'
import { useTablePage } from '@/hooks/useTablePage'
import MessageDetail from './detail.vue'
import { useRoute } from 'vue-router'
import { Delete } from '@element-plus/icons-vue'
import { ElMessage, ElMessageBox } from 'element-plus'

const route = useRoute()
const visibleDetail = ref(false) // 权限设置弹窗显示隐藏
const currentId = ref(null)

// 表格搜索条件
const forms = ref([
	{
		prop: 'title',
		label: '标题：',
		itemType: 'input',
		placeholder: '请输入标题'
	},
	{
		prop: 'createBy',
		label: '发布人：',
		itemType: 'input',
		placeholder: '请输入发布人'
	}
])

// table列表数据请求
const queryList = async () => {
	const { options, searchParams } = tableOpts
	options.loading = true
	try {
		const { records: list, total } = await message.getMessageInfo(searchParams)
		tableOpts.total = total
		tableOpts.list = list
	} catch {
		console.log('获取列表数据失败')
		tableOpts.total = 0
		tableOpts.list = []
		options.loading = false // 更改加载中的 loading值
	} finally {
		options.loading = false
	}
}

// table 参数
const columns = [
	{
		prop: 'title',
		label: '标题',
		minWidth: 80
	},
	{
		prop: 'category',
		label: '消息类型',
		minWidth: 100,
		slots: {
			default: 'categorySlot'
		}
	},
	{
		prop: 'createBy',
		label: '发布人',
		minWidth: 100
	},
	{
		prop: 'createTime',
		label: '发布时间',
		minWidth: 150
	},
	{
		prop: 'action',
		label: '操作',
		width: 100,
		fixed: 'right',
		slots: {
			default: 'actionSlot'
		}
	}
]

const { searchData, tableOpts, checkedColumns, activeColumns, curSelectionRows, updateParams } = useTablePage(
	{
		options: {
			showIndex: false
		},
		// 需要展示的列
		columns,
		// 控制列配置
		columnsConfig: {
			columns
		}
	},
	{
		queryList,
		fetchImmediate: false
	}
)

// 删除
const deleteItem = async ids => {
	try {
		await message.messageDeleteApi(ids)
		updateParams()
		ElMessage.success(`删除成功~`)
	} catch (e) {
		console.log('删除失败')
		ElMessage.error(`删除失败~`)
	}
}

// 单个删除
const table_del = row => {
	deleteItem([row.id])
}

//批量删除
const batch_del = () => {
	const ids = curSelectionRows.value.map(item => item.id) // 多选数据
	ElMessageBox.confirm('是否删除选中数据？', '提示', {
		confirmButtonText: '确认',
		cancelButtonText: '取消',
		type: 'error',
		buttonSize: 'default'
	}).then(() => {
		deleteItem(ids)
	})
}

const openDetail = (row: any) => {
	currentId.value = row.id
	visibleDetail.value = true
}

nextTick(() => {
	queryList()
})

watch(
	() => route.query,
	(newPath, oldPath) => {
		if (JSON.stringify(newPath) !== '{}') {
			nextTick(() => {
				openDetail(newPath)
			})
		}
	},
	{ immediate: true }
)
</script>
