<template>
	<view class="">
		<u-navbar leftIconColor="#000" title="新增店铺" :fixed="false" :safeAreaInsetTop="true" :placeholder="true"
			bgColor="#fff" :autoBack="false" @leftClick="leftBtn()">
		</u-navbar>
		<view class="Customer-name">
			<div class="name df aic jcsb">
				<div>店铺名称<span>*</span></div>
				<!-- <div>{{listnoew.title}}</div> -->
				<input v-model="title" type="text" style="text-align: right;">
			</div>
		</view>
		<!-- <view class="Customer-name">
			<div class="name df aic jcsb">
				<div>店铺编号<span>*</span></div>
				<div>{{listnoew.title}}</div>
				<input v-model="store_code" type="text" style="text-align: right;">
			</div>
		</view> -->
		<view class="Customer-name">
			<div class="name df aic jcsb">
				<div>店铺类型</div>
				<!-- <div>{{listnoew.title}}</div> -->
				<!-- <input v-model="store_type" type="text" style="text-align: right;"> -->
				<div class="df" @click="$refs.type.start()">
					{{store_type}}
					<u-icon name="arrow-right"></u-icon>
				</div>
			</div>
		</view>
		<view class="Customer-name">
			<div class="name df aic jcsb">
				<div>联系人姓名<span>*</span></div>
				<!-- <div>{{listnoew.title}}</div> -->
				<input v-model="contacts" type="text" style="text-align: right;">
			</div>
		</view>
		<view class="Customer-name">
			<div class="name df aic jcsb">
				<div>联系电话<span>*</span></div>
				<!-- <div>{{listnoew.title}}</div> -->
				<input v-model="phone" type="text" style="text-align: right;">
			</div>
		</view>
		<view class="Customer-name">
			<div class="name df aic jcsb">
				<div>电子邮箱</div>
				<!-- <div>{{listnoew.title}}</div> -->
				<input v-model="email" type="text" style="text-align: right;">
			</div>
		</view>


		<view class="Customer-name">
			<div class="name df aic jcsb" @click="show=true">
				<div>归属地区<span>*</span></div>
				<div class="df">
					{{address}}
					<u-icon name="arrow-right"></u-icon>
				</div>
			</div>
		</view>
		<view class="Customer-name">
			<div class="name df aic jcsb">
				<div>店铺地址<span>*</span></div>
				<!-- <div>{{listnoew.title}}</div> -->
				<input v-model="information" type="text" style="text-align: right;">
			</div>
		</view>
		<view class="Customer-name">
			<div class="name df aic jcsb">
				<div>资料附件<span>*</span></div>
				<div class="df" @click="showFile()">

					<u-icon name="arrow-right"></u-icon>
				</div>
			</div>
		</view>
		<view class="application df aic jcsa" @click="btn">
			提交申请
		</view>
		<type ref="type" @childEvent="getSchoolName"></type>
		<u-picker @cancel="show=false" @close="show=false" closeOnClickOverlay @confirm="confirm" :show="show"
			:columns="columns"></u-picker>
		<u-picker @cancel="show1=false" @close="show1=false" closeOnClickOverlay @confirm="confirmone" :show="show1"
			:columns="columnslist"></u-picker>
		<u-picker @cancel="show2=false" @close="show2=false" closeOnClickOverlay @confirm="confirmtwo" :show="show2"
			:columns="columnqu"></u-picker>
		<u-overlay :show="show3">

			<view class="head">
				<u-navbar title="附件上传" leftIconSize="0">
					<u-icon name="arrow-left" slot="left" color="#333333" size="24" @click="show3=false"></u-icon>
				</u-navbar>
				<!-- 资料附件 -->
				<view class="business">
					营业资质或医疗机构许可证
				</view>
				<view class="upload">
					请上传营业执照
				</view>
				<view class="Business df fdc aic" @click="license">
					<view class="" v-if="licen">
						<image style="width: 718rpx;height: 332rpx;margin-top: 0;" :src="$util.img(licen)" mode="">
						</image>
					</view>
					<view class="df fdc aic" v-else>
						<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
						<div class="Upload-pictures">上传图片</div>
						<div class="ask">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</view>
				</view>
				<view class="business-two">
					药品经营许可证
				</view>
				<view class="upload">
					请上传药品经营许可证
				</view>
				<view class="Business df fdc aic" @click="drug">
					<view class="" v-if="dru">
						<image style="width: 718rpx;height: 332rpx;margin-top: 0;" :src="$util.img(dru)" mode="">
						</image>
					</view>
					<view class="df fdc aic" v-else>
						<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
						<div class="Upload-pictures">上传图片</div>
						<div class="ask">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</view>
				</view>
				<view class="business-two">
					法人身份证
				</view>
				<view class="upload">
					请上传法人身份证
				</view>
				<view class="Business df fdc aic" @click="status">
					<!-- <view class="df aic" v-if="stat.length>=2">
						<image style="width: 359rpx;height: 332rpx;margin-top: 0;" :src="$util.img(stat[0])" mode="">
						</image>
						<image style="width: 359rpx;height: 332rpx;margin-top: 0;" :src="$util.img(stat[1])" mode="">
						</image>
					</view> -->
					<view class="df aic" v-if="stat.length>0">
						<image style="width: 718rpx;height: 332rpx;margin-top: 0;" :src="$util.img(stat)" mode="">
						</image>
					</view>
					<view class="df fdc aic" v-if="stat.length==0">
						<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
						<div class="Upload-pictures">上传图片</div>
						<div class="ask">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</view>
				</view>
				<view class="business-two">
					法人委托书
				</view>
				<view class="upload">
					请上传法人委托书
				</view>
				<view class="Business df fdc aic" @click="attorney">
					<!-- 	<view class="df aic" v-if="attorn.length>=2">
						<image style="width: 359rpx;height: 332rpx;margin-top: 0;" :src="$util.img(attorn[0])" mode="">
						</image>
						<image style="width: 359rpx;height: 332rpx;margin-top: 0;" :src="$util.img(attorn[1])" mode="">
						</image>
					</view> -->
					<view class="df aic" v-if="attorn.length>0">
						<image style="width: 718rpx;height: 332rpx;margin-top: 0;" :src="$util.img(attorn)" mode="">
						</image>
					</view>
					<view class="df fdc aic" v-if="attorn.length==0">
						<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
						<div class="Upload-pictures">上传图片</div>
						<div class="ask">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</view>
				</view>
				<view class="business-two">
					发票信息
				</view>
				<view class="upload">
					请上传发票信息
				</view>
				<view class="Business df fdc aic" @click="bill">
					<view class="" v-if="bil">
						<image style="width: 718rpx;height: 332rpx;margin-top: 0;" :src="$util.img(bil)" mode="">
						</image>
					</view>
					<view class="df fdc aic" v-else>
						<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
						<div class="Upload-pictures">上传图片</div>
						<div class="ask">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</view>
				</view>
				<view class="business-two">
					店铺logo
				</view>
				<view class="upload">
					请上传店铺logo
				</view>
				<view class="Business df fdc aic" @click="logo">
					<view class="" v-if="logoimg">
						<image style="width: 718rpx;height: 332rpx;margin-top: 0;" :src="$util.img(logoimg)" mode="">
						</image>
					</view>
					<view class="df fdc aic" v-else>
						<image :src="$util.img(`/upload/weapp/pageSalesman/search.png`)" mode=""></image>
						<div class="Upload-pictures">上传图片</div>
						<div class="ask">文件大小不超过10M，支持JPG\PNG\JPEG格式</div>
					</view>
				</view>
				<view class="df aic jcsa accomplish" @click="btn1">
					完成
				</view>
			</view>
		</u-overlay>
	</view>
