<template lang="pug">
  div.main
    div.top-nodata(v-if="hasPK")
      img(src="~dinkle/assets/icon/search-to.png" @click="$router.push('search')")
    div.main-top(v-else)
      q-checkbox(v-model="isAll" label="全选" color="red" @input="selectAll")
      div.top-reset(@click="resetPKList")
        q-avatar(rounded size="50px")
          img(src="~dinkle/assets/icon/reset.png")
        p 重新选择
    ProductList(:list="pkList" :isPK="true" @selectChanged="selectChanged" :style="{ 'margin-bottom': bottom }" )
    div.main-bottom(:style="{ 'bottom': bottom }" @click="toDelete")
      q-btn-toggle(:value="currentBtn" spread no-caps size='44px' unelevated stack toggle-color="negative" color="#F2F2F2" text-color="#878787" :options="options" clearable @clear="toPK")
</template>

<script>
import ProductList from "dinkle/components/productCell";
import { mapState } from "vuex";

export default {
  name: "",
  components: {
    ProductList
  },
  data() {
    return {
      // 搜索内容
      search: "",
      // 搜索列表
      searchList: [],
      // 是否全选
      isAll: false,
      // 操作按钮
      currentBtn: "pk",
      options: [
        { label: "删除 (0)", value: "" },
        { label: "开始对比 (0)", value: "pk" }
      ],
      isPk: false,
      // 距离底部
      bottom: 0
    };
  },
  computed: {
    ...mapState({
      pkList: state => state.dinkle.pkList
    }),
    hasPK() {
      return !this.pkList.length;
    }
  },
  watch: {},
  filters: {},
  created() {},
  mounted() {
    this.selectChanged();
    setTimeout(() => {
      this.bottom = window.webH + "px";
    }, 200);
  },
  methods: {
    // 重置pk列表
    resetPKList() {
      this.pkList.forEach(item => (item.isSelected = false));
      this.isAll = false;
      this._updateCount(0);
    },
    // 同步全选状态
    selectChanged() {
      const arrS = this.pkList.filter(item => item.isSelected);
      this._updateCount(arrS.length);
      if (arrS.length) {
        this.isAll = this.pkList.length == arrS.length ? true : null;
      } else {
        this.isAll = false;
      }
    },
    // 全选所有
    selectAll() {
      const arrS = this.pkList.filter(item => item.isSelected);
      if (this.pkList.length == arrS.length) {
        this.pkList.forEach(item => (item.isSelected = false));
        this.isAll = false;
        this._updateCount(0);
      } else {
        this.pkList.forEach(item => (item.isSelected = true));
        this.isAll = true;
        this._updateCount(this.pkList.length);
      }
    },
    // 更新选中的数量
    _updateCount(num) {
      this.options[0].label = `删除 (${num})`;
      this.options[1].label = `开始对比 (${num})`;
    },
    // pk对比页面
    toPK() {
      if (this.isAll === false) return;
      this.isPk = true;
      setTimeout(() => {
        this.isPk = false;
      }, 100);
      const arrS = this.pkList.filter(item => item.isSelected);
      const ids = arrS.map(item => item.id).join(",");
      this.$router.push({
        name: "pkList",
        query: { ids }
      });
    },
    // 删除操作
    toDelete() {
      if (this.isAll === false) return;
      if (this.isPk) return;
      this.$store.commit("dinkle/DEL_PK_LIST");
      this.selectChanged();
    }
  }
};
</script>

<style scoped lang="stylus">
.main
  background-color #fff
.main-top, .top-reset
  display flex
  justify-content start
  align-items center
.top-reset
  &:hover
    color #ff6600
  margin-left 25px
  p
    margin-left 8px
.top-nodata
  text-align center
  padding-top 15px
  img
    width 80%
.main-top
  padding 15px 20px
.main-bottom
  position fixed
  width 100%
  left 0
  background-color #fff
</style>
