<template>
	<view class="pages-shop" v-if="isLoad">
		<view class="item-child mb-md ml-sm mr-sm pt-lg pl-lg pr-lg fill-base radius-24" :class="[{'mt-md':index==0}]"
			v-for="(item,index) in shopCarList.list" :key="index">
			<view @tap="goDetail(index)" class="flex-y-center mb-lg">
				<i class="iconfont icon-dianpu mr-sm"></i>
				<view class="f-title c-title text-bold ellipsis">{{item.farmer_info.title}}</view>
				<i class="iconfont icon-right"></i>
			</view>
			<view @tap.stop="toUpdateStatus(index,aindex)" class="flex-warp pb-lg b-1px-b"
				:class="[{'pt-lg':aindex!=0}]" v-for="(aitem,aindex) in item.goods_list" :key="aindex">
				<i class="iconfont flex-y-center mr-md"
					:class="[{'icon-xuanze':!aitem.status},{'icon-xuanze-fill':aitem.status}]"
					:style="{color:aitem.status?primaryColor:''}"></i>
				<image mode="aspectFill" lazy-load class="goods-img radius-16" :src="aitem.cover">
				</image>
				<view class="flex-1 ml-md">
					<view class="goods-title f-title c-title text-bold ellipsis">
						{{aitem.goods_name}}
					</view>
					<view class="flex-between mt-sm">
						<view class="goods-spe pl-sm pr-sm f-caption c-paragraph ellipsis radius-4">
							{{aitem.spe_name}}
						</view>
						<view class="flex-1"></view>
					</view>
					<view class="f-desc c-warning mt-sm" v-if="aitem.integral_id">
						{{aitem.i_price*1>0?`${aitem.integral}积分+${aitem.i_price}元`:`${aitem.integral}积分`}}
					</view>
					<view class="flex-between" :class="[{'mt-md':!aitem.integral_id}]">
						<view class="flex-y-baseline f-caption c-warning">
							<view class="f-caption c-caption mr-sm" v-if="aitem.integral_id">商城价</view>
							¥<view class="f-title text-bold"> {{aitem.price}} </view>
						</view>
						<view class="flex-warp">
							<view class="add-remove-item flex-center">
								<i @tap.stop="toUpdateCar(aitem.farmer_id,aitem.id,aitem.spe_id,-1)"
									class="iconfont icon-remove-circle c-caption"></i>
								<view class="number flex-center f-desc pl-sm pr-sm">{{aitem.goods_num}}
								</view>
								<i @tap.stop="toUpdateCar(aitem.farmer_id,aitem.goods_id,aitem.spe_id,1)"
									class="iconfont icon-add-circle" :style="{color:primaryColor}"></i>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
		<abnor v-if="shopCarList.list.length<=0"></abnor>
		<view class="space-footer"></view>
		<view class="fix footer-info flex-center" v-if="shopCarList.list.length > 0">
			<view class="item-height flex-1 flex-between fill-base pl-lg pr-lg">
				<view @tap="toUpdateStatus(-1)" class="flex-y-center">
					<i class="iconfont mr-md"
						:class="[{'icon-xuanze':!shopCarList.selectAll},{'icon-xuanze-fill':shopCarList.selectAll}]"
						:style="{color:shopCarList.selectAll?primaryColor:''}"></i>全选
				</view>
				<view class="flex-y-baseline f-paragraph c-title" style="line-height: 35rpx;">
					合计：
					<view class="f-title c-warning text-bold">
						¥{{shopCarList.car_price || 0}}
					</view>
				</view>
			</view>
			<view @tap="goOrder" class="item-height pay-btn flex-center f-sm-title c-base"
				:style="{background:primaryColor}">去付款
			</view>
		</view>
	</view>
</template>

