<template>
	<view style="height: 100vh; width: 100%; background: #F2F2F2;
		display: flex;flex-direction: column;overflow: scroll;">
		<loading-state ref="pageView" @request="request">

			<!-- <scroll-view scroll-y="true" style="min-height: calc(100% - 15vw);  width: 100%; margin-top: 10px;"
				bindscrolltoupper="upper" bindscrolltolower="lower" bindscroll="scroll"> -->

			<view style="width: 100%; display: flex;flex-direction: column;">
				<view v-for="(item,index) in data" @click="itemClick(item.goodsSid)" style="display: flex;flex-direction: column;justify-content: center; margin: 10px 10px 0px 10px;
							 padding: 10px; border-radius: 15px; background-color: #fff; ">

					<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; 
								 margin-left: 10px;">

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

							<text style="font-size: 10px;color: #999;margin-top: 5px;">{{item.remarks}}</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;">{{item.jprice}}元/{{item.specificationUnit}}</text>
								<text
									style="border: 1px #EE752F solid; border-radius: 5px;	padding: 0px 8px;
										font-size: 10px;color: #EE752F; margin-left: 10px; margin-right: 10px; ">{{item.weight}}{{item.specificationUnit}}/{{item.unitName}}</text>
								<!-- <text
											style="background: #FF9900; color: #fff; font-size: 10px;padding: 0px 8px; border-radius: 5px;">￥{{item.mefenPrice}}</text> -->
							</view>

							<view style="display: flex;flex-direction: row;align-items: center;justify-content: space-between; margin-top: 15px;
									margin-right: 15px;">
								<text style="font-size: 14px;color: #FF5006;">￥{{item.price}}</text>

								<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.goodsNumber}}</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 style="height: 150px; background: #F2F2F2;"></view>
			</view>

			<view v-if="notData" style="display: flex;flex-direction: column;align-items: center;margin-top: -30vw;">

				<image src="https://supervise.yxtsoft.com/lpk/image/not_Cart.png" mode="aspectFit"
					style="width: 50vw;height: 50vw;"></image>
				<view style="display: flex;flex-direction: column;align-items: center;margin-top: 10px;">
					<text style="font-size: 14px; color: #666;margin-right: 5px;">购菜车是空的</text>
					<text style="font-size: 14px;color: #fff;padding: 8px 40px; border-radius: 20px;
					background: -webkit-linear-gradient(left,#FFC369,#FF9901);margin-top: 10px;" @click="gotoShopp()">去逛逛</text>
				</view>
			</view>

			<!-- </scroll-view> -->

			<view style=" width: 100%; display: flex;flex-direction: column;position: fixed;bottom: 0;overflow:hidden;
			justify-content: center;align-items: center; background: #fff;padding-top: 10px;">

				<view id="bomView" style="display: flex;flex-direction: row;align-items: center;">
					<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
						温馨提示：已订</view>
					<view style="color: #FF5006;font-size: 15px;height: 15px;line-height: 15px;font-weight: bold;">
						{{page.weight}}斤
					</view>

					<view style="color: #888;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
						，{{page.qssl}}斤起订。</view>
					<view style="display: flex;flex-direction: row;align-items: center;" @click="showPop()">
						<text
							style="color: #6190D8;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;text-decoration:underline;font-style:oblique;">
							起订说明</text>
						<text style="color: #6190D8;font-size: 10px;height: 10px;line-height: 10px;margin-top: 5px;">
							>></text>
					</view>
				</view>

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


					<view
						style="border: 1px #FF5006 solid;margin-left: 5px;margin-right: 5px;padding: 5px 40px 5px 15px; flex: 1;
					display: flex;flex-direction: row;align-items: center;border-top-left-radius: 25px; border-bottom-left-radius: 25px;">
						<image src="../../static/shoppCart_icon.png" mode="aspectFill"
							style="height: 20px;width: 20px;flex-shrink: 0;">
						</image>
						<view style="display: flex;flex-direction: column;flex: 1;">
							<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">￥{{page.price}}</text>
							<text style="font-size: 10px;color: #666;margin-left: 10px; ">{{page.remarks}}</text>
						</view>
					</view>
					<text style="background: #FF9900; color: #fff;font-size: 13px; padding: 8px 15px;
					border: 1px #FF5006 solid; border-top-right-radius: 25px; border-bottom-right-radius: 25px;"
						@click="settlement()">结算</text>

				</view>

			</view>
		</loading-state>

		<uni-popup ref="inputDialog" type="dialog">
			<uni-popup-dialog ref="inputClose" mode="base" title="起订说明" :showConfirm="true"
				:beforeClose="dialogBeforeClose" @confirm="dialogInputConfirm" :content="page.qdxy"></uni-popup-dialog>
		</uni-popup>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				notData: false,
				dialogBeforeClose: false,
				page: {
					affiliation: '',
					weight: "0",
					price: "0",
					reduce: "0",
					remarks: "",
					qssl: "",
					qdxy: ""
				},
				data: [

				]
			}
		},
		onLoad(options) {
			this.page.affiliation = options.affiliation
			this.page.qssl = options.weight
			this.page.qdxy = options.qdxy
			console.log(" options", options);

		},
		onShow() {
			this.request()
		},
		methods: {
			gotoShopp() {
				uni.reLaunch({
					url: "/pages/home/cloudCard2"
				})
			},
			showPop() {

				this.$refs.inputDialog.open()

			},

			dialogInputConfirm() {
				this.dialogBeforeClose = false
			},
			request() {
				let _this = this

				var params = {
					customerSid: getApp().globalData.sid,
					brandId: _this.page.affiliation
				}

				_this.$api.shoppingCartList(params).then((resp) => {
					console.log("resp", resp);
					_this.data = resp

					_this.notData = resp.length == 0
					// _this.getallPrice()
					// _this.getweight()
					_this.getAllPriceOrWeight()

				}).catch(e => {
					// 错误 1
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},
			itemClick(goodsSid) {
				uni.navigateTo({
					url: '/pages/good/goodsDetail?sid=' + goodsSid
				})
			},

			jian(item) {
				const that = this
				console.log("item》》》》", item)
				if (Number(item.goodsNumber) == 1) {

					wx.showModal({
						content: '确定不要了吗',
						cancelText: "再想想",
						confirmText: "删除",
						confirmColor: "#FF9900",
						success(res) {
							if (res.confirm) {
								console.log('用户点击确定')
								item.goodsNumber = 0
								const index = that.data.findIndex((info) => info.goodsSid === item.goodsSid)
								console.log("index》》》》", index)
								that.data.splice(index, 1)
								// that.getallPrice()
								// that.getweight()
								
									that.notData = that.data.length == 0
									
								that.upDateShoppCart(item)
							} else if (res.cancel) {

							}
						}
					})

				} else {
					if (Number(item.goodsNumber) > 0) {
						item.goodsNumber = Number(item.goodsNumber) - 1
					}

					item.totalPrice = Number(item.goodsNumber) * Number(item.price)
					// that.getallPrice()
					// that.getweight()
					that.upDateShoppCart(item)
				}

			},
			jia(item) {

				item.goodsNumber = Number(item.goodsNumber) + 1
				item.totalPrice = Number(item.goodsNumber) * Number(item.price)

				// this.getallPrice()
				// this.getweight()
				this.upDateShoppCart(item)

			},

			getAllPriceOrWeight() {
				let _this = this

				var params = {
					customerSid: getApp().globalData.sid,
					brandId: this.page.affiliation,
				}

				_this.$api.getGoodsWeight(params).then((resp) => {
					console.log("getGoodsWeight", resp);

					_this.page.price = resp.totalPrice
					_this.page.weight = resp.totalWeight
					_this.page.remarks = resp.remarks


					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})

				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},


			getallPrice() {

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

				this.page.price = num
			},

			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

			},

			upDateShoppCart(item) {
				var good = {
					goodsSid: item.goodsSid,
					goodsName: item.goodsName,
					goodsNumber: item.goodsNumber,
					affiliation: this.page.affiliation,
					price: item.price,
					weight: item.weight,
					customerSid: getApp().globalData.sid
				}

				let _this = this
				_this.$api.addShoppingCart(good).then((resp) => {
					_this.getAllPriceOrWeight()
				}).catch(e => {
					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(1)
					})
				})
			},

			settlement() {
				// 支付

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

				var params = {
					customerSid: getApp().globalData.sid,
					// cardNumber: 1,
					brandId: this.page.affiliation,
					totalTee: this.page.price,

					// ordOrderDetailsVoList: list
				}
				console.log("params", params);

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

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

			},


		}
	}
</script>

<style>

</style>