<template>
  <div class="callScreen">
    <el-row :gutter="14" class="wrap_height">
      <!-- 通讯录 暂时隐藏 -->
      <el-col v-if="false" :md="5" class="wrap_height left_wrap">
        <el-scrollbar class="scroll_bar">
          <div class="tel_lists">
            <el-form :model="telList" :rules="telRules">
              <el-form-item prop="keyword">
                <md-input
                  v-model="telList.keyword"
                  icon="search"
                  name="keyword"
                  placeholder="输入搜索关键字"
                />
              </el-form-item>
            </el-form>
            <div class="lists">
              <el-row class="list_item clearfix" type="flex" align="middle">
                <el-col :xl="4">
                  <img :src="avatar" class="avatarimg" alt="头像" />
                  <svg-icon class="tel_icon tel_out" icon-class="huchu" />
                </el-col>
                <el-col :xl="10">
                  <p class="list_item_con f14">15235457489</p>
                  <p class="list_item_con tel_out">呼出 3分20秒</p>
                </el-col>
                <el-col :xl="10" class="list_item_time">
                  <p class="list_item_con">昨天</p>
                  <i class="el-icon-circle-close-outline close_icon" />
                </el-col>
              </el-row>

              <el-row class="list_item clearfix" type="flex" align="middle">
                <el-col :xl="4">
                  <img :src="avatar" class="avatarimg" alt="头像" />
                  <svg-icon class="tel_icon tel_in" icon-class="huru" />
                </el-col>
                <el-col :xl="10">
                  <p class="list_item_con f14">15323568419</p>
                  <p class="list_item_con tel_in">呼入 2分46秒</p>
                </el-col>
                <el-col :xl="10" class="list_item_time">
                  <p class="list_item_con">2018-09-29</p>
                  <i class="el-icon-circle-close-outline close_icon" />
                </el-col>
              </el-row>

              <el-row class="list_item clearfix" type="flex" align="middle">
                <el-col :xl="4">
                  <img :src="avatar" class="avatarimg" alt="头像" />
                  <svg-icon class="tel_icon tel_off" icon-class="guaduan" />
                </el-col>
                <el-col :xl="10">
                  <p class="list_item_con f14">河南加一-王一</p>
                  <p class="list_item_con tel_off">未接听</p>
                </el-col>
                <el-col :xl="10" class="list_item_time">
                  <p class="list_item_con">2018-09-29</p>
                  <i class="el-icon-circle-close-outline close_icon" />
                </el-col>
              </el-row>
            </div>
          </div>
        </el-scrollbar>
      </el-col>
      <el-col :md="24" class="right_wrap">
        <!-- 电话信息 -->
        <el-card shadow="hover" class="callin_header">
          <el-row type="flex" align="middle" class="clearfix">
            <el-col :md="5" :lg="4" :xl="2">
              <img :src="avatar" alt="头像" class="incall_avatar" />
            </el-col>
            <el-col :md="14" :lg="14">
              <h5 class="callin_name">{{ pagerDatas.fullname }}</h5>
              <p class="callin_con">
                <span class="callin_num">{{ callinNum }}</span>
                <span>
                  {{ locations }}
                  <span v-if="address">住址:{{ address }}</span>
                </span>
              </p>
              <p class="callin_con callin_time">
                <time
                >当前通话时长：{{ telCallTime.hh }}:{{ telCallTime.mm }}:{{ telCallTime.ss }}</time>
              </p>
            </el-col>
            <el-col :md="5" :lg="6">
              <div class="callin_btns">
                <el-tooltip content="点击创建工单" placement="top">
                  <i class="callin_btn callinorder" @click="btn_orderAdd" />
                </el-tooltip>
                <el-tooltip content="点击加入黑名单" placement="top">
                  <i
                    v-show="!dropoff && !isBlack"
                    class="callin_btn callinblack"
                    @click="btn_addBlack"
                  />
                </el-tooltip>
                <el-tooltip content="点击取消黑名单" placement="top">
                  <i v-show="isBlack" class="callin_btn callincelblack" @click="btn_cancelBlack" />
                </el-tooltip>
                <el-tooltip v-if="false" content="点击转IVR" placement="top">
                  <i v-show="!dropoff" class="callin_btn callinivr" @click="btn_IVR" />
                </el-tooltip>
              </div>
            </el-col>
          </el-row>
        </el-card>
        <!-- 呼叫结果 -->
        <el-card v-if="callResults.length" shadow="hover" class="call_result">
          <h5 class="title">呼叫结果</h5>
          <el-radio-group v-model="callresult" @change="radioChange">
            <el-radio
              v-for="item in callResults"
              :key="item.id"
              :label="item.id"
              border
            >{{ item.name }}</el-radio>
          </el-radio-group>
        </el-card>
        <!-- tab切换  -->
        <el-card shadow="hover" class="records">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane :label="'外呼问卷（'+ pagerTitle +'）'" name="first">
              <div class="tab_body">
                <tabPager
                  ref="tabpager"
                  :pager-datas="pagerDatas"
                  @getPagerTitle="getPtitle"
                  @getTP="getTelInfo"
                />
              </div>
            </el-tab-pane>
            <el-tab-pane label="通话记录" name="second">
              <div class="tab_body">
                <callRecord ref="callrecord" :callin-num="callinNum" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="工单记录" name="third">
              <div class="tab_body">
                <orderRecord ref="orderrecord" :callin-num="callinNum" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { getPhoneLocation, cancelBlack } from '@/api/callScreen/callScreen'
