<template>
	<el-dialog :title="titleMap[mode]" v-model="visible" :width="form.is_admin?1200:600" destroy-on-close draggable @closed="$emit('closed')">
		<template #title>
			<div class="dialogHeader">
				<span class="name">{{titleMap[mode]}}</span>
				<span class="addBtn" :class="form.is_admin?'addFlex':''">
					<span class="btnFlex" @click="form.is_admin=!form.is_admin"><el-icon v-if="form.is_admin" class="rightIcon" size="20"><sc-icon-Right/></el-icon>{{form.is_admin?'取消添加管理员':'添加管理员'}}<el-icon v-if="!form.is_admin" class="icon" size="20"><sc-icon-Right/></el-icon></span>
				</span>
			</div>
		</template>
		<el-scrollbar height="500px" style="padding: 0 20px;">
			<el-form :model="form" :rules="rules" ref="dialogForm" label-width="140px">
				<el-row justify="space-between">
					<el-col :span="form.is_admin?11:24">
						<div class="dialogBoxTitle"><span class="make"></span><span class="name">企业信息</span></div>
						<el-form-item label="公司名称" prop="full_name">
							<el-input v-model="form.full_name" placeholder="请填写认证企业名称" clearable></el-input>
						</el-form-item>
						<el-form-item label="公司简称" prop="name">
							<el-input v-model="form.name" placeholder="请输入公司简称" clearable></el-input>
						</el-form-item>
						<el-form-item label="公司系统入口地址" prop="domain">
							<el-input v-model="form.domain" placeholder="公司系统入口地址" clearable></el-input>
						</el-form-item>
						<el-form-item label="公司类型" prop="company_type">
							<el-select v-model="form.company_type" @visible-change="getCompanyTypeSelect" placeholder="请选择公司类型" clearable style="width: 100%;">
								<el-option v-for="item in setMap.companyType" :key="item" :label="item.label" :value="item.company_type"></el-option>
							</el-select>
						</el-form-item>
						<el-form-item label="公司地址" prop="address">
							<el-input v-model="form.address" placeholder="请输入公司地址" clearable></el-input>
						</el-form-item>
						<el-form-item label="公司LOGO" prop="logo">
							<ossImgUpload @parentParams="parentParams" :url="form.logo" />
						</el-form-item>
						<el-form-item label="备注" prop="remark">
							<el-input type="textarea" placeholder="请输入备注"></el-input>
						</el-form-item>
					</el-col>
					<el-col :span="1" style="display: flex;align-items: center;justify-content: center;" v-if="form.is_admin"><div class="solid"></div></el-col>
					<el-col :span="12" v-if="form.is_admin">
						<div class="dialogBoxTitle"><span class="make"></span><span class="name">企业管理员信息</span></div>
						<el-form-item label="负责人/联系方式" required>
							<el-row justify="space-between">
								<el-col :span="5">
									<el-form-item prop="owner">
										<el-input v-model="form.owner" placeholder="负责人"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="7">
									<el-form-item prop="mobile">
										<el-input v-model="form.mobile" placeholder="联系方式"></el-input>
									</el-form-item>
								</el-col>
								<el-col :span="10">
									<el-form-item prop="email">
										<el-input v-model="form.email" placeholder="邮箱地址"></el-input>
									</el-form-item>
								</el-col>
							</el-row>
						</el-form-item>
						<el-form-item label="账号" prop="admin_account">
							<el-input v-model="form.admin_account" placeholder="请填写管理员账号"></el-input>
						</el-form-item>
						<el-form-item label="登录密码" prop="password" v-if="mode == 'add'">
							<el-input v-model="form.password" type="password" placeholder="请填写密码"></el-input>
						</el-form-item>
						<el-form-item label="生成系统使用协议" prop="accord">
							<el-switch v-model="form.accord" :active-value="1" :inactive-value="0"></el-switch>
						</el-form-item>
						<el-form-item label="证件照" prop="doc_url">
							<ossImgListUpload :list="form.doc_url" :length="3" @parentParams="faultParentParams" />
							<p class="el-form-item-msg">可接受格式为：jpg、jpeg、png、gif，图片大小不超过5M。</p>
							<p class="el-form-item-msg">可接受证件类型:营业执照、组织机构代码证、统一社会信用代码证、事业单位法人证书。</p>
							<p class="el-form-item-msg">可以添加"高德开放平台备案、地图开发申请、地图开发认证"等水印。</p>
							<p class="el-form-item-msg">但不能遮挡关键信息，例如公司名称、公司证件号。</p>
						</el-form-item>
					</el-col>
				</el-row>
			</el-form>
		</el-scrollbar>
		<template #footer>
			<el-button @click="visible=false" >取 消</el-button>
			<el-button v-if="mode!='show'" type="primary" :loading="isSave" @click="submit()">保 存</el-button>
		</template>
	</el-dialog>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增公司资料',
				edit: '编辑公司资料',
			},
			setMap:{
				companyType:[]
			},

			visible: false,
			isSave: false,
			//表单数据
			form: {
				id:"",
				is_admin:false,
				domain: "",
				company_type: "",
				name: "",
				full_name:"",
				address:"",
				email:"",
				logo:"",
				doc_url:[],
				owner:"",
				mobile:"",
				admin_account:"",
				password:"",
				remark: "",
				accord:1
			},
			//验证规则
			rules: {
				full_name: [
					{required: true, message: '公司名称不能为空', trigger: 'blur'}
				],
				name:[
					{required: true, message: '公司简称不能为空', trigger: 'blur'}
				],
				company_type:[
					{required: true, message: '公司类型不能为空', trigger: 'change'}
				],
				address:[
					{required: true, message: '请填写公司地址', trigger: 'blur'}
				],
				email:[
					{required: true, message: '请填写邮件地址', trigger: 'blur'}
				],
				mobile:[
					{required: true, message: '请填写联系方式', trigger: 'blur'}
				],
				logo:[
					{required: false, message: '公司LOGO不能为空'}
				],
				doc_url:[
					{required: false, message: '证件照不能为空'}
				],
				owner:[
					{required: true, message: '负责人不能为空', trigger: 'blur'}
				],
				admin_account: [
					{required: true, message: '账号不能为空', trigger: 'blur'}
				],
				password: [
					{required: true, message: '密码不能为空', trigger: 'blur'}
				],
				accord:[
					{required: true, message: '系统协议不能为空', trigger: 'change'}
				]
			},
		}
	},
	mounted() {
		this.getCompanyTypeSelect(true);
	},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;

			return this
		},
		// 加载公司类型
		async getCompanyTypeSelect(e){
			if(!e) return
			const res = await this.$API.system.company.typeSelect.post();
			if(res.code == 200){
				this.setMap['companyType'] = res.data;
			}
		},
		faultParentParams(item){
			this.form.doc_url = item;
		},
		parentParams(item){
			this.form.logo = item;
		},
		//表单提交方法
		submit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSave = true;
					let res
					if(this.mode == "add"){
						res = await this.$API.system.company.add.post(this.form);
					}else{
						res = await this.$API.system.company.update.post(this.form);
					}
					this.isSave = false;
					if(res.code == 200){
						this.$emit('success', this.form, this.mode);
						this.visible = false;
						this.$message.success("操作成功")
					}
				}
			})
		},
		//表单注入数据
		async setData(data) {
			let params = {
				id:data.id
			}
			const res = await this.$API.system.company.info.post(params);
			if(res.code == 200){
				this.form.id = res.data.id;
				this.form.domain = res.data.domain;
				this.form.company_type = res.data.company_type;
				this.form.name = res.data.name;
				this.form.full_name = res.data.full_name;
				this.form.address = res.data.address;
				this.form.email = res.data.platform_user && res.data.platform_user.email?res.data.platform_user.email:'';
				this.form.logo = res.data.logo;
				this.form.doc_url = res.data.doc_attach && res.data.doc_attach.length>0?res.data.doc_attach.map(em=>em.doc_url):[];
				this.form.owner = res.data.owner;
				this.form.mobile = res.data.mobile;
				this.form.admin_account = res.data.admin_account;
				this.form.password = res.data.password;
				this.form.remark = res.data.remark;
				this.form.accord = 1;
				this.form.is_admin = res.data.is_admin?res.data.is_admin:false;
			}
		}
	}
}
</script>

<style lang="scss" scoped>
	.dialogBoxTitle{
		margin-bottom: 20px;
		display: flex;
		align-items: center;
		.make{
			height: 14px;
			width: 4px;
			border-radius: 10px;
			margin-right: 8px;
			background: var(--el-color-primary);
		}
	}
	.dialogHeader{
		display: flex;justify-content: space-between;
		padding-right: 20px;
		.name{
			font-size: 17px;
			font-weight: bold;
			flex: 1;
		}
		.addBtn{
			display: flex;align-items: center;
			color: var(--el-text-color-regular);
			font-size: 14px;
			.icon{
				transform: rotate(-45deg);
			}
		}
	}
	.addFlex{
		flex: 1;
		.rightIcon{
			transform: rotate(135deg);
		}
	}
	.btnFlex{
		cursor: pointer;
		display: flex;align-items: center;
	}
	.solid{
		height: 100%;
		border-left: 1px dashed var(--el-border-color);
	}
</style>
