<template>
	<view class="content">
		<u-overlay :show="overlayShow"></u-overlay>
		<view class="container">
			<headers :titles="titles"><uni-icons type="arrow-left" color="#fff" size="22px"></uni-icons></headers>
			<view class="h-box">
				<view class="">代理商名称</view>
				<view class="right-input">
					<input type="text" placeholder="请输入代理商名称" v-model="agentInfo.agentName" />
				</view>

			</view>
			<view class="h-box">
				<view class="">法人姓名</view>
				<view class="right-input">
					<input type="text" placeholder="请输入法人姓名" v-model="agentInfo.corpName" />
				</view>
			</view>
			<view class="h-box">
				<view class="">法人手机号</view>
				<view class="right-input">
					<input type="text" placeholder="请输入法人手机号" v-model="agentInfo.corpPhone" />
				</view>

			</view>
			<view class="h-box">
				<view class="">结算卡号</view>
				<view class="right-input">
					<input type="text" placeholder="请输入结算卡号" v-model="agentInfo.accNo" />
				</view>
			</view>
			<view class="h-box">
				<view class="">账户名称</view>
				<view class="right-input">
					<input type="text" placeholder="请输入账户名称" v-model="agentInfo.accName" />
				</view>
			</view>
			<view class="h-box">
				<view class="">银行名称</view>
				<!-- <view class="d-s" @click="show= true">
					<view class="hui-size">请选择银行</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view> -->
				<view class="d-s" @click="gobankList()">
					<view class="hui-size">{{this.agentInfo.bankName}}</view>
					<u-icon name="arrow-right" size="16"></u-icon>
				</view>
			</view>
			<view class="h-box">
				<view class="">预留手机号</view>
				<view class="right-input">
					<input type="text" placeholder="请输入预留手机号" v-model="agentInfo.mobile" />
				</view>
			</view>
			<view class="h-box">
				<view class="">员工工号</view>
				<view class="right-input">
					<input type="text" placeholder="员工工号(非必填)" v-model="agentInfo.mobile" />
				</view>
			</view>
			<view class="bs-img">
				<view class="">
					<u-upload :fileList="fileList1" @afterRead="addInfoImg" @delete="deletePic" name="1" :maxCount="1"
						width="160" height="80">
						<image src="/static/imgs/ghimg.png" mode="widthFix" style="width: 160px;height: 80px;"></image>
					</u-upload>
				</view>
				<view class="">
					<u-upload :fileList="fileList2" @afterRead="addInfoImg" @delete="deletePic" name="2" multiple
						:maxCount="1" width="160" height="80">
						<image src="/static/imgs/ghimg.png" mode="widthFix" style="width: 160px;height: 80px;"></image>
					</u-upload>
				</view>

			</view>
			<view class="bs-img">
				<view class="">
					<u-upload :fileList="fileList3" @afterRead="addInfoImg" @delete="deletePic" name="3" multiple
						:maxCount="1" width="160" height="80">
						<image src="/static/imgs/ghimg.png" mode="widthFix" style="width: 160px;height: 80px;"></image>
					</u-upload>
				</view>
			</view>
			<view class="bs-img">

			</view>
			<view class="bottom_a" v-if="canAudit==1">
				<view class="a_" @click="auditAgent(2)">审核通过</view>
				<view class="a_" @click="showl=true">审核拒绝</view>
			</view>
			<view class="bottom_">
				<view class="left-b" v-if="auditStatus==0&&canUpdate==1" @click="editTwoAgent()">补全信息</view>
				<view class="right-b" v-if="auditStatus==0||auditStatus==2" @click="goRate()">费率设置</view>
			</view>
			<!-- <view class="annniu">
				提交
			</view> -->
			<u-popup :show="showl" mode="center" :round="10" @close="showl = false" @open="open">
				<view class="pop-box">
					<image src="../../static/imgs/shjj.png" mode=""></image>
					<view class="pop-title">审核拒绝</view>
					<u--textarea v-model="auditInfo.remarks" placeholder="请填写拒绝理由"></u--textarea>
					<view class="pop-anniu" @click="auditAgent(3)">提交</view>
				</view>
			</u-popup>
			<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		</view>

	</view>
</template>

