<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode==='show'" ref="formRef" label-width="100px">
			<el-form-item label="字典ID" prop="dict_id">
				<el-select v-model="form.dict_id" style="width: 100%" disabled placeholder="请选择字典ID">
					<el-option v-for="item in dicts" :value="item.dict_id" :label="item.dict_name"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="字典标签" prop="dict_label">
				<el-input type="text" v-model="form.dict_label" placeholder="请输入字典标签" clearable></el-input>
			</el-form-item>
			<el-form-item label="字典键值" prop="dict_value">
				<el-input type="text" v-model="form.dict_value" placeholder="请输入字典键值" clearable></el-input>
			</el-form-item>
			<el-form-item label="是否启用" prop="status">
				<el-switch v-model="form.status" :active-value="1" :inactive-value="0"/>
			</el-form-item>
			<el-form-item label="是否默认" prop="is_default">
				<el-switch v-model="form.is_default" :active-value="1" :inactive-value="0"/>
			</el-form-item>
			<el-form-item label="回显样式" prop="show_style">
				<el-select v-model="form.show_style" style="width: 100%" clearable placeholder="请选择回显样式" @clear="form.show_style=''">
					<el-option value="default" label="默认(default)"></el-option>
					<el-option value="primary" label="主要(primary)"></el-option>
					<el-option value="success" label="成功(success)"></el-option>
					<el-option value="info" label="信息(info)"></el-option>
					<el-option value="warning" label="警告(warning)"></el-option>
					<el-option value="danger" label="危险(danger)"></el-option>
				</el-select>
			</el-form-item>
			<el-form-item label="排序" prop="rank">
				<el-input type="number" v-model="form.rank" placeholder="请输入排序" clearable></el-input>
			</el-form-item>
			<el-form-item label="备注" prop="remark">
				<el-input type="textarea" v-model="form.remark" placeholder="请输入备注" :rows="3" clearable></el-input>
			</el-form-item>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button v-if="mode!=='show'" type="primary" :loading="isSaveing" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script setup>
import {getCurrentInstance, ref} from 'vue'
import api from "@/api/index"

defineExpose({
	open,
	setDicts
})
const emit = defineEmits(['success', 'closed'])
const formRef = ref(null)
const {proxy} = getCurrentInstance()
const dicts = ref([])

let mode = ref('add')
let titleMap = ref({
	add: '新增',
	edit: '编辑',
	show: '查看'
})
let visible = ref(false)
let isSaveing = ref(false)
let form = ref({
	data_id: null,
	dict_id: null,
	dict_label: null,
	dict_value: null,
	is_default: 0,
	show_style: null,
	rank: 1,
	status: 1,
	remark: null,
})
const rules = ref({
	dict_id: [
		{required: true, message: '请填写字典ID'}
	],
	dict_label: [
		{required: true, message: '请填写字典标签'}
	],
	dict_value: [
		{required: true, message: '请填写字典数值'}
	],
})

function open(m = 'add', data = null) {
	mode.value = m
	visible.value = true
	Object.assign(form.value, data)
}

function setDicts(data) {
	dicts.value = data
	return {open}
}

async function submit() {
	// 校验登录
	const validate = await formRef.value.validate().catch(() => {
	});
	if (!validate) {
		return false
	}
	isSaveing.value = true;
	const res = form.value.data_id ? await api.system.dict_data.edit(form.value) : await api.system.dict_data.add(form.value);
	isSaveing.value = false;
	emit('success')
	visible.value = false;
	proxy.$message.success(res.msg)
}
</script>
