<template>
  <view class="content">
    <block v-if="cartList.length==0">

    </block>
    <block v-else>
      <view class="card">
        <view class="cardHeader">
          <view
            v-bind:class="pIsoPen? 'partentChecked' : 'partentCheck'"
			@click="pClick"
          >
            <span class="correct"></span>
          </view>
          <image
            src="../../static/store.png"
            mode="aspectFill"
          ></image>
          <text>非常戴镜</text>
        </view>
        <view
          class="cardBody"
          v-for="(item,index) in cartList"
          :key="index"
          @longpress="delCart(item.cart_id,index)"
        >
          <view
            v-bind:class="cartList[index].isChecked? 'partentChecked':'partentCheck'"
			@click="childClick(cartList[index],index)"
          >
            <span class="correct"></span>
          </view>
          <view class="imageWrap">
            <image
              :src="item.img_index_url"
              mode="aspectFit"
              style="width: 188rpx;height: 168rpx;"
            ></image>
          </view>
          <view class="goodInfo">
            <!-- <view class="imageWrap">
              <image :src="item.img_index_url" mode="aspectFit" style="width: 188rpx;height: 168rpx;"></image>
            </view> -->
            <view class="infoRight">
              <view
                class="goodName"
                @tap="toGoods(item.pid,item.sk_id)"
              >{{item.p_name}}</view>
              <view class="describ"  @click="showBottom(3,item.pid,item.sk_id,item.mp_id,item.cart_id,index)">
				  <view class="desL">
						<view class="people">
							使用人：{{item.peopleName}}
						</view>
						<view class="skuInfo">
							{{item.sku_name}}
						</view>
				  </view>
				  <view class="desR">
						<image src="../../static/right.png" mode="aspectFit" style="width: 18rpx;height: 18rpx;"></image>
				  </view>
              </view>
              <view class="priceBox">
                <view class="price">￥{{item.nowPrice*item.num}}</view>
                <text class="maxCount">(限购{{maxCount}}副)</text>
                <view class="counter">
                  <view
                    class="btn"
                    disabled="this.addDisabled"
                    type="default"
                    @tap="counter(index,false,item)"
                  >-</view>
                  <text>{{item.num}}</text>
                  <view
                    class="btn"
                    disabled="this.desDisabled"
                    type="default"
                    @tap="counter(index,true,item)"
                  >+</view>
                </view>
              </view>
            </view>
          </view>
        </view>
      </view>
    </block>
    <view class="footer">
      <view class="footerLeft">实付金额:<text>￥{{totalPrice}}</text></view>
      <view class="footerRight">
          <view class="paybtn" @click="toComfirmOrder">立即结算</view>
      </view>
    </view>
	<BottomSheet v-if="isShowBottom" :isCart="isCart" @addCart="addCart" :sk_id="sk_id" :propMpId="mp_id" @chooseCartModi="chooseCartModi" :cart_id="cart_id"
	:index="cartIndex"
	 :pid="pid" :goodInfo="goodInfo" :isShowBottom="isShowBottom"  @closeBottom="closeBottom"></BottomSheet>
  </view>
</template>

<script>

