<template>
	<view class="page">
		<u-navbar title="店铺变更信息" :border-bottom="false" :background="bgc" title-color='#000' back-icon-color="000"
			title-size='36' height='50'></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>
					<!-- #ifdef MP-ALIPAY -->
					<view style="line-height: 70rpx;padding-left: 40rpx;width: 462rpx;
					height: 70rpx;
					background: #F0F0F0;
					border-radius: 12rpx 12rpx 12rpx 12rpx;" @click="btnlx">
						<text style="color: #ccc;font-size: 32rpx;">{{selectortext == '' ? '请选择商铺类型' : selectortext}}</text>
					</view>
					<!-- #endif -->
					
					<!-- #ifdef MP-WEIXIN -->
					<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>
					<!-- #endif -->
				</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;">{{ksyy}}</view>
						--
						<view class="" style="font-size: 28rpx;color: #666;">{{jsyy}}</view>
					</view>
				</view> -->
				<!-- @click="btnregion" -->
				<!-- <view class="listvals">
					<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" disabled="false" />
					</view>
				</view>
				<view class="listval">
					<view class="tit"> 客服电话</view>
					<view class="but"> <input type="text" placeholder="请输入客服电话" v-model="lxphone" disabled="false" />
					</view>
				</view>
				<view class="jinwei">
					<view class="tit"> 详细地址</view>
					<view class="but">
						 <!-- #ifdef MP-ALIPAY -->
						 <view style="line-height: 70rpx;padding-left: 40rpx;" @click="btnjwd">
						 	<text style="color: #ccc;font-size: 32rpx;">{{xqdz == '' ? '请选择详细地址' : xqdz}}</text>
						 </view>
						 <!-- #endif -->
						 
						<!-- #ifdef MP-WEIXIN -->
						<input type="text" placeholder="请输入详细地址" v-model="xqdz" />
						<u-icon name="map-fill" style="position: absolute;top: 20rpx;right: 22rpx;z-index: 99;"
							size="32" ></u-icon>
						<!-- #endif -->
					</view>
				</view>
				<!-- <view class="listval">
					<view class="tit"> 是否展示店铺</view>
					<u-switch v-model="checked" active-color="#8883F0" disabled="false"></u-switch>
				</view>
				<view class="listval">
					<view class="tit"> 是否允许在非营业时间使用</view>
					 <u-switch v-model="checkeds" active-color="#8883F0" disabled="false"></u-switch> 
				</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="btnimg">
							<!-- <image :src="imglist" mode="aspectFit" style="width: 142rpx;height: 142rpx;border-radius: 20rpx;"></image>  @click="getImage"-->
							<button
								style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;">
								<image :src="imglist" mode="aspectFit"></image>
							</button>
							<!--    <ksp-cropper mode="free" :width="142" :height="142" :maxWidth="1024" :maxHeight="1024" :url="url"
                            	@cancel="oncancel" @ok="onok"></ksp-cropper> -->
						</view>
					</view>
				</view>
				
				<view class="baocun" @click="btnqx">
					取消提交
				</view>
			</view>
             <view class="" style="width: 100%;color: red;font-size: 28rpx;margin-top: 30rpx;padding-left: 30rpx;text-align: center;box-sizing:border-box;">
             	审核通过后，店铺和店铺中的设备可在地图中被发现！
             </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" default-time="00:00" :params="params" @confirm="btnyy"></u-picker>

			<view v-if="btnmsk"
				style="width: 100%;height: 100vh;position: fixed;top: 0;left: 0;background-color: #000;opacity: .1;z-index: 999;">
			</view>

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

<script>
	export default {
		data() {
			return {
				btnmsk: false,
				checked: false,
				params: {
					hour: true,
					minute: true,
				},
				checkeds:false,
				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: '',
				url: '',
				id:''
			}
		},
		onLoad(option) {
			if(option.storeId){
				this.storeId = option.storeId
				this.getobj()
			}
		},
		// 分享到好友（会话）
		onShareAppMessage: function() {
			return {
				title: '创想物联',
				path: '/pages/shouye/index'
			}
		},

		// 分享到朋友圈  
		onShareTimeline: function() {
			return {
				title: '创想物联',
				query: '',
				path: '/pages/shouye/index'
			} 
		},
		methods: {
			// 取消提交
			btnqx(){
				this.$u.put(`/mch/storeApply/${this.id}/cancel`).then(res => {
					if(res.code == 200){
						uni.showToast({
							title: '取消成功',
							icon: 'success',
							duration: 1000
						})
						setTimeout(()=>{
							uni.navigateBack()
							this.btnmsk = false
						},1000)
					}else{
						this.btnmsk = false
					}
				})
			},
			
			btnimg(index) {
				uni.previewImage({
					urls: [this.imglist], //需要预览的图片http链接列表，多张的时候，url直接写在后面就行了
					current: '', // 当前显示图片的http链接，默认是第一个
					success: function(res) {},
					fail: function(res) {},
					complete: function(res) {},
				})
			},
             getobj(){
				 this.$u.get(`/mch/storeApply/getLastByStore/${this.storeId}`).then(res => {
					 if(res.code == 200){
						 this.id = res.data.id
						 this.listobj = res.data.newData
						 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
						 this.checked = this.listobj.show
						 this.checkeds = this.listobj.useOutTime
						 if (this.selectorvalue == 1) {
						 	this.selectortext = '商场'
						 	this.updateTime = this.listobj.updateTime
						 } else if (this.selectorvalue == 2) {
						 	this.selectortext = '学校'
						 } else if (this.selectorvalue == 3) {
						 	this.selectortext = '娱乐场所'
						 } else if (this.selectorvalue == 4) {
						 	this.selectortext = '出租房'
						 } else {
						 	this.selectortext = '其他'
						 }
					 }
				 })
			 }



		}
	}
</script>

<style lang="scss">
	/deep/ .panel{
		position: fixed;
		    width: 100%;
		    height: 100%;
		    top: 0;
		    bottom: 0;
		    left: 0;
		    z-index: 99 !important;
		    overflow: hidden;
	}
	/deep/ .u-title {
		padding-bottom: 22rpx;
	}

	/deep/ .u-icon__icon {
		padding-bottom: 22rpx;
	}

	page {
		background: linear-gradient(180deg, #8883F0 0%, rgba(255, 255, 255, 0) 100%);
	}

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

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

			.list {
				width: 680rpx;
				height: 1060rpx;
				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, #8883F0 0%, #A29EFF 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;
						padding-right: 45rpx;

						.lt {
							padding-top: 40rpx;

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

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

						.imgbox {
							width: 28%;

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

				.jinwei {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;
                    align-items: center;
					.tit {
						margin-top: 10rpx;
						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;
							padding-right: 72rpx;
							width: 100%;
						}
					}
				}

				.listvals {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;
                    align-items: center;
					.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;
							width: 100%;
						}
					}
				}

				.listval {
					display: flex;
					justify-content: space-between;
					margin-top: 34rpx;
                    align-items: center;
					.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;
						}
					}
				}
			}
		}
	}
</style>