<template>
	<dc-drawer-header v-if="props.id" :detail="formState" />

	<a-form
		:label-align="useUpdateMethod.formLabelAlign"
		:label-col="useUpdateMethod.formLabelCol"
		:model="formState"
		:wrapper-col="useUpdateMethod.formWrapperCol"
		scrollToFirstError
		@finish="onFinish"
		@finishFailed="useUpdateMethod.formFail"
	>
		<base-form-item v-for="item of filedList" :key="item.name" v-model:value="formState[item.name]" v-bind="item" />

		<a-form-item label="权限列表" name="permissionList">
			<a-form-item-rest>
				<menu-tree v-model:permissions="formState['permissionList']" />
			</a-form-item-rest>
		</a-form-item>

		<!--		<a-row>-->
		<!--			<a-col v-bind="useUpdateMethod.formLabelCol" class="ant-form-item-label">-->
		<!--				<label html-for="form_item_memo" class="" title="权限列表">权限列表</label>-->
		<!--			</a-col>-->
		<!--			<a-col v-bind="useUpdateMethod.formWrapperCol" class="ant-form-item-control">-->
		<!--				<menu-tree class="ant-col ant-col-20 ant-form-item-control"/>-->
		<!--			</a-col>-->
		<!--		</a-row>-->

		<!--		<div class="ant-row ant-form-item">-->
		<!--			<div class="ant-col ant-col-5 ant-form-item-label">-->
		<!--				<label html-for="form_item_memo" class="" title="权限列表">权限列表</label>-->
		<!--			</div>-->
		<!--			<menu-tree class="ant-col ant-col-20 ant-form-item-control"/>-->
		<!--		</div>-->
		<a-form-item :wrapper-col="useUpdateMethod.formActionCol">
			<a-button html-type="submit" type="primary">提交</a-button>
			<a-button style="margin-left: 10px" @click="useUpdateMethod.handleCancel">关闭</a-button>
		</a-form-item>
	</a-form>
</template>

<script lang="ts" setup>
import { updateMethod } from '../../../components/form/method'
import { onMounted, reactive, ref } from 'vue'
import fields from './fields'
import { SelectProps } from '../../../components/form-item/props'
import requestOrg from '../../../api/account/organization'
import requestDept from '../../../api/account/department'
import requestRole from '../../../api/account/role'
import { QueryObjectType } from '../../../http/request-model'
import { messageMethod } from '../../../utils/message-util'
import BaseFormItem from '../../../components/form-item/BaseFormItem.vue'
import MenuTree from '../../../views/account/role/components/MenuTree.vue'
import { AccountRole } from '../../../entity/account/account-role'

// 操作页面的公用方法
const useUpdateMethod = updateMethod()

// 获取父组件参数
const props = defineProps<{ id?: string }>()
defineEmits<{ (e: 'cancel'): void; (e: 'refresh'): void }>()

const formState = reactive<Partial<AccountRole>>({ roleName: '', permissionList: [] })

/**
 * 如果是编辑，获取数据
 * 请求列表数据
 */
const filedList = ref(fields)
onMounted(async () => {
	// 所属单位
	const orgTypeValue = filedList.value.find(value => value.name == 'fkOrgId')?.typeValue
	if (orgTypeValue) {
		let { data } = await requestOrg.formSelect()
		let temp = orgTypeValue as SelectProps
		temp.options = data
	}

	// 获取部门
	const departmentTypeValue = filedList.value.find(value => value.name == 'fkDeptId')?.typeValue
	if (departmentTypeValue) {
		let { data } = await requestDept.formSelect()
		let temp = departmentTypeValue as SelectProps
		temp.options = data
	}

	// 获取角色
	const roleTypeValue = filedList.value.find(value => value.name == 'fkParentIds')?.typeValue
	if (roleTypeValue) {
		let { data } = await requestRole.formSelect()
		let temp = roleTypeValue as SelectProps
		temp.options = data
	}

	if (props.id) {
		const { data } = await requestRole.getById(props.id)
		Object.assign(formState, data)
	}
})

/**
 * 提交表单
 * @param value
 */
const onFinish = async (value: AccountRole) => {
	const data = {
		...(value as unknown as QueryObjectType),
		version: formState.version || 0
	}
	if (props.id) {
		const resultModel = await requestRole.update({
			...data,
			id: props.id
		})
		messageMethod.success(resultModel.message)
		useUpdateMethod.handleSave()
	} else {
		const resultModel = await requestRole.add({ ...(data as unknown as QueryObjectType) })
		messageMethod.success(resultModel.message)
		useUpdateMethod.handleSave()
	}
}
</script>
<script lang="ts">
export default {
	name: 'Add'
}
</script>

<style scoped></style>
