<template>
  <div class="my-collection-con my-history bg-grey">
    <div class="collection-content flex-default shops-con">
      <div class="list-operation" v-show="getListData.length > 0">
        <div class="left" v-show="!editList">您浏览了{{ listTotal }}个版权商品</div>
        <div class="right" v-show="!editList" @click="editCollection">编辑</div>
        <div class="right" v-show="editList" @click="completeCollection">
          完成
        </div>
      </div>
      <div class="collection-list-con">
        <mescroll-vue
          ref="mescrollRef"
          @init="mescrollInit"
          :down="downOptions"
          :up="upOptions"
        >
          <div class="list-con">
            <card-item
              v-for="(item, index) of getListData"
              :key="index + Math.random()"
              :editList="editList"
              :itemData="item"
              @checkedItem="checkedItem"
              @delFootprint="delFootprint"
            />
          </div>
        </mescroll-vue>
      </div>
      <footer-con
        v-show="editList"
        :isCheckAll="isCheckAll"
        @checkAll="checkAll"
        @deleteSubmit="deleteSubmit"
      />
    </div>
  </div>
</template>

<script>
import CardItem from "./card-list-item.vue";
import FooterCon from "./footer-con.vue";
import { MescrollMixin } from "@/mixins";
import { formatTime } from "@/utils";
export default {
  mixins: [MescrollMixin],
  components: { CardItem, FooterCon },
  data() {
    return {
      list: [],
      listTotal: 0,
      screenMore: false,
      downOptions: {
        autoShowLoading: false,
        auto: true,
        callback: this.downCallback,
      },
      upOptions: {
        auto: false,
        textNoMore: "没有更多啦",
        callback: this.upCallback,
      },
      editList: false,
      pageSize: 0,
    };
  },
  computed: {
    isCheckAll() {
      let flag = this.list.every((x) => x.checked);
      return flag;
    },
    getListData() {
      const year = formatTime(new Date(), "yyyy");
      let arr = [];
      for (let item of this.list) {
        let itemYear = formatTime(new Date(item.updateTime), "yyyy");
        if (itemYear === year) {
          item.cardTime = formatTime(new Date(item.updateTime), "MM-dd");
        } else {
          item.cardTime = formatTime(new Date(item.updateTime), "yyyy-MM-dd");
        }
        if (
          arr.find((x) => {
            return x.cardTime === item.cardTime;
          })
        ) {
          arr
            .find((x) => {
              return x.cardTime === item.cardTime;
            })
            .children.push(item);
        } else {
          arr.push({ cardTime: item.cardTime, children: [item] });
        }
      }
      return arr;
    },
  },
  methods: {
    deleteSubmit() {
      let arr = [];
      for (let item of this.list) {
        if (item.checked) {
          arr.push(item.goodsId);
        }
      }
      if (arr.length > 0) {
        this.delFootprint(arr);
      }
    },
    delFootprint(val) {
      this.$showLoading();
      const goodsIds = val.join(",");
      this.$api({
        apiName: "delFootprint",
        postData: { goodsIds: goodsIds },
        success: (res) => {
          this.requestData({
            num: 1,
            size: this.pageSize,
          });
        },
        complete: () => {
          this.completeCollection();
          this.$hideLoading();
        },
      });
    },
    requestData(page, type) {
      if (page.num === 1 && type === "scroll") {
        this.$showLoading();
      }
      this.pageSize = page.size;
      this.$api({
        apiName: "getFootprint",
        postData: { page: page.num, size: page.size },
        success: (res) => {
          let arr = res.list || [];
          for (let item of arr) {
            item.checked = false;
          }
          if (type === "scroll") {
            if (page.num === 1) {
              this.list = arr;
            } else {
              this.list = this.list.concat(arr);
            }
          } else {
            this.list = arr;
          }
          this.listTotal = res.total;
          this.mescroll.endBySize(arr.length, this.listTotal);
        },
        fail: () => {
          this.mescroll.endBySize(0, 0);
        },
        complete: (res) => {
          if (page.num === 1) {
            this.$hideLoading();
          }
          this.mescroll.endDownScroll();
        },
      });
    },
    editCollection() {
      this.editList = true;
    },
    checkedItem(data) {
      let obj = this.list.find((x) => {
        return x.goodsId === data.goodsId;
      });
      obj.checked = !data.checked;
    },
    completeCollection() {
      this.editList = false;
      for (let item of this.list) {
        item.checked = false;
      }
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.requestData(page, "scroll");
    },
    checkAll() {
      const flog = this.isCheckAll;
      for (let item of this.list) {
        item.checked = !flog;
      }
    },
  },
};
</script>
<style lang="less">
.my-collection-con {
  height: 100%;
  flex-direction: column;
  .collection-content {
    flex-shrink: 1;
    flex-direction: column;
    height: 100%;
    > div {
      width: 100%;
    }
    .list-operation {
      height: 35px;
      padding: 0 16px;
      flex-shrink: 0;
      .left {
        font-size: 12px;
        line-height: 35px;
        float: left;
      }
      .right {
        float: right;
        color: #2C66F5;
        font-size: 12px;
        line-height: 35px;
      }
    }
    .collection-list-con {
      flex: 1;
	  overflow: hidden;
    }
  }
}
</style>