<template>
	<el-dialog :model-value="visible" :title="title" width="30%" @close="handleCancel">
		<el-form :model="form" ref="formRef" label-width="80px" :rules="rules">
			<slot>
				<el-form-item label="审批意见" prop="auditView">
					<el-input v-model="form.auditView" placeholder="请输入审批意见" />
				</el-form-item>

				<el-form-item label="审核状态" prop="auditStatus">
					<el-radio v-model="form.auditStatus" label="1" size="large">通过</el-radio>
					<el-radio v-model="form.auditStatus" label="2" size="large">不通过</el-radio>
				</el-form-item>

				<el-form-item label="审核人" prop="auditUser">
					<el-select v-model="form.auditUser" placeholder="请选择审核人" filterable clearable>
						<el-option
							v-for="item in userList"
							:key="item.id"
							:label="item.userNickname"
							:value="item.id"
						/>
					</el-select>
				</el-form-item>

				<el-form-item label="日期" prop="auditDate">
					<el-date-picker
						v-model="form.auditDate"
						type="date"
						placeholder="请选择日期"
						style="width: 100%"
					/>
				</el-form-item>
			</slot>
		</el-form>

		<template #footer>
			<el-button @click="handleCancel">取消</el-button>
			<el-button type="primary" @click="handleSubmit">确定</el-button>
		</template>
	</el-dialog>
</template>

<script setup lang="ts">
import { ref, watch, defineProps, defineEmits } from 'vue';
import type { AuditFormModel } from '../type';
import { UserItem, VersionMap } from '/@/types';

defineOptions({
	name: 'AuditForm',
});
const props = defineProps<{
	modelValue: boolean;
	title?: string;
	defaultForm?: Partial<AuditFormModel>;
}>();
const formRef = ref();
const emit = defineEmits<{
	(e: 'update:modelValue', value: boolean): void;
	(e: 'submit', data: any): void;
}>();
const rules = ref({
	auditView: [{ required: true, message: '请输入审批意见', trigger: 'blur' }],
	auditStatus: [{ required: true, message: '请选择审核状态', trigger: 'change' }],
	auditUser: [{ required: true, message: '请选择审核人', trigger: 'change' }],
	auditDate: [{ required: true, message: '请选择日期', trigger: 'change' }],
});
const visible = ref(props.modelValue);
const userList = ref<UserItem[]>([]);
watch(
	() => props.modelValue,
	(val) => (visible.value = val)
);
watch(visible, (val) => emit('update:modelValue', val));

const form = ref<AuditFormModel>({
	id: '',
	auditView: '',
	auditStatus: '',
	auditUser: '',
	auditDate: '',
	...(props.defaultForm || {}),
});
const open = (row: AuditFormModel, userOptions: UserItem[]) => {
	visible.value = true;
  row.auditStatus='1'
	form.value = row;
	userList.value = userOptions;
};
defineExpose({
	open,
});
const handleSubmit = () => {
	formRef.value.validate((valid: boolean) => {
		if (valid) {
			emit('submit', form.value);
			handleCancel();
		} else {
			console.log('error submit!!');
			return false;
		}
	});
};

const handleCancel = () => {
	visible.value = false;
	form.value = {
		id: '',
		auditView: '',
		auditStatus: '',
		auditUser: '',
		auditDate: '',
	};
};
</script>
