<template>
  <div v-if="legendData" class="legend-box-wrap">
    <div class="legend-box">
      <div class="option-box">
        <Checkbox v-model="isSelectAll" @on-change="handleSelectAll">全选</Checkbox>
      </div>
      <template v-if="simple">
        <div class="legend-wrap">
          <div class="dimension-list">
            <div
              v-for="[indexLabel, seriesArr] in displaySimpleData"
              :key="indexLabel"
              :class="['dimension-item', seriesArr[0].selected ? '' : 'unselected']"
              @click="selectSeriesItem(seriesArr[0])"
            >
              <span
                :class="['dimension-color', isPieChart ? 'circle' : '']"
                :style="{ [isPieChart ? 'background-color' : 'border-color']: seriesArr[0].color }"
              ></span>
              <span class="dimension-name" :title="indexLabel">{{ indexLabel }}</span>
              <span
                :class="['dimension-option', isFocused(seriesArr[0].name) ? 'selected-dimension-option' : '']"
                @mouseenter="handleSeriesHighlight(seriesArr[0].name)"
                @mouseleave="handleSeriesDownplay(seriesArr[0].name)"
                @click.stop="handleSeriesFocusClick(seriesArr[0].name)"
              >
                <LegendItemIcon></LegendItemIcon>
              </span>
            </div>
          </div>
          <div v-if="legendData && legendData.length > pageSize" class="index-page-box">
            <Page
              :current="pageNum"
              :page-size="pageSize"
              :total="legendData.length"
              simple
              @on-change="handlePageChange"
            ></Page>
          </div>
        </div>
      </template>
      <template v-else>
        <template v-if="isMultiDimension">
          <div class="index-list">
            <div v-for="[indexName, seriesArr] in displaySeriesData" :key="indexName" class="index-item">
              <div v-if="isMultiIndex" class="index-info">
                <span class="index-letter">{{ seriesArr[0].indexLetter }}</span>
                <span class="index-name">{{ indexName }}</span>
              </div>
              <div class="dimension-list">
                <div
                  v-for="series in seriesArr"
                  :key="series.name"
                  :class="['dimension-item', series.selected ? '' : 'unselected']"
                  @click="selectSeriesItem(series)"
                >
                  <span
                    :class="['dimension-color', isPieChart ? 'circle' : '']"
                    :style="{ [isPieChart ? 'background-color' : 'border-color']: series.color }"
                  ></span>
                  <span class="dimension-name" :title="series.dimensionName">
                    {{ series.dimensionName }}
                  </span>
                  <span
                    :class="['dimension-option', isFocused(series.name) ? 'selected-dimension-option' : '']"
                    @mouseover="handleSeriesHighlight(series.name)"
                    @mouseleave="handleSeriesDownplay(series.name)"
                    @click.stop="handleSeriesFocusClick(series.name)"
                  >
                    <LegendItemIcon></LegendItemIcon>
                  </span>
                </div>
              </div>
            </div>
            <div v-if="legendData[0] && legendData[0][1].length > pageSize" class="index-page-box">
              <Page
                :current="pageNum"
                :page-size="pageSize"
                :total="legendData[0][1].length"
                simple
                @on-change="handlePageChange"
              ></Page>
            </div>
          </div>
        </template>
        <template v-else>
          <div class="legend-wrap">
            <div class="dimension-list">
              <div
                v-for="[indexLabel, seriesArr] in displaySeriesData"
                :key="indexLabel"
                :class="['dimension-item', seriesArr[0].selected ? '' : 'unselected']"
                @click="selectSeriesItem(seriesArr[0])"
              >
                <span
                  :class="['dimension-color', isPieChart ? 'circle' : '']"
                  :style="{ [isPieChart ? 'background-color' : 'border-color']: seriesArr[0].color }"
                ></span>
                <span class="dimension-name" :title="indexLabel">{{ indexLabel }}</span>
                <span
                  :class="['dimension-option', isFocused(seriesArr[0].name) ? 'selected-dimension-option' : '']"
                  @mouseover="handleSeriesHighlight(seriesArr[0].name)"
                  @mouseleave="handleSeriesDownplay(seriesArr[0].name)"
                  @click.stop="handleSeriesFocusClick(seriesArr[0].name)"
                >
                  <LegendItemIcon></LegendItemIcon>
                </span>
              </div>
            </div>
            <div v-if="legendData[0] && legendData[0][1].length > pageSize" class="index-page-box">
              <Page
                :current="pageNum"
                :page-size="pageSize"
                :total="legendData[0][1].length"
                simple
                @on-change="handlePageChange"
              ></Page>
            </div>
          </div>
        </template>
      </template>
    </div>
  </div>
</template>

<script>
/* eslint-disable no-restricted-syntax,no-param-reassign */
import LegendItemIcon from '@/components/LegendItemIcon.vue';
import legendMixin from '@/components/legendMixin';