import store from '@/store'
import BottomSheet from '../../components/BottomSheet/BottomSheet.vue';
export default {  
	components:{
		BottomSheet,
	},
  data() {
    return {
		pid:Number,
		isCart:Number,
		sk_id:String,
		mp_id:String,
		isShowBottom : false,	//底部弹窗开关
		cart_id:Number,
		maxCount: 20,
		cartIndex:Number,
		cartList:[]
    }
  },
  computed: {
	pIsoPen (){
		if (this.cartList.length > 0){
			return this.cartList.find(item => !item.isChecked) ? false : true;
		}
		return false
	},
	goodInfo () {
	  return this.$store.state.read.goodInfo
	},
	totalPrice() {
		let totalPrice = 0
		this.cartList.forEach((item)=>{
			 if(item.isChecked){
				totalPrice += item.nowPrice * item.num;
			 }
		})
		return totalPrice
	}
  },
  onShow() {
	this.cartList = this.$store.state.cart.cartList;
  },
  onLoad: async function() {
    await this.$store.dispatch('cart/getCartList', {
      uid: this.$store.state.user.userInfo.uid, // 用户id
    })
	
	this.cartList = this.$store.state.cart.cartList;
	this.cartList.forEach((item)=>{
		 item.isChecked = false
	})
  },
  methods: {
	  //全选按钮
	  pClick(){
		  let pStatus = this.cartList.find(item => !item.isChecked) ? false : true
		  let oldList = this.cartList;
		  oldList.forEach((item, index)=>{
		  	 item.isChecked = !pStatus
			  this.cartList.splice(index,1, item)
		  })
	  },
	  //单选按钮
	  childClick(type,index){
		  this.cartList[index].isChecked = !this.cartList[index].isChecked
		  //vue没有办法监听数组内部值的变化，所以需要通过这个方法去触发
		  this.cartList.splice(index,1, this.cartList[index])
	  },
	  //修改购物车
	  chooseCartModi(mp_id,sk_id,price,pid,num,cart_id,index){
		  // console.log('modi',mp_id,sk_id,price,pid,num,cart_id)
		  store.dispatch('cart/modiCart', {
		    uid: this.$store.state.user.userInfo.uid,
		    openid: this.$store.state.user.userInfo.openid,
		    mp_id: mp_id,
		    sk_id: sk_id,
		    price: price,
		    pid: pid,
		    num: num,
		    cart_id: cart_id,
			args: {
			  index: index,
			},
		  })
		  store.dispatch('cart/getCartList', {
			uid: this.$store.state.user.userInfo.uid, // 用户id
		  })
	  
		  this.$forceUpdate()
		  // console.log('21212121212',this.cartList)
	  },
	  //底部弹窗开关
	  showBottom(isCart,pid,skId,mp_id,cart_id,index){
		  store.dispatch('read/fetch', {
			pid,
			sk_id: skId,
		  }).then(()=>{
			  this.cartIndex = index
			  this.sk_id = skId;
			  this.pid = pid;
			  this.mp_id = mp_id;
			  this.isCart = isCart;
			  this.cart_id = cart_id;
			  this.isShowBottom = true;
		  })
	  },
	  closeBottom(){
	  	this.isShowBottom = false;
	  },
    toGoods(id, sk_id) {
      uni.navigateTo({
        url: '../frameDetail/frameDetail?pid=' + id + '&sk_id=' + sk_id,
        success: res => {},
        fail: () => {},
        complete: () => {},
      })
    },
	toComfirmOrder(){
		this.$store.state.cart.checkedCartLst = this.cartList.filter(item => item.isChecked)
		if(this.$store.state.cart.checkedCartLst.length>0){
			uni.navigateTo({
				url:`../confirmOrder/confirmOrder?isCart=true`,
			})
		}else{
			uni.showToast({
				title:'您还没有选择宝贝哦~',
				icon:'none'
			})
		}
	},
    counter(index, isadd, item) {
      // console.log('item=====>', item)
      // console.log('num=====>', item.num)
      const nums = parseInt(item.num)
      if (isadd) {
        if (nums >= this.maxCount) {
          this.addDisabled = true
        } else {
          this.addDisabled = true
          store.dispatch('cart/modiCart', {
            uid: this.$store.state.user.userInfo.uid,
            openid: this.$store.state.user.userInfo.openid,
            mp_id: item.mp_id,
            sk_id: item.sk_id,
            price: item.nowPrice,
            pid: item.pid,
            num: nums + 1,
            cart_id: item.cart_id,
            args: {
              index: index,
              isadd: isadd,
            },
          })
          this.addDisabled = false
        }
      } else {
        if (nums <= 1) {
          this.desDisabled = true
        } else {
          this.desDisabled = false
       
          store.dispatch('cart/modiCart', {
            uid: this.$store.state.user.userInfo.uid,
            openid: this.$store.state.user.userInfo.openid,
            mp_id: item.mp_id,
            sk_id: item.sk_id,
            price: item.nowPrice,
            pid: item.pid,
            num: nums - 1,
            cart_id: item.cart_id,
            args: {
              index: index,
              isadd: isadd,
            },
          })
          this.desDisabled = true
        }
      }

    },
    delCart(cart_id, index) {
      cart_id = parseInt(cart_id)
	  uni.showModal({
	    title: '是否删除该商品',
	    success: function (res) {
	      if (res.confirm) { 
	        store.dispatch('cart/delCart', {
	          uid: this.$store.state.user.userInfo.uid,
	          openid: this.$store.state.user.userInfo.openid,
	          cart_id: cart_id, // 要修改的购物车id
	          arg: index, // 由于action 传参是能接收两参数，因此将index放入对象
	        })
	      }
	    }.bind(this),
	  })	
	  // this.cartList.splice(index,1)
    },
  },
}
</script>

