<!--
@ 作者: 秦东
@ 时间: 2023-09-14 09:47:27
@ 备注: 编辑表单字段
-->
<script lang='ts' setup>
import { gogoBackFormTabelStruct } from "@/api/DesignForm/type";
import { formFieldHandle,editFormField } from '@/api/DesignForm/requestapi'
const fieldType = ["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double","char","varchar","binary","varbinary","enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"];
const props = defineProps({
	isEditFormField:{
		type:Boolean,
		default:true
	},
	formname:{
		type:String,
		default:""
	},
	formtablecont:{
		type:Object,
		default(){
			return {}
		}
	},
})

const unsignedIsShow = ref(false); //符号
const decimalIsShow = ref(false); //小数点
const fieldLenghtIsShow = ref(false); //字段长度
const isNull = ref(false);	//是否显示空置
const butLoad = ref(false);

const formTableField = reactive<gogoBackFormTabelStruct>({
	formname:props.formname,
	field:"",
	type:"",
	attribute:"",
	collation:"",
	null:"",
	key:"",
	default:"",
	extra:"",
	privileges:"",
	comment:"",
	integer:"",
	decimal:"",
})
const dialogTitle = ref<string>()
const isEditOk = ref(false)

const emits = defineEmits(["update:isEditFormField","refreshtable","xxxxx"]);
const isShow =   computed({
	get: () => props.isEditFormField,
	set: (val) => {
		emits("update:isEditFormField", val);
		emits("refreshtable");
	},
});

watch(()=>props.isEditFormField,()=>{
	// console.log("监听状态----->",props.isEditFormField,props.formtablecont)
	if(props.isEditFormField){
		if(props.formtablecont.comment != null && props.formtablecont.comment != ""){
			dialogTitle.value = "编辑<"+props.formtablecont.field+">字段(PS:"+props.formtablecont.comment+")"
		}else{
			dialogTitle.value = "编辑<"+props.formtablecont.field+">字段"
		}
		formFieldHandle(props.formtablecont)
			.then(({data})=>{
				// console.log("监听状态---1-->",data)
				formTableField.formname=props.formname
				formTableField.field = data.field;
				formTableField.type = data.type;
				formTableField.attribute = data.attribute;
				formTableField.collation = data.collation;
				formTableField.null = data.null;
				formTableField.key = data.key;
				formTableField.default = data.default;
				formTableField.extra = data.extra;
				formTableField.privileges = data.privileges;
				formTableField.comment = data.comment;
				formTableField.integer = data.integer;
				formTableField.decimal = data.decimal;
				if(["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double"].indexOf(data.type) != -1){
					unsignedIsShow.value = true
				}else{
					unsignedIsShow.value = false
				}
				if(["decimal", "float", "double"].indexOf(data.type) != -1){
					decimalIsShow.value = true
				}else{
					decimalIsShow.value = false
				}
				if(["enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"].indexOf(data.type) != -1){
					fieldLenghtIsShow.value = false
				}else{
					fieldLenghtIsShow.value = true
				}
			})
		// formTableField.value = props.formtablecont 
	}else{
		if(isEditOk.value){
			emits("refreshtable")
		}
		initData()
		// formTableField.value=new Value(props.formtablecont)
	}
})
//初始化数据
function initData(){
	formTableField.formname="";
	formTableField.field =  ""; //field;
	formTableField.type =  ""; //type;
	formTableField.attribute =  ""; //attribute;
	formTableField.collation =  ""; //collation;
	formTableField.null =  ""; //null;
	formTableField.key =  ""; //key;
	formTableField.default =  ""; //default;
	formTableField.extra =  ""; //extra;
	formTableField.privileges =  ""; //privileges;
	formTableField.comment =  ""; //comment;
	formTableField.integer =  ""; //integer;
	formTableField.decimal =  ""; //decimal;
	unsignedIsShow.value = false;
	decimalIsShow.value = false;
	fieldLenghtIsShow.value = false;
}
/**
 * 关闭弹窗
 */
 function closeDialog() {
	isShow.value = false;
	emits("update:isEditFormField", false);
  	initData();
}
//提交表单
function sendFormData(){
	butLoad.value=true;
	// console.log("提交数据--->",props.formname,formTableField)
	editFormField(formTableField)
		.then((data)=>{
			// console.log("提交数据--1->",data)
			ElMessage.success('成功')
			isEditOk.value=true;
		})
		.finally(()=>{
			butLoad.value=false;
			closeDialog();
		})
}
//判断数据类型
const judgeFieldType = (typeStr:string) => {
	if(["tinyint","smallint","mediumint","int","integer","bigint","decimal", "float", "double"].indexOf(typeStr) != -1){
		unsignedIsShow.value = true
		formTableField.attribute = "unsigned"
		formTableField.integer = "3"
		formTableField.decimal = ""
	}else{
		unsignedIsShow.value = false
		formTableField.attribute = ""
	}
	if(["decimal", "float", "double"].indexOf(typeStr) != -1){
		decimalIsShow.value = true
	}else{
		decimalIsShow.value = false
	}
	if(["enum","set","text","tinytext","mediumtext","longtext","blob","year","date","time","datetime","timestamp"].indexOf(typeStr) != -1){
		fieldLenghtIsShow.value = false
		formTableField.integer = ""
		formTableField.decimal = ""
	}else{
		fieldLenghtIsShow.value = true
	}
	if(["char","varchar","binary","varbinary"].indexOf(typeStr) != -1){
		formTableField.integer = "255"
	}
}
</script>
<template>
	<el-dialog
        v-model="isShow"
        width="550"
        :title="dialogTitle"
        append-to-body
		draggable
		@close="closeDialog"
    >
		<el-form :model="formTableField" label-width="80px" border>
			<el-form-item label="字段">
				{{ formTableField.field }}
			</el-form-item>
			<el-form-item  label="类型">
				<el-select v-model="formTableField.type" class="m-2" placeholder="请选择数据类型" @change="judgeFieldType(formTableField.type)">
					<el-option
						v-for="item in fieldType"
						:key="item"
						:label="item"
						:value="item"
					/>
				</el-select>
			</el-form-item>
			<el-form-item  v-if="unsignedIsShow" label="无符号">
				<el-radio-group v-model="formTableField.attribute" class="ml-4">
					<el-radio label="unsigned" size="large">正数</el-radio>
					<el-radio label="" size="large">区分正负</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item label="不是Null">
				<el-radio-group v-model="formTableField.null" class="ml-4">
					<el-radio label="YES" size="large">YES</el-radio>
					<el-radio label="NO" size="large">NO</el-radio>
				</el-radio-group>
			</el-form-item>
			<el-form-item v-if="fieldLenghtIsShow" label="长度">
				<el-input v-model="formTableField.integer" />
			</el-form-item>
			<el-form-item v-if="decimalIsShow" label="小数点">
				<el-input v-model="formTableField.decimal" />
			</el-form-item>
			<el-form-item  label="默认值">
				<el-input v-model="formTableField.default" />
			</el-form-item>
			<el-form-item label="备注">
				<el-input v-model="formTableField.comment" type="textarea" />
			</el-form-item>
		</el-form>
		<template #footer>
			<span class="dialog-footer">
				<el-button @click="closeDialog">取消</el-button>
				<el-button type="primary" @click="sendFormData">提交</el-button>
			</span>
   	 	</template>
	</el-dialog>
</template>
<style  lang='scss' scoped>

</style>
