<template>
  <div class="shoppingContent">
    <div v-if="showMask" :class="{ shoppingMask: showMask }" @click="closeMask" />
    <cr-image v-if="loading" v-imogr src="../../assets/images/cart/skeleton.png" class="skeleton" />
    <div class="shopping">
      <div class="shopping-content">
        <GoodsManage class="shopping-manage" @openPopup="openPopup" />
        <!-- <GoodActivity class="shopping-good-activity" /> -->
        <ScrollView :class="['shopping-list', validCount && 'haveSettle']">
          <cr-pull-refresh v-model="isLoading" @refresh="initMethods">
            <PageWrapper @loadFirstScreen="loadFirstScreen">
              <template slot="first-screen">
                <div v-if="pullRefresh" class="pullRefresh">轻轻下拉，查看更新</div>
                <template v-if="cartCount">
                  <template v-if="cartList.length">
                    <div v-for="(item, index) in cartList" :key="index">
                      <GoodActivityCard
                        ref="activityCard"
                        :info="item"
                        :idx="index"
                        @openEditNumDialog="openEditNumDialog"
                        @handleSwiperCellClose="handleSwiperCellClose"
                      />
                    </div>
                  </template>
                  <DisabledGoods />
                </template>
                <Empty v-if="(!cartCount || (cartCount === 1 && pullRefresh)) && !loading" />
              </template>
            </PageWrapper>
            <LikeGoodList
              v-if="goodsList.length"
              header-type="image"
              class="shopping-list--goods"
              :class="{ noLogin: !isLogin }"
              :goods-list.sync="goodsList"
            />
          </cr-pull-refresh>
        </ScrollView>
      </div>
      <GoodsSettle v-if="cartList.length" class="shopping-settle" />
      <edit-goodNum-dialog
        :show="editNumDialog"
        :value="editGoodInfo"
        :index="editGoodIndex"
        :idx="editGoodIdx"
        @close="closeEditNumDialog"
      />
      <GoodPopup ref="popup" />
    </div>
  </div>
</template>
<script>
import GoodPopup from './components/goodPopup.vue';
import GoodActivityCard from './components/goodActivityCard.vue';
import GoodsSettle from './components/goodsSettle.vue';
// import Goods from './components/goodItem.vue';
import GoodsManage from './components/goodsMange.vue';
import Empty from './components/empty.vue';
import { mapState, mapActions } from './shopCartModules.js';
// import { saTrackEvent } from '@/utils/sa.js';
// import GoodActivity from './components/goodActivity';
import DisabledGoods from './components/disabledGoods';
import { shopCartLike } from '@/api/shopCart.api.js';
import editGoodNumDialog from './components/goodNumEdit';
import LikeGoodList from '@/components/goodsCard';
import localStorage from '@/service/localStorage.service';
import ScrollView from '@/components/scrollView';
import PageWrapper from '../../components/base/PageWrapper.vue';
import historyRecordMixins from '@/mixins/historyRecord.mixins';

