<template>
	<div class="system-edit-user-container" v-loading="loading">
		<el-dialog :title="submitName + '协议'" v-model="isShowDialog" width="70%" :close-on-click-modal="false">
			<el-form :model="form" ref="refForm" label-width="90px">
				<el-row :gutter="35">
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
						<el-form-item label="协议标题" prop="title" :rules="[{ required: true, message: '协议标题不能为空' }]">
							<el-input type="text" v-model="form.title" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="17" class="mb20">
						<el-form-item label="协议内容" prop="content" :rules="[{ required: true, message: '协议内容不能为空' }]">
							<el-input type="textarea"  v-model="form.content" autocomplete="off" ></el-input>
						</el-form-item>
					</el-col>
					
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="8" class="mb20">
						<el-form-item label="协议编码" prop="code" :rules="[{ required: true, message: '协议编码不能为空' }]">
							<el-input type="text" v-model="form.code" autocomplete="off" :disabled="true"></el-input>
						</el-form-item>
					</el-col>
				
				</el-row>
			</el-form>
			<template #footer>
				<span class="dialog-footer">
					<el-button @click="closeDialog">取消</el-button>
					<el-button type="primary" @click="onSubmit('refForm')">{{ submitName }}</el-button>
				</span>
			</template>
		</el-dialog>
	</div>
</template>

<script lang="ts">
import { reactive, toRefs, onMounted, defineComponent, ref } from 'vue';
import { ElMessageBox, ElMessage } from 'element-plus';
import type { ElForm } from 'element-plus';
import Urls from '/@/api/Urls';
import Protocol from '/@/api/Protocol';
import config from '/@/config';
const tagInfo = '[protocol/edit.vue]';
// 定义接口来定义对象的类型
interface DeptData {
	deptName: string;
	createTime: string;
	status: boolean;
	sort: number | string;
	describe: string;
	id: number;
	children?: DeptData[];
}
interface RuleFormRow {
	title: string;
	content: string;
	code: string;
}
interface UserState {
	isShowDialog: boolean;
	ruleForm: RuleFormRow;
	deptData: Array<DeptData>;
}

export default defineComponent({
	name: 'protocolEdit',

	data() {
		return {
			id: 0,
			isShowDialog: false,
			mainform: {} as any,
			form: {
				id: 0,
				title: '',
				content: '',
				code: '',
			},
			submitName: '新增',
			loading: false,
		};
	},
	created() {},
	methods: {
		openDialog(id: number = 0) {
			this.id = id;
			this.isShowDialog = true;
			this.loadData();
		},
		closeDialog() {
			this.isShowDialog = false;
		},
		/**
		 * 载入数据
		 */
		async loadData() {
			if (this.id == 0) {
				this.form = {
					id: 0,
					title: '',
					content: '',
					code: '',
				};
				this.photoList = [];
				return;
			}
			this.loading = true;
			this.submitName = '修改';

			let res: any = await Protocol.detail(this.id);
			if (res.code != 0) {
				ElMessage.error(res.msg);
				return;
			}
			console.log(tagInfo, 'loaddata', res, this.form);
			this.form = {
				id: res.data.id,
				title: res.data.title,
				content: res.data.content,
				code: res.data.code,
			};
			this.loading = false;
		},
		/**
		 * 提交表单
		 * @param {*} formName
		 */
		onSubmit(formName: any) {
			this.$refs.refForm.validate(async (valid: any) => {
				if (valid) {
					let res;
					if (this.form.id > 0) {
						res = await Protocol.edit(this.form);
					} else {
						res = await Protocol.add(this.form);
					}
					if (res.code != 0) {
						ElMessage.error(res.msg);
						return;
					}
					ElMessage.success('操作成功');
					this.$emit('finished');
					this.closeDialog();
				} else {
					console.log('数据验证不通过');
					return false;
				}
			});
		},


	},
});
</script>
<style lang="scss" >
.form_detail {
	height: 60px;
}
.avatar-uploader {
	display: flex;
}
.avatar-uploader .el-upload {
	border: 1px dashed #d9d9d9;
	border-radius: 6px;
	cursor: pointer;
	position: relative;
	overflow: hidden;
}
.avatar-uploader .el-upload:hover {
	border-color: #409eff;
}
.avatar-uploader-icon {
	font-size: 28px;
	color: #8c939d;
	width: 100px;
	height: 100px;
	line-height: 100px;
	text-align: center;
}
.el-upload-list--picture-card {
	display: flex;
}
.el-upload-list--picture-card .el-upload-list__item,
.el-upload--picture-card,
.el-upload {
	width: 100px;
	height: 100px;
	line-height: 100px;
	display: flex;
	align-items: center;
	justify-content: center;
}
.el-upload--picture-card i {
	margin-top: 0;
}

.avatar {
	width: 100px;
	height: 100px;
	display: block;
}
</style>