<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="$store.state.repairRate" :options="options" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComplaintRepair',
  data() {
    return {
      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%']}
        ]
      },
      options: {
        legend: {
          top: '10%',
          formatter: (name) => {
            const data = this.$store.state.repairRate
            return `${name} ${(data.find(e => e.name === name)).value}件`
          }
        }
      }
    }
  },
  computed: {
    list() {
      const {repairInfo} = this.$store.state
      return [
        {name: '报修数量', value: repairInfo[0], img: 'repair.png'},
        {name: '投诉数量', value: repairInfo[1], img: 'complaint.png'},
      ]
    },
  }
}
</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>
