<template>
  <div class="realtime-check-div">
    <div class="title">实时质检</div>
    <div class="body">
      <div class="line" >座席姓名 ：{{ seatForm.agentUserName }}</div>
      <div class="line" >座席工号 ：{{ seatForm.agentName }}</div>
      <div class="line" >座席电话 ：{{ seatForm.phone }}</div>
      <div class="line" >座席状态 ：{{ seatForm.state }}</div>
      <div class="line" >登录分机 ：{{ seatForm.exten }}</div>
      <div class="line" >主叫号码 ：{{ seatForm.callerNumber }}</div>
      <div class="line" >被叫号码 ：{{ seatForm.calleeNumber }}</div>
      <div class="btns">
        <el-button :disabled="canJudge" type="primary" size="small" @click="check">实时质检</el-button>
      </div>
    </div>
    <quality-check ref="qualitycheck"/>
  </div>
</template>

<script>
import QualityCheck from '../../../qualityManage/qualitySound/qualityCheck'
export default {
  name: 'RealtimeCheck',
  components: { QualityCheck },
  props: {
    seatForm: {
      type: Object,
      default: function() {
        return {
          agentUserName: '--',
          agentName: '--',
          phone: '--',
          state: '--',
          exten: '--',
          callerNumber: '--',
          calleeNumber: '--',
          callid: ''
        }
      }
    }
  },
  computed: {
    canJudge() { // 判断是否可以进行质检，通话中的可以进行实时质检
      if (this.seatForm.state && this.seatForm.state.includes('通话')) {
        return false
      } else {
        return true
      }
    }
  },
  methods: {
    // 实时质检，打开监听，并弹出质检
    check() {
      this.$store.dispatch('spy', this.seatForm.exten)
      // 弹出质检弹框
      const row = {
        callid: this.seatForm.callid
      }
      this.$refs.qualitycheck.initDialog('first', true, row)
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
.realtime-check-div{
  padding: 10px 0px;
  height: 100%;
  .title{
    padding-left: 15px;
    line-height: 2;
    width: 100%;
    background-color: #3a8ee6;
    color:#ffffff;
  }
  .body{
    height: 100%;
    border-left:1px solid #f0f0f0;
    padding-left: 20px;
    padding-top: 10px;
    .line{
      line-height: 2
    }
    .btns{
      margin-top: 20px;
      text-align: center;
    }
  }
}
</style>