<template>
	<view class="container">
		<view class="Msg">
			<view class="row">
				<view class="row_label">门店名称<text class="red">*</text></view>
				<view class="row_con">
					<input type="text" v-model="store_name" placeholder="需与门牌照名称一致">
				</view>
			</view>
			<view class="row">
				<view class="row_label">所在省<text class="red">*</text></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">所在市<text class="red">*</text></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">所在区<text class="red">*</text></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">详细地址<text class="red">*</text></view>
				<view class="row_con">
					<input type="text" v-model="address" placeholder="请输入详细地址">
				</view>
			</view>
			<view class="row">
				<view class="row_label">联系人<text class="red">*</text></view>
				<view class="row_con">
					<input type="text" v-model="contact_name" placeholder="请输入联系人">
				</view>
			</view>
			<view class="row">
				<view class="row_label">手机号<text class="red">*</text></view>
				<view class="row_con">
					<input type="text" v-model="contact_phone" placeholder="请输入联系方式">
				</view>
			</view>
			<view class="row">
				<view class="row_label">商家分类<text class="red">*</text></view>
				<view class="row_con" @click="chooseClassify">
					<input type="text" disabled v-model="confirmClassify.cate_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 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://static.hshuishang.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://static.hshuishang.com/property-img-file/com_imageImg.png"
								mode="widthFix"></image>
							上传图片
						</view>
					</u-upload>
				</view>
			</view>

			<view class="row2 mt2">
				<view class="row_label">营业执照<text class="red">*</text></view>
				<view class="row_con2">
					<u-upload :fileList="imgList5" @afterRead="afterReadImg3" @delete="deletePic3" name="1" multiple
						:maxCount="1">
						<view class="imgCon">
							<image
								src="https://static.hshuishang.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>
		<u-picker :show="show4" :columns="[classify]" keyName="cate_name" @confirm="clickClassify"
			@cancel="cancelClassify"></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: "",
			confirmClassify: "",
			pro: [],
			show: false,
			city: [],
			show2: false,
			buss: [],
			show3: false,
			classify: [],
			show4: false,

			itemObj: {},
		}
	},
	methods: {
		// 根据ad_code解析省市区信息
		parseAdCode(adCode) {
			if (!adCode) return;

			// 提取省级ad_code（前2位）
			const provinceCode = adCode.toString().substring(0, 2) + '0000';
			// 提取市级ad_code（前4位）
			const cityCode = adCode.toString().substring(0, 4) + '00';
			// 区县级ad_code（完整6位）
			const districtCode = adCode.toString();

			// 查找省份信息
			const province = this.pro.find(item => item.ad_code == provinceCode);
			if (province) {
				this.confirmProv = province;

				// 获取对应城市列表并查找城市信息
				this.getCity(provinceCode).then(() => {
					const city = this.city.find(item => item.ad_code == cityCode);
					if (city) {
						this.confirmCity = city;

						// 获取对应区县列表并查找区县信息
						this.getBuss(cityCode).then(() => {
							const district = this.buss.find(item => item.ad_code == districtCode);
							if (district) {
								this.confirmBusiness = district;
							}
						});
					}
				});
			}
		},

		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) {
			this.show = false;
			this.getCity(e.value[0].ad_code)
			this.confirmProv = e.value[0]
		},
		cancelClassify() {
			this.show4 = false;
		},
		clickClassify(e) {
			this.show4 = false;
			this.confirmClassify = e.value[0]
		},
		chooseCity() {
			this.show = true;
		},
		chooseCity2() {
			this.show2 = true;
		},
		chooseCity3() {
			this.show3 = true;
		},
		chooseClassify() {
			this.show4 = true;
		},
		afterReadImg(e) {
			e.file.forEach(item => {
				upload(item.url, res => {
					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.store_name) {
				return uni.showToast({
					title: '请输入门店名称',
					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.address) {
				return uni.showToast({
					title: '请输入详细地址',
					duration: 2000
				});
			}
			if (!that.contact_name) {
				return uni.showToast({
					title: '请输入联系人姓名',
					duration: 2000
				});
			}
			if (!that.contact_phone) {
				return uni.showToast({
					title: '请输入联系人手机号',
					duration: 2000
				});
			}
			if (!that.confirmClassify.id) {
				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,
				phone: that.contact_phone,
				bank_card: that.bank_card,
				merchant_name: that.store_name,
				address: that.address,
				ad_code: that.confirmBusiness.ad_code,
				facade_photo,
				interior_photo,
				license_photo,
				merchant_cate_id: that.confirmClassify.id,
			}).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 = []
				that.confirmClassify = ''
				NavgateTo("../sucess/index")
			}).catch(res => {
				if(res.message.includes("agent_nil")) {
					uni.showToast({
						title: '未找到对应的代理商信息',
						icon: 'none',
					});
				}
			})
		},

		// 省市区
		getPro() {
			return request(MapApi.getArea, "POST", {}).then(res => {
				this.pro = res.rows
			})
		},
		getCity(e) {
			return request(MapApi.getArea, "POST", {
				parent_ad_code: e
			}).then(res => {
				this.city = res.rows
			})
		},
		getBuss(e) {
			return request(MapApi.getArea, "POST", {
				parent_ad_code: e
			}).then(res => {
				this.buss = res.rows
			})
		},
		getClassify() {
			const params = {
				is_shop: 1,
			}
			return request(apiArr.getMerChantCateList, "POST", params).then(res => {
				this.classify = res.rows
			})
		},

	},
	onLoad(options) {
		// 先执行数据获取方法
		Promise.all([this.getPro(), this.getClassify()]).then(() => {
			// 数据获取完成后再进行赋值操作
			if (options.itemObj) {
				this.itemObj = JSON.parse(options.itemObj)
				this.store_name = this.itemObj.merchant_name
				this.address = this.itemObj.address
				this.contact_name = this.itemObj.contact_name
				this.contact_phone = this.itemObj.phone
				this.confirmClassify = this.classify.find(item => item.id == this.itemObj.merchant_cate_id)
				this.bank_card = this.itemObj.bank_card
				// 解析ad_code回显省市区
				if (this.itemObj.ad_code) {
					this.parseAdCode(this.itemObj.ad_code);
				}
				this.imgList = this.itemObj.facade_photo ? this.itemObj.facade_photo.split(",").map(item => ({ url: this.picUrl + item })) : []
				this.imgList2 = this.itemObj.facade_photo ? this.itemObj.facade_photo.split(",") : []
				this.imgList3 = this.itemObj.interior_photo ? this.itemObj.interior_photo.split(",").map(item => ({ url: this.picUrl + item })) : []
				this.imgList4 = this.itemObj.interior_photo ? this.itemObj.interior_photo.split(",") : []
				this.imgList5 = this.itemObj.license_photo?.split(",").map(item => ({ url: this.picUrl + item }))
				this.imgList6 = this.itemObj.license_photo?.split(",")
			}
		})
	}
}
</script>

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