<template>
	<div class="modal">
		<el-dialog v-model="props.isVisible" width="70%" left :close-on-click-modal="false" @close="onCancel">
			<template #header>
				<pageTitle :title="props.title"></pageTitle>
			</template>
			<div class="form">
				<el-form
					ref="ruleFormRef"
					label-suffix=":"
					:rules="formRules"
					:model="formData"
					label-width="140px"
					size="large"
				>
					<el-row>
						<el-col :span="6">
							<el-form-item label="发布单位" prop="release_unit">
								<el-input :disabled="true" v-model="formData.release_unit" placeholder="请输入发布单位" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="创建日期" prop="createDate">
								<el-input :disabled="true" v-model="formData.createDate" placeholder="请输入创建日期" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="创建人员" prop="creater">
								<el-input :disabled="true" v-model="formData.creater" placeholder="请输入创建人员" />
							</el-form-item>
						</el-col>
						<el-col :span="6">
							<el-form-item label="发布状态" prop="send_status">
								<el-select
									v-model="formData.send_status"
									placeholder="请选择发布状态"
									style="width: 100%"
									:disabled="true"
								>
									<template v-for="(val, index) in sendStatusOptions" :key="index">
										<el-option :value="val.value" :label="val.label" />
									</template>
								</el-select> </el-form-item
						></el-col>
					</el-row>
					<el-row>
						<el-col :span="8">
							<el-form-item label="通报类型" prop="report_type">
								<el-select v-model="formData.report_type" placeholder="请选择通报类型" style="width: 100%">
									<template v-for="(val, index) in reportTypeOptions" :key="index">
										<el-option :value="val.value" :label="val.label" />
									</template>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="通报事件类别" prop="report_event_type">
								<el-select
									v-model="formData.report_event_type"
									placeholder="请选择通报事件类别"
									style="width: 100%"
								>
									<template v-for="(val, index) in reportEventTypeOptions" :key="index">
										<el-option :value="val.value" :label="val.label" />
									</template>
								</el-select>
							</el-form-item>
						</el-col>
						<el-col :span="8">
							<el-form-item label="事项编号" prop="event_code">
								<el-input v-model="formData.event_code" placeholder="请输入事项编号" />
							</el-form-item>
						</el-col>
					</el-row>
					<el-form-item label="通报事项" prop="report_event">
						<el-input
							v-model="formData.report_event"
							maxlength="200"
							show-word-limit
							type="textarea"
							placeholder="请输入通报事项,内容200字以内"
						/>
					</el-form-item>
					<el-form-item label="通报标准或具体行为列举" prop="report_standard">
						<el-input
							v-model="formData.report_standard"
							maxlength="1000"
							show-word-limit
							type="textarea"
							autosize
							placeholder="请输入通报标准或具体行为列举,内容200字以内"
						/>
					</el-form-item>
					<el-form-item label="通报依据" prop="report_base">
						<el-input
							v-model="formData.report_base"
							maxlength="200"
							show-word-limit
							autosize
							type="textarea"
							placeholder="请输入通报依据,内容200字以内"
						/>
					</el-form-item>
					<el-form-item label="发出单位" prop="send_unit">
						<el-select v-model="formData.send_unit" placeholder="请选择发出单位" style="width: 100%">
							<template v-for="(val, index) in sendUnitOptions" :key="index">
								<el-option :value="val.value" :label="val.label" />
							</template>
						</el-select>
					</el-form-item>
					<el-form-item label="接收单位" prop="receive_unit">
						<el-input v-model="formData.receive_unit" placeholder="请输入择接收单位" />
					</el-form-item>
				</el-form>
			</div>
			<template #footer>
				<span class="dialog-footer">
					<el-button type="primary" @click="handleConfirmClick(ruleFormRef)">保存</el-button>
					<el-button type="primary" @click="handleConfirmClick(ruleFormRef)">提交</el-button>
					<el-button @click="onCancel()">返回</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script setup lang="ts" name="modal">
import { reactive, ref } from 'vue';
import type { FormInstance } from 'element-plus';
import pageTitle from '@/components/components/pageTitle.vue';
import useSystemStore from '@/store/main';

const props = defineProps({
	isVisible: {
		type: Boolean,
		default: false,
	},
	title: {
		type: String,
		default: '',
	},
});
type Emit = {
	(e: 'update:isVisible', isVisible: boolean): void;
};
const emit = defineEmits<Emit>();

const formData = reactive<any>({
	release_unit: '交通运输部海事局',
	createDate: '2025-07-28',
	type: 'mobile',
	creater: '张三',
	send_status: 'inner',
	report_type: '',
	report_event_type: '',
	event_code: '',
	report_event: '',
	report_standard: '',
	report_base: '',
	send_unit: '',
	receive_unit: '',
});
const ruleFormRef = ref<FormInstance>();

const systemStore = useSystemStore();

const onCancel = () => {
	resetForm();
	emit('update:isVisible', false);
};

const resetForm = () => {
	if (!ruleFormRef.value) return;
	ruleFormRef.value.resetFields();
};

const formRules = {
	report_type: [{ required: true, message: '请选择通报类型', trigger: 'select' }],
	report_event_type: [{ required: true, message: '请选择通报类型', trigger: 'select' }],
	report_event: [{ required: true, message: '请输入通报事项', trigger: 'change' }],
	report_base: [{ required: true, message: '请输入通报依据', trigger: 'change' }],
	base_content: [{ required: true, message: '请输入依据内容', trigger: 'change' }],
	send_unit: [{ required: true, message: '请选择发出单位', trigger: 'select' }],
	receive_unit: [{ required: true, message: '请选择接收单位', trigger: 'change' }],
	report_standard: [{ required: true, message: '通报标准或具体行为列举', trigger: 'select' }],
};

// 通报类型
const reportTypeOptions = [
	{
		label: '内部',
		value: 'inner',
	},
	{
		label: '外部',
		value: 'outer',
	},
];
// 通报事项类型
const reportEventTypeOptions = [
	{
		label: '信息告知类',
		value: 'msg',
	},
	{
		label: '协助处理类',
		value: 'assist',
	},
];
// 发布状态
const sendStatusOptions = [
	{
		label: '待发布',
		value: 'inner',
	},
	{
		label: '已发布',
		value: 'outer',
	},
	{
		label: '已结案',
		value: 'outer',
	},
];
// 发出单位
const sendUnitOptions = [
	{
		label: '上海海事',
		value: 'msg',
	},
	{
		label: '广州海事',
		value: 'assist',
	},
];
// 接收单位层级
const receiveUnitLevelOptions = [
	{
		label: '全部',
		value: 'all',
	},
	{
		label: '部级',
		value: '1',
	},
	{
		label: '省级',
		value: '2',
	},
	{
		label: '市级',
		value: '3',
	},
];

// 点击确定
function handleConfirmClick(formEl: FormInstance | undefined) {
	if (!formEl) return;
	formEl.validate((valid, fields) => {
		if (valid) {
		} else {
			console.log('error submit!', fields);
		}
	});
}
</script>

<style>
.form {
	padding: 10px 30px;
}
.form .el-input__wrapper {
	width: 100% !important;
}
</style>
