<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="8784187" :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="444877" :decimal="0"/>万元</p>
        </div>
      </div>
    </div>
    <div class="chart" ref="chart"/>
  </div>
</template>

<script>
const mockValue = [4874454, 224454, 3314454, 4874454]
export default {
  name: 'OperateSituation',
  data() {
    return {
      option: {
        tooltip: {
          trigger: 'axis',
        },
        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: 6000000},
            {text: '其他投入', index: 1, max: 500000},
            {text: '其他成本', index: 2, max: 6000000},
            {text: '饲料成本', index: 3, max: 6000000},
          ],
          center: ['50%', '50%'],
          radius: '50%',
        }],
        series: [{
          type: 'radar',
          tooltip: {
            trigger: 'item',
          },
          lineStyle: {
            color: '#1db2b6'
          },
          areaStyle: {
            color: 'rgba(252, 213, 28, .5)',
            splitLine: {
              color: 'blue',
            }
          },
          data: [{
            value: mockValue,
            name: '经营情况'
          }]
        }]
      }
    }
  },
  mounted() {
    setTimeout(this.init, 0)
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
  },
  methods: {
    init() {
      this.$echarts.init(this.$refs.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 45%
      padding .8rem .5rem
      background #004a56
      p
        font-weight bold
      img
        width 2rem
        height @width
        margin-right .5rem
  .chart
    flex 1
</style>
