<template>
  <div class="hotline">
    <div>
      <i-circle
        :size="95 * sizeRate"
        :trail-width="8 * sizeRate"
        :stroke-width="8 * sizeRate"
        :percent="linkRate"
        stroke-linecap="square"
        trail-color="#6d7a5f"
        stroke-color="#82DF12">
        <div>
          <p>连通率</p>
          <b><m-count style="font-size:1.6rem;" :value="linkRate" :decimal="0"/>%</b>
        </div>
      </i-circle>
    </div>
    <div>
      <div v-for="item in list" :key="item.title" class="info">
        <p>{{item.title}}</p>
        <div>
          <template v-if="Array.isArray(item.count)">
            <b><m-count :value="item.count[0]" :decimal="0"/> / <m-count :value="item.count[1]" :decimal="0"/></b>
          </template>
          <b v-else><m-count :value="item.count" :decimal="0"/></b>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {mapState} from 'vuex'
export default {
  name: 'Hotline',
  computed: {
    ...mapState([
      'phone',
      'linkRate',
      'seat',
      'repairNum',
      'maintainerNum',
    ]),
    sizeRate() {
      return Number((screen.height / 800).toFixed(1))
    },
    list() {
      return [
        {title: '当日接通/来电', count: this.phone},
        {title: '排队/坐席人数', count: this.seat},
        {title: '报修单数量', count: this.repairNum},
        {title: '在线维修工', count: this.maintainerNum},
      ]
    },
  },
}
</script>

<style lang="stylus" scoped>
.hotline
  display flex
  height 100%
  overflow hidden
  >div
    &:first-child
      flex 1.1
      padding 1rem .5rem
      display flex
      align-items center
      justify-content center
      p
        color $light-blue
        margin-bottom .5rem
    &:last-child
      flex 2
      >.info
        display flex
        align-items center
        justify-content space-between
        color $light-blue
        >div
          flex 1
          text-align center
        *
          font-size 1.2rem !important
        p
          font-size 1rem !important
          line-height 2.5rem
</style>
