<template>
	<view class="container">
		<view class="Msg">
			<view class="row">
				<view class="row_label">门店名称</view>
				<view class="row_con">
					<input type="text" v-model="store_name" placeholder="需与门牌照名称一致">
				</view>
			</view>
			<view class="row">
				<view class="row_label">所在省</view>
				<view class="row_con" @click="chooseCity">
					<input type="text" disabled v-model="confirmProv.ad_name" placeholder="请选择所在省">
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="row">
				<view class="row_label">所在市</view>
				<view class="row_con" @click="chooseCity2">
					<input type="text" disabled v-model="confirmCity.short_name" placeholder="请选择所在市">
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="row">
				<view class="row_label">所在区</view>
				<view class="row_con" @click="chooseCity3">
					<input type="text" disabled v-model="confirmBusiness.short_name" placeholder="请选择所在区">
					<u-icon name="arrow-right" color="#999999" size="28"></u-icon>
				</view>
			</view>
			<view class="row">
				<view class="row_label">详细地址</view>
				<view class="row_con">
					<input type="text" v-model="address" placeholder="请输入详细地址">
				</view>
			</view>
			<view class="row">
				<view class="row_label">联系人</view>
				<view class="row_con">
					<input type="text" v-model="contact_name" placeholder="请输入联系人">
				</view>
			</view>
			<view class="row">
				<view class="row_label">手机号</view>
				<view class="row_con">
					<input type="text" v-model="contact_phone" placeholder="请输入联系方式">
				</view>
			</view>
			<view class="row">
				<view class="row_label">银行卡号</view>
				<view class="row_con nonebor">
					<input type="text" v-model="bank_card" placeholder="请输入银行卡号">
				</view>
			</view>
		</view>

		<view class="Msg mt">
			<view class="row2">
				<view class="row_label">门脸照</view>
				<view class="row_con2">
					<u-upload :fileList="imgList" @afterRead="afterReadImg" @delete="deletePic" name="1" multiple
						:maxCount="10">
						<view class="imgCon">
							<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
							上传图片
						</view>
					</u-upload>
				</view>
			</view>

			<view class="row2 mt2">
				<view class="row_label">店内环境</view>
				<view class="row_con2">
					<u-upload :fileList="imgList3" @afterRead="afterReadImg2" @delete="deletePic2" name="1" multiple
						:maxCount="10">
						<view class="imgCon">
							<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
							上传图片
						</view>
					</u-upload>
				</view>
			</view>

			<view class="row2 mt2">
				<view class="row_label">营业执照</view>
				<view class="row_con2">
					<u-upload :fileList="imgList5" @afterRead="afterReadImg3" @delete="deletePic3" name="1" multiple
						:maxCount="1">
						<view class="imgCon">
							<image src="https://wechat-img-file.oss-cn-beijing.aliyuncs.com/property-img-file/com_imageImg.png" mode="widthFix"></image>
							上传图片
						</view>
					</u-upload>
				</view>
			</view>
		</view>

		<view class="addBtn" @click="submit">立即入驻</view>

		<u-picker :show="show" :columns="[pro]" keyName="ad_name" @confirm="clickPro" @cancel="cancelPro"></u-picker>
		<u-picker :show="show2" :columns="[city]" keyName="short_name" @confirm="clickCity"
			@cancel="cancelCity"></u-picker>
		<u-picker :show="show3" :columns="[buss]" keyName="short_name" @confirm="clickBuss"
			@cancel="cancelBuss"></u-picker>
	</view>
</template>

<script>
import {
	apiArr
} from '../../../api/v2local';

