<template>
  <div class="complaint-report">
    <div class="sum">
      <div v-for="item in sum" :key="item.key" @click="curType = item.key" :class="{on: item.key === curType}">
        <img :src="require(`@/assets/images/${item.img}`)" />
        <div>
          <p>{{item.name}}</p>
          <p><m-count class="count" :value="item.value" /> <span class="unit">个</span></p>
        </div>
      </div>
    </div>
    <Divider>投诉分类占比</Divider>
    <p class="tip">数值为报修数量/占比/密度</p>
    <div class="chart-wrapper">
      <template v-if="chartData.length > 0">
        <div class="chart"><m-chart :config="config" :data="chartData" /></div>
        <div class="tips">
          <div v-for="(item, i) in chartData" :key="item.name">
            <span class="dot" :style="`border-color:${config.colors[i]}`"/>
            <p>{{item.name}}</p>
            <p>{{item.value}}</p>
            <p>{{item.rate}}</p>
          </div>
        </div>
      </template>
      <div v-else class="no-data">
        <img src="@/assets/images/building.png" />
        <p>— 暂无数据 —</p>
      </div>
    </div>
    <Divider>投诉分布</Divider>
    <div class="rate">
      <RateComponent
        :info="rateInfo"
        :list="rateList"
        :colors="['#EF6F6F', '#FFC500']"
        />
    </div>
  </div>
</template>

<script>
import RateComponent from './rate-component'
export default {
  name: 'ComplaintReport',
  components: {RateComponent},
  data() {
    return {
      curType: 'B',
      config: {
        colors: ['#E44949', '#FDA62D', '#FFCE34', '#71C012', '#6BE1B2', '#DC732D', '#5BD5FF', '#006ED4', '#2E43C9', '#826AFA', '#CCCCCC'],
        // tooltip: {
        //   formatter: '{b}：{c}个 ({d}%)',
        //   confine: true,
        // },
        legend: {hide: true},
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['40%', '50%']}
        ]
      },
    }
  },
  computed: {
    complaintInfo() {
      return this.$store.state.complaintInfo
    },
    sum() {
      const {allRowsA = 0, allRowsB = 0} = this.complaintInfo
      return [
        {key: 'B', name: '12345', value: allRowsB, img: 'complaint1.png'},
        {key: 'A', name: '962121', value: allRowsA, img: 'complaint2.png'},
      ]
    },
    rateInfo() {
      const {cCommunity = {}} = this.complaintInfo
      return cCommunity[this.curType]
    },
    rateList() {
      const {cCompany = {}} = this.complaintInfo
      const keys = Object.keys(cCompany[`cCompany${this.curType}`] || {})
      return keys.map(key => cCompany[`cCompany${this.curType}`][key])
    },
    chartData() {
      const data = this.complaintInfo[`typeCount${this.curType}`]
      const keys = Object.keys(data || {})
      return keys.map(key => {
        const {count = 0, businsessTypeLv1 = '', classification1 = '', ratio = '0'} = data[key]
        return {
          name: businsessTypeLv1 || classification1,
          value: count,
          rate: ratio,
        }
      })
    },
  },
}
</script>

<style lang="stylus" scoped>
.complaint-report
  display flex
  flex-direction column
  .tip
    text-align right
    font-size .08rem
  .no-data
    $flex-center()
    flex-direction column
    width 100%
    height 100%
    color #999
    img
      width .35rem
      height @width
  .sum
    display flex
    background $color-map(.1)
    >div
      padding .03rem 0
      flex 1
      $flex-center()
      cursor pointer
      border-bottom .02rem solid transparent
      transition all .3s ease-in-out
      img
        width .25rem
        height @width
        margin-right .06rem
      .count
        color $color-yellow
        font-size .12rem
      .unit
        color #aaa
        font-size .08rem
      &:hover
      &.on
        background $color-map(.15)
      &.on
        border-bottom .02rem solid $color-blue
  .chart-wrapper
    width 100%
    height 1rem
    display flex
    margin-top .2rem
    .chart
      height 100%
      width 40%
    .tips
      flex 1
      display flex
      flex-direction column
      flex-wrap wrap
      margin-top 2%
      transform translateX(-15%)
      >div
        height 25%
        margin-left .05rem
      .dot
        display inline-block
        width .08rem
        height @width
        border .02rem solid
        border-radius 50%
      p
        margin 0 .01rem
        display inline-block
  .rate
    flex 1
</style>
