<template>
	<view class="index">
		<view class="title_text">
			基本信息
		</view>
		<view class="onecontent">
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					门店logo
				</view>
				<view class="onecontent_itemright flex-start">
					<view class="onecontent_itemrightimges flex-colum" v-if="!form.avatar" @click="chooseImagelist()">
						+
					</view>
					<view v-else class="onecontent_itemrightimges flex-colum" @click="chooseImagelist()">
						<image :src="form.avatar"></image>
					</view>
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					门店名称
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.title" type="text" placeholder="请输入门店名称">
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					门店ID
				</view>
				<view class="onecontent_itemright flex-start">
					<input disabled class="onecontent_itemright_text" v-model="form.id" type="text" placeholder="001">
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					营业时间
				</view>
				<view class="onecontent_itemright flex-start" @click="showpicker = true">
					<text class="onecontent_itemright_text">{{form.b_hours || '请选择营业时间'}}</text>
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					联系人
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.contacts" type="text" placeholder="请输入联系人">
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					门店电话
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.mobile" type="text" placeholder="请输入门店电话">
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					详细地址
				</view>
				<view class="onecontent_itemright flex-start">
					<input class="onecontent_itemright_text" v-model="form.address" type="text" placeholder="请输入详细地址">
				</view>
			</view>
			<view class="onecontent_item flex-between">
				<view class="onecontent_itemleft">
					我的背景
				</view>
				<view class="onecontent_itemright flex-start">
					<view class="onecontent_itemrightimges flex-colum" v-if="!form.my_background"
						@click="chooseImagelists()">
						+
					</view>
					<view v-else class="onecontent_itemrightimges flex-colum" @click="chooseImagelists()">
						<image :src="form.my_background"></image>
					</view>
				</view>
			</view>
			<view class="title_text">
				上传图片
			</view>
			<view class="onecontent" style="margin-left: 26rpx;">
				<u-scroll-list :indicator="false">
					<view v-for="(item, index) in form.bananer" :key="index" class="onecontentscroll">
						<view class="onecontentscroll_item">
							<image class="onecontentscroll_itemimage" :src="item"></image>
							<view class="onecontentscrollicon" @click="remove(index)">
								<u-icon name="close-circle-fill" color="#333" size="20"></u-icon>
							</view>
						</view>
					</view>
					<view class="onecontentscrolllang" v-if="form.bananer.length<10" @click="add()">
						<view class="onecontentscroll_item flex-colum">
							<u-icon name="plus" color="#333" size="20"></u-icon>
						</view>
					</view>
				</u-scroll-list>
			</view>
			<!-- 	<view class="onecontent_item flex-between" @click="chooseLocation">
				<view class="onecontent_itemleft">
					门店经纬度
				</view>
				<view class="onecontent_itemright flex-start">
					<input disabled class="onecontent_itemright_text" v-model="lnglat" type="text" placeholder="门店经纬度">
				</view>
			</view> -->
		</view>
		<view class="baocun" @click="userstoreset">
			保存
		</view>
		<u-picker :show="showpicker" @cancel='showpicker = false' ref="uPicker" :columns="columnspicker"
			@confirm="confirm"></u-picker>
	</view>
