<template>
<el-drawer :title="titleMap[mode]" v-model="visible" :size="1000" destroy-on-close :close-on-click-modal="false" @closed="$emit('closed')">
	<el-main>
		<el-form ref="dialogForm" :model="form" :rules="rules" label-width="120px">
			<el-form-item label="商户类型" prop="merchant_type">
				<el-select v-model="form.merchant_type" placeholder="请选择商户类型" style="width: 240px;" :disabled="mode == 'show'">
					<el-option v-for="(item, index) in merchant_type_list" :key="index" :label="item.label" :value="item.value"></el-option>
				</el-select>
			</el-form-item>
			<el-row>
				<el-col :span="12">
					<el-form-item label="商户名称" prop="merchant_name">
						<el-input v-model="form.merchant_name" placeholder="请输入商户名称" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户简称" prop="merchant_short_name">
						<el-input v-model="form.merchant_short_name" placeholder="请输入商户简称" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="营业执照号" prop="business_code">
						<el-input v-model="form.business_code" placeholder="请输入营业执照号" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="营业执照全称" prop="business_name">
						<el-input v-model="form.business_name" placeholder="请输入营业执照全称" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="营业执照有效期" prop="business_expire">
						<el-date-picker v-model="form.business_expire" type="date" placeholder="请选择营业执照有效期" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="营业执照失效日期" prop="business_failure">
						<el-date-picker v-model="form.business_failure" type="date" placeholder="请选择营业执照失效日期" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="商户地址" prop="business_address">
						<el-input v-model="form.business_address" placeholder="请输入商户地址" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经营地址" prop="biz_address">
						<el-input v-model="form.biz_address" placeholder="请输入经营地址" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经营所在省" prop="province">
						<el-input v-model="form.province" placeholder="请输入经营所在省" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经营所在市" prop="city">
						<el-input v-model="form.city" placeholder="请输入经营所在市" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="20">
					<el-form-item label="经营所在区" prop="region">
						<el-input v-model="form.region" placeholder="请输入经营所在区" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="business_pic">
						<sc-upload v-model="form.business_pic" title="营业执照" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider>法人信息</el-divider>
			<el-row>
				<el-col :span="12">
					<el-form-item label="法人姓名" prop="lawyer_name">
						<el-input v-model="form.lawyer_name" placeholder="请输入法人姓名" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人手机号" prop="lawyer_phone">
						<el-input v-model="form.lawyer_phone" placeholder="请输入法人手机号" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人证件类型" prop="lawyer_id_type">
						<el-select v-model="form.lawyer_id_type" placeholder="请选择法人证件类型" style="width: 240px;" :disabled="mode == 'show'">
							<el-option v-for="(item, index) in id_type_list" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人身份证号" prop="lawyer_id">
						<el-input v-model="form.lawyer_id" placeholder="请输入法人身份证号" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人证件有效期" prop="lawyer_id_expire">
						<el-date-picker v-model="form.lawyer_id_expire" type="date" placeholder="请选择法人证件有效期" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人证件失效日期" prop="lawyer_id_failure">
						<el-date-picker v-model="form.lawyer_id_failure" type="date" placeholder="请选择法人证件失效日期" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人证件国别" prop="lawyer_country">
						<el-select v-model="form.lawyer_country" placeholder="请选择法人证件国别" style="width: 240px;" :disabled="mode == 'show'">
							<el-option v-for="(item, index) in [{label: '中国', value: '249'}]" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人职业" prop="lawyer_work">
						<el-select v-model="form.lawyer_work" placeholder="请选择法人职业" style="width: 240px;" :disabled="mode == 'show'">
							<el-option v-for="(item, index) in lawyer_work" :key="index" :label="item.label" :value="item.value"></el-option>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人性别" prop="lawyer_sex">
						<el-select v-model="form.lawyer_sex" placeholder="请选择法人性别" style="width: 240px;" :disabled="mode == 'show'">
							<el-option v-for="(item, index) in [{label: '男', value: '1'}, {label: '女', value: '2'}]" :key="index" :label="item.label" :value="item.value"	/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="法人地址" prop="lawyer_address">
						<el-input v-model="form.lawyer_address" placeholder="请输入法人地址" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="lawyer_id_pic_front">
						<sc-upload v-model="form.lawyer_id_pic_front" title="法人身份证正面" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="lawyer_id_pic_back">
						<sc-upload v-model="form.lawyer_id_pic_back" title="法人身份证反面" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="lawyer_id_hand_front">
						<sc-upload v-model="form.lawyer_id_hand_front" title="法人手持身份证正面" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider>结算账户</el-divider>
			<el-row>
				<el-col :span="12">
					<el-form-item label="结算账户类型" prop="account_card_type">
						<el-select v-model="form.account_card_type" placeholder="请选择结算账户类型" style="width: 240px;" :disabled="mode == 'show'">
							<el-option v-for="(item, index) in [{label: '对公账户', value: '11'}, {label: '对私账户', value: '21'}]" :key="index" :label="item.label" :value="item.value"
							/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结算账户卡号" prop="account_cardno">
						<el-input v-model="form.account_cardno" placeholder="请输入结算账户卡号" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结算账户名称" prop="account_cardno_name">
						<el-input v-model="form.account_cardno_name" placeholder="请输入结算账户名称" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="开户行省" prop="open_acc_province">
						<el-input v-model="form.open_acc_province" placeholder="请输入开户行省" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="开户行市" prop="open_acc_city">
						<el-input v-model="form.open_acc_city" placeholder="请输入开户行市" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="开户行区" prop="open_acc_area">
						<el-input v-model="form.open_acc_area" placeholder="请输入开户行区" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="24">
					<el-form-item label="开户行编号" prop="open_acc_banktype">
						<el-input v-model="form.open_acc_banktype" placeholder="请输入开户行编号" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item prop="account_card_pic_front">
						<sc-upload v-model="form.account_card_pic_front" title="企业商户为开户许可证" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider>经办人信息</el-divider>
			<el-row>
				<el-col :span="12">
					<el-form-item label="经办人姓名" prop="person_name">
						<el-input v-model="form.person_name" placeholder="请输入经办人姓名" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经办人身份证号" prop="person_id">
						<el-input v-model="form.person_id" placeholder="请输入经办人身份证号" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经办人手机号" prop="person_phone">
						<el-input v-model="form.person_phone" placeholder="请输入经办人手机号" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经办人邮箱" prop="person_email">
						<el-input v-model="form.person_email" placeholder="请输入经办人邮箱" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="经办人地址" prop="person_address">
						<el-input v-model="form.person_address" placeholder="请输入经办人地址" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
			</el-row>
			<el-divider>其他信息</el-divider>
			<el-row>
				<el-col :span="12">
					<el-form-item label="MCC码" prop="mcc_code">
						<el-input v-model="form.mcc_code" placeholder="请输入MCC码" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="最低结算金额" prop="lowest_stl_amt">
						<el-input v-model="form.lowest_stl_amt" placeholder="请输入最低结算金额" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="结算类型" prop="settle_type">
						<el-select v-model="form.settle_type" placeholder="请选择结算类型" style="width: 240px;" :disabled="mode == 'show'">
							<el-option v-for="(item, index) in [{label: '银行账户', value: '01'}, {label: '平台内账户', value: '02'}]" :key="index" :label="item.label" :value="item.value" />
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="12">
					<el-form-item label="报备类型" prop="report_type">
						<el-select v-model="form.reportType" placeholder="请选择结算周期" style="width: 240px;" :disabled="mode == 'show'">
							<el-option v-for="(item, index) in [{label: '自动报备', value: '01'}, {label: '手动报备', value: '02'}]" :key="index" :label="item.label" :value="item.value"	/>
						</el-select>
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="door_front_pic">
						<sc-upload v-model="form.door_front_pic" title="门头照图片" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="cashier_pic">
						<sc-upload v-model="form.cashier_pic" title="收银台照图片" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
				<el-col :span="8">
					<el-form-item prop="scene_pic">
						<sc-upload v-model="form.scene_pic" title="场景照图片" :disabled="mode == 'show'" />
					</el-form-item>
				</el-col>
			</el-row>
		</el-form>
	</el-main>
	<template #footer>
		<el-button type="primary" @click="onSubmit" :disabled="mode == 'show'">确认提交</el-button>
	</template>