import { apiArr as MapApi } from '../../../api/area';
import {
	isPhone,
	picUrl,
	request,
	upload,
	NavgateTo
} from '../../../utils';
export default {
	data() {
		return {
			picUrl,
			area: "",
			confirmCity: "",
			confirmArea: "",
			confirmBusiness: "",
			imgList: [],
			imgList2: [],

			imgList3: [],
			imgList4: [],
			imgList5: [],
			imgList6: [],

			contact_name: "",
			contact_phone: "",
			bank_card: "",
			store_name: "",
			address: "",

			confirmProv:"",
			confirmCity:"",
			confirmBusiness:"",
			pro: [],
			show: false,
			city: [],
			show2: false,
			buss: [],
			show3: false,
		}
	},
	methods: {


		cancelBuss() {
			this.show3 = false;
		},
		clickBuss(e) {
			console.log(e);
			this.show3 = false;
			this.confirmBusiness = e.value[0]
		},

		cancelCity() {
			this.show2 = false;
		},
		clickCity(e) {
			this.show2 = false;
			this.getBuss(e.value[0].ad_code)
			this.confirmCity = e.value[0]
		},

		cancelPro() {
			this.show = false;
		},
		clickPro(e) {
			console.log(e);
			this.show = false;
			this.getCity(e.value[0].ad_code)
			this.confirmProv = e.value[0]
		},
		chooseCity() {
			this.show = true;
		},
		chooseCity2() {
			this.show2 = true;
		},
		chooseCity3() {
			this.show3 = true;
		},
		afterReadImg(e) {
			e.file.forEach(item => {
				upload(item.url, res => {
					console.log(res.data.path);
					this.imgList.push({ url: this.picUrl + res.data.path })
					this.imgList2.push(res.data.path)
				})
			})
		},
		deletePic(e) {
			this.imgList.splice(e.index, 1);
			this.imgList2.splice(e.index, 1);
		},

		afterReadImg2(e) {
			e.file.forEach(item => {
				upload(item.url, res => {
					this.imgList3.push({ url: this.picUrl + res.data.path })
					this.imgList4.push(res.data.path)
				})
			})
		},
		afterReadImg3(e) {
			e.file.forEach(item => {
				upload(item.url, res => {
					this.imgList5.push({ url: this.picUrl + res.data.path })
					this.imgList6.push(res.data.path)
				})
			})
		},
		deletePic2(e) {
			this.imgList3.splice(e.index, 1);
			this.imgList4.splice(e.index, 1);
		},
		deletePic3(e) {
			this.imgList5.splice(e.index, 1);
			this.imgList6.splice(e.index, 1);
		},
		submit() {
			let that = this
			if (!that.contact_name) {
				return uni.showToast({
					title: '请输入联系人姓名',
					duration: 2000
				});
			}
			if (!that.contact_phone) {
				return uni.showToast({
					title: '请输入联系人手机号',
					duration: 2000
				});
			}
			if (!that.store_name) {
				return uni.showToast({
					title: '请输入门店名称',
					duration: 2000
				});
			}
			if (!that.address) {
				return uni.showToast({
					title: '请输入address',
					duration: 2000
				});
			}
			if(!that.confirmProv.ad_code){
				return uni.showToast({
					title: '请选择所在省',
					duration: 2000
				});
			}
			if(!that.confirmCity.ad_code){
				return uni.showToast({
					title: '请选择所在市',
					duration: 2000
				});
			}
			if(!that.confirmBusiness.ad_code){
				return uni.showToast({
					title: '请选择所在区',
					duration: 2000
				});
			}
			if (!that.imgList6.length) {
				return uni.showToast({
					title: '请上传营业执照',
					duration: 2000
				});
			}

			let interior_photo = that.imgList4.join(",")
			let facade_photo = that.imgList2.join(",")
			let license_photo = that.imgList6.join(",")
			request(apiArr.createStore, "POST", {
				contact_name: that.contact_name,
				contact_phone: that.contact_phone,
				bank_card: that.bank_card,
				store_name: that.store_name,
				address: that.address,
				ad_code:that.confirmBusiness.ad_code,
				facade_photo,
				interior_photo,
				license_photo,
			}).then(res => {
				that.contact_name = ''
				that.contact_phone = ''
				that.bank_card = ''
				that.store_name = ''
				that.address = ''
				that.confirmProv = ''
				that.confirmCity = ''
				that.confirmBusiness = ''
				that.imgList = []
				that.imgList2 = []
				that.imgList3 = []
				that.imgList4 = []
				that.imgList5 = []
				that.imgList6 = []
				NavgateTo("../sucess/index")
			})
		},

		// 省市区
		getPro() {
			request(MapApi.getArea, "POST", {}).then(res => {
				console.log(res);
				this.pro = res.rows
			})
		},
		getCity(e) {
			request(MapApi.getArea, "POST", {
				parent_ad_code: e
			}).then(res => {
				this.city = res.rows
			})
		},
		getBuss(e) {
			request(MapApi.getArea, "POST", {
				parent_ad_code: e
			}).then(res => {
				this.buss = res.rows
			})
		},

	},
	onLoad() {
		this.getPro()
	}
}
</script>

<style>
@import url("./index.css");
</style>