<template>
  <view class="cart-page">
    <!--  数据加载loadding  -->
    <template v-if="!isLogin || cartListArr.length == 0">
      <view class="nologin flex flex-direction justify-center align-center padding-tb text-999 fs28 bg-white" style="padding-bottom: 64rpx">
        <view>
          <image class="width-440 height-220" src="@/static/empty/cart.png" mode="widthFix"></image>
        </view>
        <view class="margin-top-xs text-sm text-999">您的购物车还没有商品，快去挑选吧</view>
        <view class="nologin-btn text-df margin-top text-center" @tap.stop="handleSubmit('navToLogin')" v-if="!isLogin">去登录</view>
        <view class="nologin-btn text-df margin-top text-center" @tap.stop="handleSubmit('navToHome')" v-if="isLogin && cartListArr.length == 0">
          去挑选好货
        </view>
      </view>
    </template>
    <template v-if="isLogin && cartListArr.length != 0">
      <view class="page-list">
        <block v-for="(item, index) in cartListArr" :key="index">
          <view class="bg-white flex align-center padding">
            <view class="margin-right-sm" @tap="check(item, index)">
              <text v-if="isEditor" :class="{ checked_icon: true, checked_active: item.delChecked }" class="fu-iconfont2">
                {{ item.delChecked ? '' : '' }}
              </text>
              <text v-else :class="{ checked_icon: true, checked_active: item.checked }" class="fu-iconfont2">
                {{ item.checked ? '' : '' }}
              </text>
            </view>
            <view class="goods-info flex align-center flex-sub" style="min-width: 1px">
              <view class="wrap-image fu-block-180 radius margin-right-sm" @tap="toDetail(item, index)">
                <view class="box-kong text-df text-white" v-if="item.is_valid == 1">
                  <view class="box-kong-item">
                    <image src="@/static/cart/sellOut.png" mode="widthFix" />
                  </view>
                </view>
                <view class="box-kong text-df text-white" v-if="item.is_valid == 2">
                  <view class="box-kong-item">
                    <image src="@/static/cart/shelf.png" mode="widthFix" />
                  </view>
                </view>
                <image class="goods_thumb" :src="item.goods_thumb" mode="aspectFill"></image>
              </view>
              <view class="goods-desc flex-sub" style="min-width: 1px">
                <view>
                  <view class="text-333 text-cut fu-fs28">{{ item.goods_name }}</view>
                  <view class="text-sm text-999 sku_name" v-if="item.sku_name" @tap.stop="openPopup(item)">
                    <view class="text-cut width-250">
                      <text>{{ item.sku_name }}</text>
                    </view>
                    <view style="flex-shrink: 0">
                      <text style="margin-right: 16rpx">选规格</text>
                      <text class="cuIcon-unfold lg text-gray"></text>
                    </view>
                  </view>
                </view>
                <view class="desc-number flex justify-between align-center">
                  <view class="text-lg text-prices">
                    <text class="text-price"></text>
                    <text>{{ item.shop_price }}</text>
                  </view>
                  <view class="number">
                    <uni-number-box
                      :min="1"
                      :disabled="item.is_valid != 0"
                      :max="Number(item.stock)"
                      :value="item.num"
                      @change="numberChange($event, index)"
                    ></uni-number-box>
                  </view>
                </view>
              </view>
            </view>
          </view>
        </block>
      </view>
      <view class="action-bar cu-bar bg-white flex justify-between">
        <view class="flex flex-sub align-center padding-lr justify-between" style="max-width: calc(100% - 230rpx)">
          <view class="flex justify-between align-center" @tap="checkAll">
            <text v-if="isEditor" :class="{ checked_icon: true, checked_active: delAllChecked }" class="fu-iconfont2">
              {{ delAllChecked ? '' : '' }}
            </text>
            <text v-else :class="{ checked_icon: true, checked_active: allChecked }" class="fu-iconfont2">
              {{ allChecked ? '' : '' }}
            </text>
            <text class="margin-left-sm text-df text-333">全选</text>
          </view>
          <view class="margin-left-sm text-df text-666" v-if="!isEditor">
            <view>
              合计:
              <text class="text-price text-prices text-lg">{{ totalPrice }}</text>
            </view>
          </view>
        </view>
        <button v-if="!isEditor" class="cu-btn btn-settlement bg-theme text-white lg" @click="createOrder">去结算({{ totalNumber }})</button>
        <button v-if="isEditor" class="cu-btn bg-theme text-white margin-right-sm" @click="delCart(2)">移入收藏</button>
        <button v-if="isEditor" class="cu-btn btn-gray margin-right-sm" @click="delCart(1)">删除</button>
      </view>
    </template>
  </view>
