<template>
  <div class="operate-situation">
    <div class="sum">
      <div>
        <img src="@/assets/images/slice1.png"/>
        <div>
          <p>总收入</p>
          <p style="color:#f3d813;"><m-count style="color:#f3d813;font-weight:bold;" :value="25630820" :decimal="0"/>万元</p>
        </div>
      </div>
      <div>
        <img src="@/assets/images/slice2.png"/>
        <div>
          <p>利润</p>
          <p style="color:#05fd70;"><m-count style="color:#05fd70;font-weight:bold;" :value="11533869" :decimal="0"/>万元</p>
        </div>
      </div>
    </div>
    <div class="chart" ref="chart"/>
  </div>
</template>

<script>
const mockValue = [2114542.65, 7471384.03,	3383268.24,	1127756.08]
export default {
  name: 'OperateSituation',
  data() {
    return {
      chart: null,
      option: {
        tooltip: {
          trigger: 'axis',
          confine: true,
        },
        radar: [{
          name: {
            rich: {
              a: {
                color: '#fff',
                lineHeight: 20,
                fontSize: 12 * this.sizeRate,
              },
              b: {
                color: '#04c8e2',
                align: 'center',
                fontSize: 12 * this.sizeRate,
              }
            },
            formatter: (text, {index}) => {
              return `{a|${text}}\n{b|${this.$com.transNumber(mockValue[index]) + '万元'}}`
            },
          },
          splitArea: {
            show: true,
            areaStyle: {
              color: ['rgba(1,124,143, 1)', 'rgba(1,124,143,0.9)', 'rgba(1,124,143,.7)', 'rgba(1,124,143,.5)', 'rgba(1,124,143,.3)']
            }
          },
          splitLine: {
            show: false,
          },
          axisLine: {
            show: true,
            lineStyle: {
              color: 'rgba(1,124,143, 1)'
            }
          },
          indicator: [
            {text: '人力成本', index: 0, max: 7500000},
            {text: '饲料成本', index: 1, max: 7500000},
            {text: '其他成本', index: 2, max: 7500000},
            {text: '其他投入', index: 3, max: 7500000},
          ],
          center: ['50%', '50%'],
          radius: '50%',
        }],
        series: [{
          type: 'radar',
          tooltip: {
            trigger: 'item',
            confine: true,
            formatter: ({data}) => {
              const {value} = data
              const [{indicator}] = this.option.radar
              const total = value[0] + value[1] + value[2] + value[3]
              return `
                <div>
                  <p>${indicator[0].text}：<span>${this.$com.transNumber(value[0])} 万元 (${(value[0] / total * 100).toFixed(1)}%)</span></p>
                  <p>${indicator[1].text}：<span>${this.$com.transNumber(value[1])} 万元 (${(value[1] / total * 100).toFixed(1)}%)</span></p>
                  <p>${indicator[2].text}：<span>${this.$com.transNumber(value[2])} 万元 (${(value[2] / total * 100).toFixed(1)}%)</span></p>
                  <p>${indicator[3].text}：<span>${this.$com.transNumber(value[3])} 万元 (${(value[3] / total * 100).toFixed(1)}%)</span></p>
                </div>
              `
            }
          },
          lineStyle: {
            color: '#1db2b6'
          },
          areaStyle: {
            color: 'rgba(252, 213, 28, .5)',
            splitLine: {
              color: 'blue',
            }
          },
          data: [{
            value: mockValue,
            name: '经营情况'
          }]
        }]
      }
    }
  },
  mounted() {
    setTimeout(this.init, 0)
  },
  beforeDestroy() {
    this.chart && window.removeEventListener('resize', () => this.chart.resize())
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
  },
  methods: {
    init() {
      this.chart = this.$echarts.init(this.$refs.chart)
      window.addEventListener('resize', () => this.chart.resize())
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style lang="stylus" scoped>
.operate-situation
  width 100%
  height 100%
  display flex
  flex-direction column
  overflow hidden
  .sum
    display flex
    justify-content space-around
    margin .5rem 0
    >div
      display flex
      align-items center
      justify-content space-around
      width 47%
      padding .8rem .5rem
      background #004a56
      p
        font-weight bold
      img
        width 2 rem
        height @width
        margin-right .5rem
  .chart
    flex 1
</style>
