<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" v-if="showChart">
      <m-chart :config="config" :data="$store.state.repairRate" :options="options" />
    </div>
  </div>
</template>

<script>
export default {
  name: 'ComplaintRepair',
  data() {
    return {
      showChart: false,
      config: {
        colors: ['#5bd4ff', '#72c011', '#fece35', '#ff6160', '#826bfa', '#cccccc'],
        tooltip: {
          formatter: '{b}：{c}个 ({d}%)',
          confine: true,
        },
        legend: {
          align: 'right',
          orient: 'vertical',
        },
        shape: [
          {type: 'pie', radius: [30 * Number((screen.height / 800).toFixed(1)), 45 * Number((screen.height / 800).toFixed(1))], center: ['25%', '50%']}
        ]
      },
      options: {
        legend: {
          top: '15%',
          formatter: (name) => {
            // const data = this.$store.state.repairRate
            // return `${name} ${(data.find(e => e.name === name)).value}件`
            const data = this.$store.state.repairRate
            let total = 0
            let tarValue
            for (let i = 0; i < data.length; i++) {
              total += data[i].value
              if (data[i].name === name) {
                tarValue = data[i].value
              }
            }
            const percent = (tarValue / total * 100).toFixed(0)
            return `${name} ${percent}%`
          }
        }
      }
    }
  },
  mounted() {
    setTimeout(() => this.showChart = true, 100)
  },
  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>