export default {
  name: 'ChartLegend',
  components: { LegendItemIcon },
  mixins: [legendMixin],
  props: {
    data: {
      type: Array,
    },
    chartElement: {
      type: HTMLElement,
    },
    chartType: {
      type: String,
    },
    simple: {
      type: Boolean,
      default: false,
    },
  },
  data() {
    return {
      isSelectAll: true,
      legendData: null,
      pageNum: 1,
      pageSize: 15,
    };
  },
  computed: {
    isPieChart() {
      return this.chartType === 'pie';
    },

    isMultiIndex() {
      return this.legendData?.length > 1;
    },

    isMultiDimension() {
      return this.legendData?.[0]?.[1]?.[0].dimensionName !== 'total';
    },

    // chart() {
    //   if (this.chartElement) {
    //     return getInstanceByDom(this.chartElement);
    //   }
    //   return null;
    // },

    selectedObj() {
      const obj = {};
      this.legendData.forEach(([indexName, seriesArr]) => {
        seriesArr.forEach(series => {
          obj[series.name] = series.selected;
        });
      });
      return obj;
    },
    displaySeriesData() {
      const displayData = {};
      const start = (this.pageNum - 1) * this.pageSize;
      this.legendData.forEach(([indexName, seriesArr]) => {
        displayData[indexName] = seriesArr.slice(start, start + this.pageSize);
      });
      return Object.entries(displayData);
    },
    displaySimpleData() {
      const start = (this.pageNum - 1) * this.pageSize;
      return this.legendData.slice(start, start + this.pageSize);
    },
  },
  watch: {
    chart: {
      handler(val) {
        if (val) {
          this.updateLegendStatus();
        }
      },
    },
  },

  methods: {
    // updateLegendStatus() {
    //   this.chart.setOption({
    //     legend: {
    //       selected: this.selectedObj,
    //     },
    //   });
    // },

    handleSelectAll(val) {
      this.legendData.forEach(([indexName, seriesArr]) => {
        seriesArr.forEach(series => {
          series.selected = val;
        });
      });
      this.updateLegendStatus();
    },

    // selectSeriesItem(series) {
    //   series.selected = !series.selected;
    //   this.updateLegendStatus();
    // },
    //
    // handleSeriesHighlight(seriesName) {
    //   this.chart.dispatchAction({
    //     type: 'highlight',
    //     seriesName,
    //   });
    // },
    //
    // handleSeriesDownplay(seriesName) {
    //   this.chart.dispatchAction({
    //     type: 'downplay',
    //     seriesName,
    //   });
    // },
    //
    handleSeriesFocusClick(seriesName) {
      console.log(seriesName);
      if (this.isFocused(seriesName)) {
        this.legendData.forEach(([indexName, seriesArr]) => {
          seriesArr.forEach(series => {
            series.selected = true;
          });
        });
      } else {
        this.legendData.forEach(([indexName, seriesArr]) => {
          seriesArr.forEach(series => {
            series.selected = series.name === seriesName;
          });
        });
      }
      this.updateLegendStatus();
    },
    //
    // isFocused(seriesName) {
    //   const selectedSeries = Object.keys(this.selectedObj).filter(x => this.selectedObj[x]);
    //   return selectedSeries.length === 1 && selectedSeries[0] === seriesName;
    // },

    handlePageChange(pageNum) {
      this.pageNum = pageNum;
    },
  },
};
</script>

<style scoped lang="less">
.legend-box {
  .unselected {
    opacity: 0.6;
  }
}
.option-box {
  flex: 0 0 72px;
}
.legend-box {
  display: flex;
  align-items: flex-start;
  .index-list {
    width: 100%;
    .index-item {
      display: flex;
      align-items: flex-start;
      line-height: 20px;
      margin-bottom: 6px;
      &:last-child {
        margin-bottom: 0;
      }
      .index-info {
        flex: 0 0 134px;
        margin-right: 12px;
        .index-letter,
        .index-name {
          vertical-align: middle;
        }
        .index-letter {
          display: inline-block;
          width: 20px;
          height: 20px;
          margin-right: 6px;
          border-radius: 50%;
          background-color: #878aa2;
          color: #ffffff;
          font-size: 10px;
          text-align: center;
        }
        .index-name {
          display: inline-block;
          width: calc(~'100% - 26px');
          height: 20px;
          font-size: 12px;
          font-weight: 400;
          color: #545778;
          line-height: 20px;
          text-align: right;
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
    .index-page-box {
      display: flex;
      flex-direction: row-reverse;
    }
  }
  .dimension-list {
    width: 100%;
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    line-height: 20px;
    .dimension-item {
      height: 20px;
      display: flex;
      align-items: center;
      flex: 0 0 20%;
      padding-right: 12px;
      white-space: nowrap;
      cursor: pointer;
      overflow: hidden;
      &.unselected {
        opacity: 0.4;
      }
      .dimension-color,
      .dimension-name,
      .dimension-option {
        display: inline-block;
        height: 20px;
        vertical-align: middle;
      }
      .dimension-color {
        flex: 0 0 16px;
        height: 0;
        margin-right: 6px;
        border: 2px solid;
        &.circle {
          flex: 0 0 12px;
          height: 12px;
          border: none;
          border-radius: 50%;
        }
      }
      .dimension-name {
        font-size: 12px;
        font-weight: 400;
        color: #545778;
        margin-right: 4px;
        overflow: hidden;
        text-overflow: ellipsis;
      }
      .dimension-option {
        height: 16px;
        color: #d5dbe6;
        transition: color ease-in-out 0.2s, opacity ease-in-out 0.2s;
        opacity: 0;
        &:hover {
          color: #5d7092;
        }
      }
      .selected-dimension-option {
        color: #5b8ff9;
        opacity: 1;
        &:hover {
          color: #5476d8;
        }
      }
      &:hover {
        .dimension-option {
          opacity: 1;
        }
      }
    }
  }
  .legend-wrap {
    width: 100%;
    text-align: right;
  }
}
</style>
