<template>
	<view style="width: 100%;height: 100%;overflow: scroll;position: absolute;">

		<NavBar ref="nav" navTitle="预约提菜" :showIcon="true" :supportChange="false">
		</NavBar>

		<loading-state ref="pageView" @request="request">

			<view style="background: #FFA35A;width: 100%;height: 100%;overflow: scroll;position: absolute;">


				<view style="display: flex;flex-direction: column;background: #F2F2F2; width: 100%;
		border-radius: 25px;height: 100vh; padding: 10px;box-sizing: border-box;position: absolute;">

					<view style="display: flex;flex-direction: column;background: #fff;
			border-radius: 15px;padding: 15px 10px;">

						<view
							style="display: flex;flex-direction: row;align-items: center;justify-content: space-between;">

							<text
								style="font-size: 16px;color: #000; font-weight: 600;font-family: sans-serif;">{{info.storeName}}</text>

							<view style="display: flex;flex-direction: row;align-items: center;" @click="address()">
								<text style="font-size: 12px;color: #FF9900;">切换</text>
								<image src="../../static/right_icon.png"
									style="width: 15px;height: 15px;margin-left: 5px;">
								</image>
							</view>
						</view>

						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/date.png"
								style="width:20px;height: 20px;">
							</image>
							<text
								style="margin-left: 5px;flex: 1;color: #666;font-size: 14px;">{{info.businessHours}}</text>

						</view>

						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 15px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/location.png"
								style="width: 20px;height: 20px;">
							</image>
							<text style="margin-left: 5px;flex: 1; color: #666;font-size: 14px;">{{info.address}}</text>

						</view>


						<view style="display: flex;flex-direction: row;align-items: center;justify-content: center;margin-top: 1;">
							<text
								style="font-size: 14px;color: #000; font-weight: 600;font-family: sans-serif; flex: 1;">提货时间</text>
								
							<uni-datetime-picker type="date" v-model="info.reserveDate":start="info.start" :end="info.end":disabledDate="disabledDate" />

						</view>


					</view>

					<view style="margin-top: 10px;display: flex;flex-direction: row;background: #fff;align-items: center;
			border-radius: 15px;padding: 15px 10px;justify-content: space-between;">

						<text style="font-size: 14px;color: #000; font-weight: 600;font-family: sans-serif;">提菜人</text>

						<view style="display: flex;flex-direction: row;align-items: center;" @click="changePer()">

							<text
								style="font-size: 14px;color: #000; font-weight: 600;font-family: sans-serif;">{{info.name}}</text>
							<text style="font-size: 12px;color: #999; margin-left: 8px;">{{info.phone}}</text>

							<image src="../../static/right_icon.png" style="width: 15px;height: 15px;margin-left: 5px;">
							</image>
						</view>
					</view>


					<view
						style="margin-top: 10px;display: flex;flex-direction: column;background: #fff;border-radius: 15px;padding: 10px;">

						<text
							style="font-size: 15px; color: #000; font-weight: 600;font-family: sans-serif;">所提菜列表</text>

						<view style="width: 100%; display: flex;flex-direction: column; margin-top: 10px;">
							<view v-for="(item,index) in pickingUpGoods" @click="itemClick(item.goodsSid)"
								style="display: flex;flex-direction: column;justify-content: center;width: 100%; margin-top: 15px; ">

								<view style="display: flex;flex-direction: row;align-items: center;width: 100%;  ">

									<image :src="item.iconUrl" style="width: 90px;height: 90px; border-radius: 10px; "
										mode="aspectFill">
									</image>

									<view
										style="display: flex;flex-direction: column;flex: 1;  padding-bottom: 15px; margin-left: 10px;"
										:style="{'border-bottom':(index == pickingUpGoods.length-1 ? 'none' : '1px #EFEFEF solid')}">

										<text style="font-size: 13px;color: #000;">{{item.name}}</text>

										<text
											style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remark}}</text>

										<view
											style="display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
											<text
												style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
									font-size: 10px;color: #EE752F;  margin-right: 10px; ">{{item.weight}}{{item.specificationUnit}}/{{item.unitName}}</text>

											<text
												style="border: 1px #EE752F solid; background: #FF9900; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
												v-if="item.type=='0'">百姓菜!</text>
											<text
												style="border: 1px #3AA15F solid; background: #40C772; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
												v-if="item.type=='1'">精品菜!</text>
											<text
												style="border: 1px #1D60C7 solid; background: #2489F7; color: #fff; font-size: 10px;border-radius: 5px;	padding: 0px 8px;"
												v-if="item.type=='2'">企业菜!</text>

										</view>

										<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 15px;
								margin-right: 15px;">


											<view style="display: flex;flex-direction: row;align-items: center;">
												<text style="font-size: 12px;color: #FF5006;">剩余：</text>
												<text
													style="font-size: 14px;color: #FF5006;">{{item.goodsNumber}}{{item.unitName}}</text>
											</view>



											<view style="display: flex;flex-direction: row;align-items: center;">

												<image src="../../static/jian_icon.png" mode="aspectFill"
													style="width: 20px;height: 20px;" @click.stop="jian(item)">
												</image>

												<text
													style="font-size: 14px;margin-left: 8px;margin-right: 8px;">{{item.count}}</text>
												<image src="../../static/jia_icon.png" mode="aspectFill"
													style="width: 20px;height: 20px;" @click.stop="jia(item)">
												</image>

											</view>

										</view>

									</view>

								</view>

							</view>

						</view>

					</view>

					<view
						style="position: fixed;bottom: 0; width: 100%; box-sizing: border-box; padding-left: 10vw;padding-right: 10vw;display: flex;flex-direction: row; justify-content: center;align-items: center;">
						<text style=" background: #FF9900;color: #fff;margin-top: 20px;margin-bottom: 20px; border-radius: 20px; 
							padding-top: 10px;padding-bottom: 10px;padding-left: 25vw;padding-right: 25vw; text-align: center;"
							@click="congirmExtract()">确认提菜</text>
					</view>

				</view>
			</view>
		</loading-state>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				affiliation: "",
				info: {

				},
				pickingUpGoods: [],
				disabledDate: [
					// '2023-12-16'
				],
			}
		},
		onLoad(options) {

			uni.$on("address", (e) => {
				// 相当与下拉刷新
				this.info.storeSid = e.sid;
				this.info.storeName = e.name;
				this.info.businessHours = e.businessHours;
				this.info.address = e.address;
			})

			uni.$on("changePer", (e) => {
				// 相当与下拉刷新
				this.info.name = e.name;
				this.info.phone = e.phone;
			})


			this.request()
			this.getSun()

			this.pickingUpGoods = JSON.parse(options.pickingUpGoods)
			this.affiliation = options.affiliation

		},
		onUnload() {
			uni.$off('address');
			uni.$off('changePer');
		},
		methods: {
			getSun() {
				let _this = this
				_this.$api.getExtractSaturAndSun().then((resp) => {
			
					_this.disabledDate = resp
			
				}).catch(e => {
			
				})
			},
			address() {
				uni.navigateTo({
					url: '/pages/SelectAddressActivity'
				})
			},
			changePer() {
				uni.navigateTo({
					url: '/pages/good/changePersonnel?name=' + this.info.name + "&phone=" + this.info.phone
				})
			},
			// 获取数据
			request() {
				let _this = this
				_this.$api.getStoreBySid(getApp().globalData.sid).then((resp) => {
					_this.info = resp
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})

				}).catch(e => {
					console.log(e);
				})
			},
			
			jian(item){
			console.log("item》》》》", item)
				const that = this
			if (Number(item.count) == 1) {
			
				wx.showModal({
					content: '确定不要了吗',
					cancelText: "再想想",
					confirmText: "删除",
					confirmColor: "#FF9900",
					success(res) {
						if (res.confirm) {
							console.log('用户点击确定')
							item.count = 0
							const index = that.pickingUpGoods.findIndex((info) => info.goodsSid === item.goodsSid)
							console.log("index》》》》", index)
							that.pickingUpGoods.splice(index, 1)
						} else if (res.cancel) {
			
						}
					}
				})
			
			} else {
				if (Number(item.count) > 0) {
					item.count = Number(item.count) - 1
				}
			
			}
			},
			jia(item){
					item.count = Number(item.count) + 1
			},
			congirmExtract() {
				let _this = this

				let list = []

				for (var i = 0; i < this.pickingUpGoods.length; i++) {
					var item = this.pickingUpGoods[i]
					if (item.count > 0)
						list.push({
							goodsSid: item.goodsSid,
							select: item.count,
						})
				}
				// console.log("ddd", list);

				if (list.length == 0) {
					this.shortToast('请添加商品')
					return
				}


				var params = {
					customerSid: getApp().globalData.sid,
					affiliation: _this.affiliation,
					reserveDate: _this.info.reserveDate,
					storeSid: _this.info.storeSid,
					userName: _this.info.name,
					userPhone: _this.info.phone,
					goodsVos: list
				}
				console.log("pppp", params);

				_this.$api.submissionExtract(params).then((resp) => {
					uni.navigateBack()
				}).catch(e => {
					console.log(e);
				})
			},
		}
	}
</script>

<style>

</style>