<script>
	import {
		mapState,
		mapActions,
		mapMutations
	} from "vuex"
	export default {
		components: {},
		data() {
			return {
				isLoad: false,
				options: {},
				lockTap: false
			}
		},
		computed: mapState({
			primaryColor: state => state.config.configInfo.primaryColor,
			subColor: state => state.config.configInfo.subColor,
			configInfo: state => state.config.configInfo,
			userInfo: state => state.user.userInfo,
			shopCarList: state => state.order.shopCarList,
		}),
		async onLoad(options) {
			this.$util.showLoading()
			this.options = options
			await this.initIndex()
		},
		onPullDownRefresh() {
			// #ifndef APP-PLUS
			uni.showNavigationBarLoading()
			// #endif
			this.initRefresh()
			uni.stopPullDownRefresh()
		},
		methods: {
			...mapActions(['getConfigInfo', 'updateCommonOptions', 'getShopCarList']),
			...mapMutations(['updateUserItem']),
			async initIndex() {
				await this.getShopCarList()
				this.$util.hideAll()
				this.isLoad = true
			},
			initRefresh() {
				this.initIndex()
			},
			// 修改购物车数量
			// id 增加数量时传商品goods_id
			async toUpdateCar(store_id, id, spe_id, goods_num, isCar = 1) {
				let methodModel = goods_num > 0 ? 'addCar' : 'delCar'
				let param = goods_num > 0 ? {
					store_id,
					goods_id: id,
					spe_id,
					goods_num,
				} : {
					id,
					goods_num: 1
				}
				if (this.lockTap) return;
				this.lockTap = true;
				try {
					await this.$api.shop[methodModel](param)
					this.lockTap = false
					await this.getShopCarList()
				} catch (e) {
					this.lockTap = false
				}
			},
			// 修改购物车数据选择状态
			async toUpdateStatus(index, aindex) {
				let param = {}
				if (index === -1) {
					let selectAll = !this.shopCarList.selectAll
					this.selectAll = selectAll
					param = {
						status: selectAll ? 1 : 0
					}
				} else {
					let {
						id,
						status
					} = this.shopCarList.list[index].goods_list[aindex]
					param = {
						id: [id],
						status: status == 1 ? 0 : 1
					}
				}
				if (this.lockTap) return;
				this.lockTap = true;
				try {
					await this.$api.shop.carUpdate(param)
					this.lockTap = false
					await this.getShopCarList()
				} catch (e) {
					this.lockTap = false
				}
			},
			// 清空购物车
			async toDelCar() {
				await this.$api.shop.delSomeCar()
				this.$util.showToast({
					title: `清空成功`
				})
				this.$refs.show_car_item.close()
				await this.getCarInfo()
			},
			goDetail(index) {
				let {
					farmer_id: id
				} = this.shopCarList.list[index]
				let url = `/shop/pages/store?id=${id}`
				this.$util.goUrl({
					url
				})
			},
			// 去结算
			goOrder() {
				let {
					car_count
				} = this.shopCarList
				if (car_count < 1) {
					this.$util.showToast({
						title: `请选择商品`
					})
					return
				}
				this.$util.goUrl({
					url: `/shop/pages/order`
				})
			}
		}
	}
</script>


<style lang="scss">
	.pages-shop {


		.icon-xuanze,
		.icon-xuanze-fill {
			font-size: 38rpx;
		}

		.item-child {

			.icon-xuanze,
			.icon-xuanze-fill {
				height: 172rpx;
			}

			.goods-img {
				width: 172rpx;
				height: 172rpx;
			}

			.goods-title {
				max-width: 420rpx;
			}

			.goods-spe {
				height: 44rpx;
				line-height: 44rpx;
				background: #F7F7F7;
				max-width: 420rpx;
			}
		}

		.footer-info {
			width: 100%;
			left: 0;
			bottom: 0;

			.item-height {
				height: 90rpx;
				height: calc(90rpx + env(safe-area-inset-bottom) / 2);
				padding-bottom: calc(env(safe-area-inset-bottom) / 2);
			}

			.pay-btn {
				width: 200rpx;
			}
		}
	}
</style>
