<template>
  <bar :id='id'
    height="100%"
    width="100%"
    :data="params"
    :selectName="selectName"
    :vertical="false"
    title="Loss by region"
    formatter="{b} : <br/>Economic losses : {c0} <br/>Number of injured : {c1} <br/>Number of death : {c2}"
    @click-bar="sendClick"
    @over-bar="sendOver"
    @out-bar="sendOut">
  </bar>
</template>

<script>
import bar from './bar'

export default {
  name: 'regionStatisticsBar',
  components: { bar },
  props: {
    id: {
      type: String,
      default: ''
    },
    obj: {
      // 接受到的数据
      type: Array,
      default: function () {
        return []
      }
    },
    selectId: {
      // 外部传入，用于指定高亮的region名
      type: Number,
      default: -1
    }
  },
  data () {
    return {
      params: {}
    }
  },
  mounted () {
    this.initChart()
  },
  computed: {
    selectName: function () {
      return this.getNameById(this.selectID)
    }
  },
  methods: {
    initChart () {
      var param = {}
      var sumKill = []
      var sumWound = []
      var sumProp = []
      for (var i = 0; i < this.obj.length; i++) {
        var dicKill = {}
        dicKill.indicator = this.obj[i].regionName
        dicKill.value = this.obj[i].sumKill
        sumKill.push(dicKill)
        var dicWound = {}
        dicWound.indicator = this.obj[i].regionName
        dicWound.value = this.obj[i].sumWound
        sumWound.push(dicWound)
        var dicProp = {}
        dicProp.indicator = this.obj[i].regionName
        dicProp.value = this.obj[i].sumProp
        sumProp.push(dicProp)
      }
      param.sumProp = sumProp
      param.sumWound = sumWound
      param.sumKill = sumKill
      this.params = param
    },
    sendClick (name) {
      this.$emit('click-bar', this.getIdByName(name))
    },
    sendOver (name) {
      this.$emit('over-bar', this.getIdByName(name))
    },
    sendOut (name) {
      this.$emit('out-bar', this.getIdByName(name))
    },
    getNameById (id) {
      for (var i = 0; i < this.obj.length; i++) {
        if (id === Number(this.obj[i].region)) {
          return this.obj[i].regionName
        }
      }
      return ''
    },
    getIdByName (name) {
      for (var i = 0; i < this.obj.length; i++) {
        if (name === this.obj[i].regionName) {
          return Number(this.obj[i].region)
        }
      }
      return -1
    }
  },
  watch: {
    obj () {
      this.initChart()
    }
  }
}
</script>