</template>

<script>
	import type from "../Customer_details/type.vue"
	export default {
		components: {
			type
		},
		data() {
			return {
				autoBack: true,
				title: '',
				store_code: '',
				store_type: '',
				contacts: '',
				phone: '',
				email: '',
				address: '',
				information: '',
				show: false,
				show1: false,
				show2: false,
				show3: false,
				economize: '', //省id
				distinguish: '', //市的id
				jioauk: '', //区的id
				economizename: '', //省name
				distinguishme: '', //区name
				marketname: '', //市name
				columns: [],
				columnslist: [],
				columnqu: [],
				licen: '',
				dru: '',
				stat: [],
				attorn: [],
				logoimg: "",
				bil: '',
				id: ''

			};
		},
		mounted() {
			let _this = this
			setTimeout(() => {
				uni.$on('typename', (data) => {
					console.log(data, '小花');
					if (data[0]) {
						_this.store_type = data[0].name
					} else {
						_this.store_type = data.name
					}

				})
			}, 5000)
		},
		onUnload() {
			uni.$off('typename')
		},
		onShow() {
			this.$api.sendRequest({
				url: '/api/address/lists',
				data: {
					pid: 0
				},
				success: res => {
					this.list = res.data
					let a = []
					for (let i = 0; i < res.data.length; i++) {
						a.push(res.data[i].name)
					}

					this.columns = [a]

				}
			})
		},
		onLoad(e) {
			this.id = e.id
		},
		methods: {
			leftBtn() {
				uni.navigateTo({
					
					url: `/page_salesman_customer/Management/Management?status=${this.id}`
				})
			},
			showFile() {
				this.show3 = true;
				this.autoBack = false;
			},
			btn() {
				let handset = /^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\d{8}$/
				let postbox = /^\w+([-+.]\w+)*@\w+([-.]\w+)*\.\w+([-.]\w+)*$/
				if (!this.title.length > 0) {
					this.$util.showToast({
						title: '请填写店铺名称'
					});
					return
				}
				// if(!this.store_code.length>0){
				// 	this.$util.showToast({
				// 				title: '请填写店铺编号'
				// 	});
				// 	return
				// }
				// if(!this.store_type.length>0){
				// 	this.$util.showToast({
				// 				title: '请填写店铺类型'
				// 	});
				// 	return
				// }
				if (!this.contacts.length > 0) {
					this.$util.showToast({
						title: '请填写联系人姓名'
					});
					return
				}
				if (!this.phone.length > 0) {
					this.$util.showToast({
						title: '请填写联系人电话'
					});
					return
				}
				// if(!this.email.length>0){
				// 	this.$util.showToast({
				// 				title: '请填写电子邮箱'
				// 	});
				// 	return
				// }

				if (!this.address.length > 0) {
					this.$util.showToast({
						title: '请选择归属地区'
					});
					return
				}
				if (!this.information.length > 0) {
					this.$util.showToast({
						title: '请填写店铺地址'
					});
					return
				}

				if (!this.licen.length > 0) {
					this.$util.showToast({
						title: '请上传资料附件'
					});
					return
				}
				if (!handset.test(this.phone)) {

					this.$util.showToast({
						title: '请填写正确的手机号'
					});
					return
				}
				// if(!postbox.test(this.email)){
				// 	this.$util.showToast({
				// 				title: '请填写正确的电子邮箱'
				// 	});
				// 	return
				// }
				let obj = {
					title: this.title, //店铺名称
					member_id: this.id, //客户id
					store_code: this.store_code, //店铺编号
					store_type: this.store_type, //店铺类型
					contacts: this.contacts, //联系人姓名
					phone: this.phone, //联系人电话
					email: this.email, //电子邮箱
					address: this.information, //店铺地址
					province_id: this.economize, //省id
					city_id: this.distinguish, //市id
					district_id: this.jioauk, //区县id
					license: this.licen, //营业执照
					drugs_license: this.dru, //药品经营许可证
					card_images: this.stat, //法人身份证   多图
					trust_book_images: this.attorn, //法人委托书   多图
					invoice_images: this.bil, //发票
					logo: this.logoimg, //店铺logo
				};
				// if (!this.attorn.length) {
				// 	obj.trust_book_images = ''
				// }
				this.$api.sendRequest({
					url: `/api/salasman/addStore`,
					header: {
						'Content-Type': 'application/json' //自定义请求头信息
					},
					data: obj,
					success: res => {
						this.$util.showToast({
							title: '提交成功'
						});
						setTimeout(() => {
							uni.navigateTo({
								url: `/page_salesman_customer/Management/Management?status=${this.id}`,
							})
						}, 2000)
					}
				})

			},
			btn1() {
				if (this.licen.length == 0) {
					this.$util.showToast({
						title: '请上传营业执照'
					});
					return
				}
				if (this.dru.length == 0) {
					this.$util.showToast({
						title: '请上传药品经营许可证'
					});
					return
				}
				if (this.stat.length == 0) {
					this.$util.showToast({
						title: '请上传法人身份证'
					});
					return
				}
				if (this.stat.length == 0) {
					this.$util.showToast({
						title: '请上传法人身份证正反面'
					});
					return
				}
				// if (this.attorn.length == 0) {
				// 	this.$util.showToast({
				// 		title: '请上传法人委托书'
				// 	});
				// 	return
				// }
				// if(this.bil.length==0){
				// 	this.$util.showToast({
				// 		title: '请上传发票信息' 
				// 	});
				// 	return
				// }

				this.show3 = false
			},
			//营业执照
			license(type, size = 1) {
				this.$util.upload(size, {
					path: 'otherImage'
				}, res => {
					this.licen = res[0]
				})
			},
			//药品许可证
			drug(type, size = 1) {
				this.$util.upload(size, {
					path: 'otherImage'
				}, res => {
					this.dru = res[0]
				})
			},
			//法人身份证
			status(type, size = 1) {
				this.$util.upload(size, {
					path: 'otherImage'
				}, res => {

					this.stat = res[0]
				})
			},
			//法人委托书
			attorney(type, size = 1) {
				this.$util.upload(size, {
					path: 'otherImage'
				}, res => {
					this.attorn = res[0]
				})
			},
			//发票信息
			bill(type, size = 1) {
				this.$util.upload(size, {
					path: 'otherImage'
				}, res => {
					this.bil = res[0]
				})
			},
			logo(type, size = 1) {
				this.$util.upload(size, {
					path: 'otherImage'
				}, res => {
					this.logoimg = res[0]
				})
			},
			confirm(e) {
				this.economizename = e.value[0]

				let _this = this
				for (var i = 0; i < this.list.length; i++) {
					if (this.list[i].name == e.value[0]) {
						_this.economize = _this.list[i].id
					}
				}
				console.log(_this.economize);
				this.$api.sendRequest({
					url: '/api/address/lists',
					data: {
						pid: _this.economize
					},
					success: res => {
						console.log(res);
						let a = []
						this.columnslits = res.data
						// console.log(res.data,'daa');
						for (var i = 0; i < res.data.length; i++) {
							a.push(res.data[i].name)
						}
						_this.columnslist = [a]
						// console.log(_this.columnslist,'box');
						this.show1 = true
						this.show = false
					}
				})

			},
			confirmone(e) {
				this.marketname = e.value[0]
				let _this = this
				for (var i = 0; i < this.columnslits.length; i++) {

					if (_this.columnslits[i].name == e.value[0]) {
						_this.distinguish = _this.columnslits[i].id
					}

				}
				this.$api.sendRequest({
					url: '/api/address/lists',
					data: {
						pid: _this.distinguish
					},
					success: res => {
						let a = []
						this.distinguishname = res.data
						for (var i = 0; i < res.data.length; i++) {
							a.push(res.data[i].name)
						}
						this.columnqu = [a]
						this.show2 = true
						this.show1 = false
					}
				})
			},
			confirmtwo(e) {
				this.distinguishme = e.value[0]
				let _this = this
				for (var i = 0; i < this.distinguishname.length; i++) {
					if (_this.distinguishname[i].name == e.value[0]) {
						_this.jioauk = _this.distinguishname[i].id
					}
				}
				this.show2 = false
				this.address = this.economizename + '' + this.marketname + '' + this.distinguishme
			},
		}
	}
