<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="500" draggable destroy-on-close @closed="$emit('closed')">
		<el-form class="form" :model="form" :rules="rules" ref="dialogForm" label-width="100px" label-position="right">
			<div class="cardBoxForm">
				<div class="comBox">
					<el-form-item label="用户头像" prop="avatar">
						<ossImgUpload :url="form.avatar" disabled />
					</el-form-item>
				</div>
			</div>
			<div class="cardBoxForm">
				<div class="title">用户信息</div>
				<div class="comBox">
					<el-form-item label="昵称/工号" required>
						<el-row :gutter="24" justify="space-between">
							<el-col :span="12">
								<el-form-item prop="name">
									<el-input v-model="form.name" placeholder="请填写昵称" disabled clearable></el-input>
								</el-form-item>
							</el-col>
							<el-col :span="12">
								<el-form-item prop="emp_id">
									<el-input v-model="form.emp_id" placeholder="请填写工号" disabled clearable></el-input>
								</el-form-item>
							</el-col>
						</el-row>
					</el-form-item>
					<el-form-item label="登录账号" prop="login_name">
						<el-input v-model="form.login_name" placeholder="请填写登录账号" disabled clearable></el-input>
					</el-form-item>
					<el-form-item label="公司名称" prop="company_full_name">
						<el-select v-model="form.company_full_name" placeholder="请填写公司名称" clearable>
						  <el-option v-for="(item,index) in companyList" :key="index" :label="item.full_name" :value="item.full_name"></el-option>
						</el-select>
					</el-form-item>
					<el-form-item label="审核意见" prop="opinion">
						<el-input v-model="form.opinion" type="textarea" :row="2" placeholder="请填写审核意见" clearable></el-input>
						<p class="el-form-item-msg">如果审核拒绝，请填写审核意见</p>
					</el-form-item>
				</div>
			</div>
		</el-form>
		<template #footer>
			<el-button @click="visible=false">取 消</el-button>
			<el-button type="danger" :loading="passLoading" @click="approve_pass(2)">拒 绝</el-button>
			<el-button type="primary" :loading="isSave" @click="approve_pass(1)">通 过</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "show",
			titleMap: {
				show: '用户审核',
			},
			visible: false,
			passLoading:false,
			isSave: false,

      		companyList:[],
			//表单数据
			form: {
				id:"",
				avatar:"",
				login_name: "",
				name:"",
				approval_status:"",
				company_full_name:"",
				opinion:"",
			},
			//验证规则
			rules: {
				avatar:[
					{required: true, message: '请上传头像'}
				],
				login_name:[
					{required: true, message: '账号不能为空'}
				],
			},
		}
	},
	mounted() {
    	this.getCompanyList();
	},
	methods: {
		async getCompanyList() {
			let params = {
				field:"full_name",
				id:{
					operator:"in",
					value:[]
				}
			}
			const res = await this.$API.system.user.userCompanyField.post(params);
			if(res.code == 200){
				this.companyList = res.data;
			}
		},
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this
		},
		//表单提交方法  num 1 通过 2 拒绝
		approve_pass(num){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.form.approval_status = num;
					if(num == 2){
						this.passLoading = true;
					}else{
						this.isSave = true;
					}
					const res = await this.$API.system.user.audit.post(this.form);
					if(num == 2){
						this.passLoading = false;
					}else{
						this.isSave = false;
					}
					if(res.code == 200){
						this.$emit('success', this.form, this.mode)
						this.visible = false;
						this.$message.success("操作成功")
					}
				}else{
					return false;
				}
			})
		},
		//表单注入数据
		setData(data){
			this.form.id = data.id
			this.form.login_name = data.login_name;
			this.form.name = data.name;
			this.form.avatar = data.avatar && data.avatar!==""?data.avatar:'https://cube.elemecdn.com/3/7c/3ea6beec64369c2642b92c6726f1epng.png';
			this.form.company_full_name = data.company_info?data.company_info.full_name:'';
		}
	}
}
</script>

<style lang="scss" scoped>
.form{
	.cardBoxForm{
		border-bottom: 1px solid #f7f7f7;
		.title{
			padding: 15px 0 8px 18px;
			font-weight: bold;
		}
	}
	.cardBoxForm:last-child{
		border-bottom: 0;
	}
}
</style>
