<template>
	<el-dialog
		v-model="visible"
		v-loading="loading"
		:title="dataForm.id ? '编辑功能开发' : '新增功能开发'"
		width="30%"
		:before-close="handleClose"
		destroy-on-close
		center
		:close-on-click-modal="false"
	>
		<el-form ref="dataFormRef" :model="dataForm" :rules="dataRules" label-width="100px">
			<el-form-item label="上级" prop="parentId">
				<el-tree-select
					v-model="dataForm.parentId"
					:data="functionTreeData"
					:props="{ children: 'children', label: 'name', value: 'id' }"
					:render-after-expand="false"
					:show-count="true"
					placeholder="上级"
				/>
			</el-form-item>
			<el-form-item label="编码" prop="code">
				<el-input v-model="dataForm.code" placeholder="系统自动生成" readonly clearable />
			</el-form-item>
			<el-form-item label="名称" prop="name">
				<el-input v-model="dataForm.name" placeholder="请输入名称" clearable />
			</el-form-item>
			<el-form-item label="类型" prop="type">
				<el-radio-group v-model="dataForm.type">
					<el-radio label="model"><span style="color: #666666">模块</span></el-radio>
					<el-radio label="list"><span style="color: #a45050">列表</span></el-radio>
					<el-radio label="form"><span style="color: #3e993e">表单</span></el-radio>
					<el-radio label="btn"><span style="color: #9fc5e8">按钮</span></el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="说明" prop="remark">
				<el-input v-model="dataForm.remark" placeholder="请输入说明" clearable />
			</el-form-item>
			<el-form-item label="排序" prop="funOrder">
				<el-input v-model="dataForm.funOrder" placeholder="排序" clearable />
			</el-form-item>
			<el-form-item label="是否启用" prop="usabled">
				<el-switch v-model="dataForm.usabled" :active-value="1" :inactive-value="0" />
			</el-form-item>

			<el-form-item>
				<el-button v-prevent-reclick type="primary" @click="submitForm()">确认</el-button>
				<el-button @click="handleClose">取消</el-button>
			</el-form-item>
		</el-form>
	</el-dialog>
</template>

<script setup lang="ts">
import { reactive, ref } from 'vue'

import { functionTreeList, get, saveOrUpdate } from '../api/function'
import { ElMessage } from 'element-plus'

const dataFormRef = ref()
const visible = ref(false)
const functionTreeData = ref([])
const loading = ref(false)
const emit = defineEmits(['refreshDataList'])
const dataForm = reactive({
	id: null,
	code: null,
	name: null,
	type: null,
	funOrder: 10,
	remark: null,
	usabled: '1',
	parentId: null,
	parentCode: null
})

const dataRules = ref({
	name: [{ required: true, message: '名称不能为空', trigger: 'blur' }],
	type: [{ required: true, message: '类型不能为空', trigger: 'blur' }],
	parentCode: [{ required: true, message: '上级编码不能为空', trigger: 'blur' }]
})

const init = (id?: string, parentId?: string) => {
	getTreeList()
	dataForm.id = null
	dataForm.parentId = null
	Object.assign(dataForm, {
		id: null,
		code: null,
		name: null,
		type: null,
		funOrder: 10,
		remark: null,
		usabled: '1',
		parentId: null,
		parentCode: null
	})
	visible.value = true
	if (parentId) {
		dataForm.parentId = parentId
	}
	if (id) {
		getInfo(id)
	}
}
const getInfo = (id: any) => {
	get(id)
		.then(response => {
			const { data } = response
			Object.assign(dataForm, data)
		})
		.finally(() => {
			loading.value = false
		})
}

const normalizer = (node: any) => {
	return {
		id: node.id,
		label: node.name,
		children: node.children
	}
}
const getTreeList = () => {
	functionTreeList().then(response => {
		const { data } = response
		functionTreeData.value = data.list
	})
}
const handleClose = () => {
	dataForm.menuIds = []
	visible.value = false
}

const submitForm = () => {
	dataFormRef.value.validate((valid: boolean) => {
		if (!valid) {
			return false
		}
		saveOrUpdate(dataForm).then(() => {
			ElMessage.success({
				message: '操作成功',
				duration: 500,
				onClose: () => {
					visible.value = false
					emit('refreshDataList')
				}
			})
		})
	})
}

defineExpose({
	init
})
</script>

<style>
.vue-treeselect__control {
	height: 28px !important;
}

.vue-treeselect__placeholder {
	line-height: 28px !important;
}

.vue-treeselect__single-value {
	line-height: 28px !important;
}
</style>
