<template>
	<view class="page">
		<u-navbar title="修改店铺" :border-bottom="false" :background="bgc" title-color='#000' title-size='36'
			height='58'></u-navbar>
		<view class="box">
			<view class="list">
				<view class="listval">
					<view class="tit"> 店铺名称</view>
					<view class="but"> <input type="text" placeholder="请输入店铺名称" v-model="shopname" /> </view>
				</view>
				<view class="listvals" @click="btnlx">
					<view class="tit"> 店铺类型</view>
					<view class="but"> <input disabled="false" type="text" :placeholder="selectortext" /> <u-icon
							name="arrow-down" style="position: absolute;top: 30%;right: 14rpx;"></u-icon> </view>
				</view>
				<view class="listval">
					<view class="tit"> 营业时间</view>
					<view class="but"
						style="display: flex;justify-content: space-between;padding: 15rpx 26rpx;box-sizing: border-box;">
						<view class="" style="font-size: 28rpx;color: #666;" @click="btnyinye(1)">{{ksyy}}</view>
						 -- 
						 <view class="" style="font-size: 28rpx;color: #666;" @click="btnyinye(2)">{{jsyy}}</view>
					</view>
				</view>
				<view class="listvals" @click="btnregion">
					<view class="tit"> 省市区</view>
					<view class="but"> <input disabled="false" type="text" :placeholder="regiontext" /> <u-icon
							name="arrow-down" style="position: absolute;top: 30%;right: 14rpx;"></u-icon> </view>
				</view>
				<view class="listval">
					<view class="tit"> 联系人</view>
					<view class="but"> <input type="text" placeholder="请输入联系人" v-model="lxname" /> </view>
				</view>
				<view class="listval">
					<view class="tit"> 联系电话</view>
					<view class="but"> <input type="text" placeholder="请输入联系电话" v-model="lxphone" /> </view>
				</view>
				<view class="jinwei">
					<view class="tit"> 经纬度</view>
					<view class="but">
						<input type="text" :placeholder="latitude" disabled="true" />
						<input type="text" :placeholder="longitude" disabled="true" />
						<u-icon name="map-fill" style="position: absolute;top: 44rpx;right: 22rpx;z-index: 99;"
							size="32" @click="btnjwd"></u-icon>
					</view>
				</view>
				<view class="listval">
					<view class="tit"> 详细地址</view>
					<view class="but"> <input type="text" placeholder="请输入详细地址" v-model="xqdz" /> </view>
				</view>
				<view class="icon">
					<view class="list_box">
						<view class="lt">
							<view class="tit">
								上传门头照
							</view>
							<view class="wz">
								门头照片必须清晰、方正、易于辨识
							</view>
						</view>
						<view class="imgbox" @click="btn">
							<image :src="imglist" mode=""
								style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image>
						</view>
					</view>
				</view>
				<view class="baocun" @click="btncreat">
					确定修改
				</view>
			</view>

			<!-- 店铺类型 -->
			<u-select v-model="selectorshow" :list="selector" @confirm="btnselector"></u-select>
			<!-- 选择省市区 -->
			<u-picker v-model="regionshow" mode="region" @confirm="btnregions"></u-picker>
			<!-- 营业时间 -->
			<u-picker mode="time" v-model="show" :params="params" @confirm="btnyy"></u-picker>

		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				params: {
					hour: true,
					minute: true,
				},
				show: false,
				imglist: '',
				token: '',
				userImgs: '',
				imgflag: true,
				selectorshow: false,
				selectortext: '请选择商铺类型',
				selectorvalue: '',
				regionshow: false,
				regiontext: '请选择省市区',
				regionvalue: '',
				selector: [{
						value: 1,
						label: '商场'
					},
					{
						value: 2,
						label: '学校'
					},
					{
						value: 3,
						label: '娱乐场所'
					},
					{
						value: 4,
						label: '出租房'
					},
					{
						value: 5,
						label: '其他'
					},
				],
				latitude: '请输入纬度',
				longitude: '请输入经度',
				shopname: '',
				yetime: '',
				lxname: '',
				lxphone: '',
				xqdz: '',
				ksyy:'开始营业时间',
				jsyy:'结束营业时间',
				yynum:0,
				province:'',
				city:'',
				area:'',
				listobj:{},
				storeId:'',
				bgc:{
					background:'#25D088'
				}
			}
		},
		onLoad(option) {
			let obj = JSON.parse(option.obj)
			this.listobj = obj
			// console.log(this.listobj);
			this.shopname = this.listobj.name
		    this.ksyy = this.listobj.businessTimeStart
			this.jsyy = this.listobj.businessTimeEnd
			this.regiontext = this.listobj.province + this.listobj.city + this.listobj.county
			this.lxname = this.listobj.contactName
			this.lxphone = this.listobj.contactMobile
			this.latitude = this.listobj.lat
			this.longitude = this.listobj.lng
			this.xqdz = this.listobj.address
			this.selectorvalue = this.listobj.type
			this.imglist = this.listobj.picture
			this.province = this.listobj.province
			this.city = this.listobj.city
			this.area = this.listobj.county
			this.storeId = this.listobj.storeId
			if(this.selectorvalue == 1){
				this.selectortext = '商场'
			}else if(this.selectorvalue == 2){
				this.selectortext = '学校'
			}else if(this.selectorvalue == 3){
				this.selectortext = '娱乐场所'
			}else if(this.selectorvalue == 4){
				this.selectortext = '出租房'
			}else{
				this.selectortext = '其他'
			}
			this.getQiniuToken()
		},
		methods: {
			btnyinye(num){
				this.show = true
				this.yynum = num
			},
			btnyy(e){
				if(this.yynum == 1){
					this.ksyy = e.hour + ':' + e.minute
				}else{
					this.jsyy = e.hour + ':' + e.minute
				}
			},
			btncreat() {
				let phoneRegex = /^1[3-9]\d{9}$/ //判断手机号码格式
				if (this.shopname == '') {
					uni.showToast({
						title: '请输入店铺名称',
						icon: 'none',
						duration: 1000
					});
				} else if (this.selectortext == '请选择商铺类型') {
					uni.showToast({
						title: '请选择商铺类型',
						icon: 'none',
						duration: 1000
					});
				} else if (this.ksyy == '开始营业时间') {
					uni.showToast({
						title: '请选择开始营业时间',
						icon: 'none',
						duration: 2000
					});
				} else if (this.jsyy == '结束营业时间') {
					uni.showToast({
						title: '请选择结束营业时间',
						icon: 'none',
						duration: 2000
					});
				} else if (this.regiontext == '请选择省市区') {
					uni.showToast({
						title: '请选择省市区',
						icon: 'none',
						duration: 1000
					});
				} else if (this.lxname == '') {
					uni.showToast({
						title: '请输入联系人',
						icon: 'none',
						duration: 1000
					});
				} else if (this.lxphone == '') {
					uni.showToast({
						title: '请输入联系电话',
						icon: 'none',
						duration: 1000
					});
				} else if (this.latitude == '请输入纬度') {
					uni.showToast({
						title: '请输入纬度',
						icon: 'none',
						duration: 1000
					});
				} else if (this.longitude == '请输入经度') {
					uni.showToast({
						title: '请输入经度',
						icon: 'none',
						duration: 1000
					});
				}else if (this.xqdz == '') {
					uni.showToast({
						title: '请输入详细地址',
						icon: 'none',
						duration: 1000
					});
				} else if (this.imglist == '') {
					uni.showToast({
						title: '请上传一张商铺门面照',
						icon: 'none',
						duration: 1000
					});
				} else {
					let data = {
						name: this.shopname,
						picture: this.imglist,
						address: this.xqdz,
						lng: this.longitude,
						lat: this.latitude,
                        businessTimeStart:this.ksyy,
						businessTimeEnd:this.jsyy,
						province:this.province,
						city:this.city,
						county:this.area,
						specificAddress:this.xqdz,
						contactName:this.lxname,
						contactMobile:this.lxphone,
						type:this.selectorvalue,
						storeId:this.storeId
					}
					this.$u.put("/agent/store",data).then(res => {
						if (res.code == 500) {
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000
							})
						}else{
							uni.showToast({
								title: '修改成功',
								icon: 'success',
								duration: 1000
							})
							setTimeout(()=>{
								uni.navigateBack({
									delta: 2
								})
							},1000)
						}
					})
				}
			},

			btnlx() {
				this.selectorshow = true
			},
			btnselector(e) {
				this.selectorvalue = e[0].value
				this.selectortext = e[0].label
			},
			btnregion() {
				this.regionshow = true
			},
			btnregions(e) {
				this.regiontext = e.province.label + e.city.label + e.area.label
				this.province = e.province.label
				this.city = e.city.label
				this.area = e.area.label
			},
			btnjwd() {
				uni.chooseLocation({
					success: (res) => {
						this.latitude = res.latitude;
						this.longitude = res.longitude;
					},
					fail: function(err) {
						console.log('选择位置失败', err);
					},
					complete: (res) => {
						if (res.errMsg === 'chooseLocation:ok') {
						} else if (res.errMsg.indexOf('chooseLocation:cancel') === 0) {
							uni.showToast({
								title: '您取消了位置选择',
								icon: 'none'
							});
						}
					}
				});
			},


			getQiniuToken() {
				this.$u.get("/common/qiniu/uploadInfo").then((res) => {
					if (res.code == 200) {
						this.token = res.token
					}
				});
			},
			btn() {
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				uni.chooseImage({
					count: 1,
					type: 'all',
					success(res) {
						const tempFilePaths = res.tempFiles
						wx.uploadFile({
							url: 'https://up-z2.qiniup.com',
							name: 'file',
							filePath: tempFilePaths[0].path,
							formData: {
								token: _this.token, //后端返回的token
								key: 'smartmeter/img/' + math
							},
							success: function(res) {
								let str = JSON.parse(res.data)
								console.log(str.key)
								_this.userImgs = 'https://api.ccttiot.com/' + str.key
								_this.imglist = _this.userImgs
								_this.imgflag = false
							}
						});
					}
				})
			},
		}
	}
