<template>
	<view>
		<u-navbar :autoBack="true" placeholder bgColor="#FFFFFF">
			<view class="navSlot" slot="center">
				<view class="title">编辑信息</view>
			</view>
		</u-navbar>
		<view class="bgMain">
			<view class="shopeInfo">
				<view class="edit_shopName">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 店铺名称</text>
					</view>

					<view class="edit_input">
						<u--input placeholder="请输入内容" v-model="tbStoreDetails.storeName"></u--input>
					</view>

				</view>

				<view class="edit_shopType">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 店铺类型</text>
					</view>

					<view class="edit_input">
						<view>{{tbStoreDetails.storeTypeIdList?tbStoreDetails.storeTypeIdList:'请选择店铺类型(可多选)'}}</view>
						<view>
							<image class="botton" src="../../static/tabar/ic_bot.png"></image>
						</view>
					</view>

				</view>
				<view class="serviceScope" @click="isShow1 = true">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 服务范围</text>
					</view>

					<view class="edit_input">
						<view>{{tbStoreDetails.businessScopeStr?tbStoreDetails.businessScopeStr:'请选择服务类型(可多选)'}}</view>
						<view>
							<image class="botton" src="../../static/tabar/ic_bot.png"></image>
						</view>
					</view>

				</view>
				<view class="serviceScope">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 开始营业时间</text>
					</view>

					<view class="edit_input" @click="showTime = true">
						<view>{{tbStoreDetails.openingHours?tbStoreDetails.openingHours:'请选择开始营业时间'}}</view>
						<view>
							<image class="botton" src="../../static/tabar/ic_bot.png"></image>
						</view>
					</view>

				</view>

				<view class="serviceScope">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 结束营业时间</text>
					</view>

					<view class="edit_input" @click="showTime2 = true">
						<view>{{tbStoreDetails.closingHours?tbStoreDetails.closingHours:'请结束营业时间'}}</view>
						<view>
							<image class="botton" src="../../static/tabar/ic_bot.png"></image>
						</view>
					</view>

				</view>

				<uni-data-picker :localdata="localData" popup-title="请选择省市区" @change="onchange"
					@nodeclick="onnodeclick">
					<view class="serviceScope">
						<view>
							<text class="subscript">* </text>
							<text class="shopame"> 门店区域</text>
						</view>

						<view class="edit_input">
							<view>{{address?address:tbStoreDetails.address?tbStoreDetails.address:'请选择门店区域'}}</view>
							<view>
								<image class="botton" src="../../static/tabar/ic_bot.png"></image>
							</view>
						</view>

					</view>
				</uni-data-picker>



				<view class="edit_shopName">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 详细地址</text>
					</view>

					<view class="edit_input">
						<u--input placeholder="请输入详细地址" v-model="tbStoreDetails.detailedAddress"></u--input>
					</view>

				</view>
				<view class="edit_shopName">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 门店负责人姓名</text>
					</view>

					<view class="edit_input">
						<u--input placeholder="请输入门店负责人姓名" v-model="tbStoreDetails.personChargeName"></u--input>
					</view>

				</view>
				<view class="edit_shopName">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 门店服务电话</text>
					</view>

					<view class="edit_input">
						<u--input placeholder="请输入门店服务电话" v-model="tbStoreDetails.personChargePhone"></u--input>
					</view>

				</view>
				<view class="edit_shopName">
					<view>
						<text class="subscript">* </text>
						<text class="shopame">门店照片</text>
					</view>

					<u-upload :fileList="fileList1" @afterRead="afterRead" @delete="deletePic" name="1" multiple
						:maxCount="10"></u-upload>

				</view>

				<view class="serviceScope">
					<view>
						<text class="subscript">* </text>
						<text class="shopame"> 门店状态</text>
					</view>

					<view class="edit_input" @click="isShowShopType = true">
						<view>门店状态</view>
						<view>
							<text>{{tbStoreDetails.storeStatus == '0'?'上架':'下架'}}</text>
							<image class="botton" src="../../static/tabar/ic_bot.png"></image>
						</view>
					</view>

				</view>

			</view>

			<view class="butSave" @click="saveBtn">保存</view>
		</view>
		<u-popup :show="isShow1" @close="isShow1 = false" round="40rpx" :closeable="true">
			<view class="fuwuBox">
				<div class="fuwuBoxTitle">
					选择服务范围
				</div>
				<u-checkbox-group placement="column" @change="checkboxChange">
					<div class="fuList">

						<div class="fuListItem" v-for="(item, index) in checkboxList1">
							<u-checkbox class="checkBox" :customStyle="{marginBottom: '8px'}" :key="index"
								:label="item.label" :name="item.value">
							</u-checkbox>
						</div>

					</div>
				</u-checkbox-group>

				<div class="querenBtn" @click="fuwuQueren">
					确认
				</div>
			</view>
		</u-popup>
		<u-picker :show="show" :columns="columns" @confirm="confirm" @cancel="cancel"></u-picker>
		<u-picker :show="isShowShopType" :columns="[shopTypeArr]" @confirm="confirmShopType"
			@cancel="isShowShopType = false" keyName="name"></u-picker>
		<u-datetime-picker :show="showTime" v-model="tbStoreDetails.openingHours" mode="time" @confirm="timeConfirm"
			@cancel="showTime = false" :formatter="formatter"></u-datetime-picker>
		<u-datetime-picker :show="showTime2" v-model="tbStoreDetails.closingHours" mode="time"
			@confirm="showTime2  =false" @cancel="showTime2 = false" :formatter="formatter"></u-datetime-picker>
	</view>