export default {
  name: 'Cart',
  provide() {
    return {
      cart: this
    };
  },
  components: {
    PageWrapper,
    Empty,
    // Goods,
    GoodActivityCard,
    GoodsSettle,
    GoodsManage,
    // GoodActivity,
    DisabledGoods,
    LikeGoodList,
    editGoodNumDialog,
    GoodPopup,
    ScrollView
  },
  mixins: [historyRecordMixins],
  data() {
    return {
      loading: true,
      showMask: false,
      isLoading: false,
      popupType: '',
      popupGoodInfo: {},
      show: false,
      hasActivity: false,
      editNumDialog: false,
      goodsList: [],
      options: [
        {
          text: '删除',
          style: {
            backgroundColor: '#F43530'
          }
        }
      ],
      editGoodInfo: {},
      editGoodIndex: 0,
      editGoodIdx: 0
    };
  },
  computed: {
    ...mapState({
      cartList: state => state.cartList,
      cartCount: state => state.cartCount,
      pullRefresh: state => state.pullRefresh
    }),
    ...mapState(['activityInfo']),
    validCount() {
      return this.cartList.length;
    },
    isLogin: function() {
      return localStorage.get('vccToken');
    }
  },
  watch: {
    activityInfo: {
      deep: true,
      immediate: true,
      handler(val) {
        if (val.length) {
          this.hasActivity = true;
        } else {
          this.hasActivity = false;
        }
      }
    }
  },
  mounted() {
    this.loadData();
  },
  activated() {
    this.initMethods();
  },
  deactivated() {
    this.loading = false;
  },
  beforeDestroy() {
    this.clearTimer();
  },
  methods: {
    loadFirstScreen() {
      setTimeout(() => {
        this.loading = false;
      }, 500);
    },
    priceChange() {
      this.showMask = true;
    },
    closeMask() {
      this.showMask = false;
      this.$refs.activityCard.forEach(item => {
        item.closeModal();
      });
    },
    handleSwiperCellClose(idx) {
      this.$refs.activityCard.forEach((item, index) => {
        if (index !== idx) {
          item.handleSwiperCellClose(-1);
        }
      });
    },
    openPopup({ type, goodInfo = {} }) {
      this.$refs.popup.showPopup({ type, goodInfo });
    },
    ...mapActions({
      delGood: 'del_cart_good',
      queryList: 'query_cart_list',
      closeManageCartState: 'close_manage_cart_state',
      clearTimer: 'clear_timer'
    }),
    async initMethods() {
      this.closeManageCartState();
      localStorage.get('vccToken') && (await this.queryList({ pageNo: 1, pageSize: 1000 }));
      this.isLoading = false;
    },
    async loadData() {
      // 商品详情没有无限流 只有20条数据
      const [res] = await shopCartLike({ pageNo: 1, pageSize: 20, pageType: 3 });
      this.goodsList = this.goodsList.concat((res && res.goodsList) || []);
    },
    closeEditNumDialog() {
      this.editNumDialog = false;
    },
    openEditNumDialog({ idx, index, goodInfo }) {
      this.editGoodIdx = idx;
      this.editGoodIndex = index;
      this.editGoodInfo = goodInfo;
      this.editNumDialog = true;
    }
  }
};
</script>
<style lang="less" scoped>
.shoppingMask {
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.63);
  z-index: 8888;
}
.shoppingContent {
  width: 100%;
  height: 100%;
  overflow: hidden;
}
.pullRefresh {
  font-size: 12px;
  color: #ec1500;
  margin-left: 12px;
  width: 351px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: linear-gradient(
    90deg,
    rgba(236, 21, 0, 0) 0%,
    rgba(236, 21, 0, 0.05) 22%,
    rgba(236, 21, 0, 0.05) 79%,
    rgba(236, 21, 0, 0) 100%
  );
}
.skeleton {
  position: absolute;
  top: -36px;
  left: 0;
  right: 0;
  z-index: 10;
}
::v-deep .cr-pull-refresh {
  height: auto;
}
::v-deep .cr-pull-refresh__head {
  color: #333333;
}
::v-deep .cr-pull-refresh__head .cr-loading {
  margin-right: 4px;
}
.shopping {
  width: 100%;
  height: 100%;
  overflow: hidden;
  &-content {
    // padding: 0 6px 0 @padding-sm;
    box-sizing: border-box;
    height: 100%;
  }
  // &-good-wrap {
  // padding-top: 41px;
  // }
  &-good-activity {
    // position: fixed;
    z-index: 2;
  }
  &-manage {
    // width: 710px;
    height: 41px;
    // position: fixed;
    // top: 0;
    z-index: 10;
  }
  &-list {
    // margin-top: -20px;
    /* height: calc(100vh - 82px); */
    // height: 100vh;
    padding: 0 6px;
    box-sizing: border-box;
    height: 100% !important;
    &.haveSettle {
      height: calc(100% - 98px) !important;
      height: calc(100% - 98px) !important;
    }
    &.isActivity {
      height: calc(100% - 142px) !important;
      height: calc(100% - 142px) !important;
    }
    &--goods {
      padding: 0 6px;
      padding-top: 12px;
    }
  }
  &-goods {
    // max-height: 1200px;
    overflow: hidden;
    padding: 0 0px 11px 0px;
    background-color: #f8f8f8;
  }
  // &-good-swipe {
  // margin-bottom: 20px;
  // }
  .shopping-settle {
    // position: fixed;
    // bottom: 50px;
    // left: 0;
    width: 100%;
    // z-index: 1;
    height: 57px;
  }
  // .hasActivity {
  // margin-top: 25px;
  // }
  .noHasActivity {
    margin-top: 0px;
  }
  .divider {
    height: 4px;
    width: 100%;
    background-color: #f7f8fa;
    z-index: 2;
    position: fixed;
    margin-right: 5px;
    top: 75px;
  }
}
.onLogin {
  padding-bottom: calc(56px + env(safe-area-inset-bottom));
}
</style>
