<template>
	<view class="page-wrapper bgF2">
		<JHeaderTitle :back="false" :logOut="true" title="完善资料" :bgColor="userInfo.state == 3 ? '#ff4c5b' : '#f2f2f2'"></JHeaderTitle>
		<view class="page-header" v-if="userInfo.state == 3">
			<image src="/static/iconImg/icon-striped.svg" mode="scaleToFill" />
			<view class="tips">您的资料审核失败，请修改后重新提交</view>
			<view class="why">驳回原因：{{ userInfo.auditRemark }}</view>
		</view>
		<JMainCard wrapPd="0 30rpx" pd="0x">
			<JInput name="代理商类型" v-model:value="userInfo.agentType" :img="true" :isBorder="true" @tap="select.open({ type: 0, value: userInfo.agentType })">
				<view class="agent-type">{{ userInfo.agentType == 1 ? '个人' : '企业' }}</view>
			</JInput>
		</JMainCard>
		<JMainCard wrapPd="30rpx" pd="0">
			<template v-if="userInfo.agentType === 1">
				<JInput name="代理商全称" v-model:value="userInfo.agentName" :rules="{ name: 'agentName', rule: 'REG_NotNUll' }" place="请输入代理商全称"></JInput>
				<JInput name="代理商简称" v-model:value="userInfo.agentShortName" :rules="{ name: 'agentShortName', rule: 'REG_NotNUll' }" place="请输入代理商简称"></JInput>
			</template>
			<template v-if="userInfo.agentType === 2">
				<JInput name="企业全称" v-model:value="userInfo.agentName" :rules="{ name: 'agentName', rule: 'REG_NotNUll' }" place="请输入企业全称"></JInput>
				<JInput name="企业简称" v-model:value="userInfo.agentShortName" :rules="{ name: 'agentShortName', rule: 'REG_NotNUll' }" place="请输入代理商简称"></JInput>
			</template>
			<JInput name="联系人姓名" v-model:value="userInfo.contactName" :rules="{ name: 'contactName', rule: 'REG_NotNUll' }" place="请输入联系人姓名"></JInput>
			<JInput name="联系人邮箱" v-model:value="userInfo.contactEmail" place="请输入邮箱"></JInput>
		</JMainCard>
		<JMainCard wrapPd="0 30rpx" pd="0">
			<template v-if="userInfo.agentType === 1">
				<JUpLoad name="联系人身份证人像面" v-model:value="userInfo.idcard1Img"></JUpLoad>
				<JUpLoad name="联系人身份证国徽面" v-model:value="userInfo.idcard2Img" :rules="{ name: 'idcard2Img', rule: 'REG_NotNUll' }"></JUpLoad>
				<JUpLoad v-model:value="userInfo.idcardInHandImg" :rules="{ name: 'idcardInHandImg', rule: 'REG_NotNUll' }">
					<template #title>
						<view class="title">
							<text>[联系人]手持承诺函照片</text>
							<uni-icons type="help-filled" size="22" color="#c6c6c6" @tap="refTips.open(userInfo.promiseFile)" />
						</view>
					</template>
				</JUpLoad>
			</template>
			<template v-if="userInfo.agentType === 2">
				<JUpLoad name="营业执照" v-model:value="userInfo.licenseImg" :rules="{ name: 'licenseImg', rule: 'REG_NotNUll' }" borderNone></JUpLoad>
				<JUpLoad name="法人身份证人像面" v-model:value="userInfo.idcard1Img" :rules="{ name: 'idcard1Img', rule: 'REG_NotNUll' }"></JUpLoad>
				<JUpLoad name="法人身份证国徽面" v-model:value="userInfo.idcard2Img" :rules="{ name: 'idcard2Img', rule: 'REG_NotNUll' }"></JUpLoad>
				<JUpLoad v-model:value="userInfo.idcardInHandImg" :rules="{ name: 'idcardInHandImg', rule: 'REG_NotNUll' }">
					<template #title>
						<view class="title">
							<text>[联系人]手持承诺函照片</text>
							<uni-icons type="help-filled" size="22" color="#c6c6c6" @tap="refTips.open(userInfo.promiseFile)" />
						</view>
					</template>
				</JUpLoad>
			</template>
		</JMainCard>
		<JMainCard wrapPd="30rpx 30rpx 40rpx 30rpx" pd="0">
			<JInput
				name="收款账户类型"
				v-model:value="userInfo.settAccountType"
				:img="true"
				:isBorder="true"
				@tap="select.open({ type: 1, value: userInfo.settAccountType, agentType: userInfo.agentType })"
			>
				<view class="agent-type">{{ settAccountType[userInfo.settAccountType] }}</view>
			</JInput>
            <template  v-if="userInfo.settAccountType" >
                <JInput name="账户姓名" v-model:value="userInfo.settAccountName" :rules="{ name: 'settAccountName', rule: 'REG_NotNUll' }" place="请输入账户姓名" ></JInput>
            </template>
			<template v-if="userInfo.settAccountType === 'BANK_PRIVATE'">
				<JUpLoad name="收款银行卡照片" v-model:value="userInfo.bankCardImg"></JUpLoad>
				<JInput name="开户银行名称" v-model:value="userInfo.settAccountBank" :rules="{ name: 'settAccountBank', rule: 'REG_NotNUll' }" place="请输入开户银行名称"></JInput>
				<JInput name="收款银行卡号" v-model:value="userInfo.settAccountNo" :rules="{ name: 'settAccountNo', rule: 'REG_NotNUll' }" place="请输入收款银行卡号"></JInput>
			</template>
			<template v-if="userInfo.settAccountType === 'WX_CASH'">
				<JInput name="个人微信号" v-model:value="userInfo.settAccountNo" :rules="{ name: 'settAccountNo', rule: 'REG_NotNUll' }" place="请输入个人微信号"></JInput>
			</template>
			<template v-if="userInfo.settAccountType === 'ALIPAY_CASH'">
				<JInput name="支付宝账号" v-model:value="userInfo.settAccountNo" :rules="{ name: 'settAccountNo', rule: 'REG_NotNUll' }" place="请输入支付宝账号"></JInput>
			</template>
       
			<template v-if="userInfo.settAccountType === 'BANK_PUBLIC'">
				<JUpLoad name="开户许可证照片" v-model:value="userInfo.permitImg" :rules="{ name: 'permitImg', rule: 'REG_NotNUll' }"></JUpLoad>
				<JInput name="对公账号" v-model:value="userInfo.settAccountNo" :rules="{ name: 'settAccountNo', rule: 'REG_NotNUll' }" place="请输入对公账号"></JInput>
				<JInput name="开户银行名称" v-model:value="userInfo.settAccountBank" :rules="{ name: 'settAccountBank', rule: 'REG_NotNUll' }" place="请输入开户银行名称"></JInput>
				<JInput
					name="开户行支行名称"
					v-model:value="userInfo.settAccountSubBank"
					:rules="{ name: 'settAccountSubBank', rule: 'REG_NotNUll' }"
					place="请输入开户行支行名称"
				></JInput>
			</template>
		</JMainCard>
		<JButton
			pd="0 30rpx 50rpx 30rpx"
			@HandleTouch="tips.open('选择企业后可设置收款账户为对公账户，但需要上传营业执照及法人信息。')"
			:bgColor="userInfo.state == 3 ? '#ff4c5b' : '$primaryColor'"
		>
			{{ userInfo.state == 3 ? '重新提交' : '提交' }}
		</JButton>
	</view>
	<Selected ref="select" @synData="synData"></Selected>
	<JDeletedTips ref="tips" @confirm="submit" />
	<JTipsPopupContent ref="refTips" />
