1<template>

	<view style="display: flex;flex-direction: column; height: 100vh;box-sizing: border-box ; background-color: #fff;" id="page">

		<view class="top">
			<NavBar ref="nav" navTitle="详情" :showIcon="true" :start-change-height="page.startHeight"
				:end-change-height="page.endHeight">
			</NavBar>


		</view>

		<view
			style="margin-top: -15vh; background-color: #fff;height: 20vh;border-top-left-radius: 25px;border-top-right-radius: 25px;">
			<loading-state ref="pageView" @request="request">


				<view style="display: flex;flex-direction: row;
			margin:20px 20px 0px 20px;padding-bottom: 10px; border-bottom: 2px #EFEFEF solid; justify-content: space-between;">
					<view style="display: flex;flex-direction: row;align-items: center;">
						<view style="background: #FF9900; border-radius: 50%;width: 12px;height: 12px;"></view>
						<view style="background: #FFCC7F; border-radius: 50%;width: 12px;height: 12px;"></view>
						<text
							style="margin-left: 8px;font-size: 16px;color: #FF9900;font-weight: 600;font-family: sans-serif;">{{page.name}}</text>
					</view>

					<view style="display: flex;flex-direction: row;align-items: center;margin-right: 10px;">
						<view style="color: #888;font-size: 12px;">定制</view>
						<input type="number" @input="numbers" v-model="page.number" maxlength="3"
							style="font-size: 12px; border: 1px #AEAEAE solid;border-radius: 5px;text-align: center; width: 25px;margin-left: 5px;margin-right: 5px;padding-left: 3px;padding-right: 3px;" />
						<view style="color: #888;font-size: 12px;">个菜窖</view>
					</view>


				</view>

				<view v-for="(item,index) in data.goods" :key="index" @click="itemClick(item.goodsSid)"
					style="display: flex;flex-direction: column;margin-top: 14px; ">

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

						<view
							style=" display: flex;flex-direction: row;align-items: center; margin-right: 10px;margin-top: 5px; margin-left: 10px;">

							<image :src='item.iconUrl' style="width: 70px;height: 70px;" mode="aspectFit"></image>

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

								<view style="display: flex;flex-direction: row;align-items: center;">
									<text
										style="flex: 1;margin-right: 10px;color: #000;font-size: 16px;">{{item.name}}</text>
									<text style="color: #888;font-size: 14px;">{{item.goodsNumber}}份</text>
								</view>


								<text style="color: #AEAEAE;font-size: 12px;margin-top: 5px;line-height: 20px;">{{item.remark}}</text>

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

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


									<text style="color: #FF5006;font-size: 15px;">￥{{convertPrice(item.totalValue)}}</text>

								</view>

							</view>

						</view>


					</view>

				</view>
				<view  style="height: 100px;background: #fff; "></view>

				<view style="background-color: #fff; padding: 10px 20px;position: fixed;bottom: 0;overflow:hidden;
			display: flex;flex-direction: row; width: 100%;flex-shrink: 1; border-top: 1px #F0F0F0 solid;">

					<view style="flex: 1; display: flex;flex-direction: row;align-items: center; margin-right: 30px;
					justify-content: space-between;">
						<view style="display: flex;flex-direction: row;align-items: center;">
							<text style="color: #888;font-size: 14px;">合计：</text>
							<text style="color: #F0752F;font-size: 18px;">{{convertPrice(page.price)}}元</text>
						</view>
					</view>


					<text
						style="background: #EE752F; text-align: center; color: #fff; border-radius: 5px;padding: 5px 20px; margin-right: 40px; "
						@click="settlement()">结算</text>


				</view>

			</loading-state>
		</view>





	</view>
</template>

<script>
	//引入bus
	import bus from '@/common/bus';
	export default {
		data() {
			return {
				page: {
					sid: '',
					name: "",
					startHeight: 0,
					endHeight: 0,
					number: "1",
					price: ""
				},
				data: {
					goods: []
				}

			}
		},
		onLoad(options) {
			this.page.sid = options.sid
			this.page.name = options.name

			let info = uni.getSystemInfoSync();

			this.page.startHeight = info.windowWidth * 0.6
			this.page.endHeight = info.windowWidth * 0.8

			this.request()
			uni.$on("pay", (e) => {
				
				uni.switchTab({
					url: '/pages/home/pickUpCard'
				})
			})

		},
		onUnload() {
			uni.$off('pay');
		},
		onPageScroll(res) {
			// 渐变
			this.$refs.nav.defaultColorBgAlpha(res)
		},
		methods: {
			itemClick(goodsSid) {
				uni.navigateTo({
					url: '/pages/good/goodsDetail?sid=' + goodsSid
				})
			},
			request() {
				let _this = this

				_this.$api.getGiftBagBySid(this.page.sid).then((resp) => {

					_this.data = resp
					this.getPrice()

					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			numbers(event) {
				this.page.number = event.target.value
				this.getPrice()
			},
			getPrice() {

				if (this.data.price && this.page.number)

					this.page.price = Number(this.data.price * this.page.number).toFixed(2)
				else
					this.page.price = "0.00"
			},
			settlement() {
				// 支付


				if (!Number(this.page.number) > 0) {
					this.shortToast('请输入要定制几份云菜窖')
					return
				}


				let list = []

				for (var i = 0; i < this.data.goods.length; i++) {
					var item = this.data.goods[i]
					if (item.goodsNumber > 0)
						list.push({
							goodsSid: item.goodsSid,
							goodsName: item.name,
							partNumber: item.goodsNumber,
							numofPart: item.weight,
							priceUnit: item.jprice,
							pricePart: item.price,
						})
				}
				// console.log("ddd", list);
				
				if(list.length==0){
					this.shortToast('请添加商品')
					return
				}
				

				var params = {
					customerSid: getApp().globalData.sid,
					cardNumber: this.page.number,
					totalTee: this.page.price,
					ordOrderDetailsVoList: list
				}
				// console.log("params", params);

				let _this = this
				_this.$api.createOrder(params).then((resp) => {

					// console.log("resp", resp);
					this.$pay(resp)
				}).catch(e => {
				})



				// var data = {
				// 	"price": "0.01",
				// 	"trade_no_url": {
				// 		"url": "http://192.168.2.110:7777/order/orderQuery",
				// 		"params": {
				// 			"mainSid": "954fbec1-b12e-4f29-87c1-4d9ff6332e7c"
				// 		}
				// 	},
				// 	"pay_url": {
				// 		"url": "http://192.168.2.110:7777/order/pay ",
				// 		"params": {
				// 			"mainSid": "954fbec1-b12e-4f29-87c1-4d9ff6332e7c"
				// 		}
				// 	},
				// 	"order_url": {
				// 		"page": "/pages/index2/index2",
				// 		"params": {}
				// 	},
				// 	"orderId": "288320940398",
				// 	"remainder": 96,
				// 	"goods": "无骨鸡柳等3件商品",
				// 	"bus": [
				// 		"pay"
				// 	]
				// }

			}
		}
	}
</script>

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