<template>
	<el-dialog title="审核" :visible.sync="dialogVisible" @close="dialogFormVisible" :close-on-click-modal="false"
		:close-on-press-escape="false">
		<el-form size="small" :model="form" ref="form">
			<div class="info-wrapper">
				<div class="info-block">
					<div class="info-title">审核状态</div>
					<div class="info-content">
						<div class="text-info">
							<div class="info-item" style="align-items: center;">
								<span class="label">当前状态：</span>
								<el-tag v-if="status == 0" size="small">待审核</el-tag>
								<el-tag v-else-if="status == 1" type="success" size="small">通过</el-tag>
								<el-tag v-else-if="status == 2" type="danger" size="small">未通过</el-tag>
								<el-tag v-else-if="status == 3" type="warning" size="small">已完结</el-tag>
								<el-tag v-else-if="status == 4" type="info" size="small">废除</el-tag>
							</div>	
						</div>
					</div>
				</div>	

				<div v-if="group_id == 1 || group_id == 2" class="info-block">
					<div class="info-title">人员信息</div>
					<div class="info-content">
						<div class="text-info">
							<div class="info-item"><span class="label">名称：</span>{{ form.name }}</div>	
							<div class="info-item"><span class="label">手机号：</span>{{ form.card }}</div>	
							<div class="info-item"><span class="label">出生日期：</span>{{ form.both }}</div>
						</div>
						<div class="photo-info" v-if="group_id == 1">
							<div class="photo-label">人脸照片</div>
							<el-image v-if="form.face_url" :src="form.face_url" class="face-img" :preview-src-list="[form.face_url]" preview-teleported fit="cover"></el-image>
							<div v-else class="empty-img"><i class="el-icon-picture-outline"></i><span>暂未上传</span></div>
						</div>
					</div>
				</div>		
				
				<div v-if="group_id == 3 || group_id == 4">
					<div class="info-block">
						<div class="info-title">子女信息</div>
						<div class="info-content">
							<div class="text-info">
								<div class="info-item"><span class="label">子女名称：</span>{{ form.name }}</div>
								<div class="info-item"><span class="label">子女手机号：</span>{{ form.card }}</div>
								<div class="info-item"><span class="label">子女出生日期：</span>{{ form.both }}</div>
							</div>
							<div class="photo-info">
								<div class="photo-label">子女照片</div>
								<el-image v-if="form.face_url" :src="form.face_url" class="face-img" :preview-src-list="[form.face_url]" preview-teleported fit="cover"></el-image>
								<div v-else class="empty-img"><i class="el-icon-picture-outline"></i><span>暂未上传</span></div>
							</div>
						</div>
					</div>

					<div class="info-block">
						<div class="info-title">家长1信息</div>
						<div class="info-content">
							<div class="text-info">
								<div class="info-item"><span class="label">名称：</span>{{ form.name }}</div>
								<div class="info-item"><span class="label">手机号：</span>{{ form.card }}</div>
								<div class="info-item"><span class="label">出生日期：</span>{{ form.both }}</div>
							</div>
							<div class="photo-info">
								<div class="photo-label">照片</div>
								<el-image v-if="form.parent && form.parent[0] && form.parent[0].face_url" :src="form.parent[0].face_url" class="face-img" :preview-src-list="[form.parent[0].face_url]" preview-teleported fit="cover"></el-image>
								<div v-else class="empty-img"><i class="el-icon-picture-outline"></i><span>暂未上传</span></div>
							</div>
						</div>
					</div>

					<template v-if="group_id == 4">
						<div class="info-block">
							<div class="info-title">家长2信息</div>
							<div class="info-content">
								<div class="text-info">
									<div class="info-item"><span class="label">名称：</span>{{ form.name }}</div>
									<div class="info-item"><span class="label">手机号：</span>{{ form.card }}</div>
									<div class="info-item"><span class="label">出生日期：</span>{{ form.both }}</div>
								</div>
								<div class="photo-info">
									<div class="photo-label">照片</div>
									<el-image v-if="form.parent && form.parent[1] && form.parent[1].face_url" :src="form.parent[1].face_url" class="face-img" :preview-src-list="[form.parent[1].face_url]" preview-teleported fit="cover"></el-image>
									<div v-else class="empty-img"><i class="el-icon-picture-outline"></i><span>暂未上传</span></div>
								</div>
							</div>
						</div>
					</template>
				</div>

				<div class="info-block">
					<div class="info-title">联系人信息</div>
					<div class="info-item"><span class="label">联系方式：</span>{{ form.mobile }}</div>	
				</div>
			</div>

			<div class="info-block" style="margin: 0 10px;" v-if="status == 0 && group_id != 2">
				<div class="info-title">进行审核</div>
				<div class="info-content">
					<div class="text-info">
						<div class="info-item" style="align-items: center;">
							<span class="label">审核状态：</span>
							<el-select v-model="form.status" placeholder="请选择" size="small">
								<el-option label="通过" :value="1"></el-option>
								<el-option label="不通过" :value="2"></el-option>
							</el-select>
						</div>
					</div>
				</div>
			</div>
		</el-form>
		<div slot="footer" class="dialog-footer">
			<el-button @click="dialogFormVisible">取 消</el-button>
			<el-button type="primary" @click="review" :loading="loading" v-if="status == 0">确 定</el-button>
		</div>
	</el-dialog>
