<template>
  <div class="audit-side-nav">
    <CommonChartsPro
      v-for="({ name, number, background, color, option }, index) in charts"
      :id="`comm-pro${index}`"
      :key="name"
      class="link"
      :name="name"
      :number="number"
      :background="background"
      :color="color"
      :option="option"
      @click.native="clickHandler(index)"
    />
  </div>
</template>

<script>
import CommonChartsPro from '@/layout/components/Echarts/commonChartsPro.vue'

export default {
  components: { CommonChartsPro },
  data() {
    return {
      charts: [
        {
          name: '账号分配日志',
          color: '#fff',
          number: 214,
          background: '#5C6A99',
          option: {
            series: [
              {
                data: [
                  {
                    value: 75,
                    itemStyle: {
                      normal: {
                        color: '#8E9BC4'
                      }
                    }
                  }
                ]
              }
            ]
          }
        },
        {
          name: '账号授权日志',
          color: '',
          number: 42,
          background: '#E0F7F2',
          option: {
            series: [
              {
                data: [
                  {
                    value: 60,
                    itemStyle: {
                      normal: {
                        color: '#68CFD0'
                      }
                    }
                  }
                ]
              }
            ]
          }
        },
        {
          name: '账号登录日志',
          color: '',
          number: 225,
          background: '#F7F1E0',
          option: {
            series: [
              {
                data: [
                  {
                    value: 70,
                    itemStyle: {
                      normal: {
                        color: '#F4C23A'
                      }
                    }
                  }
                ]
              }
            ]
          }
        },
        {
          name: '账号行为日志',
          color: '',
          number: 21,
          background: '#F7E0F0',
          option: {
            series: [
              {
                data: [
                  {
                    value: 30,
                    itemStyle: {
                      normal: {
                        color: '#D860A9'
                      }
                    }
                  }
                ]
              }
            ]
          }
        }
      ]
    }
  },
  methods: {
    clickHandler(index) {
      this.$emit('nav-click', index)
    }
  }
}
</script>

<style lang="scss" scoped>
.link {
  cursor: pointer;
}
</style>