// import { getTelDetail } from '@/api/outbound/plan'
import { getDictionary } from '@/api/commonAPI'
import MdInput from '@/components/MDinput'
// import addOrder from '@/views/order/components/addOrEdit'
import addOrCelBlack from './components/addOrCelBlack'
import tabPager from './components/tabPager'
import callRecord from './components/callRecord'
import orderRecord from './components/orderRecord'
import { Send } from '@/utils/telWebsocket'

export default {
  name: 'AutoCallScreen',
  components: {
    MdInput,
    tabPager,
    callRecord,
    orderRecord
  },
  data () {
    const validate = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error('请输入六个字符'))
      } else {
        callback()
      }
    }
    return {
      scoketDatas: {}, // 发送的数据
      activeName: 'first', // tab切换默认显示问卷
      address: '', //	否	string	地址
      taskid: '', //	否	string	任务id
      pagerTitle: '',
      callresult: '5bfe540c5a10b06b7a35a83a', //	否	string	话务状态（字典项：外呼结果）
      pagerDatas: {}, // 提交的部分数据
      callResults: [], // 呼叫结果数据
      telList: {
        keyword: ''
      },
      telRules: {
        keyword: [{
          required: true,
          trigger: 'change',
          validator: validate
        }]
      },
      locations: '未知', // 来电归属地
      callinTime: '00:00:00', // 通话时长
      callinNum: '', // 来电号码
      callinCallid: '', // 来电callid
      dropoff: false, // 是否挂断
      isBlack: false // 是否加入黑名单
    }
  },
  computed: {
    ...mapGetters([
      'avatar', // 头像
      'username', // 用户名
      'usercode', // 工号
      'seatflag', // 坐席标识
      'extension', // 分机号
      'telCallTime', // 来电通话时间
      'telLineState' // 线路状态
    ])
  },
  watch: {
    // 如果 `telLineState` 发生改变，这个函数就会运行
    telLineState: function (newT, oldT) {
      // console.log(newT, oldT);
      this.watchTelLineState(newT, oldT)
    }
  },
  created () {
    this.callinNum = this.$route.params.telInNumber // 号码
    this.callinCallid = this.$route.params.callid // callid
    this.taskid = this.$route.params.taskId // taskid
    // 测试
    // this.callinNum = '13811115504' //	是	string	电话
    // this.callinCallid = 1546459366644646679
    // this.taskid = '5c0749cb5c50dd7282c88868' //	是	string	任务id

    if (this.callinNum) {
      // this.getMails() //通讯录
      this.getPhoneLocations() // 号码归属地
      this.getTelInfo() // 电话信息
      this.getCallResuts() // 获取呼叫结果
    }
  },
  methods: {
    // 获取通讯录
    // getMails() {  console.log('通讯录信息') },

    // 获取来电归属地
    getPhoneLocations () {
      return new Promise(resolve => {
        getPhoneLocation(this.callinNum).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.locations = response.data
          }
        })
        resolve()
      })
    },

    // 获取电话信息
    getTelInfo () {
      return new Promise(resolve => {
        const data = {
          telnum: this.callinNum, //	是	string	电话
          taskid: this.taskid //	是	string	任务id
        }
        // getTelDetail(data).then(response => {
        //   if (response.state.toLowerCase() === 'success') {
        //     const res = response.data
        //     this.$set(this, 'address', res.tasktel.cusaddr)
        //     this.$set(this, 'pagerDatas', {
        //       recordid: this.callinCallid, //	是	string	通话记录id
        //       fullname: res.tasktel.cusname, // 是	list	姓名
        //       tel: res.tasktel.phone, //	否	string	电话
        //       address: res.tasktel.cusaddr, //	否	string	地址
        //       pageid: res.task.pagerid, //	否	string	问卷id
        //       taskid: res.tasktel.taskid, //	否	string	任务id
        //       // describe: '',//	否	string	问卷结果简述
        //       callresult: this.callresult //	否	string	话务状态（字典项：外呼结果）
        //     })
        //   }
        // })
        resolve()
      })
    },

    // 更新tabPager子组件callresult 的值
    radioChange (value) {
      this.$set(this.pagerDatas, 'callresult', value)
    },

    // 从子组件获取的问卷名
    getPtitle (value) {
      this.pagerTitle = value
    },

    // 获取呼叫结果
    getCallResuts () {
      return new Promise(resolve => {
        getDictionary('ZDWHJG').then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.callResults = response.data
          }
        })
        resolve()
      })
    },

    // tab 切换
    handleClick (tab, event) {
      // console.log(tab.name, event);
      if (tab.name === 'first') {
        // this.$refs.tabpager.getPagers();
      } else if (tab.name === 'second') {
        this.$refs.callrecord.getCallRecord()
      } else {
        this.$refs.orderrecord.getOrderRecord()
      }
    },

    // 创建工单
    // btn_orderAdd() {
    //   this.$layer.iframe({
    //     content: {
    //       content: addOrder, // 传递的组件对象
    //       parent: this, // 当前的vue对象
    //       data: {
    //         'rowid': '',
    //         'callid': this.callinCallid,
    //         'callinNum': this.callinNum
    //       } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
    //     },
    //     area: ['80%', '90%'],
    //     title: '创建工单'
    //   })
    // },

    // 加入黑名单
    btn_addBlack () {
      this.$layer.iframe({
        content: {
          content: addOrCelBlack, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: {
            'rowid': this.callinNum,
            'callid': this.callinCallid
          } // props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['40%', '300px'],
        title: '加入黑名单'
      })
    },

    // 取消加入黑名单
    btn_cancelBlack () {
      cancelBlack(this.callinNum).then(response => {
        if (response.state.toLowerCase() === 'success') {
          this.isBlack = !this.isBlack
          this.$message.success('恭喜你，取消拉黑成功!')
        }
      })
    },

    // 转IVR
    btn_IVR () {
      this.scoketDatas = {
        'Type': 'TurnIvr',
        'AgentID': this.usercode,
        'AgentExten': this.extension,
        'IvrName': 'MYD_ZXZ',
        'IvrPos': '1'
      }
      Send(this.scoketDatas)
    },

    // 监听 线路状态
    watchTelLineState (newT, oldT) {
      if (newT === 1) {
        if (this.telTimer) {
          clearInterval(this.telTimer)
          this.telTimer = null
        }
        this.dropoff = true // 是否挂断
        this.callinTime = `${this.telCallTime.hh}:${this.telCallTime.mm}:${this.telCallTime.ss}`
      }
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss">
.callScreen {
  .wrap_height {
    height: 100%;
  }

  .scroll_bar {
    height: 100%;
    background-color: #fff;

    .el-scrollbar__wrap {
      height: calc(100% + 17px);

      .el-scrollbar__view {
        overflow-x: hidden;
      }
    }
  }

  .el-form-item {
    .el-form-item__content {
      line-height: 40px;

      .material-input__component {
        margin-top: 0;
      }
    }
  }

  .records {
    .el-card__body {
      padding: 0;
    }

    .el-tabs__header {
      padding: 0px 20px;
      background-color: #f5f5f6;

      .el-tabs__item {
        font-size: 14px;
        color: #666666;
        height: 45px;
        line-height: 45px;
      }

      .el-tabs__item.is-active,
      .el-tabs__item:hover {
        color: #00c1de;
      }

      .el-tabs__active-bar {
        background-color: #00c1de;
      }
    }
  }
}
</style>

<style rel="stylesheet/scss" lang="scss" scoped>
.callScreen {
  height: calc(100% + 31px);
  padding-right: 15px;
  padding-left: 15px; //隐藏左侧后加的

  .scroll_bar {
    .tel_lists {
      height: 100%;
      background-color: #fff;
      border-right: 1px solid #f5f8fc;

      .lists {
        .list_item {
          cursor: pointer;
          padding: 5px 14px;
          border-bottom: 1px solid #f5f8fc;

          .avatarimg {
            width: 44px;
            height: 44px;
            vertical-align: middle;
            border-radius: 50%;
          }

          .tel_icon {
            background-color: #fff;
            border-radius: 50%;
            font-size: 16px;
            padding: 2px;
            margin-left: -20px;
          }

          .list_item_con {
            margin: 0;
            padding: 0;
            color: #333333;
            font-size: 12px;
            line-height: 20px;
          }

          .list_item_time {
            text-align: right;
          }

          .close_icon {
            cursor: pointer;
            display: none;
            transition: all 0.2s;
          }

          .f14 {
            font-size: 14px;
          }

          .tel_out {
            color: #009900;
          }

          .tel_in {
            color: #409eff;
          }

          .tel_off {
            color: #ff0000;
          }
        }

        .list_item:hover {
          background-color: #f5f8fc;
        }

        .list_item:hover .close_icon {
          display: block;
        }
      }
    }
  }

  .callin_header {
    margin-top: 15px;

    .incall_avatar {
      width: 106px;
      height: 106px;
      vertical-align: middle;
      border-radius: 50%;
    }

    .callin_name {
      font-size: 16px;
      color: #333333;
      margin: 10px 0;
      font-weight: 400;
    }

    .callin_con {
      margin: 0;
      padding: 0;
      line-height: 20px;
      font-size: 14px;
      color: #4c4c4c;
    }

    .callin_num {
      font-size: 16px;
      color: #5092e1;
    }

    .callin_time {
      color: #808080;
    }

    .callin_btns {
      position: absolute;
      right: 0;
      top: 0;
    }

    .callin_btn {
      width: 36px;
      height: 36px;
      display: inline-block;
      margin-left: 10px;
      cursor: pointer;
    }

    .callinorder {
      background: url(../../assets/imgs/callinorder.png) center center no-repeat;
    }

    .callinblack {
      background: url(../../assets/imgs/callinblack.png) center center no-repeat;
    }

    .callincelblack {
      background: url(../../assets/imgs/callincelblack.png) center center
        no-repeat;
    }

    .callinivr {
      background: url(../../assets/imgs/callinivr.png) center center no-repeat;
    }
  }

  .call_result {
    margin-top: 15px;

    .title {
      font-size: 14px;
      color: #333333;
      font-weight: 400;
      margin-top: 0;
      margin-bottom: 20px;
    }
  }

  .records {
    margin-top: 15px;

    .tab_body {
      padding: 0 20px 20px 20px;
    }
  }

  ::-webkit-input-placeholder {
    /* WebKit, Blink, Edge */
    color: #808080;
    font-size: 14px;
  }

  :-moz-placeholder {
    /* Mozilla Firefox 4 to 18 */
    color: #808080;
    font-size: 14px;
  }

  ::-moz-placeholder {
    /* Mozilla Firefox 19+ */
    color: #808080;
    font-size: 14px;
  }

  :-ms-input-placeholder {
    /* Internet Explorer 10-11 */
    color: #808080;
    font-size: 14px;
  }
}

@media only screen and (min-width: 992px) and (max-width: 1390px) {
  .callScreen {
    .left_wrap {
      // min-width: 258px;
      width: 30%;
    }

    .right_wrap {
      // 左侧隐藏后
      // width: 70%;
    }
  }
}
</style>
