<template>
	<div class="page">
		<a-row :gutter="[16, 16]" style="height: 100%">
			<a-col :span="4" style="height: 100%; overflow: hidden">
				<div class="content-head">数据字典类型</div>
				<div style="height: 100%; overflow-y: auto">
					<a-list :data-source="dictionaryList" class="item-card" item-layout="horizontal">
						<template #renderItem="{ index, item }">
							<a-list-item :class="selectData === item.displayName ? 'item-style-select' : ''" class="item-list" style="cursor: pointer">
								<a-list-item-meta>
									<template #description>
										<div
											:class="selectData === item.displayName ? 'item-style-select' : ''"
											class="item-style"
											@click="clickList(item.itemCode, item.displayName)"
										>
											{{ index + 1 }}.&nbsp;{{ item.displayName }}
										</div>
									</template>
								</a-list-item-meta>
							</a-list-item>
						</template>
					</a-list>
				</div>
			</a-col>
			<a-col :span="20" style="height: 100%; display: flex; flex-direction: column">
				<BaseTable
					v-if="showBaseTable"
					ref="baseTable"
					:action="action"
					:columns="columns"
					:initParams="rfRootCode"
					:operation="operation"
					:search="search"
				>
					<template v-slot:operation>
						<a-button v-if="checkPermission('新增')" type="primary" @click="useManageMethod.handleUpdate(undefined)">新增 </a-button>
					</template>
				</BaseTable>
			</a-col>
		</a-row>
		<dc-drawer
			:closable="true"
			:maskClosable="false"
			:showBottom="!update.id"
			:title="update.title"
			:visible="update.visible"
			:width="update.width"
			destroyOnClose
			placement="right"
			@close="update.visible = false"
		>
			<Add
				:id="update.id"
				:itemName="listRootDictionary.itemName"
				:rfRootCode="listRootDictionary.itemCode"
				@cancel="update.visible = false"
				@refresh="useManageMethod.refresh()"
			></Add>
		</dc-drawer>
	</div>
</template>

<script lang="ts" setup>
import BaseTable from '../../../components/table'
import columns from './columns'
import search from './search'
import requestMethod from '../../../api/system/dictionary'
import { defineAsyncComponent, onMounted, ref } from 'vue'
import { OperationProps } from '../../../components/table/table-helper'
import { DictionaryManage } from '../../../entity/system/dictionary-manage'
import { confirmMethod, messageMethod } from '../../../utils/message-util'
import { manageMethod } from '../../../components/form/method'
import { checkPermission } from '../../../utils/permission-util'

const Add = defineAsyncComponent(() => import('./Add.vue'))

//列表查询信息的api
const action = ref(requestMethod.page)

const useManageMethod = manageMethod<DictionaryManage>()

// 修改面板参数
const update = useManageMethod.update

// 数字字典类型列表
const dictionaryList = ref<DictionaryManage[]>([])

// 默认请求列表数据 itemCode itemName
const listRootDictionary = { itemCode: '', itemName: '' }

// 根节点
const rfRootCode = { rfRootCode: '' }
// 选中的的数据
const selectData = ref('')

// 渲染数据完成后的boolean值
const showBaseTable = ref(false)

// 初始化 数据
onMounted(() => {
	// 请求数据字典类型
	requestMethod.getListRoot().then(res => {
		if (res.data.length > 0) {
			// 数据备注 数据名称
			listRootDictionary.itemCode = res.data[0].itemCode
			listRootDictionary.itemName = res.data[0].itemName
			rfRootCode.rfRootCode = res.data[0].itemCode
			dictionaryList.value = res.data
			selectData.value = res.data[0].displayName
			showBaseTable.value = true
		}
	})
})
//点击数据字典类型
const clickList = (itemRootCode: string, itemDisplayName: string) => {
	selectData.value = itemDisplayName
	rfRootCode.rfRootCode = itemRootCode
	listRootDictionary.itemCode = itemRootCode
	useManageMethod.refresh()
}
//列表操作信息
const operation = ref<OperationProps<DictionaryManage>[]>([
	{
		title: '修改',
		permission: true,
		action: useManageMethod.handleUpdate,
		check: (vo: DictionaryManage) => {
			return vo.state !== 0
		}
	},
	{
		title: '删除',
		danger: true,
		permission: true,
		action: (vo: DictionaryManage) => {
			confirmMethod.info('确认删除？', () => {
				requestMethod.delete(vo.id).then(data => {
					messageMethod.success(data.message)
					useManageMethod.refresh()
				})
			})
		}
	}
])
</script>

<style lang="scss" scoped>
.page {
	width: 100%;
	height: 100%;
	display: flex;

	.content-head {
		box-sizing: border-box;
		font-size: 1rem;
		font-weight: 600;
		padding: 14px 16px;
		border: 1px solid #fff;
		background: #fff;
		border-top-left-radius: 5px;
		border-top-right-radius: 5px;
		box-shadow: 0 1px 1px 0 rgb(0 0 0 /10%);
		flex: 0 0 auto;
		border-bottom: 1px solid #e8eaec;
	}

	.item-card {
		overflow-y: auto;
		flex: 1 1 auto;

		.item-list:hover {
			background: #f0f2f5;
			font-weight: bold;
		}

		// 移入样式
		.item-style {
			padding: 4px 16px;
			cursor: pointer;
			color: #515a6e;
		}

		// 选中样式
		.item-style-select {
			color: #2d8cf0;
			font-weight: bold;
		}
	}

	// 选中样式
	.item-style-select {
		background: #f0faff !important;
	}
}
</style>
