<template>
	<view class="content-add">
		<view class="add-body">
			<view class="form-data">
				<view class="flex flex_column data-item">
					<text>名称</text>
					<view class="list-item-right flex_1 flex justify_between">
						<u-input class="flex_1" :disabled="isView" :custom-style="inputClass" v-model="form.name" placeholder="请输入店铺名称" placeholder-style="color:'#bbb';font-size:18px"/>
					</view>
				</view>
				<view class="flex flex_column data-item last">
					<view class="flex align_center">
						<view style="color:#666E75">电话</view>
						<u-image src="/static/billing_icon.png" width="24" height="24"  style="margin:0 0 10rpx 10rpx;"></u-image>
					</view>
					
					<view class="list-item-right flex_1 flex justify_between">
						<u-input class="flex_1" :custom-style="inputClass" :disabled="isView" v-model="form.mobile" placeholder="请输入联系电话" placeholder-style="color:'#bbb';font-size:18px"/>
					</view>
				</view>
			</view>
			<view class="form-data">
				<view class="flex flex_column data-item">
					<text>地址</text>
					<view class="list-item-right flex_1 flex justify_between" >
						<u-input class="flex_1" :custom-style="inputClass" :disabled="isView" v-model="reverseReceiveAddress.receiveAreasName" @click="selectAddress" :disabled="true" placeholder="请选择通信地址" placeholder-style="color:'#bbb';font-size:18px"/>
						<u-icon class="back-img" name="arrow-right" color="#9DA8B5"  @click="selectAddress" v-show="!isView"></u-icon>
					</view>
				</view>
				<view class="flex flex_column data-item last">
					<text>详细地址</text>
					<view class="list-item-right flex_1 flex justify_between" >
						<u-input class="flex_1" :custom-style="inputClass" :disabled="isView" v-model="reverseReceiveAddress.receiveAddress" placeholder="请输入详细地址" placeholder-style="color:'#bbb';font-size:18px"/>
					</view>
				</view>
			</view>
			<view class="form-data">
				<view class="headerImgTitle"> 门头照片 <text style="color: #bbbbbb;">(仅可上传1张，10MB以内)</text></view> 
				<view class="info-main">
					<view class="camera-btn" v-if="photograph.length<1  && !isView">
						<view @click="goPhotograph" class="photograph-camera">
							<u-icon name="camera" color="#bfbfbf" size="60" v-show="!isView"></u-icon>
						</view>
					</view>
					<view v-if="isView" style="margin-top: 10rpx;">暂无门头照</view>
					<view v-show="photograph.length" v-for="(item,index) in photograph" :key="index" class="photograph-con">
						<u-icon  name="close-circle-fill" color="#fa3534" size="50" class="close-circle-icon" @click="cancelPhotograph(index)"></u-icon>
						<u-image width="100%" height="100%" :src="item" @click="previewPictures(item)"></u-image>
					</view>
				</view>
			</view>
		</view>
		<view class="footer">
			<view class="submit-btn flex justify_center align_center" v-if="!isView" @click="submit">保存</view>
			<view class="submit-btn flex justify_center align_center" v-if="isView" @click="isView=false">编辑</view>
		</view>
	</view>
</template>

