<template>
  <view>
    <cu-navbar class="cu-navbar" :background="{ background: '#f5f5f5' }" :border-bottom="false" :isBack="false" :title="`购物车(${cartList.length})`">
      <view slot="left" class="flex items-center pl-base text-xl font-medium text-txBase font-extrabold">
        <!-- 左边返回箭头 -->
        <view class="w-20rpx flex items-center mr-10rpx" @tap="back" v-if="isBack">
          <image class="w-20rpx" src="/static/images/user/left_arrow.png" mode="widthFix"></image>
        </view>
        <!-- <view>购物车<text class="text-md">({{ cartList.length }})</text></view> -->
      </view>
      <!-- <view slot="right" class="mx-base relative" @tap="$u.route('/pageA/news/index')">
        <u-icon name="chat" size="48"></u-icon>
        <u-badge :is-dot="true" size="16" :offset="[0, 2]" type="warning"></u-badge>
      </view> -->
      <block v-if="isLogin">
        <view  class="pl-base text-xl font-medium text-txBase" @tap="changeEdit">
          {{ navBarLeftText }}
        </view>
      </block>
    </cu-navbar>
    <!-- 已登录 -->
    <block v-if="cartList.length > 0">
      <view class="bg-white rounded-xs card mx-base">
        <block v-for="(item, index) in cartList" :key="item.id">
          <cart-goods-item
            :data="item"
            :goods="item.sku"
            :selected="isSelect(item)"
            @select="onSelect"
            @tap="onGoodsClick"
            @num-change="onNumChange"
            :isEdit="isEdit"
          ></cart-goods-item>
          <u-line color="#E5E5E5" v-if="index != cartList.length - 1" />
        </block>
      </view>
      <view class="fixed inset-x-0 bg-white px-18rpx py-20rpx bottom-card z-99">
        <view class="flex w-full items-end">
          <view class="flex items-end">
            <view class="flex items-center" @tap="selectAll = !selectAll">
              <image v-if="selectAll" class="w-32rpx h-32rpx flex-none mr-17rpx" src="/static/images/cart/check-round-fill.png" mode="scaleToFill" />
              <image v-else class="w-32rpx h-32rpx flex-none mr-17rpx" src="/static/images/cart/check-round.png" mode="scaleToFill" />
              <text class="text-lg">全选</text>
            </view>
            <view class="ml-30rpx">
              <text>共 {{ cartList.length }} 件</text>
            </view>
          </view>
          <block v-if="isEdit">
            <view class="flex-1"></view>
            <view>
              <view :disabled="selectedCart.length == 0" class="btn btn-primary rounded-full text-lg px-30rpx py-10rpx" @tap="delShow = true">
                移除
              </view>
            </view>
          </block>
          <block v-else>
            <view class="flex-1 text-right text-xl mr-20rpx">
              <text>合计:</text>
              <text class="text-txSvip">￥{{ calculate.amount }}</text>
            </view>
            <view>
              <view @tap="onSubmit" class="btn btn-primary rounded-full text-lg px-30rpx py-10rpx"> 确认下单 </view>
            </view>
          </block>
        </view>
      </view>
      <view class="box-shdow inset-x-0 h-2rpx fixed bottom-card z-99"></view>

      <view class="h-148rpx"></view>
    </block>
    <!-- 未登录 -->
    <block v-else>
      <mescroll-body :height="height" :bottombar="false" ref="mescrollRef" @init="mescrollInit" @up="upCallback" :down="downOption" :up="upOption">
        <view class="flex items-center justify-center flex-col bg-white py-100rpx">
          <image
            src="/static/images/cart/empty-cart.png"
            class="w-300rpx h-254rpx"
            mode="scaleToFill"
          />
          <view class="text-txGray text-md">购物车是空的</view>
          <view class="w-full px-150rpx flex items-center mt-50rpx text-txBase text-md mx-100rpx justify-between">
            <view @tap="jumpIndex" class="w-180rpx h-55rpx border border-txBase leading-55rpx text-center rounded-full"> 去逛逛</view>
            <view
              @tap="$u.routeAuth('/pageA/collection/index')"
              class="w-180rpx h-55rpx border border-txBase leading-55rpx text-center rounded-full"
              >看看关注</view
            >
          </view>
        </view>
        <view class="flex items-center justify-center mt-50rpx">
          <view class="w-25rpx h-1rpx bg-txBase"></view>
          <view class="text-xl font-extrabold text-txBase mx-10rpx">猜你喜欢</view>
          <view class="w-25rpx h-1rpx bg-txBase"></view>
        </view>
        <view class="px-rowSm mt-20rpx">
          <goods-list :list="dataList"></goods-list>
        </view>
      </mescroll-body>
    </block>

    <!-- 删除提示 -->
    <cu-modal
      v-model="delShow"
      :content="`确定要删除${selectedCart.length}种商品吗？`"
      show-cancel-button
      async-close
      @confirm="delConfirm"
    ></cu-modal>

  </view>