<style lang="scss">
.content {
  min-height: 100vh;
  background-color: #f2f2f2;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: space-between;
  padding: 20rpx 40rpx;
  box-sizing: border-box;

  .partentCheck {
    width: 16px;
    height: 16px;
    border-radius: 22px;
    border: 1px solid #cfcfcf;
    background-color: #ffffff;
    margin: 24rpx 12rpx 24rpx 24rpx;
  }
  .partentChecked {
    width: 18px;
    height: 18px;
    border-radius: 22px;
    background-color: #ff6b4a;
    margin: 24rpx 12rpx 24rpx 24rpx;
    .correct {
      display: inline-block;
      position: relative;
      width: 10rpx;
      height: 2rpx;
      background: #ffffff;
      line-height: 0;
      font-size: 0;
      position: relative;
      top: -7px;
      left: 4px;
      -webkit-transform: rotate(45deg);
    }
    .correct:after {
      content: "/";
      display: block;
      width: 16rpx;
      height: 2rpx;
      background: #ffffff;
      -webkit-transform: rotate(-90deg) translateY(50%) translateX(50%);
    }
  }

  .card {
    background-color: #ffffff;
    border-radius: 16rpx;
    box-sizing: border-box;
    padding: 36rpx 36rpx 36rpx 18rpx;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 180rpx;
    .cardHeader {
      width: 100%;
      height: 36rpx;
      display: flex;
      align-items: center;
      justify-content: flex-start;
      margin-bottom: 20rpx;
      image {
        height: 32rpx;
        width: 32rpx;
        padding-left: 6px;
        padding-right: 10px;
      }
      text {
        // font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #333333;
        letter-spacing: -0.26px;
      }
    }
    .cardBody {
      width: 100%;
      min-height: 300rpx;
      display: flex;
      align-items: center;
      justify-content: space-between;
      .goodInfo {
        width: 390rpx;
        display: flex;
        flex-direction: row;
        justify-content: flex-start;
        padding-left: 6px;

        .imageWrap {
          height: 188rpx;
          width: 188rpx;
          margin-right: 28rpx;

          image {
            border-radius: 4px;
            height: 188rpx;
            width: 188rpx;
          }
        }
        .infoRight {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          justify-content: space-between;
          min-height: 240rpx;
		  width: 100%;
          .goodName {
            display: -webkit-box;
            -webkit-box-orient: vertical;
            -webkit-line-clamp: 2;
            text-align: justify;
            overflow: hidden;
            font-size: 28rpx;
            color: #333333;
          }
          .describ {
            width: 100%;
            min-height: 80rpx;
			background: #F9F9F9;
			border-radius: 2px;
            box-sizing: border-box;
            padding: 10rpx;
            font-size: 20rpx;
            letter-spacing: -0.23px;
            color: #999999;
			display: flex;
			justify-content: space-between;
			align-items: center;
			.desL{
				
				view{
					margin: 10rpx 0 10rpx 0 ;
				}
			}
			
          }
          .priceBox {
            display: flex;
            justify-content: space-between;
            align-items: center;
            // margin-top: 26px;
            width: 100%;
            font-size: 14px;
            color: #999999;
            .maxCount {
              color: #999999;
              font-size: 20rpx;
            }
            .price {
              color: #ff6b4a;
              font-size: 28rpx;
            }
            .counter {
              display: flex;
              flex-direction: row;
              justify-content: space-between;
              align-items: center;
              font-size: 28rpx;
              color: #333333;
              width: 122rpx;
              .btn {
                display: flex;
                justify-content: center;
                line-height: 32rpx;
                height: 32rpx;
                width: 32rpx;
                background-color: #f2f2f2;
                color: #cfcfcf;
              }
            }
          }
        }
      }
    }
  }
  .footer {
    position: fixed;
    left: 0;
    bottom: 0px;
    height: 112rpx;
    width: 100%;
    background-color: #ffffff;
    font-size: 16px;
    display: flex;
    justify-content: space-between;
    align-items: center;
    .footerLeft {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 50%;
      color: #333333;
      text {
        color: #ff6b4a;
      }
    }
    .footerRight {
      display: flex;
      justify-content: flex-end;
      align-items: center;
      width: 50%;
      margin-right: 26rpx;
      .paybtn {
        display: flex;
        justify-content: center;
        align-items: center;
        background: #ff6b4a;
        border-radius: 20px;
        border-radius: 20px;
        color: #ffffff;
        width: 204rpx;
        height: 80rpx;
      }
    }
  }
}
/* 隐藏滚动条 */
 ::-webkit-scrollbar {
	width: 0;
	height: 0;
	color: transparent;
  }
</style>