<script>
	import {saveImgToAliOss} from '@/libs/tools.js'
	import { shopDetails,savShop } from '@/api/shop.js'
	export default{
		data(){
			return{
				photograph: [],
				form:{
					name:'', // 名称
					mobile:'', // 手机号码
				},
				reverseReceiveAddress: {
				  provinceName: '',//  省
				  cityName: '',// 市
				  districtName: '', // 区
				  receiveAddress: '',// 详细地址
				  receiveAreasName:'',
				  lat:'',
				  lng:''
				},
				itemId:'',// 店铺id
				pageInfo:null, // 页面数据
				isView: false ,// 是否是查看详情
			}
		},
		onLoad(option) {
			if(option.id){
				this.isView = true
				console.log(option,option.id)
				uni.setNavigationBarTitle({
				    title: '修改店铺'
				});
				this.itemId=option.id
				this.getDetailInfo()
			}
		},
		methods:{
			// 获取详情信息
			getDetailInfo(){
				shopDetails({id:this.itemId}).then(res=>{
					if(res.status==200){
						this.form.name=res.data.name? res.data.name:''
						this.form.mobile=res.data.mobile
						this.reverseReceiveAddress=Object.assign(this.reverseReceiveAddress,res.data.reverseReceiveAddress?res.data.reverseReceiveAddress:null)
						// this.form.receiveAddress.provinceName=res.data.receiveAddressVO?res.data.receiveAddressVO.provinceName:''
						// this.form.receiveAddress.cityName=res.data.receiveAddressVO?res.data.receiveAddressVO.cityName:''
						// this.form.receiveAddress.districtName=res.data.receiveAddressVO?res.data.receiveAddressVO.districtName:''
						// this.form.receiveAddress.receiveAddress=res.data.receiveAddressVO?res.data.receiveAddressVO.receiveAddress:''
						// this.form.receiveAddress.receiveAreasName=res.data.receiveAddressVO?res.data.receiveAddressVO.receiveAreasName:''
						this.photograph=res.data.reverseReceiveAddress?res.data.reverseReceiveAddress.headerImageList:[]
					}else{
						uni.showToast({
							title: res.message,
							icon:'none',
						})
					}
				})
			},
			// 选择通信地址
			selectAddress(){
				wx.chooseLocation({
					success:(res)=>{
						if(res){
							this.getArea(res.address)
							// this.form.contactAddress=res.address
							this.reverseReceiveAddress.lat=res.latitude
							this.reverseReceiveAddress.lng=res.longitude
							this.reverseReceiveAddress.receiveAreasName= res.address
							
						}
					}
				})
			},
			// 拍照或从相册选图片
			goPhotograph() {
				uni.chooseImage({
				    count: 1, //默认9
				    sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
				    sourceType: ['album','camera'], //从相册选择
				    success: (res) =>{
						if(res.tempFiles[0].size>10485760){
							uni.showToast({
								title: '图片过大无法上传！',
								icon: 'none'
							})
							return
						}
						uni.showLoading({
							title:'正在保存图片...',
							mask: true
						})
						saveImgToAliOss(res.tempFilePaths[0],(ret)=>{
							this.photograph.push(ret.data)
							uni.hideLoading()
						})
				    }
				});
			},
			//  预览图片
			previewPictures(item) {
				const photograph = [item];
				uni.previewImage({
					urls: photograph,
				});
			},
			//  删除图片
			cancelPhotograph(index) {
				setTimeout(() => {
					this.photograph.splice(index)
				}, 500);
			},
			//截取省市区
			getArea(str) {
			    // let area = {}
			    let index11 = 0
			    let index1 = str.indexOf("省")
			    if (index1 == -1) {
			      index11 = str.indexOf("自治区")
			      if (index11 != -1) {
			        this.reverseReceiveAddress.provinceName = str.substring(0, index11 + 3)
			      } else {
			        this.reverseReceiveAddress.provinceName= str.substring(0, 0)
			      }
			    } else {
			      this.reverseReceiveAddress.provinceName = str.substring(0, index1 + 1)
			    }
			 
			    let index2 = str.indexOf("市")
			    if (index11 == -1) {
			      this.reverseReceiveAddress.cityName = str.substring(index11 + 1, index2 + 1)
			    } else {
			      if (index11 == 0) {
			       this.reverseReceiveAddress.cityName = str.substring(index1 + 1, index2 + 1)
			      } else {
			        this.reverseReceiveAddress.cityName = str.substring(index11 + 3, index2 + 1)
			      }
			    }
			 
			    let index3 = str.lastIndexOf("区")
			    if (index3 == -1) {
			      index3 = str.indexOf("县")
			      this.reverseReceiveAddress.districtName = str.substring(index2 + 1, index3 + 1)
			    } else {
			      this.reverseReceiveAddress.districtName = str.substring(index2 + 1, index3 + 1)
			    }
			    // return this.area;
				if(this.reverseReceiveAddress.provinceName==''){
					this.reverseReceiveAddress.provinceName=this.reverseReceiveAddress.cityName
				}
			  },
			// 保存
			submit(){
				const testVal=/^1[34578]\d{9}$/
				if (!testVal.test(this.form.mobile)) {
					uni.showToast({
						title: '请输入正确的联系电话',
						icon: 'none'
					})
					return false
				}
				const params=Object.assign(this.form,{sourceTypeReserve:'rider'},{reverseReceiveAddress:this.reverseReceiveAddress}) 
				if(this.photograph.length>0){
					params.reverseReceiveAddress.headerImageList=this.photograph
				}
				if(this.itemId){
					params.id=this.itemId
				}
				console.log(params,'-----------提交参数')
				savShop(params).then(res=>{
					console.log(res)
					if(res.status==200){
						uni.navigateBack({})
					}
					uni.showToast({
						title:res.message,
						icon:'none'
					})
				})
			}
		}
	}
</script>

<style lang="less">
	.content-add{
		width: 100%;
		height: 100vh;
		background-color: #f5f5f5;
		display: flex;
		flex-direction: column;
		.add-body{
			width: 100%;
			padding: 20upx 30upx;
			flex: 1;
			overflow-y: scroll;
			.form-data{
				width: 100%;
				background-color: #fff;
				border-radius: 24upx;
				margin-bottom: 20upx;
				.data-item{
					margin: 0 32upx;
					padding: 36upx 0;
					border-bottom: 1px solid #e5e5e5;
				}
				.data-item>text:first-child{
					color:#666E75;
				}
				.last{
					border-bottom:none;
				}
				.headerImgTitle{
					padding-top:36upx;
					margin: 0 32upx;
					color:#666E75;
				}
				.info-main {
					margin:0  32upx;
					padding: 10upx 0 36upx;
					border-radius: 12upx;
					background-color: #fff;
					display: flex;
					.location-icon {
						padding-left: 10upx;
						vertical-align: sub;
					}
					.photograph-camera {
						border: 2upx dashed #bfbfbf;
						border-radius: 12upx;
						width: 140upx;
						height: 140upx;
						display: flex;
						align-items: center;
						justify-content: center;
					}
					.camera-btn{
						display: flex;
						flex-direction: column;
						align-items: center;
						color: #999999;
						font-size: 24upx;
					}
					.photograph-con {
						margin: 0 20upx;
						width: 140upx;
						height: 140upx;
						text-align: center;
						position: relative;
						.photograph-icon {
							display: inline-block;
							padding-top: 48upx;
						}
						.close-circle-icon {
							background-color: #fff;
							border-radius: 50%;
							position: absolute;
							right: -23upx;
							top: -23upx;
							z-index: 9;
						}
					}
				}
			}
		}
		.footer{
			width: 100%;
			padding: 14upx 32upx 32upx;
			background-color: #fff;
			color: #fff;
			font-weight: 500;
			.submit-btn{
				height: 84upx;
				background: #1995FF;
				opacity: 1;
				border-radius: 16upx;
			}
		}
	}
</style>