</template>

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import { $getMainUserInfo, $auditInfo } from '@/http/apiManager.js';
import JHeaderTitle from '@/components/newComponents/JHeaderTitle/JHeaderTitle.vue';
import JMainCard from '@/components/newComponents/JMainCard/JMainCard';
import JInput from '@/components/newComponents/JInput/JInput';
import JUpLoad from '@/components/newComponents/JUpLoad/JUpLoad';
import JButton from '@/components/newComponents/JButton/JButton';
import JDeletedTips from '@/components/newComponents/JDeletedTips/JDeletedTips';
import Selected from './component/Selected';
import JTipsPopupContent from './component/JTipsPopupContent.vue';
import { validateArray } from '@/hooks/rules';
onLoad(() => {
	getMainUserInfo();
});

const select = ref(null);
const tips = ref(null);
const refTips = ref(null);
const userInfo = ref({
	agentType: 1,
	settAccountType: 'BANK_PRIVATE'
});
const settAccountType = reactive({
	BANK_PRIVATE: '对私账户',
	BANK_PUBLIC: '对公账户',
	WX_CASH: '个人微信',
	ALIPAY_CASH: '个人支付宝'
});
const synData = data => {
	switch (data.type) {
		case 0:
			userInfo.value.agentType = data.value;
			break;
		case 1:
			userInfo.value.settAccountType = data.value;
			break;
	}
};
const getMainUserInfo = () => {
	$getMainUserInfo().then(({ bizData }) => {
		userInfo.value = bizData;
		if (userInfo.value.state == 2 || userInfo.value.state == 1) {
			return uni.reLaunch({ url: './readOnlyInformation' });
		}
	});
};
const submit = () => {
	if (validateArray(userInfo.value)) {
		uni.showLoading({
			title: '提交中',
			mask: true
		});
		$auditInfo(userInfo.value).then(res => {
			uni.hideLoading();
			uni.showToast({ title: '提交成功', icon: 'success', mask: true });
			getMainUserInfo();
		});
	}
};
</script>

<style lang="scss" scoped>
.page-wrapper {
	width: 100%;
	.page-header {
		position: relative;
		display: flex;
		flex-direction: column;
		justify-content: center;
		align-items: center;
		background-color: #ff4c5b;
		// padding-bottom: 47rpx;
		margin-bottom: 20rpx;
		image {
			width: 48.76rpx;
			height: 57.67rpx;
		}
		view {
			font-size: 28rpx;
			color: #ffd9dc;
		}
		.tips {
			margin: 50rpx 0;
		}
		.why {
			flex-grow: 1;
			min-width: 626rpx;
			word-break: break-all;
			padding: 30rpx 62rpx;
			background-color: rgba(255, 255, 255, 0.2);
			border-radius: 32rpx 32rpx 0px 0px;
		}
	}
	.agent-type {
		font-size: 33rpx;
		color: #666666;
	}
}
.title {
	display: flex;
	align-items: center;
	vertical-align: middle;
	text {
		margin-right: 5rpx;
		vertical-align: middle;
	}
}
</style>
