<template>
  <VListCard
    cancel
    style="width:200px"
    class="mr-12"
    title="资源列表"
    :dataList="accept_list"
    @change="onChangeItem"
  />
</template>

<script>
import { ACCEPT_MAP } from '@/utils'
import VListCard from '@/views/statistic/components/VListCard.vue'

export default {
  components: { VListCard },

  computed: {
    accept_list () {
      const list = []
      const map = {}
      let id = 0
      for (const key in ACCEPT_MAP) {
        if (key === 'folder') continue
        if (map[ACCEPT_MAP[key].name] === undefined) {
          map[ACCEPT_MAP[key].name] = id
          list.push({ id, title: ACCEPT_MAP[key].name, value: [] })
          id++
        }
        list[map[ACCEPT_MAP[key].name]].value.push(key)
      }
      return list
    }
  },

  methods: {
    onChangeItem (item) {
      this.$parent.activeType = item?.value.join() || ''
    }
  }

}
</script>

<style lang="scss" scoped>
.chart {
  display: flex;
  flex-direction: column;

  > h2 {
    margin: 8px;
    padding: 8px 0;
    border-bottom: 1px solid #d8d8d8;
  }

  > ul {
    flex: 1;
    margin: 0 8px;
    padding: 0;
    overflow: hidden auto;

    > li {
      margin-bottom: 6px;
      display: block;
      line-height: 32px;
      text-align: center;
      color: #333;
      border: 1px solid #DCDFE6;
      border-radius: 4px;
      cursor: pointer;

      &:hover,
      &.active {
        color: white;
        border-color:#DCDFE6;
        background-color: #208ac6;
      }
    }
  }
}
</style>
