<template>

	<view style="display: flex;flex-direction: column; height: 100%;box-sizing: border-box ;" 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: column;
			margin:20px 20px 0px 20px;padding-bottom: 20px; border-bottom: 2px #EFEFEF solid;">

					<view
						style="display: flex;flex-direction: row;align-items: center; 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;">自选云菜窖</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 style="margin-top: 10px;display: flex;flex-direction: row;align-items: center;">
						<view style="color: #888;font-size: 12px;">您已经定制了</view>
						<view style="color: #FF5006;font-size: 18px;">{{page.weight}}斤</view>
						<view style="color: #888;font-size: 12px;">，满200斤可定制云菜窖</view>
					</view>

				</view>

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

					<view :style="{'border-bottom':(index===data.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: 60px;height: 70px;"></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>
									<uni-number-box ref="box" :showTextView="true" background="#fff"
										v-model="item.goodsNumber" @change="numberChange($event,item)"></uni-number-box>

								</view>


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

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

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


									<text style="color: #FF5006;font-size: 14px;">￥{{item.price}}</text>

								</view>

							</view>

						</view>


					</view>

				</view>
				<view v-show="data.length>0" style="height: 100px;background: #f1f2f3; "></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;">

					<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;">{{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: "",
					price: "",
					startHeight: 0,
					endHeight: 0,
					number: "1",
					weight: "--",
				},
				data: []

			}
		},
		onPageScroll(res) {
			// 渐变
			this.$refs.nav.defaultColorBgAlpha(res)
		},
		onLoad(options) {

			let info = uni.getSystemInfoSync();

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

			this.request()

		},
		methods: {
			itemClick(goodsSid) {
				uni.navigateTo({
					url: '/pages/good/goodsDetail?sid=' + goodsSid
				})
			},
			numberChange(event, item) {
				console.log("event", event)
				console.log("item", item)
				this.getallPrice()
				this.getweight()
				this.getPrice(item)
			},
			request() {
				let _this = this

				_this.$api.getAllGiftBag().then((resp) => {

					_this.data = resp
					this.getallPrice()
					this.getweight()

					_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.getallPrice()
				this.getweight()
			},
			getallPrice() {

				let num = 0;
				for (var i = 0; i < this.data.length; i++) {
					num += Number(this.data[i].price) * Number(this.data[i].goodsNumber);
				}

				console.log("num", num)

				this.page.price = Number(num * this.page.number).toFixed(2)
			},
			getPrice(item) {

				if (item.goodsNumber > 0)

					item.price = Number(item.goodsNumber * item.jprice * item.weight).toFixed(2)

			},
			getweight() {

				let num = 0;
				for (var i = 0; i < this.data.length; i++) {
					num += Number(this.data[i].weight) * Number(this.data[i].goodsNumber);

				}
				this.page.weight = num
			},
			settlement() {
				// 支付

				if (this.page.weight < 200) {
					this.shortToast('满200斤才可定制云菜窖哦，请继续选菜吧。')
					return
				}

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



				let list = []

				for (var i = 0; i < this.data.length; i++) {
					var item = this.data[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 => {
				})

			}

		}
	}
</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>