</script>

<style lang="scss">
	/deep/ .u-title,
	/deep/ .uicon-nav-back {
		padding-bottom: 40rpx;
	}
	page {
		background: #F4F5F7;
	}

	.page {
		width: 750rpx;
		position: fixed;
		top: 0;
		left: 0;

		.box {
			width: 750rpx;
			height: 1400rpx;
			background: #F4F5F7;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 40rpx;

			.list {
				width: 680rpx;
				height: 1204rpx;
				background: #FFFFFF;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding-top: 44rpx;
				padding-left: 38rpx;
				padding-right: 38rpx;
				box-sizing: border-box;

				.baocun {
					width: 584rpx;
					height: 90rpx;
					background: linear-gradient(90deg, #25CE88 0%, #25CE88 100%);
					border-radius: 54rpx 54rpx 54rpx 54rpx;
					margin: auto;
					text-align: center;
					line-height: 90rpx;
					position: fixed;
					left: 50%;
					transform: translateX(-50%);
					bottom: 60rpx;
					font-weight: 500;
					font-size: 40rpx;
					color: #FFFFFF;
				}

				.icon {
					display: flex;
					flex-wrap: wrap;
					align-items: center;
					margin-top: 40rpx;
					width: 680rpx;

					.list_box {
						width: 100%;
						display: flex;
						justify-content: space-between;

						.lt {
							padding-top: 40rpx;

							.tit {
								font-size: 32rpx;
								color: #3D3D3D;
							}

							.wz {
								font-size: 24rpx;
								color: #3D3D3D;
								margin-top: 20rpx;
							}
						}

						.imgbox {
							width: 33%;

							image {
								width: 142rpx;
								height: 142rpx;
							}
						}
					}
				}

				.jinwei {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;

					.tit {
						margin-top: 40rpx;
						font-size: 32rpx;
						color: #3D3D3D;
					}

					.but {
						width: 462rpx;
						height: 140rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						position: relative;

						input {
							height: 70rpx;
							line-height: 70rpx;
							padding-left: 22rpx;
						}
					}
				}

				.listvals {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;

					.tit {
						margin-top: 12rpx;
						font-size: 32rpx;
						color: #3D3D3D;
					}

					.but {
						width: 462rpx;
						height: 70rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;
						position: relative;

						input {
							height: 70rpx;
							line-height: 70rpx;
							padding-left: 22rpx;
						}
					}
				}

				.listval {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;

					.tit {
						margin-top: 12rpx;
						font-size: 32rpx;
						color: #3D3D3D;
					}

					.but {
						width: 462rpx;
						height: 70rpx;
						background: #F0F0F0;
						border-radius: 12rpx 12rpx 12rpx 12rpx;

						input {
							height: 70rpx;
							line-height: 70rpx;
							padding-left: 22rpx;
							color: #666;
						}
					}
				}
			}
		}
	}
</style>