<template>

	<view style="display: flex;flex-direction: column;">

		<view class="top">
			<NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight"
				:end-change-height="page.endHeight">
			</NavBar>
			<view style="display: flex;flex-direction: column;margin-top: 25vw; margin-left: 5vw;">
				<view style="font-size: 17px;color: #fff;height: 8vw;line-height: 8vw;margin-top: 5vw;">
					{{data.state}}
				</view>
				<view
					style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;box-sizing: border-box;">
					窖号：{{data.serialNumber}}
				</view>
				<view style="font-size: 12px;color: white;line-height: 7vw;height: 7vw;color: #fff;">
					{{data.time}}
				</view>
			</view>

		</view>
		<view
			style="display: flex;flex-direction: row;justify-content: center;
			background-color: #fff;height: 25vw; border-top-left-radius: 25px;border-top-right-radius: 25px;margin-top: -9.06vw;">


			<image src="https://supervise.yxtsoft.com/lpk/image/detail_affeection.png" mode="aspectFit"
				style="margin-left: 20px;margin-right: 20px; width: 80vw;height: 25vw;"></image>

			<view style="width: 55%; margin-left: 20vw;
		display: flex;flex-direction: row;margin-top: 9vw;position: absolute;z-index: 10;align-items: center;
		justify-content: space-between;">
				<text style="color: #fff;font-size: 18px;font-weight: 600;">{{data.pname}}</text>

				<text style="background: #F1F2F3 ; border-radius: 25px;color: #ccc;padding: 3px 10px;">转赠亲友</text>
			</view>

		</view>

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

			<view style="background-color: #fff;padding: 10px 15px;">

				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
					<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
					<text style="margin-left: 8px;font-size: 14px;color: #333;">商品明细</text>
				</view>

			</view>

			<view v-for="(item,index) in data.goodsVos" :key="index" @click="itemClick(item.goodsSid)"
				style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

				<view style="display: flex;flex-direction: row;background-color: #fff;padding: 10px 15px;
					border-bottom: 1px #F1F2F3 solid; width: 100%;">
					<image :src="item.pic" style="width: 60px;height: 60px;flex-shrink: 0;"></image>
					<view style="margin-left: 10px;margin-right: 10px;flex: 1;">
						<text class="text" style="font-weight: 500;">{{item.goods}}
						</text>
						<view style="font-size: 12px;color: #666666;margin-top: 5px;">{{item.remarks}}</view>
						<view style="display: flex;flex-direction: row;justify-content: space-between;margin-top: 5px;">
							<text
								style="font-size: 12px;color: #666666;margin-right: 10px;">总数：{{item.num}}{{item.unitName}}
							</text>
							<view style="font-size: 12px;color: #666666;">可预约：{{item.lnum}}{{item.unitName}}</view>
						</view>
					</view>
				</view>


			</view>

			<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;">

				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
					<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
					<text style="margin-left: 8px;font-size: 14px;color: #333;">预约记录</text>
				</view>

			</view>

			<view style="margin-bottom: 10px;">
				<view v-for="(item,index) in data.orderCardVoList" :key="index"
					style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

					<view style="display: flex;flex-direction: column;background-color: #fff;
					border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 20px;padding-bottom: 10px;">
						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 10px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/date.png"
								style="width: 20px;height: 20px;">
							</image>
							<text
								style="margin-left: 5px;font-size: 12px; color: #999;">提货时间：{{item.reserveDate}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/location.png"
								style="width: 20px;height: 20px;">
							</image>
							<text style="margin-left: 5px;font-size: 12px; color: #999;">提货地点：{{item.store}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/user2.png" mode="aspectFill"
								style="width: 20px;height: 20px;">
							</image>
							<text
								style="margin-left: 5px;font-size: 12px; color: #999;">提&ensp;货&ensp;人：{{item.userName}}</text>
						</view>
						<view style="display: flex;flex-direction: row;align-items: center;margin-top: 5px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/phone2.png" mode="aspectFill"
								style="width: 20px;height: 20px;">
							</image>
							<text style="margin-left: 5px;font-size: 12px; color: #999;">联系电话：{{item.userPhone}}</text>
						</view>
						<view style="	display: flex;flex-direction: row;align-items: center;margin-top: 8px;">
							<text style="color: #999; font-size: 12px;">- {{item.goods}}</text>
						</view>

					</view>

				</view>

			</view>

			<view style="background-color: #fff;margin-top: 10px;padding: 10px 15px;">

				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="background: #FF9D33; border-radius: 50%;width: 12px;height: 12px;"></view>
					<view style="background: #FFDAB2; border-radius: 50%;width: 12px;height: 12px;"></view>
					<text style="margin-left: 8px;font-size: 14px;color: #333;">转赠信息</text>
				</view>

			</view>

			<view style="margin-bottom: 50px;">

				<view v-for="(item,index) in data.empCardGifts" :key="index"
					style="display: flex;flex-direction: row;background-color: #fff;padding-left: 10px;padding-right: 10px;">

					<view style="display: flex;flex-direction: row;background-color: #fff;
						border-bottom: 1px #F1F2F3 solid; width: 100%;padding-left: 10px; padding-right: 10px; padding-bottom: 10px;">

						<view style="display: flex;flex-direction: row;width: 100%;margin-top: 15px;">
							<image src="https://supervise.yxtsoft.com/lpk/image/home_affection.png"
								style="width: 50px;height: 50px;margin-right: 10px;flex-shrink: 0;"></image>

							<view style="display: flex;flex-direction: column;width: 100%;">

								<text
									style="font-size: 12px; color: #333;margin-top: 5px;">亲情窖序号：{{item.serialNumber}}</text>
								<text
									style="font-size: 12px; color: #333;margin-top: 5px;">分享时间：{{item.createTime}}</text>
								<text style="font-size: 12px; color: #333;margin-top: 5px;">亲情窖编码：{{item.code}}</text>
								<text style="font-size: 12px; color: #333;margin-top: 5px;">提货密码：{{item.codeKey}}</text>
								<text style="font-size: 12px; color: #333;margin-top: 5px;">备注说明：{{item.remarks}}</text>

								<view
									style="display: flex;flex-direction: row;margin-top: 5px;align-items: center;justify-content: space-between;width: 100%;">
									<text style="flex: 1;font-size: 12px; color: #A5A5A5; margin-right: 10px;">- {{item.goods}}</text>

									<button v-show="item.isShare=='1'" class='sharebtn' :data-info="item"
										open-type="share">分享窖</button>
									<button v-show="item.isShare=='2'" class='sharebtn2' :data-info="item"
										open-type="share">已分享</button>
									<button v-show="item.isShare=='3'" class='sharebtn3'>转赠成功</button>


								</view>
							</view>

						</view>

					</view>

				</view>

			</view>

			<view style="height: 50px;"></view>



		</loading-state>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					sid: '',
					startHeight: 0,
					endHeight: 0
				},
				data: {
					time: "",
					name: "",
					pname: "",
					state: "",
					notRese: false,
					showBtn: false,
					showRecord: false,
					goodsVos: [],
					value: "",
					userName: "",
					userPhone: "",
				}
			}
		},
		onLoad(options) {
			this.page.sid = options.sid
			this.request()
			this.$bus.$on('order', msg => {
				this.$nextTick(() => {
					this.$refs.pageView.setLoadState(0)
				})
				this.request();
			})

			let info = uni.getSystemInfoSync();

			this.page.startHeight = info.windowWidth * 0.6
			this.page.endHeight = info.windowWidth * 0.8
		},
		onUnload() {
			uni.$off('order');
		},
		onPageScroll(res) {
			// 渐变
			this.$refs.nav.defaultColorBgAlpha(res)
		},
		methods: {

			request() {
				let _this = this
				_this.$api.gifcardDetail(this.page.sid).then((resp) => {
					_this.data = resp
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			itemClick(goodsSid) {
				uni.navigateTo({
					url: '/pages/good/goodsDetail?sid=' + goodsSid
				})
			},
			onShareAppMessage: function(res) {
				console.log("res", res)
				console.log("data", res.target.dataset)
				var data = res.target.dataset.info
				this.shareCard(data.sid)
				// ①
				let shareData = JSON.stringify({
					params: {
						code: data.code,
						codeKey: data.codeKey,
						customerSid: ''
					},
					functionName: 'bindCard',
					url: '/pages/detail/detail_affeection?sid=' + data.sid

					// url:'/pages/bind/bind_pickUpCard?code=' + + &codeKey=' + data.codeKey,
					// FunctionName:'share!
				})
				// 转码传输
				let value = encodeURIComponent(shareData)

				return {
					title: '汇融惠享-云菜窖',
					// ②
					path: '/pages/login/login?data=' + value,
					imageUrl: 'https://supervise.yxtsoft.com/lpk/image/shareAffeection.png', //自定义图片路径，显示图片长宽比是 5:4。
					success: function(res) {
						console.log('aaaa', "分享成功")
					},
					fail: function(res) {
						// 转发失败
						console.log('aaaa', "用户点击了取消")
					}
				}
			},

			shareCard(sid) {
				let _this = this

				_this.$api.shareEmpCard(sid).then((resp) => {

					var item = _this.data.empCardGiftVos.find(item => item.sid === sid)

					console.log("item", item);

					item.share = '2'

				}).catch(e => {})
			}

		}
	}
</script>

<style>
	.canvas-code {
		width: 39vw !important;
		height: 39vw !important;
	}

	.sharebtn {
		background: #FF4727;
		font-size: 12px;
		color: #fff;
		width: 30vw;
		border-radius: 20px;
	}


	.sharebtn::after {
		border: none;
	}

	.sharebtn2 {
		background: #FF7165;
		width: 30vw;
		font-size: 12px;
		color: #fff;
		border-radius: 20px;
	}

	.sharebtn2::after {
		border: none;
	}

	.sharebtn3 {
		background: #CFCFCF;
		width: 30vw;
		font-size: 12px;
		color: #fff;
		border-radius: 20px;
	}

	.sharebtn3::after {
		border: none;
	}

	.top {
		width: 100vw;
		/* height: 126.66vw; */
		height: 65vw;
		/* 加载背景图 */
		background-image: url(https://supervise.yxtsoft.com/lpk/image/detail_bj4.png);
		/* 让背景图基于容器大小伸缩 */
		background-size: 100% 100%;
	}

	.text {
		white-space: normal;
		text-overflow: -o-ellipsis-lastline;
		overflow: hidden;
		text-overflow: ellipsis;
		display: -webkit-box;
		-webkit-line-clamp: 2;
		line-clamp: 2;
		-webkit-box-orient: vertical;
	}

	uni-page-body,
	page {
		background: #F1F2F3;
	}

	.btn {
		border: 1px solid;
		padding-left: 30rpx;
		padding-right: 30rpx;
		padding-top: 12rpx;
		padding-bottom: 12rpx;
		border-radius: 50rpx;
		height: 15px;
		margin-left: 25rpx;
		font-size: 26rpx;
	}

	/* 弹窗样式 */
	.model {
		position: absolute;
		width: 100%;
		height: 100%;
		background: #000;
		z-index: 999;
		opacity: 0.5;
		top: 0;
		left: 0;
	}

	.modalDlg {
		/* 设置超出滚动 */
		overflow: auto;
		width: 90%;
		position: fixed;
		top: 50vw;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 9999;
		margin: 0 auto;
		padding: 35rpx;
		background-color: #fff;
		border-radius: 20rpx;
		display: flex;
		flex-direction: column;

	}

	.windowRow {
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
		padding-bottom: 15rpx;
		width: 100%;
	}

	.userTitle {
		font-size: 42rpx;
	}

	.back {
		text-align: center;
		color: #f0a500;
		font-size: 30rpx;
	}

	.wishName {
		width: 100%;
		justify-content: center;
		flex-direction: row;
		display: flex;
		margin: 40rpx 0rpx;
	}

	.wish_put {
		width: 100%;
		border: #ededef 1rpx solid;
		background-color: #f6f7fb;
		border-radius: 12rpx;
		padding: 30rpx 20rpx;
		margin: 20rpx 0rpx;
	}

	.holder_cls {
		color: #909399;
	}

	.wishbnt {
		background-color: #fec600;
		text-align: center;
		border-radius: 50rpx;
		padding: 25rpx;
		color: white;
	}

	/*弹窗样式结束*/

	/* 下面的姓名样式，不要也没什么影响 */
	.jiantou {
		width: 35rpx;
		height: 35rpx;
		margin-left: 10rpx;
	}

	.fenge {
		margin-bottom: 30rpx;
	}

	.xian {
		border-bottom: #e5e5e5 1rpx solid;
	}

	.yellow {
		color: #f0a500;
		font-weight: 700;
	}

	.box {
		background-color: white;
		padding: 0rpx 25rpx;
		display: flex;
		flex-direction: column;
	}

	.row {
		height: 120rpx;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.you {
		height: 100%;
		display: flex;
		justify-content: space-between;
		align-items: center;
	}

	.zhushi {
		font-size: 28rpx;
		color: #808080;
	}
</style>