<template>
	<view class="page">
		<u-navbar title="创建店铺" :border-bottom="false" :background="bgc" title-color='#fff' back-icon-color="#fff"
			title-size='36' height='50'></u-navbar>
		<view class="box">
			<view class="list">
				<!-- <view class="icon">
					<view class="list_box">
						<view class="lt">
							<view class="tit">
								上传门头照
							</view>
							<view class="wz">
								门头照片必须清晰、方正、易于辨识
							</view>
						</view>
						<view class="imgbox">
								<button
									style="border: 0;outline: none;width: 143rpx;padding-left: 0rpx;height: 143rpx;border-radius: 16rpx;"
									 @click="getImage">
									<image 
										src="https://api.ccttiot.com/smartmeter/img/static/uY8CPw9YE6JxPzcHUaqf" mode="aspectFit">
									</image>
								</button>
								<ksp-cropper mode="free" :width="142" :height="80" :maxWidth="1024" :maxHeight="1024" :url="url"
									@cancel="oncancel" @ok="onok"></ksp-cropper>
						</view>
					</view>
				</view> -->
				<!-- <view class="piclist">
					<view class="container">
					    <swiper
					      class="swiper"
					      indicator-dots="true"
					      autoplay="true"
					      interval="3000"
					      duration="500"
					      circular="true"
					    >
					      <swiper-item v-for="(item, index) in imglist" :key="index">
					        <image :src="item" class="slide-image" mode="aspectFill" @longpress="handleLongPress(index)"></image>
					      </swiper-item>
					    </swiper>
					  </view>
					  <view class="wz">
					  	 长按可删除图片
					  </view>
				</view> -->
				<view class="listval">
					<view class="tit"> 店铺名称</view>
					<view class="but"> <input type="text" placeholder="请输入店铺名称" v-model="shopname" /> </view>
				</view>
				<view class="listval">
					<view class="tit"> 营业时间</view>
					<view class="but"
						style="display: flex;justify-content: space-between;padding: 0 20rpx;box-sizing: border-box;line-height: 70rpx;">
						<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="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" :disabled="true" placeholder="请选择详细地址" v-model="xqdz" @click="btnjwd"/>
						<u-icon name="map-fill" style="position: absolute;top: 20rpx;right: 22rpx;z-index: 99;" @click="btnjwd"
							size="32" ></u-icon>
					</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" 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 {
				
				bgc: {
					backgroundColor: " #0B0B0B",
				},
				btnmsk:false,
				checked:true,
				params: {
					hour: true,
					minute: true,
				},
				show: false,
				checkeds:true,
				imglist: [],
				token: '',
				userImgs: '',
				imgflag: true,
				selectorshow: false,
				selectortext: '请选择商铺类型',
				selectorvalue: '',
				regionshow: false,
				regiontext: '请选择省市区',
				regionvalue: '',
				selector: [],
				latitude: '',
				longitude: '',
				shopname: '',
				yetime: '',
				lxname: '',
				lxphone: '',
				xqdz: '',
				ksyy: '开始营业时间',
				jsyy: '结束营业时间',
				yynum: 0,
				province: '',
				city: '',
				area: '',
                url:'',
				id:'',
				jtdz:'',
				miaoshu:''
			}
		},
		onLoad(option) {
			if(option.id){
				this.id = option.id
			}
		},
		onShow() {
			// this.getQiniuToken()
			// this.getleixing()
		},
		methods: {
			btnlx() {
				this.selectorshow = true
			},
		
			handleLongPress(index) {
				let that = this
				uni.showModal({
					title: '提示',
					content: '您确定要删除该图片吗？',
					success: function(res) {
						if (res.confirm) {
				          that.imglist.splice(index, 1)
				          uni.showToast({
				          	title: '删除成功',
				          	icon: 'success',
				          	duration: 2000
				          })
				          if(that.imglist.length < 1){
				          	that.imgflag = true
				          }
						}
					}
				})
			},
			
			getImage() {
				uni.chooseImage({
					count: 1,
					success: (rst) => {
						this.url = rst.tempFilePaths[0]
					}
				})
			},
			onok(ev) {
				this.url = ""
				this.path = ev.path
				let _this = this
				let math = 'static/' + _this.$u.guid(20)
				wx.uploadFile({
					url: 'https://up-z2.qiniup.com',
					name: 'file',
					filePath: _this.path,
					formData: {
						token: _this.token, //后端返回的token
						key: 'smartmeter/img/' + math
					},
					success: function(res) {
						let str = JSON.parse(res.data)
						_this.userImgs = 'https://api.ccttiot.com/' + str.key
						_this.imglist.push(_this.userImgs)
						_this.imgflag = false
					}
				})
			},
			oncancel() {
				// url设置为空，隐藏控件
				this.url = ""
			},
			
			
			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() {
					this.btnmsk = true
					let data = {
						storeName:this.shopname,
						userName:this.lxname,
						phone:this.lxphone,
						startTime:this.ksyy,
						endTime:this.jsyy,
						longitude:this.longitude,
						latitude:this.latitude,
						address:this.xqdz
					}
					this.$u.post("/bst/store", data).then(res => {
						if (res.code == 200) {
							uni.showToast({
								title: '创建成功',
								icon: 'none',
								duration: 2000
							})
							setTimeout(()=>{
								uni.navigateBack()
								this.btnmsk = false
							},1500)
						}else{
							uni.showToast({
								title: res.msg,
								icon: 'none',
								duration: 1000
							})
							this.btnmsk = false
						}
					})
			},

			
			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) => {
						console.log(res);
						this.latitude = res.latitude
						this.longitude = res.longitude
						this.xqdz = res.name
						this.jtdz = res.name
					},
					fail: function(err) {
						// 检查错误消息，看是否是用户取消了位置选择  
						if (err.errMsg && err.errMsg.indexOf('chooseLocation:cancel') === 0) {
							uni.showToast({
								title: '您取消了位置选择',
								icon: 'none'
							});
						} else {
							console.log('选择位置失败', err)
							// 处理其他失败情况  
						}
					},
				})
			},
			// getQiniuToken() {
			// 	this.$u.get("/common/qiniu/uploadInfo").then((res) => {
			// 		if (res.code == 200) {
			// 			this.token = res.token
			// 		}
			// 	})
			// },
		}
	}
