<template>
  <!-- 客服状态组件 -->
  <div class="service-status">
    <div v-for="serviceData in service" >
      <div v-if="serviceData.aState!=='未登录'">
        <i class="service1"></i>
        <span>{{ serviceData.aName || '未登录' }}</span>
      </div>
      <div v-if="serviceData.aState==='未登录'">
        <i class="service2"></i>
        <span>{{ serviceData.aName || '未登录' }}</span>
      </div>
      <div v-if="serviceData.aState==='正在振铃'"><i class="status1"></i></div>
      <div v-if="['忙','正在保存', '回访通话','通话中'].indexOf(serviceData.aState) >= 0"><i class="status2"></i></div>
      <div v-if="serviceData.aState==='空闲'"><i class="status3"></i></div>
      <div v-if="serviceData.aState==='未登录'"><i class="status4"></i></div>
    </div>
  </div>
  <div class="status-count">
    <div>
      <i class="answer"></i>
      <span class="answer-text">接听中</span>
      <span class="answer-num">{{ data.answerNum }}</span>
    </div>
    <div>
      <i class="await"></i>
      <span class="await-text">闲置</span>
      <span class="await-num">{{ data.awaitNum }}</span>
    </div>
    <div>
      <i class="ring"></i>
      <span class="ring-text">响铃中</span>
      <span class="ring-num">{{ data.ringNum }}</span>
    </div>
    <div>
      <i class="off-line"></i>
      <span class="off-line-text">离线</span>
      <span class="off-line-num">{{ data.offLineNum }}</span>
    </div>

  </div>
</template>

<script>
import {HttpResetClass} from "vue-client";
import * as Util from "../../../Util";
import axios from "axios";

export default {

  name: "ServiceStatus",
  components:{

  },
  data(){
    return{
      data:{
        answerNum:0,
        awaitNum:0,
        ringNum:0,
        offLineNum:0,

      },
      service:[],


    }
  },

  ready(){
    this.getRecordwork()
    setInterval(() => {
      this.getRecordwork()
    }, 2000)
  },
  methods:{
    getRecordwork(){
      let http = new HttpResetClass()
      http.load('GET', '/Dual/GetALLAttendant', {}, {resolveMsg: null, rejectMsg: null}).then((res) => {
        //tag
        console.log("getRecordwork"+JSON.stringify(res.data))
        this.data.answerNum = 0
        this.data.awaitNum = 0
        this.data.ringNum = 0
        this.data.offLineNum = 0
        this.service=res.data.packets
        console.log('this.service='+JSON.stringify(this.service));
        for (const serviceData of this.service) {
          switch (serviceData.aState) {
            case '未登录':
              this.data.offLineNum ++
              break

            case '忙':
            // case '回访通话':
            case '通话中':
              this.data.answerNum ++
              break
            case '空闲':
              this.data.awaitNum ++
              break
            case '正在振铃':
            case '正在保存':
              this.data.ringNum ++
              break
          }
        }
      })
      // axios.get('/Dual/GetALLAttendant')
      //   .then((response) => {
      //     console.log("getRecordwork"+JSON.stringify(response.data))
      //     this.data.answerNum = 0
      //     this.data.awaitNum = 0
      //     this.data.ringNum = 0
      //     this.data.offLineNum = 0
      //     this.service=response.data.packets
      //     console.log('this.service='+JSON.stringify(this.service));
      //     for (const serviceData of this.service) {
      //       switch (serviceData.aState) {
      //         case '未登录':
      //           this.data.offLineNum ++
      //           break
      //
      //         case '忙':
      //         // case '回访通话':
      //         case '通话中':
      //           this.data.answerNum ++
      //           break
      //         case '空闲':
      //           this.data.awaitNum ++
      //           break
      //         case '正在振铃':
      //         case '正在保存':
      //           this.data.ringNum ++
      //           break
      //       }
      //     }
      //   })
    },


  }
}
</script>

<style scoped>


