<template>
  <div class="d-flex">
    <div class="chartListBox">
      <div v-for="(item, index) in chartList" :key="item.value">
        <div :class="{'actClass': index === firstLevelIndex}" class="item" @click="firstLevelIndex = index">
          <span :class="item.icon" style="font-size: 28px;"></span>
          <div style="font-size: 14px; min-width: 46px;"> {{ item.text }} </div>
        </div>
      </div>
    </div>
    <div class="childrenBox">
      <div v-for="(item, childIndex) in chartList[firstLevelIndex].children" :key="item.imgName">
        <div @click="typeChange(item, childIndex)">
          <img class="img elevation-2" :src="require(`@/assets/chartCustomized/${item.img}`)" alt="" style="width: 150px;">
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import chartList from './utils/chartList'
export default {
  name: 'chart-list',
  components: {},
  computed: {},
  data () {
    return {
      firstLevelIndex: 0,
      secondLevelIndex: 0,
      chartList,
      setOptionArr: []
    }
  },
  mounted () {
  },
  watch: {},
  methods: {
    // initFirstNode () {
    //   this.typeChange(chartList[0].children[0], 0, true) // 初始化
    // },
    typeChange (item, index) {
      // this.secondLevelIndex = index
      const chartType = this.chartList[this.firstLevelIndex].value
      this.$emit('chartTypeChange', item, chartType)
    }
  }
}
</script>
<style lang="scss" scoped>
  .chartListBox {
    border-top: 1px solid #ccccccf1;
    .item {
      text-align: center;
      cursor: pointer;
      padding: 12px 8px;
      border: 1px solid #e3e3e3f1;
      border-top: none;
      span {
        color: #5671c4;
      }
    }
    .actClass {
      background-color: #5671c4;
      color: #fff;
      span {
        color: #fff;
      }
    }
  }
  .childrenBox {
    padding: 0 16px;
    cursor: pointer;
    div {
      margin-bottom: 16px;
    }
  }
</style>
