<template>
  <Module class="flex-grow"
          style="width: 30%"
          :loading="loading"
          :error="error">
    <!-- :info="bsMeta && bsMeta['emplRate']" -->
    <template #title>病害数量(个)</template>
    <template #end>
      {{ moment(date).format('yyyy') }}

      <Switcher :options="options"
                v-model="latest" />
    </template>
    <template v-if="!loading">
      <Ect :options="ectOpts" />
      <div class="radar"></div>
      <!-- <Empty v-else /> -->
    </template>
  </Module>
</template>
<script>
import { mapState } from 'vuex'
import { diseaseCount } from '@/api/curingBusiness'
import moment from 'moment'
export default {
  computed: {
    ...mapState({
      date: state => state.appDate,
      selectRoadId: state => state.road.selectRoadId,
      value: state => state.road.selectLevel
    }),
    ectOpts() {
      return {
        title: {
          left: 'center',
        },
        radar: {
          indicator: this.indicator,
          shape: 'circle',
          splitNumber: 5,
          axisName: {
            color: '#29343f',
            fontSize: 14,
            fontWeight: 700,
            showMinLabel: true,
          },
          splitLine: {
            lineStyle: {
              width: 2,
              color: ['#203350'].reverse(),
            },
          },
          splitArea: {
            show: false,
          },
          axisLine: {
            lineStyle: {
              color: 'rgba(78, 125, 200, 1)',
            },
          },
        },
        series: [
          {
            type: 'radar',
            lineStyle: {
              width: 1,
              opacity: 0.5,
            },
            data: this.diseaseCountData,
            symbol: 'circle',
            itemStyle: {
              width: 2,
              color: '#fc9a0a',
            },
            areaStyle: {
              opacity: 0.1,
            },
          },
        ],
      }
    },
  },
  data() {
    return {
      error: '',
      loading: false,
      options: [
        { name: '年', value: 0 },
        { name: '月', value: 1 },
      ],
      latest: 0,
      indicator: [],
      diseaseCountData: [],
    }
  },
  created() {
    this.getApiData()
  },
  watch: {
    date() {
      this.getApiData()
    },
    latest() {
      this.getApiData()
    },
    selectRoadId() {
      this.getApiData()
    },
  },
  methods: {
    moment,
    async getApiData() {
      let { msgContent } = await diseaseCount({
        orgLevel: this.value,
        filterOrgVal: this.value === '3'? this.selectRoadId[2] : this.selectRoadId[1],
        timeLevel: this.latest,
        timeVal:
          this.latest == 0
            ? moment(this.date).format('yyyy')
            : moment(this.date).format('yyyyMM'),
      })
      let indicator = []
      let diseaseCountData = []
      let max = 0
      msgContent.forEach((i) => {
        if (max < i.diseaseCount) {
          max = i.diseaseCount
        }
      })
      msgContent.forEach((item) => {
        indicator.push({ name: item.orgName, max: max || 5 })
        diseaseCountData.push(item.diseaseCount)
      })
      this.indicator = indicator
      this.diseaseCountData = diseaseCountData.length
        ? [{ value: diseaseCountData }]
        : []
    },
  },
}
</script>
<style lang="scss" scoped>
@import '~/styles/viewport-convert.scss';
.radar {
  position: absolute;

  width: 25vh;
  height: 24.6vh;
  left: 50%;
  top: 51.5%;
  transform: translate(-50%, -50%);
  background: url('~/assets/images/chargeManage/radar-bg.png') no-repeat
    center/100% 100%;
}
</style>
