<template>
  <div class="left-tree">
    <div class="stats-classify">
      <el-tabs v-model="activeName" @tab-click="handleClick">
        <el-tab-pane label="统计分类" name="first"></el-tab-pane>
        <div class="classify">
          <div
            v-for="(item, index) in statsClassify"
            :key="item.type"
            :class="['classify-item', item.type == classify ? 'active' : '']"
            @click="classifyChange(item, index)"
          >
            {{ item.name }}
          </div>
        </div>
      </el-tabs>
    </div>
  </div>
</template>

<script>
import PubSub from 'pubsub-js'
import {TableMixin} from '@/mixins/tableMixin'
import {getSorterDirection} from '@/utils/requestWrappers'
import {dictionaryEscape} from '@/utils/dictionary'

export default {
  name: 'LeftList',
  mixins: [TableMixin],
  props: {
    statsClassify: {
      default: () => [],
      type: Array
    }
  },
  data() {
    return {
      activeName: 'first',
      classify: ''
    }
  },
  created() {
  },
  mounted() {
  },
  methods: {
    dictionaryEscape,
    getSorterDirection,
    handleClick() {
    },
    classifyChange(item, index = 0) {
      let data = item ? item : this.statsClassify[0]
      this.classify = item.type
      this.$emit('classifyChange', data, index)
    }
  },
  beforeDestroy() {
    // 在组件销毁之前 清除订阅消息
    PubSub.unsubscribe(this.pubSub)
  }
}
</script>

<style lang="scss" scoped>
.stats-classify {
  padding: 10px 16px;
  box-sizing: border-box;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  height: 100%;

  .classify-item {
    height: 40px;
    line-height: 40px;
    cursor: pointer;
    padding-bottom: 10px;
    font-size: 14px;
    text-align: center;
    border: 1px solid #205e94;
    border-radius: 5px;
    box-sizing: border-box;
    margin-bottom: 10px;

    &:hover {
      color: #43a1ff;
      box-shadow: 0px 3px 10px rgba(0, 0, 0, 0.2);
    }
  }

  .active {
    color: #43a1ff;
  }
}
</style>
