<template>
	<el-form ref="basicInfoForm" :model="info" :rules="ruleRules" label-width="150px">
		<el-row>
			<el-col :span="12">
				<el-form-item label="数仓名称" prop="dbName">
					<el-input v-model="info.dbName" placeholder="请输入" @blur="handleChange" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="数仓描述" prop="dbComment">
					<el-input v-model="info.dbComment"/>
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="原型名称" prop="tableName">
					<el-input v-model="info.tableName" placeholder="请输入" @blur="handleChange('tableName')" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="原型描述" prop="tableComment">
					<el-input v-model="info.tableComment" placeholder="请输入" @blur="handleChange('tableComment')" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="原型别名" prop="className">
					<el-input v-model="info.className" placeholder="请输入" @blur="handleChange('className')" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="创建用户" prop="functionAuthor">
					<el-input v-model="info.functionAuthor" :disabled="true" placeholder="请输入" @blur="handleChange" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<el-form-item label="缓存周期" prop="cacheLife">
					<el-input v-model="info.cacheLife" placeholder="默认5秒" @blur="handleChange" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<!-- 1 为公开访问 0为用户访问 -->
				<el-form-item label="公开访问" prop="isPublic">
					<!-- 设置默认为number类型 -->
					<el-switch :inactive-value="0" :active-value="1" v-model="info.isPublic" @change="handleChange" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<!-- 1 为严格鉴权 0为宽松鉴权 -->
				<el-form-item label="数据鉴权" prop="isAcl">
					<!-- 设置默认为number类型 -->
					<el-switch v-model="info.isAcl" @change="handleChange" />
				</el-form-item>
			</el-col>
			<el-col :span="12">
				<!-- 1 为降序排序 0为升序排序 -->
				<el-form-item label="降序排序" prop="orderType">
					<!-- 设置默认为number类型 -->
					<el-switch v-model="info.orderType" @change="handleChange" />
				</el-form-item>
			</el-col>
			<!-- <el-col :span="24">
				<el-form-item label="附加条件" prop="remark">
					<el-input
						v-model="info.filterRule"
						type="textarea"
						:rows="3"
						@blur="handleChange"
						placeholder="这里可以输入自定义的筛选语句 / SQL 语句 WHERE 之后的部分。"
					/>
				</el-form-item>
			</el-col> -->
			<el-col :span="24">
				<el-form-item label="备注" prop="remark">
					<el-input v-model="info.remark" type="textarea" :rows="3" @blur="handleChange" />
				</el-form-item>
			</el-col>
		</el-row>
	</el-form>
</template>
<script lang="ts">
import { onMounted, reactive, ref, toRefs } from 'vue';
import { updateBasicTable } from '@/api/gen/table';

export default {
	name: 'BasicInfoForm',
	props: {
		info: {
			type: Object,
			default: null,
			// 确保 info 对象中有 isPublic 属性，并且其类型为 number
			props: {
				isPublic: {
					type: Number,
					default: 0, // 默认值可以根据需要设置
				},
			},
		},
	},
	setup(props: any) {
		const basicInfoForm = ref();
		const state = reactive({
			ruleRules: {
				tableName: [{ required: true, message: '请输入原型名称', trigger: 'blur' }],
				tableComment: [{ required: true, message: '请输入原型描述', trigger: 'blur' }],
				className: [{ required: true, message: '请输入原型别名', trigger: 'blur' }],
				functionAuthor: [{ required: true, message: '请输入创建用户', trigger: 'blur' }],
			},
			pageOptions: [],
		});

		// 监听表单字段
		const handleChange = (value: any) => {
			if ((value = 'tableName')) {
				if (!props.info.tableName) return;
			}
			if ((value = 'tableComment')) {
				if (!props.info.tableComment) return;
			}
			if ((value = 'className')) {
				if (!props.info.className) return;
			}
			if ((value = 'isPublic')) {
				if (!props.info.isPublic) {
					props.info.isAcl = 0;
				}
			}

			updateBasicTable(props.info).then((res) => {});
		};

		onMounted(() => {});
		return {
			basicInfoForm,
			handleChange,
			...toRefs(state),
		};
	},
};
</script>