</template>
<script>
	import uploadImage from "@/js_sdk/yushijie-ossutil/ossutil/uploadFile.js";
	export default {
		data() {
			return {
				sheetshow: false,
				placeholder: '开始输入文章内容...',
				editorCtx: '',
				lnglat: '',
				showpicker: false,
				columnspicker: [
					['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
						'11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
						'21:00', '22:00', '23:00', '24:00'
					],
					['00:00', '01:00', '02:00', '03:00', '04:00', '05:00', '06:00', '07:00', '08:00', '09:00', '10:00',
						'11:00', '12:00', '13:00', '14:00', '15:00', '16:00', '17:00', '18:00', '19:00', '20:00',
						'21:00', '22:00', '23:00', '24:00'
					],
				],
				form: {
					title: '',
					details: '',
					avatar: '',
					my_background: '',
					b_hours: '',
					bananer: ''
				}
			}
		},
		async onLoad() {
			try {
				let res = await this.api.userstoredetail()
				this.form = res.data
				this.lnglat = res.data.lat + '-' + res.data.lng
			} catch (e) {
				//TODO handle the exception
			}
		},
		onShow() {
			
		},
		mounted() {
			this.$bus.$on('editors', this.demo)
		},
		methods: {
			
			confirm(e) {
				if (e.indexs[0] == e.indexs[1]) {
					uni.showToast({
						title: '选择时间不能相同'
					})
				} else {
					console.log(e)
					this.form.b_hours = e.value[0] + '-' + e.value[1]
					this.showpicker = false
				}
			},
			remove(e) {
				console.log(e)
				this.form.bananer.splice(e, 1)
			},
			add() {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let file = res.tempFilePaths[0];
						uploadImage(file, 'wechat/indexbananer/',
							result => {
								this.form.bananer.push(result)
								uni.hideLoading()
							}, result => {
								uni.hideLoading()
							})
					},
					fail: (res) => {
						uni.hideLoading()
					}
				});
			},
			chooseLocation() {
				uni.chooseLocation({
					success: (res) => {
						this.form.address = res.address
						this.form.lat = res.latitude
						this.form.lng = res.longitude
						this.lnglat = res.latitude + '-' + res.longitude
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					},
					fail: (res) => {
						console.log(res)
					}
				});
			},
			demo(data) {
				this.form.details = data
			},
			demos() {
				uni.pro.navigateTo('project/editor/editor', {
					id: this.form.service_id
				})
			},
			async userstoreset() {
				console.log(this.form)
				if (this.form.title == null || this.form.title == '') {
					uni.showToast({
						title: '商户名称不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.form.contacts == null || this.form.contacts == '') {
					uni.showToast({
						title: '请填写联系人',
						icon: 'none'
					});
					return false;
				}
				if (this.form.mobile == null || this.form.mobile == '') {
					uni.showToast({
						title: '手机号不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.form.address == null || this.form.address == '') {
					uni.showToast({
						title: '地址不能为空',
						icon: 'none'
					});
					return false;
				}
				if (this.form.avatar == null || this.form.avatar == '') {
					uni.showToast({
						title: '图片不能为空',
						icon: 'none'
					});
					return false;
				}
				let res = await this.api.userstoreset({
					title: this.form.title,
					contacts: this.form.contacts,
					mobile: this.form.mobile,
					address: this.form.address,
					lng: this.form.lng,
					lat: this.form.lat,
					avatar: this.form.avatar,
					background: this.form.my_background,
					bananer: this.form.bananer.toString(),
					b_hours: this.form.b_hours
				});
				if (res.code == 1) {
					uni.showToast({
						title: '保存成功',
						icon: 'none'
					});
					setTimeout(() => {
						uni.navigateBack();
					}, 1000);
				}
			},
			async servicedelservice() {
				var this_ = this
				console.log(this.form.service_id)
				uni.showModal({
					title: '提示',
					content: '确认删除该商品吗？',
					success: async (res) => {
						if (res.confirm) {
							let data = await this.api.servicedelservice({
								service_id: this.form.service_id
							});
							if (data.code == 1) {
								uni.showToast({
									title: '删除成功',
									icon: 'none'
								});
								setTimeout(() => {
									uni.navigateBack();
								}, 1000);
							}
						} else if (res.cancel) {
							console.log('用户点击取消');
						}
					}
				});

			},
			// 上传
			chooseImagelist() {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let file = res.tempFilePaths[0];
						uploadImage(file, 'wechat/store/',
							result => {
								this.form.avatar = ''
								this.form.avatar = result
								uni.hideLoading()
							}, result => {
								uni.hideLoading()
							})
					},
					fail: (res) => {
						uni.hideLoading()
					}
				});
			},
			// 上传
			chooseImagelists() {
				uni.showLoading({
					title: '上传中',
					mask: true
				})
				uni.chooseImage({
					count: 1, //默认9
					sizeType: ['original', 'compressed'], //可以指定是原图还是压缩图，默认二者都有
					sourceType: ['album'], //从相册选择
					success: (res) => {
						let file = res.tempFilePaths[0];
						uploadImage(file, 'wechat/store/',
							result => {
								this.form.my_background = ''
								this.form.my_background = result
								uni.hideLoading()
							}, result => {
								uni.hideLoading()
							})
					},
					fail: (res) => {
						uni.hideLoading()
					}
				});
			},
			onEditorReady() {
				// #ifdef MP-BAIDU
				this.editorCtx = requireDynamicLib('editorLib').createEditorContext('editor');
				// #endif

				// #ifdef APP-PLUS || H5 ||MP-WEIXIN
				uni.createSelectorQuery().select('#editor').context((res) => {
					this.editorCtx = res.context
				}).exec()
				// #endif
			},
			undo() {
				this.editorCtx.undo()
			}

		}
	}
