<template>
  <div class="complaint-report">
    <div class="sum">
      <div v-for="item in sum" :key="item.name">
        <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">
      <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>
    </div>
    <Divider>投诉分布</Divider>
    <div class="rate"><RateComponent :colors="['#EF6F6F', '#FFC500']"/></div>
  </div>
</template>

<script>
import RateComponent from './rate-component'
export default {
  name: 'ComplaintReport',
  components: {RateComponent},
  data() {
    return {
      sum: [
        {name: '12345', value: 100, img: 'complaint1.png'},
        {name: '962121', value: 203, img: 'complaint2.png'},
      ],
      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%']}
        ]
      },
      chartData: [
        {name: '物业服务管理', value: 90, rate: 30},
        {name: '小区综合管理', value: 75, rate: 25},
        {name: '房管物业', value: 60, rate: 20},
        {name: '城管执法', value: 45, rate: 15},
        {name: '绿化市容', value: 12, rate: 4},
        {name: '发展改革', value: 12, rate: 4},
        {name: '其他', value: 9, rate: 3},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.complaint-report
  display flex
  flex-direction column
  .sum
    display flex
    background $color-map(.1)
    >div
      padding .03rem 0
      flex 1
      $flex-center()
      cursor pointer
      img
        width .25rem
        height @width
        margin-right .06rem
      .count
        color $color-yellow
        font-size .12rem
      .unit
        color #aaa
        font-size .08rem
      &:first-child
        background $color-map(.15)
        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>
