<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>
			<!-- </scroll-view> -->

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

				<view style="display: flex;flex-direction: row;align-items: center;">
					<view style="color: #888;font-size: 10px;">温馨提示：已定制了</view>
					<view style="color: #FF5006;font-size: 15px;">{{page.weight}}斤</view>
					<view style="color: #888;font-size: 10px;">，满200斤可定制云菜窖</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;
					display: flex;flex-direction: row;align-items: center;border-top-left-radius: 25px; border-bottom-left-radius: 25px;"
						@click="gotoCart()">
						<image src="../../static/shoppCart_icon.png" mode="aspectFill"
							style="height: 20px;width: 25px;">
						</image>
						<text style="font-size: 15px;color: #FF5006;margin-left: 10px; ">￥{{page.price}}</text>
						<text style="font-size: 10px;color: #666;margin-left: 10px; ">共减：￥{{page.reduce}}</text>
					</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>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				page: {
					affiliation: '',
					weight: "0",
					price: "0",
					reduce: "0"
				},
				data: [

				]
			}
		},
		onLoad(options) {
			this.page.affiliation = options.affiliation
			console.log(" options", options);
			this.request()
		},
		methods: {
			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.getallPrice()
					_this.getweight()

					_this.$nextTick(() => {
						_this.$refs.pageView.setLoadState(2)
					})
					// 无数据
					if (_this.data.length == 0) {
						_this.$nextTick(() => {
							_this.$refs.pageView.setLoadState(100)
						})
					}

				}).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.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)

			},

			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) => {

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

			settlement() {
				// 支付

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


				let list = []

				for (var i = 0; i < this.goods.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.mefenPrice,
						})
				}
				// console.log("ddd", list);

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

				var params = {
					customerSid: getApp().globalData.sid,
					cardNumber: 1,
					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>

</style>