</template>

<script>
	const cityRows = require('../../components/map.json')
	export default {
		data() {
			return {
				show: false,
				showTime: false,
				showTime2: false,
				shopType: "",
				value1: '',
				value2: '',
				columns: [
					['中国', '美国', '日本']
				],
				tbStoreDetails: '',
				id: '',
				isShow1: false,
				fileList1: [],
				checkboxValue1: [],
				checkboxList1: [],
				shopTypeArr: [{
					name: '上架',
					id: '0'
				}, {
					name: '下架',
					id: '1'
				}],
				isShowShopType: false,
				localData: [],
				address: '',
				classes:''

			}
		},

		onLoad(op) {
			this.localData = this.get_city_tree()
			this.id = op.id
			console.log(op)
			this.getTbStoreDetails()
		},

		methods: {

			saveBtn() {
				console.log(this.tbStoreDetails);
				let data = this.tbStoreDetails

				let pictureList = []
				this.fileList1.map(item => {
					console.log(item.url);
					pictureList.push(item.url)
				})
				data.pictureList = pictureList
				data.address = this.address
				this.$http.post('/api/store/tbStore/edit', this.tbStoreDetails).then(res => {
					console.log(res);
					if (res.code == 200) {
						setTimeout(() => {
							uni.navigateBack()
						})
					}
					uni.showToast({
						icon: 'none',
						title: res.msg
					})
				})
			},

			formatter(type, value) {
				if (type === 'hour') {
					return `${value}时`
				}
				if (type === 'minute') {
					return `${value}分`
				}
				return value
			},

			confirmShopType(e) {
				console.log(e);
				this.isShowShopType = false
				this.tbStoreDetails.storeStatus = e.value[0].id
			},

			//门店范围集合
			getscopeInfoList() {
				console.log(this.tbStoreDetails.businessScopeIdList);
				let arr = []
				this.$http.get('/api/store/tbStore/scopeInfoList').then(res => {
					this.checkboxList1 = res.data
					// 通过 `map` 来获取对应的 `label`
					const matchedLabels = this.tbStoreDetails.businessScopeIdList.map(value => {
						// 找到与当前值匹配的对象
						const match = this.checkboxList1.find(item => item.value === value);
						// 如果匹配到，返回 label，否则返回 null
						return match ? match.label : null;
					});
					// 将匹配到的 label 数组转为一个字符串，使用逗号分隔
					const resultString = matchedLabels.filter(label => label !== null).join(", ");
					this.tbStoreDetails.businessScopeStr = resultString

				})
			},


			//门店详情
			getTbStoreDetails() {
				this.$http.get('/api/store/tbStore/details', {
					id: this.id
				}).then(res => {
					if (res.data) {
						res.data.storeTypeIdList = res.data.storeTypeIdList ? res.data.storeTypeIdList.join(",") :
							''
					}
					let fileList1 = []
					res.data.pictureList.map(item => {
						fileList1.push({
							url: item
						})
					})
					this.fileList1 = fileList1
					this.tbStoreDetails = res.data
					this.getscopeInfoList()
				})
			},


			checkboxChange(e) {
				console.log(e);
				this.checkboxValue1 = e
			},

			fuwuQueren() {
				this.isShow1 = false
				this.tbStoreDetails.businessScopeIdList = this.checkboxValue1

				// 通过 `map` 来获取对应的 `label`
				const matchedLabels = this.checkboxValue1.map(value => {
					// 找到与当前值匹配的对象
					const match = this.checkboxList1.find(item => item.value === value);
					// 如果匹配到，返回 label，否则返回 null
					return match ? match.label : null;
				});

				// 将匹配到的 label 数组转为一个字符串，使用逗号分隔
				const resultString = matchedLabels.filter(label => label !== null).join(", ");

				this.tbStoreDetails.businessScopeStr = resultString
				console.log(resultString);
			},



			confirm(e) {
				console.log(e)
				this.shopType = e;
				this.show = false;
			},
			cancel() {
				this.show = false;
			},
			timeConfirm(e) {
				console.log(e);
				//时间取消
				this.showTime = false;
			},
			timeCancel() {
				this.showTime = false;
			},

			// 删除图片
			deletePic(event) {
				this[`fileList${event.name}`].splice(event.index, 1)
			},
			// 新增图片
			async afterRead(event) {
				// 当设置 multiple 为 true 时, file 为数组格式，否则为对象格式
				let lists = [].concat(event.file)
				let fileListLen = this[`fileList${event.name}`].length
				lists.map((item) => {
					this[`fileList${event.name}`].push({
						...item,
						status: 'uploading',
						message: '上传中'
					})
				})
				for (let i = 0; i < lists.length; i++) {
					// const result = await this.uploadFilePromise(lists[i].url)
					this.$http.urlFileUpload({
						files: [{
							path: lists[i].url
						}], // 必填 临时文件路径 格式: [{path: "图片地址"}]
						// data:"向服务器传递的参数", //可不填
						name: "file", //默认 file
					}).then(res => {
						console.log(res);
						if (res.code == 200) {
							let item = this[`fileList${event.name}`][fileListLen]
							this[`fileList${event.name}`].splice(fileListLen, 1, Object.assign(item, {
								status: 'success',
								message: '',
								url: res.data.url
							}))
							fileListLen++
						}
					})
				}
			},
			uploadFilePromise(url) {
				this.$http.urlFileUpload({
					files: [{
						path: url
					}], // 必填 临时文件路径 格式: [{path: "图片地址"}]
					// data:"向服务器传递的参数", //可不填
					name: "file", //默认 file
				}).then(res => {
					console.log(res);
					if (res.code == 200) {
						return res.data.url
					}
				})
			},

			// 节点变化后 （并非已经选择完毕）
			onnodeclick(node) {
				// console.log(JSON.stringify(node))
			},

			// 整体选择完成以后
			onchange(e) {
				const value = e.detail.value
				this.address = value[0].text + '' + value[1].text + '' + value[2].text
			},



			// 省市区数据树生成
			get_city_tree() {
				let res = []
				if (cityRows.length) {
					// 递归生成
					res = this.handleTree(cityRows)
				}
				
				return res
			},


			handleTree(data, parent_code = null) {
				let res = []

				let keys = {
					id: 'code',
					pid: 'parent_code',
					children: 'children',

					text: 'name',
					value: 'code'
				}

				let oneItemDEMO = {
					text: '',
					value: '',
					children: []
				}
				let oneItem = {}

				// 循环
				for (let index in data) {
					// 判断
					if (parent_code === null) {
						// 顶级菜单 - 省
						if (!data[index].hasOwnProperty(keys.pid) || data[index][keys.pid] == parent_code) {
							// 不存在parent_code，或者已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)

						} else {
							// 匹配不到，跳过
						}

					} else {
						// 非顶级菜单 - 市、区、街道
						if (data[index].hasOwnProperty(keys.pid) && data[index][keys.pid] == parent_code) {
							// 已匹配
							oneItem = JSON.parse(JSON.stringify(oneItemDEMO))
							oneItem.text = data[index][keys.text]
							oneItem.value = data[index][keys.value]

							// 递归下去
							oneItem.children = this.handleTree(data, data[index][keys.id])
							res.push(oneItem)

						} else {
							// 匹配不到，跳过
						}

					}

				}
				return res
			},

		}
	}
