<template>
	<page-container sub-title="物料类型管理">
		<template #ops>
			<a-row>
				<a-col :span="16">
					<a-input-search
						v-model:value="searchKey"
						placeholder="搜索物料"
						enter-button
						@search="loadData()"
					></a-input-search>
				</a-col>
				<a-col :span="8">
					<a-button type="primary" @click="addOrEdit()">
						<template #icon>
							<icon-font type="icon-plus"></icon-font>
						</template>
						添加
					</a-button>
				</a-col>
			</a-row>
		</template>
		<div style="min-height: calc(100vh - 218px)">
			<vxe-table
				ref="xTree"
				border
				show-overflow
				size="medium"
				:loading="loading"
				height="600"
				:column-config="{ resizable: true }"
				:scroll-y="{ enabled: true, gt: 0 }"
				:expand-config="{
					expandAll: true,
				}"
				:tree-config="{
					iconOpen: 'vxe-icon-square-minus',
					iconClose: 'vxe-icon-square-plus',
					transform: true,
					rowField: 'no',
					parentField: 'parentNo',
					expandAll: true,
					line: true,
				}"
				:data="areas"
			>
				<vxe-column field="name" title="类型" tree-node></vxe-column>
				<vxe-column field="no" title="类型编码"></vxe-column>
				<vxe-column field="levelInfo.description" title="类型级别"></vxe-column>
				<vxe-column field="parentNo" title="上级类型编码"></vxe-column>
				<vxe-column field="ops" title="操作" width="350">
					<template #default="{ row }">
						<a-button type="link" @click="addOrEdit({ parentNo: row.no })">
							<template #icon>
								<icon-font type="icon-children" />
							</template>
							添加子级
						</a-button>
						<a-button type="link" style="margin-left: 10px" @click="addOrEdit(row)">
							<template #icon>
								<icon-font type="icon-edit" />
							</template>
							编辑
						</a-button>
						<a-popconfirm :title="$t('确定要删除地区', { name: row.name })" @confirm="deleteArea(row.id)">
							<a-button type="link" danger style="margin-left: 10px">
								<template #icon>
									<icon-font type="icon-delete" />
								</template>
								删除
							</a-button>
						</a-popconfirm>
					</template>
				</vxe-column>
			</vxe-table>
		</div>
	</page-container>

	<form-drawer
		ref="formDrawer"
		v-model="area"
		:form-items="items"
		:config="formConfig"
		:title="modalTitle"
		:disabled-fields="disabledFields"
		:hidden-fields="hiddenFields"
		@ok="doSave"
	/>
</template>

<script lang="ts" setup>
	import api from '@/api'
	import { config, formItems } from './form'
	import FormDrawer from '@/components/form-render/form-drawer.vue'
	import { notification } from 'ant-design-vue'
	import { Codebook } from '@/api/api'
	import { FormDataType } from '@/components/form-render/form-render-types'

	const areas = ref<Array<material.Type>>([])
	const loading = ref(false)
	const searchKey = ref('')
	const area = ref<Partial<material.Type>>({})
	const levels = ref<Codebook[]>([])
	api.materialApi.type.levels((data) => {
		levels.value = data
	})
	//表单
	const formDrawer = ref<typeof FormDrawer>()

	const formConfig = computed(() => {
		return config
	})
	//表单配置
	const items = computed(() => {
		return formItems(levels.value)
	})
	//表单不可用字段
	const disabledFields = computed(() => {
		const no = area.value && area.value.id ? 'no' : ''
		const parentNo = area.value && area.value.parentNo ? 'parentNo' : ''
		return [no, parentNo]
	})
	//表单隐藏字段
	const hiddenFields = computed(() => {
		return area.value && area.value.parentNo ? [] : ['parentNo']
	})

	//弹窗标题
	const modalTitle = computed(() => {
		return area.value.id ? '编辑物料类型' : '添加物料类型'
	})

	// 加载数据
	const loadData = () => {
		loading.value = true
		api.materialApi.type.areas(
			{
				key: searchKey.value,
			},
			(data) => {
				areas.value = data
				loading.value = false
			},
		)
	}
	loadData()

	// 新增或编辑
	const addOrEdit = (u?: Record<string, unknown>) => {
		area.value = { ...u }
		formDrawer.value?.show()
	}

	// 抽屉保存
	const doSave = (_data: FormDataType) => {
		api.materialApi.type.addAndModify(_data as unknown as material.Type, () => {
			formDrawer.value?.close()
			notification.success({
				message: '操作成功',
				description: '新增保存成功,页面将自动刷新!',
				onClose: () => {
					loadData()
				},
			})
		})
	}
	// 删除
	const deleteArea = (id: number) => {
		api.materialApi.type.deleteArea(id, () => {
			notification.success({
				message: '操作成功',
				description: '删除成功,页面将自动刷新!',
				onClose: () => {
					loadData()
				},
			})
		})
	}
</script>