</template>
<script>
import { LOGIN_PAGE_URL } from '@/common/config.js'
export default {
  name: 'benben-shop-cart',
  props: {
    // 购物车列表
    cartList: {
      type: [Array, Object],
      default: () => [],
    },
    //是否编辑状态 // 管理 or 完成
    isEditor: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      setTimeoutFn: null,
      cartListArr: [], // 购物车列表
    }
  },
  computed: {
    isLogin() {
      return this.$store.state.token == '' ? false : true
    },
    // 选择的商品总价
    totalPrice() {
      let list = this.cartListArr
      let total = 0
      list.forEach((item) => {
        if (item.checked == true) {
          let _price
          _price = item.shop_price
          total += Number(_price) * Number(item.num)
        }
      })
      return Number(total.toFixed(2))
    },
    // 选择的商品数量
    totalNumber() {
      let list = this.cartListArr
      let total = 0
      list.forEach((item) => {
        if (item.checked == true) {
          total += Number(item.num)
        }
      })
      return total
    },
    // 购物车内的商品数量
    allNumber() {
      let list = this.cartListArr
      let total = 0
      list.forEach((item) => {
        total += Number(item.num)
      })
      return total
    },
    // 管理模式全选状态
    delAllChecked() {
      let list = this.cartListArr
      let bool = true
      list.forEach((item) => {
        // if(item.stock == 0) return ;
        if (!item.delChecked) {
          bool = false
        }
      })
      return bool
    },
    // 正常模式全选状态
    allChecked() {
      let bool = true
      this.cartListArr.map((item) => {
        if (item.stock == 0) return
        if (item.is_valid != 0) return
        if (!item.checked) {
          bool = false
        }
      })
      return bool
    },
  },
  watch: {
    cartList: {
      handler(value) {
        let list = []
        let checkedArr = this.cartListArr.filter((item) => item.checked)
        let delCheckedArr = this.cartListArr.filter((item) => item.delChecked)
        list = value.map((item) => {
          let obj = {
            ...item,
            checked: false,
            delChecked: false,
          }
          let delChecked = delCheckedArr.find((val) => val.aid == item.aid)
          let checked = checkedArr.find((val) => val.aid == item.aid)
          if (delChecked) {
            obj.delChecked = true
          }
          if (checked && obj) {
            obj.checked = true
          }
          return obj
        })
        this.cartListArr = list
      },
      deep: true,
      immediate: true,
    },
    isEditor: {
      handler(value) {
        if (value) {
          this.cartListArr.forEach((item) => {
            item.delChecked = true
          })
        }
      },
      deep: true,
      immediate: true,
    },
  },
  methods: {
    // 打开选择规格弹窗
    openPopup(item) {
      this.$emit('update:cart-id', item.aid)
      this.$emit('update:sku-id', item.sku_id)
      this.$emit('update:cart-num', item.num)
      this.$emit('update:goods-id', item.goods_id)
      this.$emit('changeSku')
    },
    toDetail(item) {
      if (item.is_valid == 2) return
      this.$emit('update:goods-id', item.goods_id)
      this.$emit('toGoods')
    },
    // 点击去登录按钮或去首页按钮
    handleSubmit(type) {
      this.$emit(type)
    },
    // 商品选中状态处理
    check(item, i) {
      if (this.isEditor) {
        this.$set(item, 'delChecked', !item.delChecked)
      } else {
        if (item.is_valid == 2) return this.$message.info('该商品已下架')
        if (item.is_valid == 1) return this.$message.info('该商品已售完,正在采购中')
        if (item.stock == 0) return this.$message.info('该商品已售完,正在采购中')
        this.$set(item, 'checked', !item.checked)
      }
    },
    //全选|取消全选
    checkAll() {
      if (this.isEditor) {
        const bool = !this.delAllChecked
        this.cartListArr.forEach((item) => {
          item.delChecked = bool
        })
      } else {
        const bool = !this.allChecked
        this.cartListArr.forEach((item) => {
          if (item.is_valid == 0 && item.stock != 0) {
            item.checked = bool
          }
        })
      }
    },
    //数量改变
    numberChange(e, index) {
      // 父级组件此处会走两遍,原因是e第一遍是String类型, 第二遍是Number类型, uni-number-box组件内部watch判定两遍的值不相同,因此进行了两次更新
      this.setTimeoutFn && clearTimeout(this.setTimeoutFn)
      this.setTimeoutFn = setTimeout(() => {
        let list = this.cartListArr
        if (e != list[index].num) {
          if (list[index].stock < e) {
            e = list[index].stock
          }
          this.$set(list[index], 'num', e)
          this.$emit('update:cart-id', list[index].aid)
          this.$emit('update:sku-id', list[index].sku_id)
          this.$emit('update:cart-num', e)
          this.$emit('numberChange')
        }
      }, 500)
    },

    /**
     * @method 移入收藏卡
     * @param {Number} type 1: 删除, 2: 移入收藏
     */
    delCart(type) {
      const list = this.cartListArr
      let ids = []
      list.forEach((item) => {
        if (item.delChecked) {
          ids.push(item.aid)
        }
      })
      if (ids.length == 0) return this.$message.info(type == 1 ? '请选择要删除的商品' : '请选择要移动的商品')
      this.$util.showModal({
        title: '提示',
        content: type == 1 ? '确认删除吗?' : '确认移入收藏夹吗?',
        success: (res) => {
          if (res.confirm) {
            if (type == 1) {
              this.$emit('update:cart-ids', ids.join(','))
              this.$emit('delCart')
            } else {
              this.$emit('update:cart-ids', ids.join(','))
              this.$emit('transCartGoods')
            }
          }
        },
      })
    },
    // 去结算
    createOrder() {
      const list = this.cartListArr
      let ids = []
      list.forEach((item) => {
        if (item.checked) {
          ids.push(item.aid)
        }
      })
      const cart_ids = ids.join(',')
      if (cart_ids == '') return this.$message.info('请选择商品')
      this.$emit('update:cart-ids', ids.join(','))
      this.$emit('createOrder')
    },
  },
}
</script>