<script>
	import request from '../../utils/request.js'
	import headers from '../../components/header/headers.vue'
	import upload from '@/utils/upload.js'
	export default {
		data() {
			return {
				overlayShow: false,
				showl: false,
				bankName: '',
				agentInfo: {},
				agentImg: {},
				objectId: '',
				canAudit: null,
				canUpdate: null,
				auditStatus: null,
				titles: "添加代理商",
				fileList1: [],
				fileList2: [],
				fileList3: [],
				show: false,
				columns: [
					['银行', '银行', '银行']
				],

				auditInfo: {
					agentId: null,
					auditStatus: null,
					remarks: null
				}

			}
		},
		onShow() {},
		onLoad(option) {
			this.bankName = option.bankName;
			this.objectId = option.objectId;
			this.getAgentInfo()
			uni.$on('bankIdzx', (res) => {
				this.agentInfo.bankName = res
				console.log('zx监听到了', res)
			})
		},
		components: {
			headers
		},
		methods: {
			auditAgent(audit) {
				if (audit == 3) {
					if (!this.auditInfo.remarks) {
						uni.showToast({
							title: "请填写拒绝理由"
						})
						return
					}
				}
				this.auditInfo.auditStatus = audit
				request({
					url: '/app/uaAgent/auditAgent',
					method: 'post',
					data: this.auditInfo
				}).then(res => {
					uni.navigateBack()
				})
			},
			editTwoAgent() {
				request({
					url: '/app/uaAgent/editTwoAgent',
					method: 'post',
					data: this.agentInfo
				}).then(res => {
					uni.navigateBack()
				})
			},
			async uploadFile(url, fileName, type) {
				uni.showLoading({
					title: '上传中'
				});
				this.overlayShow = true
				upload({
					url: 'app/base/upload',
					filePath: url,
					name: 'test'

				}).then((res) => {
					let that = this
					if (res.code == 0) {

						if (type == 1) {
							this.agentInfo.idCardZ = res.url
						} else if (type == 2) {
							this.agentInfo.idCardF = res.url
						} else if (type == 3) {
							this.agentInfo.idCardInPerson = res.url
						}

					}
				}).finally((res) => {
					this.overlayShow = false
					uni.hideLoading();
				})
			},
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)

			},
			//银行卡信息
			async addInfoImg(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,

					})
				})
				for (let i = 0; i < lists.length; i++) {
					const result = await this.uploadFile(lists[i].url, lists[i].name, event.name)
					let item = this[`fileList${event.name}`][fileListLen]
					this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
						status: 'success',
						message: '',
						url: result
					}))
					fileListLen++
				}
			},
			//获取代理商详情
			getAgentInfo() {
				request({
					url: '/app/uaAgent/agentInfo',
					method: 'post',
					data: {
						objectId: this.objectId
					}
				}).then(res => {

					this.agentInfo = res.agentInfo
					this.agentImg = res.agentImg
					this.canAudit = res.canAudit
					this.canUpdate = res.canUpdate
					this.auditStatus = res.agentInfo.auditStatus
					this.auditInfo.agentId = this.agentInfo.id
					//处理图片问题
					if (this.agentImg.idCardZ) {
						this.fileList1 = []
						let tempImg1 = {
							url: this.agentImg.idCardZ,
						}
						this.fileList1.push(tempImg1)
						this.agentInfo.idCardZ = this.agentImg.idCardZ
					}
					if (this.agentImg.idCardF) {
						this.fileList2 = []
						let tempImg2 = {
							url: this.agentImg.idCardF
						}
						this.fileList2.push(tempImg2)
						this.agentInfo.idCardF = this.agentImg.idCardF
					}
					if (this.agentImg.idCardInPerson) {
						this.fileList3 = []
						let tempImg3 = {
							url: this.agentImg.idCardInPerson
						}
						this.fileList3.push(tempImg3)
						this.agentInfo.idCardInPerson = this.agentImg.idCardInPerson
					}
				})
			},
			gobankList() {
				uni.navigateTo({
					url: '/homePages/Agent/bankList'
				})
			},
			confirm() {
				this.show = false
			},
			cancel() {
				this.show = false
			},
			goback() {
				uni.navigateBack()
			},
			goRate() {
				uni.navigateTo({
					url: '/homePages/Agent/Rate?agentId=' + this.agentInfo.id
				})
			}
		}
	}
</script>

<style scoped lang="scss">
	.content {
		background: #fff;
		height: 100vh;
	}

	.container {
		width: 100%;
		background: #fff;
		box-sizing: border-box;
		padding-top: 88px;
	}

	.h-box {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;
		border-bottom: 1px solid #e3e3e3;
	}

	.d-s {
		display: flex;
		align-items: center;
	}

	.right-input {
		text-align: right;
	}

	.hui-size {
		color: #a3a3a3;
	}

	.bs-img {
		display: flex;
		align-items: center;
		justify-content: space-between;
		box-sizing: border-box;
		padding: 15px;

	}

	.annniu {
		width: 100%;
		height: 45px;
		display: flex;
		align-items: center;
		justify-content: center;
		background: #E4612E;
		color: white;
	}

	.bottom_ {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-between;
	}

	.bottom_a {
		width: 100%;
		display: flex;
		align-items: center;
		justify-content: space-around;
	}

	.a_ {
		width: 150px;
		height: 40px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		background: #E4612E;

	}

	.pop-anniu {
		width: 150px;
		height: 25px;
		border-radius: 50px;
		display: flex;
		align-items: center;
		justify-content: center;
		color: white;
		background: #E4612E;
		margin: 15px auto;
	}

	.pop-title {
		margin: 10px auto;
		font-size: 18px;
		font-weight: bold;
		text-align: center;
		margin-top: 0px;
		margin-bottom: 20px;
	}

	.left-b {
		width: 50%;
		height: 40px;
		background: #E4612E;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: bold;

	}

	.right-b {
		width: 50%;
		height: 40px;
		background: #22ad38;
		display: flex;
		align-items: center;
		justify-content: center;
		color: #fff;
		font-weight: bold;
	}

	.pop-box {
		text-align: center;
		width: 300px;
		box-sizing: border-box;
		padding: 15px;
		border-radius: 8px;
		background: #fff;

		image {
			width: 45px;
			height: 45px;
		}
	}
</style>