</script>

<style lang="scss" scoped>
	.application {
		height: 80rpx;
		border-radius: 10rpx;
		background-color: rgb(77, 133, 255);
		color: #fff;
		width: 702rpx;
		margin: 24rpx auto;
	}

	.head {
		padding: 20rpx 32rpx;
		padding-top: 100rpx;
		background-color: #fff;
		overflow: auto;

		.business {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
		}

		.upload {
			font-size: 24rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #999999;
			line-height: 34rpx;
			margin-top: 8rpx;
		}

		.Business {
			width: 686rpx;
			height: 320rpx;
			background: #F6F6F6;
			border-radius: 16rpx;
			margin-top: 24rpx;

			image {
				width: 48rpx;
				height: 48rpx;
				margin-top: 88rpx;
			}

			.Upload-pictures {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #BFBFBF;
				line-height: 40rpx;
				margin-top: 16rpx;
			}

			.ask {
				font-size: 24rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #BFBFBF;
				line-height: 34rpx;
				margin-top: 8rpx;
			}
		}

		.business-two {
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #222222;
			line-height: 40rpx;
			margin-top: 48rpx;
		}

		.accomplish {
			width: 690rpx;
			height: 80rpx;
			background: #21BBF3;
			border-radius: 40rpx;
			margin-top: 32rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #FFFFFF;
			line-height: 40rpx;
		}
	}

	.Customer-name {
		width: 702rpx;
		// height: 612rpx;
		background: #FFFFFF;
		border-radius: 24rpx;
		margin: 0 auto;
		margin-top: 24rpx;
		box-sizing: border-box;
		padding: 32rpx;

		.name {
			div:nth-child(1) {
				font-size: 28rpx;
				font-family: PingFangSC-Regular, PingFang SC;
				font-weight: 400;
				color: #585858;
				line-height: 40rpx;

				span {
					margin-left: 8rpx;
					font-size: 28rpx;
					font-family: PingFangSC-Regular, PingFang SC;
					font-weight: 400;
					color: #F33B50;
					line-height: 40rpx;
				}
			}
		}
	}
</style>