<template>
	<el-dialog :title="titleMap" v-model="visible" :width="700" destroy-on-close @closed="$emit('closed')">
		<el-form :model="form" :rules="rules" :disabled="mode=='show'"  ref="dialogForm" label-width="100px" label-position="left">
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item :label="$t('user.fullName')" prop="fullName">
						<el-input v-model="form.fullName" disabled clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="$t('user.phone')" prop="phone">
						<el-input v-model="form.phone" disabled clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item :label="$t('user.email')" prop="email">
						<el-input v-model="form.email" disabled clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="$t('device.searchHosptial')" prop="hospital">
						<el-input v-model="form.hospital" disabled clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item :label="$t('device.departmentColumnTitle')" prop="department">
						<el-input v-model="form.department" disabled clearable></el-input>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="$t('user.applyRoleName')" prop="applyRoleName">
						<el-input v-model="form.applyRoleName" disabled clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="12">
					<el-form-item :label="$t('user.cardFront')">
						<el-image v-show="true" :src="imgurl" style="width:100%;height:135px"></el-image>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item :label="$t('user.cardreverse')">
						<el-image v-show="true" :src="imgurl" style="width:100%;height:135px"></el-image>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="24">
					<el-form-item :label="$t('user.doctorLicense')">
						<el-image v-show="true" :src="imgurl" style="width:40%;height:135px"></el-image>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="24">
					<el-form-item :label="$t('user.auditText')">
						<el-radio-group v-model="form.applyRoleName">
							<el-radio v-for="_item in radioList" :key="_item.value" :label="_item.value">{{_item.label}}</el-radio>
						</el-radio-group>
					</el-form-item>
				</el-col>
			</el-row>
			<el-row :gutter="15">
				<el-col :span="24">
					<el-form-item :label="$t('user.rejectReason')">
						<el-input type="textarea" v-model="form.rejectReason" :laceholder="$t('user.inputRejectReason')" clearable></el-input>
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
		<template #footer>
			<el-button @click="visible=false" >{{$t('dialogBox.cancelButtonText')}}</el-button>
			<el-button type="primary" :loading="isSaveing" @click="submit()">{{$t('dialogBox.saveButtonText')}}</el-button>
		</template>
	</el-dialog>
</template>

<script>
	export default {
		emits: ['success', 'closed'],
		data() {
			return {
				titleMap: this.$t('user.certificationAudit'),
				visible: false,
				isSaveing: false,
				imgurl:"http://192.168.6.80:2800/img/avatar.jpg",
				//表单数据
				form: {
					fullName: '',
					phone: '',
					email: '',
					hospital: '',
					department: '',
					applyRoleName: '',
					radio: '',
					rejectReason: '',
					identityApplyCode: ''
				},
				//审核列表
				radioList:[
					{ label: this.$t('yes'), value: 1 },
					{ label: this.$t('no'), value: 2 }
				],
				//验证规则
				rules: {
					code: [
						{required: true, message: this.$t('login.inputAdminCode')}
					],
                    oldPassword: [
						{required: true, message: this.$t('login.inputAdminOldPwd')},
					],
					password: [
						{required: true, message: this.$t('login.inputAdminPwd')},
						{validator: (rule, value, callback) => {
                            let reg= /^(?![0-9]+$)(?![a-zA-Z]+$)[0-9A-Za-z]{4,20}$/
                            if(!reg.test(value)){
								callback(new Error(this.$t('login.inputPwdValidate')))
                            }
							else{
                                callback()
                            }
						}, trigger: 'blur'}
					],
					password2: [
						{required: true, message: this.$t('login.againInputPwd')},
						{validator: (rule, value, callback) => {
							if (value !== this.form.password) {
								callback(new Error(this.$t('login.pwdDiff')));
							}else{
								callback();
							}
						}}
					]
				}
			}
		},
		methods: {
			//显示
			open(userCode = ''){
				this.queryUserInfo(userCode);
				this.visible = true;
				return this
			},
			//用户详情信息
			async queryUserInfo(code){
				this.isSaveing = true;
				var res = await this.$API.user.userDetailInfo.post(code);
				this.isSaveing = false;
				if (res){
					this.form.fullName = res.FullName;
					this.form.phone = res.Phone
					this.form.email = res.Email
					this.form.hospital = res.HospitalName
					this.form.department = res.DepartmentName
					this.form.applyRoleName = res.IdentityApplyRoleName
					this.form.identityApplyCode = res.IdentityApplyCode
					if (res.IdentityCard != null && res.IdentityCard.length > 0) {
						this.idUrl1 = res.IdentityCard[0]
						this.idUrl1List.push(res.IdentityCard[0])
						if (res.IdentityCard.length > 1) {
						this.idUrl2 = res.IdentityCard[1]
						this.idUrl2List.push(res.IdentityCard[1])
						}
					}
					if (res.LicenseCard != null && res.LicenseCard.length > 0) {
						this.licenseUrl = res.LicenseCard[0]
						this.licenseUrlList.push(res.LicenseCard[0])
					}
				}
			},
			//表单提交方法
			submit(){
				this.$refs.dialogForm.validate(async (valid) => {
					if (valid) {
						this.isSaveing = true;
                        var res = await this.$API.user.modifyUserPassword.post(this.form);
						this.isSaveing = false;
						if(res){
							this.visible = false;
							this.$message.success(this.$t('response.operateSuccess'))
						}else{
							this.$alert(res.message, this.$t('dialogBox.confirmWarningTitle'), {type: 'error'})
						}
					}else{
						return false;
					}
				})
			}
		}
	}
</script>

<style>
.el-dialog__header {
    padding: var(--el-dialog-padding-primary);
    padding-bottom: 10px;
	border-bottom: 2px solid rgba(0,0,0,.06);
 }
.el-dialog__body {
    padding: calc(var(--el-dialog-padding-primary) + 10px) var(--el-dialog-padding-primary);
    color: var(--el-text-color-regular);
    font-size: var(--el-dialog-content-font-size);
    word-break: break-all;
    padding-top: 10px;
    padding-bottom: 10px;
}
.el-dialog__footer {
    padding: var(--el-dialog-padding-primary);
    padding-top: 10px;
    text-align: right;
    box-sizing: border-box;
    border-top: 2px solid rgba(0,0,0,.06);
}
.el-form-item__label {
    font-weight: bold;
    line-height: 32px;
}
</style>