<template>
  <div class="qualified-rate">
    <div v-for="item in list" :key="item.name">
      <i-circle
        :percent="item.value"
        :size="80 * sizeRate"
        :trail-width="6 * sizeRate"
        :stroke-color="item.color"
        trail-color="rgba(255,255,255,0.1)">
        <span :style="`color:${item.color};font-size:1.5rem;font-weight:bold;`">{{item.value}}%</span>
      </i-circle>
      <p :style="`color:${item.color}`">{{item.name}}</p>
    </div>
  </div>
</template>

<script>
export default {
  name: 'QualifiedRate',
  data() {
    return {
      list: [
        {name: '孔雀石绿', value: 80, color: '#4ec6fd'},
        {name: '硝基呋喃', value: 72, color: '#40fdfc'},
        {name: '氯霉素', value: 20, color: '#fdd80a'},
      ]
    }
  },
  computed: {
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
  }
}
</script>

<style lang="stylus" scoped>
.qualified-rate
  width 100%
  height 100%
  display flex
  align-items center
  justify-content space-around
  >div
    p
      font-size 1.2rem
      text-align center
      font-weight bold
      margin-top 1rem
</style>
