<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,
      required: true
    }
  },
  methods: {
    // 监听
    spy() {
      this.$store.dispatch('spy', this.currentUser.exten)
    },
    // 强插分机
    extenInsert() {
      this.$store.dispatch('extenInsert', this.currentUser.exten)
    },
    // 强拆分机
    extenCut() {
      this.$store.dispatch('extenCut', this.currentUser.exten)
    }
  }
}
</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>