</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:#0B0B0B;
	}

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

		.box {
			width: 750rpx;
			height: 1440rpx;
			padding-bottom: 300rpx;
			box-sizing: border-box;
			overflow: scroll;
			background: #0B0B0B;
			border-radius: 0rpx 0rpx 0rpx 0rpx;
			padding-top: 40rpx;

			.list {
				width: 700rpx;
				max-height: 1200rpx;
				padding-bottom: 30rpx;
				background: #0B0B0B;
				overflow: scroll;
				border-radius: 24rpx 24rpx 24rpx 24rpx;
				margin: auto;
				padding-top: 24rpx;
				padding-left: 20rpx;
				padding-right: 20rpx;
				box-sizing: border-box;

				.baocun {
					width: 584rpx;
					height: 90rpx;
					background: #FF8998;
					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;
				}
                .container {
                  height: 100%;
                  display: flex;
                  justify-content: center;
                  align-items: center;
				  margin-top: 40rpx;
                }
                .piclist{
					.wz{
						margin-top: 20rpx;
						width: 100%;
						text-align: center;
						color: red;
					}
				}
                .swiper {
                    width: 100%;
                    height: 300rpx;
                    border-radius: 30rpx;
                    overflow: hidden;
					background-color: #ccc;
                }
                 
                .slide-image {
                  width: 100%;
                  height: 100%;
                }
				.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: #fff;
							}

							.wz {
								font-size: 26rpx;
								color: #fff;
								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: #fff;
					}

					.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: #fff;
					}

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

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