</template>

<script>
import Upload from '@/components/file/Upload';
import Uediter from '@/components/UE.vue';
import VenueApi from '@/api/venue.js';
import ComboApi from '@/api/combo.js';

export default {
	components: {
		Upload,
		Uediter,
	},
	data() {
		return {
			form: {
				id: 0,
				mobile: '',
				name: '',
				card: '',
				both: '',
				status: '',
				face_url: '',
				parent: [],
			},
			group_id: '',
			/*左边长度*/
			formLabelWidth: '120px',
			/*是否显示*/
			dialogVisible: false,
			loading: false,
			/*是否上传图片*/
			isupload: false,
			status: 0,
		};
	},
    props: ['open_edit', 'editform'],
	created() {
		this.dialogVisible = this.open_edit;
		this.form.id = this.editform.id;
		this.form.name = this.editform.name;
		this.form.mobile = this.editform.mobile;
		this.form.card = this.editform.card;
		this.form.both = this.editform.both;
		this.form.face_url = this.editform.face_url;
		this.form.group_name = this.editform.group_name;
		this.form.parent = this.editform.parent;
		console.log("🚀 ~ this.form.parent:", this.form.parent)
		this.form.status = this.editform.status == 0 ? '' : this.editform.status;
		this.status = this.form.status
		this.group_id = this.editform.group_id;
	},
	methods: {
		/*关闭弹窗*/
		dialogFormVisible(e) {
			if (e) {
				this.$emit('closeDialog', {
					type: 'success',
					openDialog: false
				})
			} else {
				this.$emit('closeDialog', {
					type: 'error',
					openDialog: false
				})
			}
		},

		// 审核
		review() {
			let self = this;
			let params = {
				id: self.form.id,
				status: self.form.status
			};
	
			self.$refs.form.validate((valid) => {
				if (valid) {
					self.loading = true;
					ComboApi.reviewEdit(params).then(data => {
						self.loading = false;
						self.$message({
							message: '操作成功',
							type: 'success'
						});
						self.dialogFormVisible(true);
					}).catch(error => {
						self.loading = false;
					});
				}
			});
		}

	}
};
</script>

<style scoped>
.img {
	margin-top: 10px;
}
.info-wrapper {
	padding: 0 10px;
}
.info-block {
	background: #f8f9fa;
	padding: 15px 20px;
	border-radius: 6px;
	margin-bottom: 20px;
	border: 1px solid #ebeef5;
}
.info-title {
	font-size: 15px;
	font-weight: 600;
	margin-bottom: 15px;
	color: #303133;
	border-bottom: 1px solid #ebeef5;
	padding-bottom: 10px;
}
.info-content {
	display: flex;
	justify-content: space-between;
}
.text-info {
	flex: 1;
	padding-right: 20px;
}
.info-item {
	margin-bottom: 12px;
	font-size: 14px;
	color: #606266;
	display: flex;
	line-height: 1.5;
}
.info-item .label {
	width: 100px;
	color: #909399;
	flex-shrink: 0;
}
.photo-info {
	width: 140px;
	display: flex;
	flex-direction: column;
	align-items: flex-end;
}
.photo-label {
	color: #909399;
	font-size: 14px;
	margin-bottom: 10px;
	text-align: center;
	width: 120px;
}
.face-img {
	width: 120px; 
	height: 120px; 
	border-radius: 6px;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	border: 2px solid #fff;
}
.empty-img {
	width: 120px;
	height: 120px;
	background: #f0f2f5;
	border-radius: 6px;
	display: flex;
	flex-direction: column;
	align-items: center;
	justify-content: center;
	color: #c0c4cc;
	font-size: 13px;
	border: 1px dashed #dcdfe6;
}
.empty-img i {
	font-size: 28px;
	margin-bottom: 8px;
	color: #dcdfe6;
}
</style>
