<template>
	<a-card :bordered="false">
		<a-form ref="searchFormRef" name="advanced_search" :model="searchFormState" class="ant-advanced-search-form">
			<a-row :gutter="24">
				<a-col :span="6">
					<a-form-item label="名称" name="name">
						<a-input v-model:value="searchFormState.name" placeholder="请输入名称" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="状态" name="enabledState">
						<a-select v-model:value="searchFormState.enabledState" placeholder="请选择状态" :options="stateOptions" />
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-form-item label="编码" name="number">
						<a-input v-model:value="searchFormState.number" placeholder="请输入编码" />
					</a-form-item>
				</a-col>
				<a-col :span="6" v-show="advanced">
					<a-form-item label="是否基本单位" name="isBase">
						<a-select
							v-model:value="searchFormState.isBase"
							placeholder="请选择是否基本单位"
							:options="isBaseOptions"
						/>
					</a-form-item>
				</a-col>
				<a-col :span="6">
					<a-button type="primary" @click="unitTableRef.refresh()">查询</a-button>
					<a-button style="margin: 0 8px" @click="reset">重置</a-button>
					<a @click="toggleAdvanced" style="margin-left: 8px">
						{{ advanced ? '收起' : '展开' }}
						<component :is="advanced ? 'up-outlined' : 'down-outlined'" />
					</a>
				</a-col>
			</a-row>
		</a-form>
	</a-card>

	<a-card class="mt-4" :border="false" style="height: 100%">
		<a-row :gutter="30">
			<a-col :span="6">
				<s-table
					ref="unitGroupTableRef"
					:columns="unitGroupColumns"
					:data="loadGroupsData"
					bordered
					:row-key="(record) => record.id"
					:tool-config="unitGroupToolConfig"
					@plusRowData="handlePlusRowData"
					@editRowData="handleEditRowData"
					@deleteRowData="handleDeleteRowData"
					:rowSelection="unitGroupRowSelection"
				>
					<template #operator class="table-operator">
						<span>单位组</span>
					</template>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'enabledState'">
							<!--							<a-switch
								checkedValue="ENABLE"
								unCheckedValue="DISABLED"
								checked-children="启用"
								un-checked-children="停用"
								v-model:checked="record.enabledState"
							/>-->
							{{ $TOOL.dictTypeData('COMMON_STATUS', record.enabledState) }}
						</template>
					</template>
				</s-table>
			</a-col>
			<a-col :span="18">
				<s-table
					ref="unitTableRef"
					:columns="unitColumns"
					:data="loadData"
					:alert="options.alert.show"
					bordered
					:row-key="(record) => record.id"
					:tool-config="unitToolConfig"
					:row-selection="options.rowSelection"
					:scroll="{
						x: 100,
						y: 'calc(100vh - 300px)'
					}"
				>
					<template #operator class="table-operator">
						<a-space>
							<a-button
								type="primary"
								@click="
									navigateTo('/basicData/unit/detail', {
										type: 'ADD'
									})
								"
								v-if="hasPerm('customerAdd')"
							>
								<template #icon><plus-outlined /></template>
								新增
							</a-button>
							<xn-batch-delete
								v-if="hasPerm('customerBatchDelete')"
								:selectedRowKeys="selectedRowKeys"
								@batchDelete="deleteBatchSysUnit"
							/>
						</a-space>
					</template>
					<template #bodyCell="{ column, record }">
						<template v-if="column.dataIndex === 'number'">
							<a href="#">{{ record.number }}</a>
						</template>
						<template v-if="column.dataIndex === 'enabledState'">
							<a-tag color="#87d068" v-if="record.enabledState === 'ENABLE'">启用</a-tag>
							<a-tag color="#f50" v-if="record.enabledState === 'DISABLED'">停用</a-tag>
						</template>
						<template v-if="column.dataIndex === 'isBase'">
							{{ $TOOL.dictTypeData('YES_NO', record.isBase) }}
						</template>
						<template v-if="column.dataIndex === 'action'">
							<a-space>
								<a-tooltip title="查看">
									<a
										@click="
											navigateTo('/basicData/unit/detail', {
												type: 'SEARCH',
												id: record.id
											})
										"
										v-if="hasPerm('customerEdit')"
									>
										<EyeOutlined />
										<!--									查看-->
									</a>
								</a-tooltip>

								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
								<a-tooltip title="查看">
									<a
										@click="
											navigateTo('/basicData/unit/detail', {
												type: 'EDIT',
												id: record.id
											})
										"
										v-if="hasPerm('customerEdit')"
									>
										<FormOutlined />
										<!--									编辑-->
									</a>
								</a-tooltip>

								<a-divider type="vertical" v-if="hasPerm(['customerEdit', 'customerDelete'], 'and')" />
								<a-popconfirm title="确定要删除吗？" @confirm="deleteSysUnit(record)">
									<a-button type="link" danger size="small" v-if="hasPerm('customerDelete')">
										<DeleteOutlined />
										<!--										删除-->
									</a-button>
								</a-popconfirm>
							</a-space>
						</template>
					</template>
				</s-table>
			</a-col>
		</a-row>
	</a-card>
	<!--	<Form ref="formRef" @successful="tableRef.refresh()" />-->
	<unit-group-form ref="UnitGroupFormRef" @successful="successful"></unit-group-form>
