<template>
  <div class="property-health">
    <div class="chart" ref="chart"></div>
    <div class="total">
      <p>综合得分</p>
      <m-count style="font-size:0.12rem;color:#75e1b0;" :value="total" />
      <p class="unit">（分）</p>
    </div>
  </div>
</template>

<script>
import echarts from 'echarts'
export default {
  name: 'PropertyHealth',
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    setTimeout(this.init, 0)
  },
  beforeDestroy() {
    this.chart && window.removeEventListener('resize', () => this.chart.resize())
  },
  computed: {
    option() {
      return {
        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',
                align: 'center',
                fontSize: 12 * this.sizeRate,
              },
            },
            formatter: (text, {index}) => {
              return `{a|${text}}\n{b|${this.chartData[index]}}{c|/20}`
            },
          },
          splitArea: {
            show: false,
          },
          splitLine: {
            show: true,
            lineStyle: {
              color: 'rgba(255,255,255,.3)'
            }
          },
          axisLine: {
            show: false,
          },
          indicator: [
            {text: '全市物业诚信计分', index: 0, max: 20},
            {text: '投诉报修情况', index: 1, max: 20},
            {text: '小区管理情况', index: 2, max: 20},
            {text: '业主满意度', index: 3, max: 20},
            {text: '行业落实情况', index: 4, max: 20},
          ],
          center: ['50%', '60%'],
          radius: '60%',
        }],
        series: [{
          type: 'radar',
          symbol: 'none',
          lineStyle: {
            color: '#ff0000'
          },
          areaStyle: {
            color: 'rgb(255,106,37)',
          },
          data: [{
            value: this.chartData,
          }]
        }]
      }
    },
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
    chartData() {
      const {creditScore, propertyWarrantyScore, communityManagementScore, ownerSatisfactionScore, monthCheck} = this.$store.state.healthInfo
      return [
        +creditScore.county || 0,
        +propertyWarrantyScore.county || 0,
        +communityManagementScore.county || 0,
        +ownerSatisfactionScore.county || 0,
        +monthCheck.county || 0,
      ]
    },
    total() {
      return this.chartData.reduce((cur, acc) => cur + acc, 0)
    },
  },
  methods: {
    init() {
      this.chart = echarts.init(this.$refs.chart)
      window.addEventListener('resize', () => this.chart.resize())
      this.chart.setOption(this.option)
    }
  },
  watch: {
    chartData() {
      this.chart && this.chart.setOption(this.option)
    },
  },
}
</script>

<style lang="stylus" scoped>
.property-health
  display flex
  justify-content space-around
  align-items center
  .chart
    width 70%
    height 100%
  .total
    padding 0 .1rem
    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
</style>