</script>

<style lang="scss">
	page {
		background: #F6F6F6;
	}

	.index {
		.title_text {
			padding: 12rpx 40rpx;
			font-size: 28rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #666666;
		}

		#editor {
			width: 100%;
			height: 456rpx;
			padding: 12rpx 40rpx;
			background: #FFFFFF;
		}

		.baocun {
			margin: 40rpx auto;
			width: 90%;
			padding: 18rpx 0;
			background: #6699FF;
			text-align: center;
			border-radius: 16rpx;
			font-size: 32rpx;
			font-family: SourceHanSansCN-Regular, SourceHanSansCN;
			font-weight: 400;
			color: #FFFFFF;
		}

		.onecontent {
			background: #ffffff;

			.onecontent_item {
				width: 100%;
				padding: 16rpx 46rpx;
				border-bottom: 2rpx solid #E5E5E5;

				.onecontent_itemleft {
					flex: 1;
					font-size: 28rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #666666;
				}

				.onecontent_itemright {
					flex: 3;

					.onecontent_itemrighttext {
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #999999;
					}

					.onecontent_itemrightimges {
						width: 112rpx;
						height: 112rpx;
						background: #F5F5F5;
						border-radius: 10rpx;
						font-size: 40rpx;
						color: #878787;

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

					.onecontent_itemright_text {
						width: 100%;
						font-size: 24rpx;
						font-family: SourceHanSansCN-Regular, SourceHanSansCN;
						font-weight: 400;
						color: #999999;
					}
				}

				.flex-start {
					.fourcontent {
						.fourcontent_item {
							position: relative;
							margin-top: 16rpx;
							margin-left: 20rpx;
							width: 112rpx;
							height: 112rpx;
							border-radius: 16rpx;

							image {
								width: 112rpx;
								height: 112rpx;
								border-radius: 16rpx;
							}

							.fourcontent_itemtext {
								position: absolute;
								top: 0rpx;
								right: 0rpx;
							}
						}
					}
				}

			}

			.onecontent {
				background: #ffffff;
				padding-bottom: 20rpx;

				.onecontentscrolls {
					width: 564rpx;
					height: 190rpx;
					margin: 0 auto;
					border-radius: 10rpx;
					background: #f5f5f5;

					.onecontentscrollsimage {
						width: 564rpx;
						height: 190rpx;
					}
				}

				.onecontentone {
					width: 694rpx;
					text-align: center;
					margin: 20rpx auto;
					background: #6699FF;
					border-radius: 16rpx;
					padding: 18rpx 0;
					font-size: 32rpx;
					font-family: SourceHanSansCN-Regular, SourceHanSansCN;
					font-weight: 400;
					color: #FFFFFF;
				}

				.onecontentscrolllang {
					padding: 28rpx 20rpx;

					.onecontentscroll_item {
						background: #f5f5f5;
						border-radius: 10rpx;
						width: 140rpx;
						height: 140rpx;
					}
				}

				.onecontentscroll {
					padding: 28rpx 20rpx;

					.onecontentscroll_item {
						position: relative;

						.onecontentscroll_itemimage {
							border-radius: 10rpx;
							width: 140rpx;
							height: 140rpx;
						}

						.onecontentscrollicon {
							position: absolute;
							top: -10rpx;
							right: -10rpx;

						}
					}

				}
			}
		}

	}
</style>