<template>
  <div class="main">
    <div class="total">
      <span>总人数</span>
      <p>{{ total }}人 </p>
    </div>
    <div
      class="chart"
      ref="chart"
    >
    </div>

  </div>
</template>

<script>
import * as echarts from 'echarts';
export default {
  props: {
    patientCount: {
      type: Object,
      default: {
        burnTotal: 0,
        chestTotal: 0,
        strokeTotal: 0,
        traumaTotal: 0
      }
    }
  },
  data() {
    return {
      chart: null,
      total: 0
    }
  },
  watch: {
    patientCount: function(val) {
      if (val) {
        this.init()
      }
    }
  },
  mounted() {
    this.init()
  },
  methods: {
    init() {
      const { burnTotal, chestTotal, strokeTotal, traumaTotal } = this.patientCount
      this.total = burnTotal + chestTotal + strokeTotal + traumaTotal
      // console.log(total)
      const list = [
        { value: chestTotal, name: '胸痛' },
        { value: strokeTotal, name: '卒中' },
        { value: traumaTotal, name: '创伤' },
        { value: burnTotal, name: '烧伤' }
      ]
      const myChart = this.chart || echarts.init(this.$refs.chart);
      let option = {
        tooltip: {
          trigger: 'item'
        },
        legend: {
          orient: 'vertical',
          left: '50%',
          top: 'middle',
          itemGap: 72,
          itemWidth: 24,
          itemHeight: 24,
          formatter: (name) => {

            const item = list.find(i => i.name == name)
            let per = 0
            if (item.value !== 0) {
              per = parseInt(item.value / this.total * 100)
            }
            return '{a|' + name + '}{b|' + per + '%}{x|' + item.value + '人}'
          },
          textStyle: {
            padding: [0, 20, 0, 0],
            rich: {
              a: {
                color: 'rgba(255, 255, 255, 0.6)',
                fontSize: 40,
                width: 180,
                padding: [0, 0, 0, 10]
              },
              b: {
                color: '#FFFFFF',
                fontSize: 40,
                width: 120
              },
              x: {
                color: '#FFFFFF',
                fontSize: 40,
                width: 200
              },
            }
          }
        },
        color: ['#FF3178', '#00C9FF', '#FFA400', '#7A52FF'],
        series: [
          {
            name: '访问来源',
            type: 'pie',
            clockwise: false,
            radius: ['60%', '85%'],
            avoidLabelOverlap: false,
            label: {
              show: false,
              position: 'center'
            },
            center: ['25%', '50%'],
            labelLine: {
              show: false
            },
            data: list,
            emphasis: {
              itemStyle: {
                shadowBlur: 10,
                shadowOffsetX: 0,
                shadowColor: 'rgba(0, 0, 0, 0.5)'
              }
            }
          }
        ]
      };
      myChart.setOption(option);
      this.chart = myChart
    }
  }
}
</script>

<style lang="scss" scoped>
.main {
  position: relative;
  margin: 132px 60px;
  .chart {
    width: 100%;
    height: 500px;
    position: absolute;
    top: 0;
  }
  .total {
    position: absolute;
    top: 183px;
    width: 50%;
    text-align: center;
    z-index: 9999;
    span {
      height: 40px;
      font-size: 40px;
      color: rgba(255, 255, 255, 0.6);
    }
    p {
      height: 48px;
      font-size: 56px;
      color: #ffffff;
      line-height: 48px;
      margin-top: 20px;
    }
  }
}
</style>