</template>
<script>
import MescrollMixin from '@/uni_modules/mescroll-uni/components/mescroll-uni/mescroll-mixins.js';
import CartGoodsItem from './components/cart-goods-item.vue';
import { mapActions, mapGetters } from 'vuex';
import { add, mcl } from '@/utils';
import CartMixin from '@/pages/shop_cart/mixin';
export default {
  mixins: [MescrollMixin,CartMixin],
  components: {
    CartGoodsItem,
  },
  props: {
    isBack: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      delShow: false,
      isEdit: false,
      calculate: {
        amount: 0,
      },
      downOption: {
        use: false,
      },
      upOption: {
        page: {
          size: 20,
        },
        noMoreSize: 1,
      },
      dataList: [],
    };
  },
  onShow() {
    this.getCartList();
  },
  computed: {
    ...mapGetters(['cartList', 'selectedCart']),
    navBarLeftText() {
      return this.isEdit ? '完成' : '管理';
    },
    selectAll: {
      set(val) {
        this.setSelectedCart(val ? this.cartList.map((e) => e.id) : []);
      },
      get() {
        return this.cartList.length == this.selectedCart.length && this.cartList.length > 0;
      },
    },
    selectedCorrect() {
      return this.selectedCart?.filter((id) => this.cartList.findIndex((e) => e.id == id && e.sku.is_online) >= 0) ?? [];
    },

    height() {
      const { windowHeight, statusBarHeight } = this.$u.sys();
      return windowHeight - statusBarHeight - 44 + 'px';
    },
  },
  methods: {
    ...mapActions({
      getCartList: 'goods/getCartList',
      setSelectedCart: 'goods/setSelectedCart',
    }),
    //结算
    onSubmit() {
      if (this.selectedCorrect.length == 0) return this.$u.toast('请选择需要结算的商品');
      const params = {
        cards: this.selectedCorrect,
        type: 'cart',
      };
      this.$u.route('/pages/confirm_order/confirm_order?data=' + encodeURIComponent(JSON.stringify(params)));
    },
    //数量改变
    async onNumChange(value, id) {
       await this.$api.put(
        `/v1/shopping-cart-items/${id}`,
        {
          quantity: value,
        },
        {
          custom: {
            loading: true,
          },
        },
      );
      this.getCartList();
    },
    //移除购物车
    async delConfirm() {

      if (this.selectedCart.length == 0) return this.$u.toast('您还未选择商品哦');

      await this.$api.delete('/v1/shopping-cart-items', { ids: this.selectedCart},{
          custom: {
            loading: true,
          },
        },
      );
      this.delShow = false
      this.getCartList();

    },
    //编辑
    changeEdit() {
      this.isEdit = !this.isEdit;
    },
    //复选框
    onSelect(id, selected) {
      if (selected) {
        this.setSelectedCart([...this.selectedCart, id]);
      } else {
        this.setSelectedCart(this.selectedCart.filter((e) => id != e));
      }
    },
    //商品点击
    onGoodsClick(e) {
      if (this.isEdit) return false;
      this.$u.route('/pages/product_details/index', {
        skuId: e.id,
      });
    },
    //计算价格
    getCalculateAmount() {
      const { is_vip } = this.$store.getters?.user ?? false
      const amount = this.cartList.reduce((pr, cu) => {
        if (this.selectedCart.findIndex((e) => e == cu.id) >= 0) pr = add(mcl(is_vip?cu.sku.vip_price:cu.sku.sell_price, cu.quantity), pr);
        return pr;
      }, 0);
      this.calculate.amount = amount;
    },
    //是否勾选
    isSelect({ id }) {
      return this.selectedCart.some((item) => item == id);
    },
    back() {
      uni.navigateBack({
        delta: 1,
      });
    },
    jumpIndex() {
      uni.switchTab({
        url: '/pages/index/index',
      });
    },
    downCallback() {
      this.dataList = [];
      this.$refs.uWaterfall.clear();
      this.mescroll.resetUpScroll();
    },
    async upCallback(page) {
      this.loadData(page);
    },
    loadData(page) {
      let obj = {
        page: page.num,
        per_page: page.size,
      };
      this.$api
        .get(`/v1/product/products`, {
          params: obj,
        })
        .then((res) => {
          this.mescroll.endSuccess(res.data.length);
          if (page.num == 1) this.dataList = [];
          this.dataList = this.dataList.concat(res.data);
        })
        .catch((err) => {
          this.mescroll.endErr();
        });
    },
  },
  watch: {
    selectedCart: {
      immediate: true,
      handler(e) {
        this.getCalculateAmount();
        // console.log(e);
      },
    },
  },
};
</script>
<style lang="scss" scoped>
.card {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.08);
}

.bottom-card {
  box-shadow: 0px -4rpx 8rpx rgba(0, 0, 0, 0.25);
  bottom: var(--window-bottom);
}

.bottom-h {
  padding: var(--window-bottom);
}

.box-shdow {
  box-shadow: 0px 2px 6px rgba(0, 0, 0, 0.25);
  background: #ffffff;
}
</style>