</template>

<script setup name="basicDataUnit">
	import sysUnitApi from '@/api/base/unit/unitApi'
	import sysUnitGroupsApi from '@/api/base/unit/unitGroupsApi'
	import tool from '@/utils/tool'
	import { cloneDeep } from 'lodash-es'
	import { useNavigation } from '@/hook/useNavigation'
	import { message } from 'ant-design-vue'
	import { unitColumns, unitGroupColumns } from '@/views/basicData/unit/columns/unitColumns'
	import UnitGroupForm from '@/views/basicData/unit/detail/UnitGroupForm.vue'

	// ------------------------------ 组件 REF 变量定义 ------------------------------ //
	const searchFormRef = ref()

	const searchFormState = ref({})
	const UnitGroupFormRef = ref()
	const unitTableRef = ref()
	const unitToolConfig = { refresh: true, height: true, columnSetting: true, striped: false }
	const unitGroupTableRef = ref()
	const unitGroupToolConfig = {
		refresh: true,
		height: true,
		columnSetting: true,
		striped: false,
		plus: true,
		edit: true,
		delete: true
	}
	// 查询区域显示更多控制
	const advanced = ref(false)
	const toggleAdvanced = () => {
		advanced.value = !advanced.value
	}
	// 操作栏通过权限判断是否显示
	if (hasPerm(['sysUnitEdit', 'sysUnitDelete'])) {
		const columnsFilter = unitColumns.filter((item) => item.dataIndex === 'action')
		if (columnsFilter.length === 0)
			unitColumns.unshift({
				title: '操作',
				dataIndex: 'action',
				align: 'center',
				fixed: 'left',
				width: 150
			})
	}
	const selectedRowKeys = ref([])
	// 列表选择配置
	const options = {
		// columns数字类型字段加入 needTotal: true 可以勾选自动算账
		alert: {
			show: true,
			clear: () => {
				selectedRowKeys.value = ref([])
			}
		},
		rowSelection: {
			onChange: (selectedRowKey, selectedRows) => {
				selectedRowKeys.value = selectedRowKey
			}
		}
	}
	const loadData = (parameter) => {
		const searchFormParam = cloneDeep(searchFormState.value)
		return sysUnitApi.sysUnitPage(Object.assign(parameter, searchFormParam)).then((data) => {
			return data
		})
	}

	const loadGroupsData = (parameter) => {
		return sysUnitGroupsApi.sysUnitGroupPage(Object.assign(parameter)).then((data) => {
			return data
		})
	}
	// 重置
	const reset = () => {
		searchFormRef.value.resetFields()
		unitTableRef.value.refresh(true)
	}
	// 删除
	const deleteSysUnit = (record) => {
		let params = [
			{
				id: record.id
			}
		]
		sysUnitApi.sysUnitDelete(params).then(() => {
			unitTableRef.value.refresh(true)
		})
	}
	// 批量删除
	const deleteBatchSysUnit = (params) => {
		sysUnitApi.sysUnitDelete(params).then(() => {
			unitTableRef.value.clearRefreshSelected()
		})
	}
	const stateOptions = tool.dictList('COMMON_STATUS')
	const isBaseOptions = tool.dictList('YES_NO')

	// 跳转
	const { navigateTo } = useNavigation()

	// 单位组
	let unitGroupRecord = ''
	let unitGroupSelectedRowKeys = ref([])
	const unitGroupRowSelection = {
		type: 'radio',
		onChange: (selectedRowKey, selectedRows) => {
			unitGroupRecord = selectedRows[0]
			searchFormState.value.unitGroupId = selectedRowKey[0]
			unitTableRef.value.refresh()
			unitGroupSelectedRowKeys.value = selectedRowKey
		}
	}
	const handlePlusRowData = () => {
		unitGroupRecord = ''
		unitGroupTableRef.value.clearSelected()
		UnitGroupFormRef.value.onOpen()
	}

	const handleEditRowData = () => {
		if (!unitGroupRecord) return message.error('请选择单位组数据')
		UnitGroupFormRef.value.onOpen(unitGroupRecord)
	}

	const handleDeleteRowData = () => {
		if (!unitGroupRecord) return message.error('请选择单位组数据')
		sysUnitGroupsApi
			.sysUnitGroupDelete([
				{
					id: unitGroupRecord.id
				}
			])
			.then(() => {
				searchFormState.value.unitGroupId = ''
				unitGroupTableRef.value.clearSelected()
				unitGroupTableRef.value.refresh()
			})
	}

	const successful = () => {
		searchFormState.value.unitGroupId = ''
		unitGroupTableRef.value.refresh()
		unitGroupRecord = ''
		unitGroupTableRef.value.clearSelected()
	}
</script>
