<template>
  <div class="consultation-sum">
    <div>
      <p>区域会诊统计</p><span>单位：个</span>
      <div class="list-wrapper">
        <div v-for="(item, index) in areas" :key="item.name">
          <p>{{index + 1}}.{{item.name}}</p>
          <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index]}`"></div></div>
          <m-count :value="item.count" :decimal="0"/>
        </div>
      </div>
    </div>
    <div>
      <p>病种会诊统计</p><span>单位：个</span>
      <div class="list-wrapper">
        <div v-for="(item, index) in areas" :key="item.name">
          <p>{{index + 1}}.{{item.name}}</p>
          <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index]}`"></div></div>
          <m-count :value="item.count" :decimal="0"/>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'ConsultationSum',
  data() {
    return {
      colors: ['#f24044', '#fca53a', '#edcd3c', '#eee53a', '#83dc29', '#1fcea9', '#25add1'],
      areas: [
        {name: '广东', count: 33240, rate: 90},
        {name: '辽宁', count: 23450, rate: 80},
        {name: '四川', count: 13423, rate: 70},
        {name: '江苏', count: 2342, rate: 60},
        {name: '甘肃', count: 2098, rate: 50},
        {name: '陕西', count: 1342, rate: 40},
        {name: '青海', count: 876, rate: 30},
      ],
      diseases: [
        {name: '小瓜虫病', count: 23423, rate: 60},
        {name: '出血性腐烂病', count: 21002, rate: 55},
        {name: '烂鳍病', count: 14532, rate: 50},
        {name: '烂腮病', count: 9834, rate: 45},
        {name: '棉口病', count: 8723, rate: 40},
        {name: '水霉病', count: 6789, rate: 30},
        {name: '锚头虱病', count: 345, rate: 20},
      ],
    }
  },
}
</script>

<style lang="stylus" scoped>
.consultation-sum
  width 100%
  height 100%
  overflow hidden
  display flex
  >div
    flex 1
    padding-right .5rem
    >p
      color $edgeColor
      font-weight bold
    >span
      display block
      text-align right
      font-size .9rem
    .list-wrapper
      height 80%
      overflow-y auto
      padding-right .5rem
      >div
        display flex
        align-items center
        justify-content space-between
        line-height 1.8
        .bar-wrapper
          flex 1
          margin 0 .5rem
          >div
            height .5rem
            border-radius .5rem
</style>
