<template>
  <div class="disaster">
    <div class="select-wrapper">
      <Select @on-change="handleSelect" :value="selectedValue" class="disaster-select" transfer>
        <template v-if="taskList.length > 0">
        <Option v-for="option in taskList" :key="option.TASKID" :value="option.TASKID">{{option.TASKNAME}}</Option>
        </template>
      </Select>
    </div>
    <div class="info">
      <p><span>严重灾情小区</span><m-count :value="disasterCommunity[0]" :decimal="0" style="color:#D82B2B;font-weight:bold;font-size:1.2rem;"/></p>
      <p><span>轻微灾情小区</span><m-count :value="disasterCommunity[1]" :decimal="0" style="color:#f7b500;font-weight:bold;font-size:1.2rem;"/></p>
    </div>
    <div class="chart-wrapper">
      <m-chart ref="chart" :config="config" :data="data" :options="{xAxis}"/>
    </div>
  </div>
</template>

<script>
import {mapState, mapActions} from 'vuex'
export default {
  name: 'Disaster',
  data() {
    return {
      value: null,
      config: {
        colors: ['#0388ef'],
        legend: {
          hide: true,
        },
        yAxis: {
          axisLabel: {show: false},
          max: value => Math.round(value.max + value.max / 5 + 1),
          min: 0,
        },
        shape: [
          {key: 'value', type: 'bar', barWidth: '30%', label: {show: true, position: 'top', color: '#fff'}},
        ],
        xAxis: {
          key: 'name',
        },
      },
      xAxis: {
        axisLabel: {
          interval: 0,
          fontSize: 11 * Number((screen.height / 800).toFixed(1)),
          textStyle: {
            color: '#D4F0FF',
          },
        }
      },
    }
  },
  computed: {
    ...mapState([
      'taskList',
      'disasterInfo',
      'disasterCommunity',
    ]),
    selectedValue() {
      return this.value || (this.taskList[0] && this.taskList[0].TASKID)
    },
    data() {
      if (this.disasterInfo.length === 0) return []
      return this.disasterInfo.map(item => {
        return {
          name: item.CHKQUOTASEQNAME,
          value: +item.VALUE,
        }
      })
    },
  },
  methods: {
    ...mapActions([
      'setDisasterInfo',
      'setDisasterCommunity',
    ]),
    handleSelect(id) {
      this.setDisasterInfo(id)
      this.setDisasterCommunity(id)
      this.value = id
      this.$refs.chart.init()
    },
  },
}
</script>
<style lang="stylus" scoped>
.disaster
  height 100%
  overflow hidden
  display flex
  flex-direction column
  .select-wrapper
    display flex
    justify-content flex-end
    .disaster-select
      width auto
  .info
    display flex
    align-items center
    justify-content space-around
    color $light-blue
    font-size 1rem
    span
      margin-right .5rem
  .chart-wrapper
    flex 1
</style>
