<template>
  <div class="daily-currency-charts" :data-language="language">
    <el-select v-model="typeValue" :placeholder="$t('pages.dashboard.shared.select')" size="mini" @change="typeValueChange">
      <el-option
        v-for="item in types"
        :key="item.value"
        :label="item.name"
        :value="item.value"
      />
    </el-select>
    <div id="barCharts" ref="barCharts" :style="'width: 100%;height:' + height + ';'" />
  </div>
</template>

<script>
import { mapGetters } from 'vuex'

export default {
  props: {
    height: {
      type: String,
      default: '600px'
    },
    chartsData: {
      type: Array,
      default: () => []
    }
  },
  data() {
    return {
      dateNumber: '',
      typeValue: 0,
      barCharts: null,
      groupChartsData: {
        income: [],
        expenditure: []
      }
    }
  },
  computed: {
    ...mapGetters(['language']),
    types() {
      const language = this.language
      return [
        { value: 0, name: this.$t('pages.dashboard.shared.income') },
        { value: 1, name: this.$t('pages.dashboard.shared.expenditure') }
      ]
    }
  },
  watch: {
    chartsData: {
      handler() {
        this.groupChartsData = this.groupChartsDataByType()
        this.$nextTick(() => {
          this.renderCharts()
        })
      },
      immediate: true
    },
    language() {
      this.$nextTick(() => {
        this.renderCharts()
      })
    }
  },
  mounted() {
    this.barCharts = this.$echarts.init(this.$refs.barCharts)
    this.renderCharts()
    window.addEventListener('resize', () => {
      this.barCharts.resize()
    })
  },
  methods: {
    groupChartsDataByType() {
      const obj = {
        income: [],
        expenditure: []
      }
      if (this.chartsData.length > 0) {
        this.chartsData.forEach(item => {
          if (item.type === 0) {
            obj.income.push(item)
          }
          if (item.type === 1) {
            obj.expenditure.push(item)
          }
        })
      }
      return obj
    },
    getBarData(list) {
      const dataKeys = []
      const dataList = []
      if (!list || list.length === 0) {
        return { keys: dataKeys, data: dataList }
      }
      const size = list.length - 1
      for (let index = size; index >= 0; index--) {
        const item = list[index]
        dataKeys.push(item.originName)
        dataList.push({
          groupId: item.originName,
          name: item.originName,
          value: item.quantity,
          itemStyle: {
            color: this.getRandomColor()
          }
        })
      }
      return { keys: dataKeys, data: dataList }
    },
    renderCharts() {
      if (!this.barCharts) {
        return
      }
      const barData = this.getBarData(this.typeValue === 0 ? this.groupChartsData.income : this.groupChartsData.expenditure)
      this.barCharts.setOption({
        color: ['#66b3ff', '#ce90e8', '#ff9c6e', '#5cdbd3'],
        tooltip: {
          trigger: 'axis',
          backgroundColor: 'rgba(50,50,50,0.5)',
          axisPointer: {
            type: 'cross',
            label: {
              lineStyle: { color: '#009688' },
              crossStyle: { color: '#008acd' },
              shadowStyle: { color: 'rgba(200,200,200,0.2)' }
            }
          }
        },
        grid: {
          x: 20,
          y: 50,
          x2: 20,
          y2: 0,
          containLabel: true,
          borderColor: '#eee'
        },
        xAxis: [{
          show: false
        }],
        yAxis: [{
          type: 'category',
          data: barData.keys,
          splitLine: { lineStyle: { color: ['#eee'] }},
          axisLine: { lineStyle: { color: '#b7bdc7' }},
          axisLabel: {
            interval: 0,
            rotate: 38,
            width: 15,
            overflow: 'truncate',
            ellipsis: '...',
            formatter(value) {
              return value.length > 10 ? value.substring(0, 10) + '...' : value
            }
          }
        }],
        legend: {
          y: 10,
          textStyle: { color: '#8e929b' }
        },
        series: {
          type: 'bar',
          label: {
            show: true,
            position: 'right',
            valueAnimation: true
          },
          data: barData.data
        }
      }, true)
    },
    getRandomColor() {
      const r = Math.floor(Math.random() * 255)
      const g = Math.floor(Math.random() * 255)
      const b = Math.floor(Math.random() * 255)
      return 'rgba(' + r + ',' + g + ',' + b + ',0.8)'
    },
    typeValueChange() {
      this.$nextTick(() => {
        this.renderCharts()
      })
    }
  }
}
</script>
