<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="1" :lg="1">
              <!-- <img :src="avatar" alt="头像" class="incall_avatar" /> -->
            </el-col>
            <el-col :md="14" :lg="14">
              <h5 class="callin_name">
                {{ cusInfo.cusname }}
                <span class="callin_custype">{{ cusInfo.customertype }}</span>
              </h5>
              <p class="callin_con">
                <span class="callin_num">{{ callinNum }}</span>
                <span>{{ locations }}</span>
              </p>
              <p class="callin_con callin_time">
                <time
                  v-show="!dropoff"
                >当前通话时长：{{ 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" v-show="orderTrue" @click="btn_orderAdd" />
                </el-tooltip>
                <!-- <el-tooltip content="点击创建客户项目" placement="top">
                  <i class="callin_btn callinpro" @click="btn_customerProAdd" />
                </el-tooltip> !dropoff && !isBlack-->
                <el-tooltip content="点击加入黑名单" placement="top">
                  <i v-show="true" 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 shadow="hover" class="customer_info">
          <h5 class="customer_title">会员资料</h5>
          <AddOrEditCustomer
            :callin-num="callinNum"
            :vipid="vipid"
            @getCusProLists="getCusProList"
          />
        </el-card>

        <!-- 切换列表 -->
        <el-card shadow="hover" class="records">
          <el-tabs v-model="activeName" @tab-click="handleClick">
            <el-tab-pane label="通话记录" name="first">
              <div class="tab_body">
                <CallRecordList ref="callListEl" :callin-num="callinNum" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="订单记录" name="second">
              <div class="tab_body">
                <OrderList ref="orderListEl" :callin-num="callinNum" :callid="callinCallid" />
              </div>
            </el-tab-pane>
            <!-- <el-tab-pane label="会员列表" name="third">
              <div class="tab_body">
                <CustomerList ref="cutomerListEl" :callin-num="callinNum" :cus-type="cusInfo.customertype" />
              </div>
            </el-tab-pane>-->
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import { Send } from '@/utils/telWebsocket'
import { getPhoneLocation, cancelBlack, getCusUser } from '@/api/callScreen/callScreen'
import MdInput from '@/components/MDinput'
import addOrder from '../callScreen/components/createOrder'
import AddOrEditCustomer from '../callScreen/components/AddOrEditCustomer'
import AddOrCelBlack from '../callScreen/components/AddOrCelBlack'
import CallRecordList from '../callScreen/components/CallRecordList'
import OrderList from '../callScreen/components/OrderList'
import CustomerList from '../callScreen/components/CustomerList'

export default {
  // @/api/orderManagement/orderList
  name: 'CallScreen',
  components: {
    MdInput,
    AddOrEditCustomer,
    CallRecordList,
    OrderList,
    CustomerList
  },
  filters: {
  },
  data () {
    const validate = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error('请输入六个字符'))
      } else {
        callback()
      }
    }
    return {
      scoketDatas: {}, // 发送的数据
      activeName: 'first', // tab切换默认显示通话记录
      telList: {
        keyword: ''
      },
      telRules: {
        keyword: [{
          required: true,
          trigger: 'change',
          validator: validate
        }]
      },
      locations: '未知', // 来电归属地
      callinTime: '00:00:00', // 通话时长
      callinNum: '', // 来电号码
      vipid: 0, // 会员信息id
      callinCallid: '', // 来电callid
      dropoff: false, // 是否挂断
      orderTrue: false, // 是否创建工单
      isBlack: false, // 是否加入黑名单
      cusInfo: {
        // 客户信息
        cusname: '',
        customertype: '潜在客户'// 客户类型
      }
    }
  },
  computed: {
    ...mapGetters([
      'avatar', // 头像
      'username', // 用户名
      'usercode', // 工号
      'seatflag', // 坐席标识
      'extension', // 分机号
      'telCallTime', // 来电通话时间
      'telLineState', // 线路状态
      'rolecode'      //角色的code
    ])
  },
  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.callinNum = '15093270696' // 来电号码
    // this.callinCallid = '1540884241276539386' // 来电callid
    if (this.callinNum) {
      this.getMails()
      this.getPhoneLocations()
      this.getCusInfos()
    }
    console.log(this.rolecode)
    if (this.rolecode === 'GLY' || this.rolecode === 'XS') {
      console.log(this.rolecode)
      this.orderTrue = true
    }
  },
  methods: {
    // 获取通讯录
    getMails () {
      console.log('通讯录信息')
    },
    // 获取来电归属地
    getPhoneLocations () {
      return new Promise(resolve => {
        getPhoneLocation(this.callinNum).then(response => {
          if (response.state.toLowerCase() === 'success') {
            this.locations = response.data
          }
        })
        resolve()
      })
    },
    // 获取客户信息
    getCusInfos () {
      console.log(this.callinNum)
      getCusUser(this.callinNum).then(response => {
        if (response.state.toLowerCase() === 'success') {
          const res = response.rows.Rows[0]
          if (res) {
            this.cusInfo.cusname = res.F_Name
            this.vipid = res.F_ID
            console.log(this.vipid)
            this.cusInfo.customertype = res.F_Type // 客户类型 默认是潜在客户
          }
        }
      })
    },
    // 添加工单
    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: '创建订单'
      })
    },
    // tab 切换
    handleClick (tab, event) {
      // console.log(this.$refs)
      // console.log(tab.name)
      if (tab.name === 'first') {
        // this.$refs.callListEl.getList()
      } else if (tab.name === 'second') {
        this.getOrderList(tab.name)
      } else if (tab.name === 'third') {
        this.getCusProList(tab.name)
      }
    },
    // 获取工单列表
    getOrderList (acname) {
      if (!acname) {
        this.activeName = 'second'
      }
      this.$refs.orderListEl.getList()
    },
    // 获取客户信息列表
    getCusProList (acname) {
      console.log(acname)
      if (!acname) {
        this.activeName = 'third'
      }
      this.$refs.cutomerListEl.getList()
    },
    // 加入黑名单
    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_custype {
        color: #5092e1;
        font-size: 14px;
      }
    }

    .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;
    }

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

    .callinpro {
      background: url(../../assets/imgs/xiangmu.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;
    }
  }

  .customer_info {
    margin-top: 15px;

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

    .customer_cons {
      background-color: #f5f5f6;
      padding: 15px;
      font-size: 12px;
      color: #666666;

      .customer_item {
        line-height: 12px;
        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>
