<template>
  <div class="realtime-check-div">
    <div class="title">语音功能</div>
    <div class="body">
      <el-row>
        <ivr-btn name="监听通话" @click="spy"/>
        <!--<ivr-btn name="取消监听" type="info" @click=""/>-->
        <!--<ivr-btn name="拦截通话"/>-->
        <ivr-btn name="强插通话" @click="extenInsert"/>
        <!--<ivr-btn name="取消强插" type="info"/>-->
        <ivr-btn name="强拆分机" @click="extenCut"/>
      </el-row>
    </div>
  </div>
</template>

<script>
import IvrBtn from './ivrBtn'
export default {
  name: 'IvrArea',
  components: { IvrBtn },
  props: {
    currentUser: {
      type: Object,
      default: function() {
        return {
          agentUserName: '--',
          agentName: '--',
          phone: '--',
          state: '--',
          exten: '--',
          callerNumber: '--',
          calleeNumber: '--',
          callid: ''
        }
      }
    }
  },
  methods: {
    // 监听
    spy() {
      if (this.currentUser.exten !== '--') {
        if (this.currentUser.callid) {
          this.$store.dispatch('spy', this.currentUser.exten)
        } else {
          this.$message.warning('未在通话中')
        }
      } else {
        this.$message.warning('请选择坐席')
      }
    },
    // 强插分机
    extenInsert() {
      if (this.currentUser.exten !== '--') {
        if (this.currentUser.callid) {
          this.$store.dispatch('extenInsert', this.currentUser.exten)
        } else {
          this.$message.warning('未在通话中')
        }
      } else {
        this.$message.warning('请选择坐席')
      }
    },
    // 强拆分机
    extenCut() {
      if (this.currentUser.exten !== '--') {
        this.$store.dispatch('extenCut', this.currentUser.exten)
      } else {
        this.$message.warning('请选择坐席')
      }
    }
  }
}
</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-right:1px solid #f0f0f0;
      padding-top: 10px;
      .line{
        line-height: 2
      }
      .btns{
        margin-top: 20px;
        text-align: center;
      }
    }
  }
</style>