.service-status {
  width: 36.458vw;
  height: 31.944vh;
  position: absolute;
  top: 23.241vh;
  left: 36vw;
  /* background: rgba(255, 255, 255, .04); */
  display: flex;
  flex-flow: row wrap;
}

.service-status div {
  height: 15.741vh;
  display: flex;
  width: 200px;
}

.move-down {
  margin-top: 2.13vh;
}

.service-status div div {
  width: 7.552vw;
  height: 10.463vh;
  position: relative;
}

.service1 {
  width: 3.49vw;
  height: 8.148vh;
  background-image: url("../../../../static/images/zhongyi/service1.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  left: 0.78125vw;
}
.service2 {
  width: 3.49vw;
  height: 8.148vh;
  background-image: url("../../../../static/images/zhongyi/service2.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  left: 0.78125vw;
}






.status1 {
  width: 1.875vw;
  background-image: url("../../../../static/images/zhongyi/ring.png");
  height: 4.333vh;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  bottom: 0.185vh;
}

.status2 {
  width: 1.875vw;
  background-image: url("../../../../static/images/zhongyi/phone1.png");
  height: 4.333vh;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  bottom: 0.104vw;
}

.status3 {
  width: 2.34375vw;
  background-image: url("../../../../static/images/zhongyi/telephone1.png");
  height: 4.333vh;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  bottom: 0.185vh;
}

.status4 {
  width: 1.875vw;
  background-image: url("../../../../static/images/zhongyi/phone2.png");
  height: 4.333vh;
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  bottom: 0.185vh;
}

.service-status div span {
  width: 5.208vw;
  height: 2.037vh;
  font-size: 2.037vh;
  font-weight: bold;
  color: #FFFEFE;
  display: block;
  text-align: center;
  position: absolute;
  top: 9.537vh;
}



.status-count {
  width: 41.667vw;
  height: 4.63vh;
  /* background-color: rgb(131, 238, 188); */
  position: absolute;
  top: 59.537vh;
  left: 30.573vw;
  display: flex;
}

.answer{
  width: 1.875vw;
  height: 4.333vh;
  background-image: url("../../../../static/images/zhongyi/phone1.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  top: 1.389vh;
}
.answer-text{
  position: absolute;
  top: 1.852vh;
  left: 3.125vw;
}
.answer-num{
  font-size: 2.593vh;
  color: #00FFEA;
  position: absolute;
  top: 1.204vh;
  left: 7.24vw;
}

.await{
  width: 2.34375vw;
  height: 4.333vh;
  background-image: url("../../../../static/images/zhongyi/telephone1.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  top: 1.389vh;
  left: 10.417vw;
}
.await-text{
  position: absolute;
  top: 1.852vh;
  left: 14.0625vw;
}
.await-num{
  font-size: 2.593vh;
  color: #FFCD00;
  position: absolute;
  top: 1.204vh;
  left: 17.271vw;
}

.ring{
  width: 1.875vw;
  height: 4.333vh;
  background-image: url("../../../../static/images/zhongyi/ring.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  top: 1.389vh;
  left: 21vw;
}
.ring-text{
  position: absolute;
  top: 1.852vh;
  left: 24vw;
}
.ring-num{
  font-size: 2.593vh;
  color: #FF7E00;
  position: absolute;
  top: 1.204vh;
  left: 28.90625vw;
}

.off-line{
  width: 1.875vw;
  height: 4.333vh;
  background-image: url("../../../../static/images/zhongyi/phone2.png");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: contain;
  position: absolute;
  top: 1.389vh;
  left: 32.03125vw;
}
.off-line-text{
  position: absolute;
  top: 1.852vh;
  left: 35.417vw;
}
.off-line-num{
  font-size: 2.593vh;
  color: #DBDBDB;
  position: absolute;
  top: 1.204vh;
  left: 38.802vw;
}


.status-count div span:nth-of-type(1) {
  font-size: 2.037vh;
  color: #FFFFFF;
  line-height: 2.315vh;
}
</style>
