<template>

    <view :class="cartList.length === 0 ? 'content no_content' : 'content'">
      <block v-if="cartList.length ===0">
        <view class="nocard">
          <image
            src="../../static/nocart.jpeg"
            class="nocartPic"
            mode="aspectFill"
          ></image>
          <text class="nocartText">购物车竟然是空的，快去加购吧！</text>
        </view>

      </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}}</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
        v-if="cartList.length !==0 "
        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)
        }
        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: 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

      })

    },

    // onLoad: async function() {
    // },

    methods: {

      // 全选按钮
      pClick() {
        const pStatus = !this.cartList.find(item => !item.isChecked)
        const 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,

          },

        })
        this.$nextTick(function() {
          store.dispatch('cart/getCartList', {
            uid: this.$store.state.user.userInfo.uid, // 用户id
          }).then(() => {

            this.cartList = this.$store.state.cart.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, skId) {

        uni.navigateTo({

          url: '../details/details?pid=' + id + '&sk_id=' + skId,

          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;

    .nocard {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: space-between;
      .nocartPic {
        width: 320rpx;
        height: 300rpx;
        margin: 40rpx 0;
      }
      .nocartText {
        color: #999;
        font-size: 28rpx;
      }
    }

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

  .no_content {
    background-color: #fff;
  }

  /* 隐藏滚动条 */

  ::-webkit-scrollbar {
    width: 0;
    height: 0;
    color: transparent;
  }
  </style>