<template>
  <div class="tel_operation clearfix">
    <div class="call_left">
      <div class="call_icon">
        <transition-group type="transition" name="slide-list">
          <svg-icon v-show="!telIsLogin" key="0" icon-class="guaduan" />
          <i
            v-show="telIsLogin && (telSeatState===2 && telLineState===1)"
            key="1"
            class="calli free"
          />
          <!-- <svg-icon v-show="telIsLogin && (telSeatState===2 && telLineState===1)" icon-class="xiuxi" /> -->
          <svg-icon
            v-show="telIsLogin && (telSeatState===5 && telLineState===1)"
            key="2"
            icon-class="manglu01"
          />
          <svg-icon
            v-show="telIsLogin && (telLineState===2)"
            key="3"
            icon-class="fenji"
            class="ringing"
          />
          <svg-icon
            v-show="telIsLogin && (telLineState===3)"
            key="4"
            icon-class="huchu"
            class="ringing"
          />
          <!-- <svg-icon v-show="telIsLogin && (telLineState===4)" icon-class="zhenling" class="ringing" /> -->
          <!-- <svg-icon v-show="telIsLogin && (telLineState===6)" icon-class="tonghuazhong01" class="incall" /> -->
          <!-- <svg-icon v-show="telIsLogin && (telLineState===10)" icon-class="tonghuazhong01" class="incall" /> -->
          <i v-show="telIsLogin && (telLineState===4)" key="5" class="calli callringing" />
          <i v-show="telIsLogin && (telLineState===6)" key="6" class="calli incalling" />
          <i v-show="telIsLogin && (telLineState===10)" key="7" class="calli incalling" />
        </transition-group>
      </div>
      <div class="call_content">
        <p class="call_text">
          <!-- <transition-group type="transition" name="fade-text"> -->
          <span v-show="!telIsLogin" key="8">还未开始工作</span>
          <span v-show="telIsLogin && (telSeatState===2 && telLineState===1)" key="9">空闲中</span>
          <span v-show="telIsLogin && (telSeatState===5 && telLineState===1)" key="10">忙碌中</span>
          <span v-show="telIsLogin && (telLineState===2)" key="11">摘机中</span>
          <span v-show="telIsLogin && (telLineState===3)" key="12">拨号中</span>
          <span v-show="telIsLogin && (telLineState===4)" key="13">振铃中</span>
          <span v-show="telIsLogin && (telLineState===6)" key="14">通话中</span>
          <span v-show="telIsLogin && (telLineState===10)" key="15">保持中</span>
          <!-- </transition-group>	 -->
          <svg-icon v-show="telIsLogin" icon-class="xinhao" />
        </p>
        <p
          v-show="(telSeatState===2 && telLineState < 6)|| (telSeatState === 5 && telLineState < 6)"
          class="call_time"
        >--:--:--</p>
        <p v-show="telIsLogin && (telLineState===6 || telLineState===10)" class="call_time">
          <span v-show="Number(telCallTime.hh) === 0">{{ telCallTime.hh }}</span>
          <span v-show="Number(telCallTime.hh) > 0 && Number(telCallTime.hh) < 10">
            <span>{{ telCallTime.hh.substr(0,1) }}</span>
            <span class="blue_color">{{ telCallTime.hh.substr(1) }}</span>
          </span>
          <span v-show="Number(telCallTime.hh) > 9" class="blue_color">{{ telCallTime.hh }}</span>
          <span v-show="Number(telCallTime.mm) === 0">:{{ telCallTime.mm }}</span>
          <span v-show="Number(telCallTime.mm) > 0 && Number(telCallTime.mm) < 10">
            <span>:{{ telCallTime.mm.substr(0,1) }}</span>
            <span class="blue_color">{{ telCallTime.mm.substr(1) }}</span>
          </span>
          <span v-show="Number(telCallTime.mm) > 9" class="blue_color">:{{ telCallTime.mm }}</span>
          <span class="blue_color ft16">:{{ telCallTime.ss }}</span>
        </p>
      </div>
    </div>
    <div v-show="telIsLogin" class="call_middle">
      <el-input
        :class="{no_write: true}"
        :readonly="true"
        v-model="telCallNum"
        size="small"
        placeholder
      />
      <i
        v-show="telSeatState===2 && telLineState===1"
        slot="reference"
        class="dialicon"
        @click="makeCall"
      />
      <el-popover
        :value="telIsVisCallout"
        :disabled="false"
        trigger="manual"
        popper-class="dial_popover"
        placement="bottom-start"
        width="300"
        transition="fade-in-linear"
        @after-leave="afterLeave"
      >
        <Dialplate />
      </el-popover>
    </div>
    <div class="call_right">
      <transition-group type="transition" name="fade-list">
        <button
          v-waves
          v-show="!telIsLogin"
          key="27"
          type="button"
          class="start_btn"
          @click="signIn"
        >开始工作</button>
        <button
          v-waves
          v-show="telIsLogin && (telSeatState===2 && telLineState===1)"
          key="17"
          type="button"
          class="call_btn"
          @click="setBusy"
        >置忙</button>
        <button
          v-waves
          v-show="telIsLogin && (telSeatState===5 && telLineState===1)"
          key="18"
          type="button"
          class="call_btn"
          @click="setFree"
        >置闲</button>
        <button
          v-waves
          v-show="telIsLogin && ((telSeatState===2 || telSeatState===5) && telLineState===1)"
          key="19"
          type="button"
          class="call_btn"
          @click="signOut"
        >签出</button>
        <button
          v-waves
          v-show="telIsLogin && (telLineState===6)"
          key="20"
          type="button"
          class="call_btn yellow_bg"
          @click="holdBack"
        >保持通话</button>
        <button
          v-waves
          v-show="telIsLogin && (telLineState===10)"
          key="21"
          type="button"
          class="call_btn green_bg"
          @click="retrieveBack"
        >接回通话</button>
        <button
          v-waves
          v-show="telIsLogin && (telLineState===6 || telLineState===10)"
          key="24"
          type="button"
          class="call_btn"
          @click="transferCall"
        >转接</button>
        <button
          v-waves
          v-show="telIsLogin && (telLineState===6 || telLineState===10)"
          key="25"
          type="button"
          class="call_btn"
          @click="meetingCall"
        >多方通话</button>
        <button
          v-waves
          v-show="telIsLogin && (telLineState>2)"
          key="22"
          type="button"
          class="call_btn"
          @click="btn_IVR"
        >转IVR</button>
        <button
          v-waves
          v-show="telIsLogin && (telLineState>2)"
          key="23"
          type="button"
          class="call_btn red_bg"
          @click="dropCall"
        >挂断</button>
      </transition-group>
    </div>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import store from '@/store'
