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

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

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