<template>
  <div class="my-collection-con bg-grey">
    <div class="collection-content flex-default shops-con">
      <div class="list-operation">
        <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">
            <shops-item
              v-for="(item, index) of list"
              :key="index + Math.random()"
              :editList="editList"
              :itemData="item"
              @checkedItem="checkedItem"
            />
          </div>
        </mescroll-vue>
      </div>
      <footer-con
        v-show="editList"
        btnText="取消关注"
        :isCheckAll="isCheckAll"
        @checkAll="checkAll"
        @deleteSubmit="deleteSubmit"
      />
    </div>
  </div>
</template>
<script>
import shopsItem from "./shops-list-item.vue";
import FooterCon from "./footer-con.vue";
import { MescrollMixin } from "@/mixins";
export default {
  mixins: [MescrollMixin],
  components: {
    shopsItem,
    FooterCon,
  },
  data() {
    return {
      list: [],
      listTotal: 0,
      downOptions: {
        autoShowLoading: false,
        auto: true,
		callback: this.downCallback
      },
      upOptions: {
        auto: false,
        textNoMore: "没有更多啦",
		callback: this.upCallback
      },
      editList: false,
      pageSize: 0,
    };
  },
  computed: {
    options() {
      if (!this.editList) {
        return [
          {
            text: "删除",
            style: {
              backgroundColor: "#dd524d",
            },
          },
        ];
      } else {
        return [];
      }
    },
    isCheckAll() {
      let flag = this.list.every((x) => x.checked);
      return flag;
    },
  },
  methods: {
    editCollection() {
      this.editList = true;
    },
    completeCollection() {
      this.editList = false;
      for (let item of this.list) {
        item.checked = false;
      }
    },
    bindClick(e, obj) {
      // 滑动删除
      this.delFollows([obj.merchantId]);
    },
    checkedItem(data) {
      // 选中
      let obj = this.list.find((x) => {
        return x.merchantId === data.merchantId;
      });
      obj.checked = !data.checked;
    },
    delFollows(val) {
      //删除
      this.$showLoading();
      const merchantIds = val.join(",");
      this.$api({
        apiName: "delFollows",
        postData: { merchantIds: merchantIds },
        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: "getFollowList",
        postData: { page: page.num, size: page.size },
        success: (res) => {
          let arr = res.list || [];
          arr = arr.filter((x) => {
            return Boolean(x);
          });
          for (let item of arr) {
            if (item) {
              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(res.list.length, this.listTotal);
        },
        fail: () => {
          this.mescroll.endBySize(0, 0);
        },
        complete: (res) => {
          if (page.num === 1) {
            this.$hideLoading();
          }
          this.mescroll.endDownScroll();
        },
      });
    },
    deleteSubmit() {
      // 点击选中
      let arr = [];
      for (let item of this.list) {
        if (item.checked) {
          arr.push(item.merchantId);
        }
      }
      if (arr.length > 0) {
        this.delFollows(arr);
      }
    },
    checkAll() {
      // 全选
      const flog = this.isCheckAll;
      for (let item of this.list) {
        item.checked = !flog;
      }
    },
    downCallback() {
      this.mescroll.resetUpScroll();
    },
    upCallback(page) {
      this.requestData(page, "scroll");
    },
  },
};
</script>
<style lang="less">
.my-collection-con {
  height: 100%;
  flex-direction: column;

  .m-tabs-con {
    flex-shrink: 0;
  }

  > .collection-content {
    flex-shrink: 1;
    flex-direction: column;
    height: 100%;
    > div {
      width: 100%;
    }

    .screen-first-con {
      height: 42px;
      background-color: #ffffff;
      padding: 10px 16px 0;
      width: 100%;
      flex-shrink: 0;

      .screen-item {
        min-width: 58px;
        height: 24px;
        padding: 0 8px;
        font-size: 12px;
        color: #140603;
        background-color: #f1f1f1;
        line-height: 24px;
        border-radius: 12px;
        align-items: center;
        text-align: center;
        margin-right: 10px;
        flex-shrink: 0;
        display: inline-block;

        &.all {
          background-color: transparent;
          border: 1px solid #2C66F5;
          color: #2C66F5;

          .uni-icons {
            font-size: 10px !important;
            margin-left: 3px;
            color: #2C66F5 !important;
          }
        }
      }

      .scroll-view_H {
        flex-shrink: 1;
        width: calc(~"100% - 68px");
        white-space: nowrap;
      }
    }

    .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-shrink: 1;
      height: 100%;
      .mescroll-uni-warp {
        .mescroll-uni-fixed {
          top: calc(~"44px + 35px") !important;
        }
      }
    }
    .list-con {
      background-color: #ffffff;
      border-radius: 10px;
    }
  }
}
</style>
