<template>
  <el-table-column v-if="isShow" width="1" :resizable="false" fixed="left" align="center">
    <el-popover slot="header" placement="right" trigger="click" style="margin-right: 0px;">
      <el-link
        @click.native.stop="click('selectAll')"
        ref="selectAllLink">
        <span :style="selectAllFontColor">
          {{ $t('api_test.batch_menus.select_all_data', [total]) }}
        </span>

      </el-link>

      <br/>
      <el-link
        @click.native.stop="click('selectPageAll')"
        ref="selectPageAllLink">
          <span :style="selectPageFontColor">
            {{ $t('api_test.batch_menus.select_show_data', [tableDataCountInPage]) }}
          </span>
      </el-link>

      <i class="el-icon-arrow-down table-select-icon" slot="reference"></i>
    </el-popover>
  </el-table-column>
</template>

<script>
export default {
  name: "MsTableHeaderSelectPopover",
  // props: ['total', 'pageSize', 'selectDataCounts'],
  props: {
    total: {
      type: Number,
      default() {
        return 10;
      }
    },
    pageSize: {
      type: Number,
      default() {
        return 10;
      }
    },
    selectType: {
      type: Boolean,
      default() {
        return false;
      }
    },
    tableDataCountInPage: {
      type: Number,
      default() {
        return 10;
      }
    },
    selectDataCounts: {
      type: Number,
      default() {
        return 0;
      }
    },
  },
  watch: {
    total() {
      this.reload();
    },
    tableDataCountInPage() {
      this.reload();
    }
  },
  created() {
    if (this.keyIndex === 0) {
      this.keyIndex++;
      this.reload();
    }
  },
  data() {
    return {
      isShow: true,
      selectAllFontColor: {
        color: "gray",
      },
      selectPageFontColor: {
        color: "gray",
      },
      keyIndex: 0,
    };
  },
  methods: {
    click(even) {
      if (even === 'selectPageAll') {
        this.selectAllFontColor.color = "gray";
        this.selectPageFontColor.color = document.body.style.getPropertyValue("--count_number");
      } else if (even === 'selectAll') {
        this.selectAllFontColor.color = document.body.style.getPropertyValue("--count_number");
        this.selectPageFontColor.color = "gray";

      } else {
        this.selectAllFontColor.color = "gray";
        this.selectPageFontColor.color = "gray";
      }
      //首次渲染之后，该组件不会重新渲染样式，使用keyIndex判断强制刷新一次，激活它的重新渲染功能
      if (this.keyIndex === 0) {
        this.keyIndex++;
        this.reload();
      }
      this.$emit(even);
    },
    reload() {
      if (!this.selectType) {
        this.selectAllFontColor.color = "gray";
        this.selectPageFontColor.color = "gray";
      }
      this.isShow = false;
      this.$nextTick(() => {
        this.isShow = true;
      });
    }
  }
}
</script>

<style scoped>

.selected-link {
  color: #783887 !important;
}

</style>
