<template>
  <div class="consultation-sum">
    <div>
      <p>区域会诊统计<span>单位：个</span></p>
      <div class="list-wrapper">
        <div v-for="(item, index) in areas" :key="item.name">
          <p :title="item.name">{{index + 1}}.{{item.name}}</p>
          <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></div></div>
          <m-count :value="item.count" :decimal="0"/>
        </div>
      </div>
    </div>
    <div>
      <p>病种会诊统计<span>单位：个</span></p>
      <div class="list-wrapper">
        <div v-for="(item, index) in diseases" :key="item.name">
          <p :title="item.name">{{index + 1}}.{{item.name}}</p>
          <div class="bar-wrapper"><div :style="`width:${item.rate}%;background-color:${colors[index] || '#25add1'}`"></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: 316, rate: 90},
        {name: '江苏省', count: 254, rate: 80},
        {name: '天津市', count: 118, rate: 70},
        {name: '湖南省', count: 25, rate: 30},
        {name: '江西省', count: 24, rate: 20},
        {name: '海南省', count: 19, rate: 10},
        {name: '宁夏回族自治区', count: 9, rate: 10},
        {name: '黑龙江省', count: 8, rate: 10},
        {name: '湖北省', count: 7, rate: 10},
        {name: '安徽省', count: 7, rate: 10},
        {name: '河北省', count: 4, rate: 10},
        {name: '辽宁省', count: 4, rate: 10},
        {name: '广西壮族自治区', count: 3, rate: 5},
        {name: '吉林省', count: 2, rate: 5},
        {name: '陕西省', count: 2, rate: 5},
        {name: '新疆维吾尔自治区', count: 1, rate: 1},
        {name: '浙江省', count: 1, rate: 1},
        {name: '福建省', count: 1, rate: 1},
        {name: '河南省', count: 1, rate: 1},
      ],
      diseases: [
        {name: '固着类纤毛虫病', count: 194, rate: 58},
        {name: '肠炎病', count: 47, rate: 15},
        {name: '烂鳃病', count: 21, rate: 8},
        {name: '非生物引起的黑鳃病', count: 20, rate: 8},
        {name: '小瓜虫病', count: 16, rate: 7},
        {name: '细菌病', count: 14, rate: 6},
        {name: '车轮虫病', count: 13, rate: 6},
        {name: '淡水鱼类细菌性败血症', count: 9, rate: 5},
      ],
    }
  },
}
</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
      display flex
      align-items center
      justify-content space-between
      margin-bottom .6rem
      >span
        display block
        color #ccc
        font-size .9rem
        margin-right 1rem
    .list-wrapper
      height 80%
      overflow-y scroll
      padding-right .5rem
      >div
        display flex
        align-items center
        justify-content space-between
        line-height 2.5
        p
          max-width 55%
          overflow hidden
          white-space nowrap
          text-overflow ellipsis
        .bar-wrapper
          flex 1
          margin 0 .5rem
          >div
            height .5rem
            border-radius .5rem
</style>
