<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:${switchColor};`" :value="total" :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'
export default {
  name: 'House',
  data() {
    return {
      chart: null,
    }
  },
  mounted() {
    setTimeout(this.init, 0)
  },
  beforeDestroy() {
    this.chart && window.removeEventListener('resize', () => this.chart.resize())
  },
  computed: {
    list() {
      const {community, house, company, area} = this.$store.state.resourceSum
      return [
        {name: '小区数量', unit: '个', value: +community || 0},
        {name: '总户数', unit: '户', value: +house || 0},
        {name: '物业企业', unit: '个', value: +company || 0},
        {name: '管理面积', unit: '㎡', value: +area || 0},
      ]
    },
    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: '65%',
        }],
        series: [{
          type: 'radar',
          symbol: 'none',
          lineStyle: {
            color: '#47B3FF'
          },
          areaStyle: {
            color: '#47B3FF',
          },
          data: [{
            value: this.chartData,
          }]
        }]
      }
    },
    chartData() {
      const {id} = this.$store.state.currentStreetInfo
      const {creditScore, propertyWarrantyScore, communityManagementScore, ownerSatisfactionScore, monthCheck} = this.$store.state.healthInfo
      return [
        +creditScore[id + ''] || 0,
        +propertyWarrantyScore[id + ''] || 0,
        +communityManagementScore[id + ''] || 0,
        +ownerSatisfactionScore[id + ''] || 0,
        +monthCheck[id + ''] || 0,
      ]
    },
    total() {
      return this.chartData.reduce((cur, acc) => cur + acc, 0)
    },
    switchColor() {
      if (this.total >= 90) {
        return '#75e1b0'
      }
      if (this.total < 90 && this.total >= 80) {
        return '#ffd400'
      }
      if (this.total < 80) {
        return '#ff1e1e'
      }
    },
    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)
    }
  },
  watch: {
    chartData() {
      this.chart && 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 55%
      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
        cursor pointer
        &:hover
          $selected()
    .example
      flex 1
      $flex-center()
      img
        width .45rem
</style>
