<template>
  <div class="complaint-repair">
    <div class="sum">
      <div v-for="item in list" :key="item.name">
        <img :src="require(`@/assets/images/${item.img}`)"/>
        <div>
          <p>{{item.name}}</p>
          <p>
            <m-count class="count yellow" :value="item.value[0]" :decimal="0" />
            /
            <m-count class="count" :value="item.value[1]" :decimal="0" />
            <span>个</span>
          </p>
        </div>
      </div>
    </div>
    <img class="branch" src="@/assets/images/branch.png" />
    <div class="chart">
      <m-chart :config="config" :data="data" :options="options" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComplaintRepair',
  data() {
    return {
      list: [
        {name: '报修数量', value: [18, 37], img: 'repair.png'},
        {name: '投诉数量', value: [67, 150], img: 'complaint.png'},
      ],
      config: {
        colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
        tooltip: {
          formatter: '{b}：{c}个 ({d}%)',
          confine: true,
        },
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [10 * Number((screen.height / 800).toFixed(1)), 50 * Number((screen.height / 800).toFixed(1))], roseType: 'radius', center: ['32%', '50%']}
        ]
      },
      data: [
        {name: '水', value: 15},
        {name: '堵', value: 20},
        {name: '险', value: 45},
        {name: '电', value: 6},
        {name: '漏', value: 9},
        {name: '其他', value: 5},
      ],
      options: {
        legend: {
          top: '10%',
          formatter: (name) => {
            const data = [
              {name: '水', value: 15},
              {name: '堵', value: 20},
              {name: '险', value: 45},
              {name: '电', value: 6},
              {name: '漏', value: 9},
              {name: '其他', value: 5},
            ]
            return `${name} ${(data.find(e => e.name === name)).value}%`
          }
        }
      }
    }
  },
}
</script>

<style lang="stylus" scoped>
.complaint-repair
  display flex
  align-items center
  .sum
    height 100%
    flex 1
    display flex
    flex-direction column
    justify-content space-between
    padding .1rem 0
    >div
      display flex
      align-items center
      img
        width .25rem
        height @width
        margin-right .05rem
      p
        color $fontColor
        &:last-child
          color #fff
      span
        font-size .08rem
        color #aaa
      .count
        font-size .13rem
        color #fff
        &.yellow
          color $color-yellow
  .branch
    width .3rem
    height 60%
    margin 0 .05rem
  .chart
    width 55%
    height 100%
</style>
