<template>
  <div class="property-score">
    <div>
      <div class="title">
        <div class="dot"/>
        能力得分
        <div class="line">
          <img src="@/assets/images/card-title-line.png"/>
        </div>
      </div>
      <div class="chart" ref="chart"></div>
    </div>
    <div>
      <div class="title">
        <div class="dot"/>
        治理得分
        <div class="line">
          <img src="@/assets/images/card-title-line.png"/>
        </div>
      </div>
      <div class="govern">
        <div class="content">
          <p><m-count class="count" :style="`color:${switchColor}`" :value="total" :decimal="0" /><span class="unit">（分）</span></p>
          <p>整体治理得分</p>
        </div>
        <div class="needel" :style="`background:linear-gradient(to top, transparent 45%, ${switchColor});transform:rotate(${switchDeg}deg)`"/>
      </div>
    </div>
    <div>
      <div class="title">
        <div class="dot"/>
        小区检查清单
        <div class="line">
          <img src="@/assets/images/card-title-line.png"/>
        </div>
      </div>
      <CommunityCheck />
    </div>
  </div>
</template>

<script>
import CommunityCheck from './community-check'
import echarts from 'echarts'
export default {
  name: 'PropertyScore',
  components: {
    CommunityCheck,
  },
  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 {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 >= 75) {
        return '#75e1b0'
      }
      if (this.total < 75 && this.total > 20) {
        return '#ffd400'
      }
      if (this.total <= 20) {
        return '#ff1e1e'
      }
      // if (this.total >= 90) {
      //   return '#75e1b0'
      // }
      // if (this.total < 90 && this.total >= 80) {
      //   return '#ffd400'
      // }
      // if (this.total < 80) {
      //   return '#ff1e1e'
      // }
    },
    switchDeg() {
      if (this.total >= 50) {
        const rate = (this.total - 50) / 50
        return (90 * rate).toFixed(1)
      } else if (this.total > 0 && this.total < 50) {
        const rate = (50 - this.total) / 50
        return (-90 * rate).toFixed(1)
      } else {
        return -90
      }
    }
  },
  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-score
  width 100%
  height 100%
  >div
    &:nth-of-type(1)
      height 42%
    &:nth-of-type(2)
      height 33%
    &:nth-of-type(3)
      height 25%
    .title
      display flex
      align-items center
      .dot
        width .03rem
        height .1rem
        background $edgeColor
        margin-right .05rem
      .line
        margin-left .05rem
        flex 1
        >img
          width 100%
          min-height .05rem
    .chart
      height 95%
      width 100%
    .govern
      position relative
      height 90%
      width 100%
      background-image url('../../assets/images/dashboard.png')
      background-size auto 100%
      background-repeat no-repeat
      background-position center
      $flex-center()
      align-items flex-end
      .content
        margin-bottom .1rem
        .count
          font-size .14rem
          color #44D7B6
        .unit
          font-size .08rem
          color #999
      .needel
        position absolute
        width .05rem
        height .65rem
        left 0
        right 0
        bottom .2rem
        margin auto
        transition rotate .3s ease-in-out
        transform rotate(-90deg)
        transform-origin bottom
</style>
