<template>
  <div class="house">
    <div class="sum">
      <div v-for="item in list" :key="item.name">
        <m-count class="count" :value="item.value" :decimal="item.dec || 0" />
        <p>{{item.name}}({{item.unit}})</p>
      </div>
    </div>
    <div class="content">
      <div class="chart" ref="chart"></div>
      <div class="total">
        <div>
          <p>整体治理得分</p>
          <m-count style="font-size:0.12rem;color:#75e1b0;" :value="92" :decimal="0" />
          <p class="unit">（分）</p>
        </div>
        <span class="btn">查看模型</span>
      </div>
      <div class="example">
        <img src="@/assets/images/example.png"/>
      </div>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
const mockValue = [49.5, 20.9, 22.1]
export default {
  name: 'House',
  data() {
    return {
      list: [
        {name: '小区数量', unit: '个', value: 13},
        {name: '总户数', unit: '户', value: 300},
        {name: '物业企业', unit: '个', value: 101},
        {name: '管理面积', unit: '㎡', value: 10.69, dec: 2},
      ],
      chart: null,
      option: {
        tooltip: {
          trigger: 'axis',
          confine: true,
        },
        radar: [{
          name: {
            rich: {
              a: {
                color: '#aaa',
                lineHeight: 20,
                fontSize: 12 * this.sizeRate,
              },
              b: {
                color: '#ffd400',
                align: 'center',
                fontSize: 12 * this.sizeRate,
              },
              c: {
                color: '#fff',
                fontSize: 12 * this.sizeRate,
              },
            },
            formatter: (text, {index}) => {
              const max = [50, 25, 25]
              return `{a|${text}}\n{b|${mockValue[index]}}{c|/${max[index]}}`
            },
          },
          splitArea: {
            show: false,
            // 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: true,
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLine: {
            show: false,
          },
          indicator: [
            {text: '安全', index: 0, max: 50},
            {text: '干净', index: 1, max: 25},
            {text: '有序', index: 2, max: 25},
          ],
          center: ['50%', '60%'],
          radius: '45%',
        }],
        series: [{
          type: 'radar',
          symbol: 'none',
          lineStyle: {
            color: '#47B3FF'
          },
          areaStyle: {
            color: '#47B3FF',
          },
          data: [{
            value: mockValue,
          }]
        }]
      }
    }
  },
  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 = echarts.init(this.$refs.chart)
      window.addEventListener('resize', () => this.chart.resize())
      this.chart.setOption(this.option)
    }
  }
}
</script>

<style lang="stylus" scoped>
.house
  display flex
  flex-direction column
  justify-content space-around
  .sum
    display flex
    justify-content space-between
    >div
      width 23%
      min-height .5rem
      background $cardBg
      $flex-center()
      flex-direction column
      .count
        color $color-yellow
        font-size 0.12rem
      p
        font-size .09rem
        color #aaa
  .content
    display flex
    flex 1
    .chart
      width 60%
      height 100%
    .total
      display flex
      flex-direction column
      justify-content space-around
      padding 0 .1rem
      >div
        width .8rem
        height @width
        background-image url(../../assets/images/edge-bg.png)
        background-size 100% 100%
        background-repeat no-repeat
        $flex-center()
        flex-direction column
        color #aaa
      .unit
        font-size .08rem
      .btn
        display block
        width 70%
        text-align center
        border .01rem solid #034698
        color $edgeColor
        padding .02rem .03rem
        border-radius .02rem
    .example
      flex 1
      $flex-center()
      img
        width .45rem
</style>