<style lang="scss" scoped>
.checked_icon {
  color: #999;
}
.checked_active {
  color: var(--benbenFontColor5);
}
.goods_thumb {
  width: 180rpx;
  height: 180rpx;
  border-radius: 16rpx;
}

.cart-page {
  .nologin {
    .nologin-btn {
      width: 280rpx;
      height: 64rpx;
      line-height: 64rpx;
      background: $bgtheme;
      border-radius: 36rpx;
      font-size: 28rpx;
      font-family: PingFang SC;
      font-weight: 500;
      color: #ffffff;
    }
  }

  .tool-box {
    position: sticky;
    z-index: 999;
    background: #f8f8f8;

    .edit-btn {
      width: 144rpx;
      height: 56rpx;
      line-height: 56rpx;
      border-radius: 56rpx;
      border: 2rpx solid rgba(191, 191, 191, 1);
      background: #fff;

      &.btn-gray {
        width: 200rpx;
        height: 72rpx;
        line-height: 72rpx;
        font-size: 28px;
        font-family: PingFang SC;
        font-weight: 500;
        color: #333333;
        background: #f6f6f6;
        border-radius: 44rpx;
      }
    }
  }
  .action-bar {
    position: fixed;
    bottom: var(--window-bottom);
    width: 100%;
    z-index: 99;
  }
}
.fu-block-36 {
  width: 36rpx;
  height: 36rpx;
}

.fu-block-180 {
  width: 180rpx;
  height: 180rpx;
}

.fu-fs28 {
  font-size: 28rpx;
}

.fu-fs32 {
  font-size: 32rpx;
}

.page-list {
  .goods-info {
    .goods-desc {
      width: 406rpx;
      // flex: 1;
      min-width: 1px;
      min-height: 180rpx;
      display: flex;
      flex-direction: column;
      justify-content: space-between;

      .sku_name {
        display: flex;
        justify-content: space-between;
        background-color: #f8f8f8;
        height: 48rpx;
        line-height: 48rpx;
        padding: 0 16rpx;
        box-sizing: border-box;
        margin: 8rpx 0;
        border-radius: 8rpx;
      }
    }

    .wrap-image {
      position: relative;

      .box-kong {
        position: absolute;
        top: 50%;
        left: 50%;
        transform: translate(-50%, -50%);
        background-color: rgba(0, 0, 0, 0.4);
        z-index: 98;
        display: flex;
        align-items: center;
        justify-content: center;
        border-radius: 50%;
        width: 148rpx;
        height: 148rpx;

        .box-kong-item {
          width: 96rpx;
          height: 96rpx;
        }
      }
    }
  }
}
</style>
