<template>
  <app-container>
    <all-show :data="showData" @refresh="refreshData"/>
    <el-row>
      <el-col :span="6">
        <ivr-area :current-user="currentUser"/>
      </el-col>
      <el-col :span="12">
        <el-row>
          <div v-show="extensionList.length>0" class="realtime-seats">
            <el-col v-for="exten in extensionList" :key="exten.exten" :span="6">
              <seat :data="exten" :current="exten.exten==currentUser.exten" @detail="fetchUserDetail"/>
            </el-col>
          </div>
          <div v-show="extensionList.length==0" class="realtime-seats">
            <el-col v-for="i in 8" :key="i" :span="6">
              <seat :i="'600'+i"/>
            </el-col>
          </div>
        </el-row>
      </el-col>
      <el-col :span="6">
        <realtime-check :seat-form="currentUser"/>
      </el-col>
    </el-row>

  </app-container>
</template>

<script>
import AppContainer from '../../../components/layout/AppContainer'
import Seat from './components/seat'
import AllShow from './components/allShow'
import RealtimeCheck from './components/realtimeCheck'
import IvrArea from './components/ivrArea'
import { mapState } from 'vuex'
import { getUserSimpleList } from '@/api/system/user'
import { getSeatsState, getCurrentCalls } from '@/api/cti'

export default {
  name: 'SeatMonitor',
  components: { IvrArea, RealtimeCheck, AllShow, Seat, AppContainer },
  data() {
    return {
      showData: {
        all: 8,
        signin: 0,
        signout: 8,
        showbusy: 0,
        showidle: 0,
        busy: 0,
        wait: 0
      }, // 总览数据
      userList: [], // 从后台获取的用户列表
      currentUser: {
        agentUserName: '--',
        agentName: '--',
        phone: '--',
        state: '--',
        exten: '--',
        callerNumber: '--',
        calleeNumber: '--',
        callid: ''
      },
      callList: [] // 正在通话列表
    }
  },
  computed: {
    ...mapState({
      exten: state => state.user.exten, // 用户绑定的分机号
      wsStatus: state => state.ivr.wsStatus,
      signStatus: state => state.ivr.signStatus, // 签入签出状态
      callStatus: state => state.ivr.callStatus,
      isInCall: state => state.ivr.isInCall,
      isInComming: state => state.ivr.isInComming,
      extensionList: state => state.ivr.extensionList,
      reg: state => state.ivr.reg,
      webSocket: state => state.ivr.websocket,
      websocketObj: state => state.ivr.websocketObj
    })
  },
  watch: {
    extensionList(val) {
      this.handleExtensionListChange(val)
    },
    signStatus(val) {
      if (val) {
        this.getExtentionList()
      }
    }
  },
  created() {
    this.fetchUserList()
    this.refreshData()
  },
  methods: {
    refreshData() {
      this.getExtentionList()
      this.fetchCurrentCalls()
    },
    // 当extensionList变化之后的处理
    handleExtensionListChange(val) {
      const data = {
        all: val.length,
        signin: 0,
        signout: 0,
        showbusy: 0,
        showidle: 0,
        busy: 0,
        wait: 0
      }
      for (const item of val) {
        if (item.loginId) { // 有loginId表示已签入，否则表示未签入
          data.signin += 1
          if (item.state === '空闲') { // 话机为空闲状态,等待数+1，否则忙碌数+1
            data.wait += 1
          } else {
            data.busy += 1
          }
          if (item.busy) { // 如果busy不为空,示忙数+1
            data.showbusy += 1
          } else {
            data.showidle += 1
          }
        }
      }
      data.signout = data.all - data.signin
      this.showData = data
    },
    // 获取已登录坐席列表
    getExtentionList() {
      if (this.wsStatus) {
        const params = {
          type: 'all'
        }
        this.$store.dispatch('getExtensionList', params)
      }
      // getSeatsState().then(response => {
      //   console.log(response)
      // })
    },
    // 获取用户列表
    fetchUserList() {
      const params = {
        roleTips: 'receiver,monitor,administrator'
      }
      getUserSimpleList(params).then(response => {
        if (response.code === 200) {
          this.userList = response.data
        }
      })
    },
    // 根据坐席号获取当前用户详情
    fetchUserDetail(loginId, name, exten, state) {
      console.log('fetchUserDetail')
      console.log(loginId)
      if (loginId) {
        for (const user of this.userList) {
          if (user.id === loginId) {
            this.currentUser.agentUserName = user.name
            this.currentUser.agentName = name
            this.currentUser.phone = user.phone
            this.currentUser.exten = exten
            this.currentUser.state = state
            // 测试数据
            // this.currentUser.callid = 'test'
            // this.currentUser.callerNumber = 'test'
            // this.currentUser.calleeNumber = 'test'
            if (state.includes('通话')) {
              this.fetchCurrentCalls(loginId)
            }
            break
          }
        }
      } else {
        this.currentUser = {
          agentUserName: '--',
          agentName: '--',
          phone: '--',
          state: '--',
          exten: '--',
          callerNumber: '--',
          calleeNumber: '--',
          callid: ''
        }
      }
    },
    // 获取当前正在通话列表
    fetchCurrentCalls(loginId) {
      getCurrentCalls().then(response => {
        console.log(response.data)
        this.callList = response.data.root
        for (const call of this.callList) {
          if (call.Call_agentStaffid === loginId) {
            console.log('find')
            this.currentUser.callerNumber = call.Call_number
            this.currentUser.calleeNumber = call.Call_number
            this.currentUser.callid = call.Call_id
          }
        }
      })
    }
  }
}
</script>

<style scoped>
.realtime-seats{
  padding:30px 20px;
}
</style>