<template>
	<div class="system-edit-user-container" v-if="isShowDialog" v-loading="loading">
		<el-dialog :title="submitName + '用户'" v-model="isShowDialog" width="60%" :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="12" class="mb20">
						<el-form-item label="真实姓名" prop="real_name" :rules="[{ required: true, message: '真实姓名不能为空' }]">
							<el-input type="text" v-model="form.real_name" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-if="user_id == 0">
						<el-form-item label="密码" prop="password" :rules="[{ required: true, message: '密码不能为空' }]">
							<el-input type="password" v-model="form.password" autocomplete="off" show-password></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20" v-else>
						<el-form-item label="密码" prop="password">
							<el-input type="password" v-model="form.password" placeholder="不填则表示不修改密码" autocomplete="off" show-password></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="所属企业" prop="size"> {{ companyName }} </el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="性别" prop="gender" :rules="[{ required: true, message: '请选择性别' }]">
							<el-radio v-model="form.gender" :label="1">男</el-radio>
							<el-radio v-model="form.gender" :label="2">女</el-radio>
						</el-form-item>
					</el-col>

					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="联系电话" prop="phone" :rules="[{ required: true, message: '请填写联系电话' }]">
							<el-input type="text" v-model="form.phone" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="身份证" prop="card_number" :rules="[{ required: true, message: '请填写身份证' }]">
							<el-input type="text" v-model="form.card_number" autocomplete="off"></el-input>
						</el-form-item>
					</el-col>
					<el-col :xs="24" :sm="12" :md="12" :lg="12" :xl="12" class="mb20">
						<el-form-item label="头像" prop="header_img" :rules="[{ required: true, message: '请上传用户头像' }]">
							<el-upload
								class="avatar-uploader"
								:action="uploadUrl"
								:show-file-list="false"
								:on-success="handleLogoSuccess"
								:before-upload="beforeLogoUpload"
							>
								<img v-if="form.header_img" :src="form.header_img" class="avatar" />
								<el-icon v-else>
									<ele-Plus />
								</el-icon>
							</el-upload>
						</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 Company from '/@/api/Company';
import User from '/@/api/User';
import config from '/@/config';

import Urls from '/@/api/Urls';

const tagInfo = '[/views/company/component/accountEdit.vue]';
type FormInstance = InstanceType<typeof ElForm>;
export default defineComponent({
	setup(props, context) {
		const state = reactive<any>({
			loading: false,
			isShowDialog: false,
			enterprise_id: 0,
			user_id: 0,
			companyName: '', //企业名称
			form: {
				real_name: '', //
				phone: '', //
				gender: '', //
				enterprise_id: 0, //
				card_number: '', //
				password: '', //
				type: 1, //
				header_img: '', //
				qr_code: '', //
				is_root: 1,
			},
			uploadUrl: config.host + Urls.upload.file,
			submitName: '新增',
			deptData: [], // 部门数据
		});
		const refForm = ref<FormInstance>();
		// 打开弹窗
		const openDialog = (enterprise_id: number = 0, user_id: number = 0, userInfo: any = null) => {
			console.log(tagInfo, 'openDialog0', enterprise_id, user_id, state);
			state.enterprise_id = enterprise_id;
			state.user_id = user_id;
			state.isShowDialog = true;
			initTableData();
			if (userInfo) {
				state.form = {
					id: userInfo.id,
					real_name: userInfo.real_name, //
					phone: userInfo.phone, //
					gender: userInfo.gender, //
					enterprise_id: enterprise_id, //
					card_number: userInfo.id_number, //
					password: '', //
					type: userInfo.type, //
					header_img: userInfo.header_img, //
					qr_code: userInfo.qr_code, //
				};
			}
		};
		// 关闭弹窗
		const closeDialog = () => {
			state.isShowDialog = false;
		};
		// 取消
		const onCancel = () => {
			closeDialog();
		};
		// 新增
		const onSubmit = (formEl: FormInstance | undefined) => {
			console.log(tagInfo, 'onSubmit formEl', formEl);
			if (!formEl) return;
			formEl.validate(async (valid) => {
				if (valid) {
					let res: any = null;
					if (state.user_id) {
						res = await User.edit(state.form);
					} else {
						res = await User.add(state.form);
					}
					if (res.code != 0) {
						ElMessage.error(res.msg);
						return;
					}
					context.emit('finished');
					closeDialog();
					console.log('submit!');
				} else {
					console.log('error submit!');
					return false;
				}
			});
		};
		// 初始化
		const initTableData = async () => {
			let compnayRes = await Company.getEnterpriseDetail(state.enterprise_id);
			if (compnayRes.code != 0) {
				return;
			}

			state.companyName = compnayRes?.data?.enterprise?.name;
			console.log(tagInfo, 'state.user_id', state.user_id);
			if (state.user_id == 0) {
				state.submitName = '新增';
				state.form = {
					real_name: '', //
					phone: '', //
					gender: '', //
					enterprise_id: state.enterprise_id, //
					card_number: '', //
					password: '', //
					type: 1, //
					header_img: '', //
					qr_code: '', //
					is_root: 1,
					// delete_time: '2022-03-02 14:43:00',
				};
				return;
			}
			state.submitName = '修改';
		};
		const beforeLogoUpload = (file: any) => {
			console.log(tagInfo, 'beforeLogoUpload', file);
			const isJPG = file.type === 'image/jpeg';
			const isLt2M = file.size / 1024 / 1024 < 2;

			if (!isJPG) {
				//this.$message.error("上传头像图片只能是 JPG 格式!");
			}
			if (!isLt2M) {
				ElMessage.error('上传logo图片大小不能超过 2MB!');
			}
			return isJPG && isLt2M;
		};
		/**
		 * logo上传完成
		 * @param {*} res
		 * @param {*} file
		 */
		const handleLogoSuccess = (res: any, file: any) => {
			console.log(tagInfo, 'handleLogoSuccess', res, file);
			state.form.header_img = res.data.url; // URL.createObjectURL(file.raw);
		};
		// 页面加载时
		return {
			openDialog,
			closeDialog,
			onCancel,
			onSubmit,
			handleLogoSuccess,
			beforeLogoUpload,
			refForm,
			...toRefs(state),
		};
	},
});
</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>