<template>
  <div class="events">
    <div class="type">
      <ElRadioGroup
        v-model="staticType"
        size="mini"
        @change="getStatisticsOneEventType"
      >
        <ElRadioButton
          v-for="item in eventStaticType"
          :key="item.value"
          :label="item.value"
        >
          {{ item.label }}
        </ElRadioButton>
      </ElRadioGroup>
    </div>
    <div class="num">
      <span>事件总数：</span>
      <span>{{ eventTotal }}</span>
    </div>
    <div>
      <PieChart :datas="cahrtDatas" />
    </div>
  </div>
</template>
<script>
import moment from 'moment'
import { getStatisticsOneEventType } from '@/api/yygl'
import PieChart from '@/components/Chart/PieChart'
import { mapState } from 'vuex';
export default {
  components: {PieChart},
  data() {
    return {
      eventStaticType: [
        {
          label: '日统计',
          value: 0,
        },
        {
          label: '周统计',
          value: 1,
        },
        {
          label: '月统计',
          value: 2,
        },
        {
          label: '年统计',
          value: 3,
        },
      ],
      staticType: 0, // 事件统计时间范围
      eventData: []
    }
  },
  computed: {
    ...mapState({
      selectAllRoad: state => state.road.selectAllRoad
    }),
    cahrtDatas() {
      return {
        height: '200px',
        width: '100%',
        pieCenter: [this.eventData.length > 8 ?'76%' : '60%', '50%'],
        data: this.eventData
      }
    }
  },
  watch: {
    selectAllRoad(newVal) {
      this.getStatisticsOneEventType(this.staticType)
    },
  },
  mounted() {
    this.getStatisticsOneEventType(this.staticType)
  },
  methods: {
    // 获取根据类型维度事件数量
    async getStatisticsOneEventType(type) {
      moment.updateLocale('en', {
        week: {
          dow : 1, // Monday is the first day of the week.
        }
      })
      this.eventData = []
      this.eventTotal = 0
      let now = new Date()
      let startTimeMap = {
        0: () => moment(now).startOf('day'),
        1: () => moment(now).startOf('week'),
        2: () => moment(now).startOf('month'),
        3: () => moment(now).startOf('year'),
      }
      let startTime = moment(startTimeMap[type]()).format('YYYY-MM-DD HH:mm:ss')
      let endTime = moment(now).format('YYYY-MM-DD HH:mm:ss')
      let { dataList, success, msg } = await getStatisticsOneEventType({
        startTime,
        endTime,
        roadIds: this.selectAllRoad,
      })
      if (success) {
        const list = []
        let total = 0
        dataList.map(item => {
          list.push({
            name: item.eventTypeText,
            value: item.count
          })
          total += item.count
        }) 
        this.eventData = list
        this.eventTotal = total
      } else {
        this.$message.error(msg || '系统出错')
      }
    },
  }
}
</script>
<style lang="postcss" scoped>
.events {
  width: 100%;
  .type {
    text-align: center;
    padding: 10px 5px;
  }
  .num {
    color: #83b4ed;
  }
}
::v-deep .el-radio-button__inner {
  border: 1px solid #798fc1;
}
::v-deep .el-radio-button:first-child .el-radio-button__inner {
  border-left: 1px solid #798fc1;
}
</style>