<template>
	<div class="system-add-user-container">
		<el-dialog v-model="state.isShowDialog" width="700px" draggable title="新增数据权限" ref="dialogRef">
			<el-form :model="state.ruleForm" label-width="90px" ref="ruleFormRef">
				<el-row :gutter="10">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="数据表" prop="tableId" :rules="[{ required: true, message: '请选择数据表', trigger: 'change' }]">
                            <el-select v-model="state.ruleForm.tableId" placeholder="请选择数据表" class="w100">
								<el-option v-for="item in state.tableData" :key="item.id" :label="item.displayName" :value="item.id" />
							</el-select>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12">
						<el-form-item label="权限方式" prop="authorityType" :rules="[{ required: true, message: '请选择权限方式', trigger: 'change' }]">
							<el-select v-model="state.ruleForm.authorityType" placeholder="请选择权限方式" class="w100">
								<el-option v-for="item in state.options" :key="item.value" :label="item.label" :value="item.value" />
							</el-select>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="onCancel" class="default-button">取 消</el-button>
					<el-button type="primary" @click="onSubmit()" :loading="state.loading">确 定</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="systemAddDataAuth">
import { reactive, ref, onMounted } from 'vue';
import { ElMessage } from 'element-plus';
import { useRoute } from 'vue-router';
import { throttle } from '/@/utils/tools';

import { dataAuthList, addDataAuth } from '/@/api/system/roles';

// 定义子组件向父组件传值/事件
const emit = defineEmits(['updateList']);
// 定义变量内容
const state = reactive<any>({
	isShowDialog: false,
	ruleForm: {
		roleId: '', // 手机号
		roleCode: 0, //性别
		authorityType: '',
		tableId: '',
	},
	tableData: [],
	loading: false,
	options: [
		{
			label: '全部可见',
			value: 0,
		},
		{
			label: '本部',
			value: 1,
		},
		{
			label: '本部及以下',
			value: 2,
		},
		{
			label: '创建人',
			value: 3,
		},
	], //可用组织
});
const route = useRoute();
// 打开弹窗
const ruleFormRef = ref();
const openDialog = async () => {
	ruleFormRef.value?.clearValidate();
	ruleFormRef.value?.resetFields();
	const res: any = await dataAuthList();
	state.tableData = res.result ?? [];
	state.isShowDialog = true;
};
// 关闭弹窗
const closeDialog = () => {
	state.isShowDialog = false;
};
// 取消
const onCancel = () => {
	closeDialog();
};
// 新增
const onSubmit = throttle(() => {
	ruleFormRef.value.validate((valid: boolean) => {
		if (valid) {
			state.loading = true;
			addDataAuth(state.ruleForm)
				.then(() => {
					ElMessage({
						message: '新增成功',
						type: 'success',
					});
					state.loading = false;
					closeDialog();
					emit('updateList');
				})
				.catch(() => {
					// 新增失败
					state.loading = false;
					closeDialog();
				});
		} else {
			return false;
		}
	});
}, 1000);
onMounted(() => {
	state.ruleForm.roleId = route.query.id;
	state.ruleForm.roleCode = route.query.code;
});
// 暴露变量
defineExpose({
	openDialog,
	closeDialog,
});
</script>
<style lang="scss" scoped></style>
