<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>
    <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 :title="item.name">{{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>
    <!-- <div @click="showMore" v-if="chartData.length > 8" class="more">查看更多</div> -->
    <Divider>投诉分布</Divider>
    <p class="tip"><span>数值为</span>报修数量/占比/密度</p>
    <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: 'A',
      config: {
        colors: ['#E44949', '#FDA62D', '#FFCE34', '#71C012', '#6BE1B2', '#DC732D', '#5BD5FF', '#006ED4', '#2E43C9', '#826AFA', '#CCCCCC', '#1890FF',
          '#41D9C7',
          '#2FC25B',
          '#FACC14',
          '#E6965C',
          '#223273',
          '#7564CC',
          '#8543E0',
          '#5C8EE6',
          '#13C2C2',
          '#5CA3E6',
          '#3436C7',
          '#B381E6',
          '#F04864',
          '#D598D9',
        ],
        // 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: 'A', name: '962121', value: allRowsA, img: 'complaint2.png'},
        {key: 'B', name: '12345', value: allRowsB, img: 'complaint1.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">
  ::-webkit-scrollbar
    height .07rem
</style>
<style lang="stylus" scoped>
.complaint-report
  display flex
  flex-direction column
  .tip
    transform translateY(70%)
    text-align right
    font-size .08rem
    >span
      color #999
  .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 .1rem
    .chart
      height 100%
      width 30%
    .tips
      flex 1
      display flex
      flex-direction column
      flex-wrap wrap
      margin-top 2%
      overflow-x auto
      >div
        height 25%
        margin-left .05rem
        display flex
        align-items center
      .dot
        display inline-block
        width .08rem
        height @width
        border .02rem solid
        border-radius 50%
      p
        margin 0 .02rem
        // &:nth-of-type(1)
        //   width: .61rem
        //   overflow hidden
        //   text-overflow ellipsis
        //   white-space nowrap
  .rate
    flex 1
  .more
    color $fontColor
    text-align center
    cursor pointer
    transition all .3s
    &:hover
      color $edgeColor
      text-decoration underline
</style>