import { Send } from '@/utils/telWebsocket'
import Dialplate from '@/components/Dialplate'
export default {
  name: 'Teloperation',
  components: {
    Dialplate
  },
  data () {
    return {
      scoketDatas: {}, // 发送的数据
      telNumber: '',
      telTimer: null // 时间定时器
    }
  },
  computed: {
    ...mapGetters([
      'usercode', // 工号
      'extension', // 分机号
      'groupcode', // 坐席组code
      'telIsLogin', // 是否签入
      'telSeatState', // 坐席状态
      'telLineState', // 线路状态
      'telCallNum', // 电话号码
      'telIsVisCallout', // 外呼操作面板是否显示
      'telCallTime', // 通话时间
      'telMessageData' // telwebsocket 接收的数据
    ])
  },
  watch: {
    // 如果 `telLineState` 发生改变，这个函数就会运行
    telLineState: function (newT, oldT) {
      // console.log(newT, oldT);
      this.watchTelLineState(newT, oldT)
    }
  },
  methods: {
    // 签入
    signIn () {
      console.log(this.groupcode)
      console.log(this.extension)
      // if(!this.groupcode){
      //   this.$message.error('分机号不存在')
      //   return false
      // }
      if (!this.extension) {
        this.$confirm('如果您想进行话务操作，请重新登录并且输入分机号, 是否重新登录？', '提示', {
          confirmButtonText: '是',
          cancelButtonText: '否',
          type: 'warning'
        }).then(() => {
          this.$store.dispatch('FedLogOut').then(() => {
            location.reload() // 为了重新实例化vue-router对象 避免bug
          })
        }).catch(() => {
         })
        return
      }
      this.scoketDatas = {
        'Type': 'Login',
        'AgentID': this.usercode,
        'AgentExten': this.extension,
        'AgentGroup': window.localStorage.getItem("groupCode"), // 坐席组id  
        'AgentType': '0',
        'DisposeTime': '0' // 话后处理时长设置，0代表一致话后处理，除非发送置闲 （按照历史习惯，字符串形式）
      }
      Send(this.scoketDatas)
    },
    // 签出
    signOut () {
      this.scoketDatas = {
        'Type': 'Logout',
        'AgentID': this.usercode,
        'AgentExten': this.extension
      }
      Send(this.scoketDatas)
      store.dispatch('UpdateCalloutScreen', false)
    },
    // 置忙
    setBusy () {
      this.scoketDatas = {
        'Type': 'SayBusy',
        'AgentID': this.usercode,
        'AgentExten': this.extension
      }
      Send(this.scoketDatas)
    },
    // 置闲
    setFree () {
      this.scoketDatas = {
        'Type': 'SayFree',
        'AgentID': this.usercode,
        'AgentExten': this.extension
      }
      Send(this.scoketDatas)
    },
    // 转IVR
    btn_IVR () {
      this.scoketDatas = {
        'Type': 'TurnIvr',
        'AgentID': this.usercode,
        'AgentExten': this.extension,
        'IvrName': 'MYD_ZXZ',
        'IvrPos': '1'
      }
      Send(this.scoketDatas)
    },
    // 挂断
    dropCall () {
      this.scoketDatas = {
        'Type': 'DropCall',
        'AgentID': this.usercode,
        'AgentExten': this.extension
      }
      Send(this.scoketDatas)
      store.dispatch('UpdateCalloutScreen', false)
    },
    // 保持通话
    holdBack () {
      this.scoketDatas = {
        'Type': 'Hold',
        'AgentID': this.usercode,
        'AgentExten': this.extension
      }
      Send(this.scoketDatas)
    },
    // 接回通话
    retrieveBack () {
      this.scoketDatas = {
        'Type': 'Retrieve',
        'AgentID': this.usercode,
        'AgentExten': this.extension
      }
      Send(this.scoketDatas)
    },
    // 外呼
    makeCall () {
      store.dispatch('ChangeCallType', 'MakeCall')
      store.dispatch('UpdateCalloutScreen', !this.telIsVisCallout)
    },
    // 转接
    transferCall () {
      store.dispatch('ChangeCallType', 'Transfer')
      store.dispatch('UpdateCalloutScreen', !this.telIsVisCallout)
    },
    // 多方通话
    meetingCall () {
      store.dispatch('ChangeCallType', 'Meeting')
      store.dispatch('UpdateCalloutScreen', !this.telIsVisCallout)
    },
    // 外呼操作面板 关闭后
    afterLeave () {
      store.dispatch('ChangeCallType', 'MakeCall')
    },
    // 通话时间
    callTime () {
      // 通话时间重置为00:00:00
      store.dispatch('UpdateCallTime', {
        hh: '00',
        mm: '00',
        ss: '00'
      })
      // 时间 计时
      let _n = 0
      if (this.telTimer) {
        clearInterval(this.telTimer)
      }
      this.telTimer = setInterval(() => {
        _n++

        store.dispatch('UpdateCallTime', {
          hh: this.toDub(parseInt(_n / 60 / 60 % 60)), // 小时
          mm: this.toDub(parseInt(_n / 60 % 60)), // 分钟
          ss: this.toDub(parseInt(_n % 60)) // 秒
        })
      }, 1000)
    },
    // 清除定时器
    clearInter () {
      clearInterval(this.telTimer)
    },
    // 小于10补0
    toDub (i) {
      return i < 10 ? '0' + i : '' + i
    },
    // 监听 线路状态
    watchTelLineState (newT, oldT) {
      // 外呼
      if (newT === 6 && oldT === 4) {
        this.callTime()
      }
      // 来电
      if (newT === 6 && oldT === 5) {
        this.callTime()
      }
      if (newT === 1) {
        if (this.telTimer) {
          clearInterval(this.telTimer)
          this.telTimer = null
          // 						//通话时间重置为00:00:00
          // 						store.dispatch('UpdateCallTime', {
          // 							hh: '00',
          // 							mm: '00',
          // 							ss: '00',
          // 						});
        }
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.call_middle {
  .el-input {
    width: 130px;
  }
  .el-input__inner {
    width: 130px;
    background-color: #282b36;
    color: #ffffff;
    border-radius: 16px;
    border-color: transparent;
    font-family: "黑体";
  }
  .no_write .el-input__inner {
    background-color: transparent;
    font-size: 18px;
    padding-left: 6px;
    padding-right: 0;
  }
}

.dial_popover {
  background-color: #42484d;
  padding: 0;
  border-bottom-left-radius: 10px;
  border-bottom-right-radius: 0;
  border-top-right-radius: 0;
  border-top-left-radius: 0;
  border-color: #42484d;

  .popper__arrow,
  .popper__arrow::after {
    border-bottom-color: #42484d !important;
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.tel_operation {
  position: absolute;
  left: 230px;
  top: 3px;
  background-color: #42484d;
  min-width: 284px;
  height: 46px;
  line-height: 46px;
  border-radius: 23px;
  -webkit-box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);
  box-shadow: 2px 2px 10px rgba(0, 0, 0, 0.7);

  .call_left,
  .call_middle,
  .call_right {
    float: left;
    height: 46px;
    overflow: hidden;
    line-height: 46px;
  }

  .call_left {
    width: 139px;

    .call_icon {
      display: inline-block;
      margin-left: 7px;
      margin-top: 7px;
      width: 32px;
      height: 32px;
      text-align: center;
      border-radius: 50%;
      overflow: hidden;
      background-color: #1f2129;
      .calli {
        display: inline-block;
        width: 32px;
        height: 32px;
        border-radius: 50%;
      }
      .free {
        background: url(../../assets/imgs/free.gif) center center no-repeat;
      }
      .incalling {
        background: url(../../assets/imgs/incalling.gif) center center no-repeat;
      }
      .callringing {
        background: url(../../assets/imgs/callringing.gif) center center
          no-repeat;
      }

      .svg-icon {
        color: #ffffff;
        font-size: 16px;
        vertical-align: 0.3em;
      }

      .ringing {
        color: #1bce7d;
      }

      .incall {
        color: #149ee4;
      }
    }

    .call_content {
      display: inline-block;
      margin-left: 12px;
      vertical-align: -0.09em;

      p {
        margin: 0;
        padding: 0;
        color: #ffffff;
      }

      .blue_color {
        color: #409eff;
      }

      .ft16 {
        font-size: 16px;
      }

      .call_text {
        font-size: 12px;
        line-height: 13px;

        .svg-icon {
          margin-left: 20px;
          font-size: 15px;
        }
      }

      .call_time {
        margin-top: 4px;
        font-size: 22px;
        line-height: 20px;
      }
    }
  }

  .call_middle {
    width: 160px;
    margin-left: 16px;
    .dialicon {
      display: inline-block;
      width: 14px;
      height: 19px;
      background: url(../../assets/imgs/dialicon.png) center center no-repeat;
      margin-right: 10px;
      cursor: pointer;
      vertical-align: text-bottom;
    }
  }

  .call_right {
    margin-left: 17px;

    .start_btn {
      border: none;
      outline: none;
      background-color: #409eff;
      color: #ffffff;
      border-top-right-radius: 23px;
      border-bottom-right-radius: 23px;
      height: 46px;
      line-height: 46px;
      width: 140px;
      font-size: 16px;
      text-align: center;
      cursor: pointer;
    }

    .call_btn {
      outline: none;
      cursor: pointer;
      background-color: #42484d;
      border: 2px solid #191c26;
      height: 26px;
      padding: 0 20px;
      margin-right: 10px;
      border-radius: 11px;
      font-size: 12px;
      color: #ffffff;
    }

    .yellow_bg {
      background-color: #e6ad43;
    }

    .green_bg {
      background-color: #1795d5;
    }

    .red_bg {
      background-color: #e6261e;
    }
  }

  .inlineBlock {
    display: inline-block;
  }
}
</style>