</el-drawer>
</template>

<script>
export default {
	emits: ['success', 'closed'],
	data() {
		return {
			mode: "add",
			titleMap: {
				add: '新增进件',
				edit: '编辑进件'
			},
			form: {},
			rules: {
			},
			merchant_type_list: [
				{label: '个体商户', value: '01'},
				{label: '企业商户', value: '02'},
				{label: '小微商户', value: '03'}
			],
			id_type_list: [
				{label: '身份证', value: '00'},
				{label: '中国护照', value: '01'},
				{label: '军人身份证', value: '02'},
				{label: '警官证', value: '03'},
				{label: '户口簿', value: '04'},
				{label: '临时身份证', value: '05'},
				{label: '外国护照', value: '06'},
				{label: '港澳通行证', value: '07'},
				{label: '台胞通行证', value: '08'},
				{label: '其他证件', value: '18'},
				{label: '营业执照', value: '19'}
			],
			lawyer_work: [
				{label: '机关团体企事业单位', value: '1'},
				{label: '公共事业', value: '2'},
				{label: '农牧业', value: '3'},
				{label: '交通运输业', value: '4'},
				{label: '餐旅业', value: '5'},
				{label: '建筑工程业', value:'6'},
				{label: '制造业', value: '7'},
				{label: '医疗保健业', value: '8'},
				{label: '娱乐业', value: '9'},
				{label: '其他', value: '10'}
			],
			visible: false,
			isSaveing: false,
			cache: {}
		}
	},
	mounted() {
	},
	methods: {
		//显示
		open(mode='add'){
			this.mode = mode;
			this.visible = true;
			return this;
		},
		//表单提交方法
		onSubmit(){
			this.$refs.dialogForm.validate(async (valid) => {
				if (valid) {
					this.isSaveing = true;
					let res
					if(this.form.id){
						res = await this.$API.store.merchant.edit.post(this.form);
					}else{
						res = await this.$API.store.merchant.add.post(this.form);
					}

					this.isSaveing = false;
					if(res.code == 1){
						this.$emit('success', res.data)
						this.visible = false;
						this.$message.success("操作成功")
					}else{
						this.$message.error(res.message)
					}
				}
			})
		},
		//表单注入数据
		setData(data){
			this.loading = true
			Object.assign(this.form, data)
		}
	}
}
</script>