</script>

<style lang="scss">
	.u-border {
		border: none !important;
	}

	.botton {
		width: 22rpx;
		height: 11rpx;
		margin-right: 20rpx;
	}

	.butSave {
		background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
		border-radius: 50rpx 50rpx 50rpx 50rpx;
		font-size: 32rpx;
		margin-top: 48rpx;
		color: #FFFFFF;
		padding: 29rpx;
		text-align: center;
		font-weight: 800;
	}

	.serviceScope {
		margin-top: 20rpx;
	}

	.shopeInfo {
		background: white;
		padding: 24rpx;
		border-radius: 14rpx 14rpx 14rpx 14rpx;

		.subscript {
			color: #FF0000;
		}

		.shopame {
			font-size: 28rpx;
			color: #333333;
		}

		.edit_input {
			display: flex;
			justify-content: space-between;
			height: 72rpx;
			align-items: center;
			padding-left: 30rpx;
			font-size: 24rpx;
			color: #999999;
			margin-top: 20rpx;
			background: #FAF7F6;
			border-radius: 8rpx 8rpx 8rpx 8rpx;
			border: 1rpx solid #E3CEC6;
		}

		.edit_shopType {
			margin-top: 20rpx;
		}

		.edit_shopName {
			margin-top: 20rpx;
		}
	}

	.fuwuBox {
		width: 750rpx;
		height: 762rpx;
		background: #FFFFFF;
		border-radius: 40rpx 40rpx 0rpx 0rpx;
		padding-bottom: 100rpx;
		box-sizing: border-box;

		.fuwuBoxTitle {
			font-weight: bold;
			font-size: 32rpx;
			color: #333333;
			text-align: center;
			padding: 36rpx 0 50rpx;
		}

		.fuList {
			overflow-y: auto;
			height: 500rpx;

			.fuListItem {
				height: 101rpx;
				background: #FAF7F6;
				border-radius: 8rpx 8rpx 8rpx 8rpx;
				position: relative;
				margin-bottom: 20rpx;
				display: flex;
				justify-content: center;

				text {
					text-align: center;
					line-height: 101rpx;
				}

				.checkBox {
					position: absolute;
					top: 50%;
					transform: translateY(-50%);
				}
			}
		}

		.querenBtn {
			width: 702rpx;
			height: 79rpx;
			background: linear-gradient(90deg, #FF4502 0%, #FF8903 100%);
			border-radius: 50rpx 50rpx 50rpx 50rpx;
			font-weight: bold;
			font-size: 32rpx;
			color: #FFFFFF;
			position: absolute;
			left: 50%;
			transform: translateX(-50%);
			bottom: 10rpx;
			text-align: center;
			line-height: 80rpx;
		}
	}
</style>