<template>
  <div class="show-div">
    <div class="refresh-div">
      <el-button icon="el-icon-refresh" type="success" size="mini" @click="search">刷新</el-button>
    </div>
    <div class="state-div">
      <div v-for="item in list" :key="item.value" class="item-div">
        <svg-icon v-if="item.icon" :class="'seat-'+item.icon" icon-class="icon-seat" class="icon-seat"/>
        <div class="item-txt">{{ item.label }} : {{ data[item.value] }}</div>
      </div>
    </div>
  </div>
</template>

<script>
import { mapState } from 'vuex'
export default {
  name: 'AllShow',
  props: {
    data: {
      type: Object,
      default: function() {
        return {
          all: 8,
          signout: 0,
          signin: 0,
          showidle: 0,
          showbusy: 0,
          busy: 0,
          wait: 0
        }
      }
    }
  },
  data() {
    return {
      list: [
        { label: '座席总数', value: 'all', icon: '' },
        { label: '签出总数', value: 'signout', icon: 'offline' },
        { label: '签入总数', value: 'signin', icon: 'online' },
        { label: '示闲总数', value: 'showidle', icon: 'showidle' },
        { label: '示忙总数', value: 'showbusy', icon: 'showbusy' },
        { label: '忙碌总数', value: 'busy', icon: 'busy' },
        { label: '等待总数', value: 'wait', icon: 'wait' }
      ]
    }
  },
  computed: {
    ...mapState({
      wsStatus: state => state.ivr.wsStatus,
      extensionList: state => state.ivr.extensionList,
      webSocket: state => state.ivr.webSocket,
      websocketObj: state => state.ivr.websocketObj
    })
  },
  methods: {
    // 查询
    search() {
      this.$emit('refresh')
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
  .show-div{
    width: 100%;
    background-color: #66b1ff;
    padding: 5px 20px;
    .refresh-div{
      display: inline-block;
      margin-right: 20px;
      margin-left: -10px;
    }
    .state-div{
      width: calc( 100% - 90px);
      display: inline-flex;
      /*display: flex;*/
      justify-content: space-between;
      .item-div{
        font-size:16px;
        line-height: 2;
        display: inline-block;
        .icon-seat{
          width: 30px;
          text-align: center;
        }
        .item-txt{
          display: inline-block;
          color:#ffffff;
        }
      }
    }

  }
  .seat-offline{
    color:grey;
  }
  .seat-online{
    color:#409EFF;
  }
  .seat-busy{
    color:#ff0000;
  }
  .seat-showbusy{
    color:#ffff00;
  }
  .seat-showidle{
    color: #58da50;
  }
  .seat-wait{
    color:#fab6b6;
  }
</style>