<template>
	<!--人员信息管理 -->
	<a-card :bordered="false">
		<div style="cursor: pointer; width: 80px" @click="delCode"><left-outlined />返回</div>
		<br />

		<a-form
			v-if="formState"
			:model="formState"
			name="basic"
			autocomplete="off"
			@finish="onFinish"
			@finishFailed="onFinishFailed"
		>
			<a-row justify="end" align="middle">
				<a-col :span="12">
					<a-form-item
						class="form-item"
						name="maxFulfilmentTime"
						:label-col="{ span: 0 }"
						:rules="[{ required: true, message: '请输入!', trigger: 'change' }]"
					>
						<a-input
							style="width: 230px"
							placeholder="请输入"
							:disabled="code"
							v-model:value="formState.maxFulfilmentTime"
						/>
						<span>*</span>>企业履约次数>
						<a-form-item-rest>
							<a-input
								style="width: 230px"
								placeholder="请输入"
								:disabled="code"
								v-model:value="formState.minFulfilmentTime"
							/>
						</a-form-item-rest>
					</a-form-item>
				</a-col>

				<a-col :span="12">
					<a-form-item
						class="form-item"
						name="maxBreachTime"
						:label-col="{ span: 0 }"
						:rules="[{ required: true, message: '请输入!' }]"
					>
						<a-input
							style="width: 200px"
							placeholder="请输入"
							:disabled="code"
							v-model:value="formState.maxBreachTime"
						/>
						<span>*</span>>企业违约次数>
						<a-form-item-rest>
							<a-input
								style="width: 200px"
								placeholder="请输入"
								:disabled="code"
								v-model:value="formState.minBreachTime"
							/>
						</a-form-item-rest>
					</a-form-item>
				</a-col>
			</a-row>
			<!--  -->
			<a-row :span="24" justify="start" align="middle">
				<a-col :span="8">
					<a-form-item
						class="form-item"
						label="信用等级"
						name="creditLevel"
						:label-col="{ span: 5 }"
						:rules="[{ required: true, message: '请输入!', trigger: 'change' }]"
					>
						<a-select :disabled="code" v-model:value="formState.creditLevel">
							<a-select-option :value="1">一级</a-select-option>
							<a-select-option :value="2">二级</a-select-option>
							<a-select-option :value="3">三级</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item
						class="form-item"
						label="评价结果"
						name="assessResult"
						:rules="[{ required: true, message: '请输入!', trigger: 'change' }]"
						:label-col="{ span: 5 }"
					>
						<a-select :disabled="code" v-model:value="formState.assessResult">
							<a-select-option :value="1">优秀</a-select-option>
							<a-select-option :value="2">良好</a-select-option>
							<a-select-option :value="3">一般</a-select-option>
						</a-select>
					</a-form-item>
				</a-col>
				<a-col :span="8">
					<a-form-item
						class="form-item"
						label="信用评分"
						name="creditScore"
						:rules="[
							{ required: true, message: '请输入!', trigger: 'change' },
							{ validator: isNumber, trigger: 'change' }
						]"
						:label-col="{ span: 5 }"
					>
						<a-input placeholder="请输入" :disabled="code" v-model:value="formState.creditScore" />
					</a-form-item>
				</a-col>
			</a-row>

			<a-form-item>
				<div class="item-submit">
					<a-button class="btn1" @click="delCode">取消</a-button>
					<a-button :disabled="code" class="btn1" type="primary" html-type="submit">保存</a-button>
				</div>
			</a-form-item>
		</a-form>
	</a-card>
</template>
<script setup>
	import { required } from '@/utils/formRules'
	import { onMounted } from 'vue'
	import { reactive, ref, watch } from 'vue'
	import { useRouter, useRoute } from 'vue-router'
	import { defineComponent } from 'vue'
	import { isNumber } from '@/utils/validator'
	import business from '@/api/basic.info/verifyQuery.js'
	const router = useRouter()
	const route = useRoute()
	const formState = ref({
		maxFulfilmentTime: '',
		minFulfilmentTime: '',
		maxBreachTime: '',
		minBreachTime: '',
		creditLevel: '',
		assessResult: '',
		creditScore: ''
	})
	// 回显示
	const huiXian_evaluationDel = async () => {
		const res = await business.XYPJdetail({ id: route.query.id })
		formState.value = res
	}

	const codes = ref(null)
	const code = ref(null)
	watch(
		() => route.query.codeBBA,
		(newVal) => {
			const codeDel = route.query.codeBBA
			if (codeDel == 1) {
				codes.value = true
				code.value = false
				huiXian_evaluationDel()
			} else if (Boolean(route.query.codeBBA) == true) {
				codes.value = true
				code.value = true
				huiXian_evaluationDel()
			} else {
				codes.value = false
				code.value = false
			}
		},
		{ immediate: true, deep: true }
	)

	onMounted(() => {
		getGender()
	})

	const optionsGender = ref([]) // 性别
	const getGender = async () => {}
	// 新增
	const pustFrom = async (value) => {
		const res = await business.XYPJadd(value)
	}
	// 编辑
	const pustEdit = async (value) => {
		const res = await business.XYPJedit(value)
	}

	const onFinish = (values) => {
		if (route.query.id) {
			pustEdit({ id: route.query.id, ...formState.value })
		} else {
			pustFrom(formState.value)
		}
		delCode()
	}
	const onFinishFailed = (errorInfo) => {
		console.log('Failed:', errorInfo)
	}

	const delCode = () => {
		for (let key in formState.value) {
			formState.value[key] = ''
		}
		router.back()
	}

	const handleChange = (val) => {
		console.log(val)
	}
</script>
<style lang="less" scoped>
	.item-submit {
		display: flex;
		justify-content: center;
		margin-top: 100px;
		.btn1 {
			width: 100px;
			margin-right: 20px;
		}
	}
	.ant-select {
		width: 250px;
	}
	.ant-input {
		width: 250px;
	}
	.ant-form-item-label {
		width: 150px;
	}
</style>
