<template>
  <div class="module-container">
    <module-header title="事件类型"></module-header>
    <div class="module-body event-overview">
      <div class="event-type-left">
        <div
          class="event-type-item"
          v-for="(item, index) in eventTypeData.slice(4).reverse()"
          :key="index"
        >
          <span
            class="event-type-color"
            :style="`background-color: ${item.color}`"
          ></span>
          <span class="event-type-name">{{ item.name }}</span>
          <span class="event-type-value">{{ item.value }}</span>
        </div>
      </div>
      <div class="event-chart-warpper">
        <div id="eventChart"></div>
      </div>
      <div class="event-type-right">
        <div
          class="event-type-item"
          v-for="(item, index) in eventTypeData.slice(0, 4)"
          :key="index"
        >
          <span class="event-type-value">{{ item.value }}</span>
          <span class="event-type-name">{{ item.name }}</span>
          <span
            class="event-type-color"
            :style="`background-color: ${item.color}`"
          ></span>
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import * as echarts from 'echarts'
import ModuleHeader from '../components/moduleHeader.vue'
export default {
  name: 'eventType',
  components: {ModuleHeader},
  props: {
    // 标题
    title: {
      type: String,
      default: '',
    },
  },
  created() {
    this.initEcharts()
  },
  data() {
    return {
      eventChart: null,
      eventData: [],
      total: 800,
      eventOption: {
        tooltip: {
          trigger: 'item',
          formatter: '{a} <br/>{b}: {c} ({d}%)',
          backgroundColor: 'rgba(13, 79, 145, 0.9)',
          borderColor: '#3399FF',
          textStyle: {
            color: '#fff',
          },
        },
        title: {
          text: this.total,
          subtext: '总数',
          left: '47%',
          x: 'center',
          y: '30%',
          textAlign: 'center',
          textStyle: {
            color: '#fff',
            fontSize: 22,
            fontWeight: 'bold',
          },
          subtextStyle: {
            color: '#fff',
            fontSize: 16,
            lineHeight: 18,
          },
        },
        series: [
          {
            name: '事件类型',
            type: 'pie',
            radius: ['85%', '96%'],
            center: ['50%', '50.5%'],
            label: {
              show: false,
              position: 'center',
            },
            padAngle: 5,
            labelLine: {
              show: false,
            },
            data: [],
            itemStyle: {
              emphasis: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)',
              },
            },
          },
        ],
      },
      eventTypeData: [
        {
          name: '自然灾害',
          value: 100,
          color: '#566AFF',
        },
        {
          name: '道路施工',
          value: 100,
          color: '#00FFD4',
        },
        {
          name: '路面状况',
          value: 100,
          color: '#FFE043',
        },
        {
          name: '道路施工',
          value: 100,
          color: '#FFA54B',
        },
        {
          name: '车辆故障',
          value: 100,
          color: '#00D4FF',
        },
        {
          name: '交通气象',
          value: 100,
          color: '#EC4881',
        },
        {
          name: '交通事故',
          value: 100,
          color: '#D641FF',
        },
        {
          name: '交通管制',
          value: 100,
          color: '#00E117',
        },
      ],
    }
  },
  mounted() {
    this.eventData = this.eventTypeData.map((item) => {
      return {
        name: item.name,
        value: item.value,
        itemStyle: {
          normal: {
            color: item.color,
          },
        },
      }
    })
    this.eventOption.title.text = this.total
    this.eventOption.series[0].data = this.eventData
    this.$nextTick(() => {
      this.initEcharts()
    })
  },
  methods: {
    initEcharts() {
      if (this.eventChart) {
        this.gaugeOption.series[0].data = this.eventData
        this.eventChart.setOption(this.eventOption)
      } else {
        this.eventChart = echarts.init(document.getElementById('eventChart'))

        this.eventChart && this.eventChart.setOption(this.eventOption)
        window.addEventListener('resize', () => this.eventChart.resize())
      }
    },
  },
}
</script>
  <style scoped lang="scss">
  .module-container {
    width: 100%;
    height: 100%;
    background: linear-gradient( 270deg, rgba(10,17,26,0.5) 0%, rgba(12,22,51,0.3) 100%);
    padding: 10px 0 10px 10px;
    box-sizing: border-box;
    .module-body{
        height: calc(100% - 34px);
        width: 100%;
        margin-top: 10px;
        display: flex;
        flex-direction: column;
        position: relative;
        padding: 0 30px;
        box-sizing: border-box;
    }
    .event-type-left{
        position:absolute;
        height: 100%;
        width: 100px;
        left: 20px;
        top:0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .event-type-item{
            display: flex;
            align-items: center;
            gap: 10px;
        }   
    }
    .event-type-right{
        position:absolute;
        height: 100%;
        width: 100px;
        right: 20px;
        top:0;
        display: flex;
        flex-direction: column;
        justify-content: space-around;
        .event-type-item{
            text-align: right;
            display: flex;
            align-items: center;
            gap: 10px;
        }   
    }
    .event-type-color{
        width: 2px;
        height: 12px;
    }
    .event-type-name{
        font-size: 12px;
        color: #C7CFE8;
    }
    .event-type-value{
        font-size: 16px;
        color: #FFFFFF;
        font-weight: bold;
    }
    .event-chart-warpper{
        width: 284px;
        height: 193px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
        background: url('~@/assets/img/bigScreen/basic/pie-bg.png') no-repeat;
        background-size: 100% 100%;
    }
    #eventChart{
        width: 140px;
        height: 140px;
        position: absolute;
        left: 50%;
        top: 50%;
        transform: translate(-50%, -50%);
    }
  }
  </style>