<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">{{ cusInfo.cusname }}</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>
                <!-- <time v-show="dropoff">当前通话时长：{{ callinTime }}</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 class="callin_btn callinuser" @click="btn_customerAdd"/>
                </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 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="isShowCusInfo" shadow="hover" class="customer_info">
          <h5 class="customer_title">客户资料</h5>
          <div class="customer_cons clearfix">
            <el-col :md="6" class="customer_item">
              姓名：{{ cusInfo.cusname }}
            </el-col>
            <el-col :md="6" class="customer_item">
              性别：{{ cusInfo.cussex }}
            </el-col>
            <el-col :md="6" class="customer_item">
              手机：{{ cusInfo.custel }}
            </el-col>
            <el-col :md="6" class="customer_item">
              固话：{{ cusInfo.cusmobile }}
            </el-col>
            <el-col :md="6" class="customer_item">
              所在省：{{ cusInfo.cusprovince }}
            </el-col>
            <el-col :md="6" class="customer_item">
              所在市：{{ cusInfo.cuscity }}
            </el-col>
            <el-col :md="6" class="customer_item">
              具体地址：{{ cusInfo.cusaddress }}
            </el-col>
            <el-col :md="6" class="customer_item">
              QQ：{{ cusInfo.cusQQ }}
            </el-col>
            <el-col :md="6" class="customer_item">
              邮箱：{{ cusInfo.cusemail }}
            </el-col>
            <el-col :md="6" class="customer_item">
              公司名称：{{ cusInfo.cuscompany }}
            </el-col>
            <el-col :md="6" class="customer_item">
              公司号码：{{ cusInfo.cuscompanytel }}
            </el-col>
            <el-col :md="6" class="customer_item">
              公司职位：{{ cusInfo.cuscompanyposition }}
            </el-col>
          </div>
        </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">
                <el-table v-loading="loading0" :data="dataLists0" border stripe>
                  <el-table-column type="index" label="编号" align="center" fixed width="80"/>
                  <el-table-column prop="callnumber" label="呼叫号码" align="center" min-width=""/>
                  <el-table-column prop="agent_code" label="坐席工号" align="center" min-width=""/>
                  <el-table-column prop="agent_extnumber" label="分机号" align="center" min-width=""/>
                  <el-table-column label="呼叫类型" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ scope.row.calltype | calltypeFilter }}
                    </template>
                  </el-table-column>
                  <el-table-column label="呼叫状态" align="center" min-width="">
                    <template slot-scope="scope">
                      <el-tag
                        :type="scope.row.callstate === 1 ? 'success' : 'danger'"
                        size="mini"
                        disable-transitions>
                        {{ scope.row.callstate | statusFilter }}
                      </el-tag>
                    </template>
                  </el-table-column>
                  <el-table-column label="处理方式" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ scope.row.dealtype | dealtypeFilter }}
                    </template>
                  </el-table-column>
                  <el-table-column label="满意度" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ scope.row.evaluation | evaluationFilter }}
                    </template>
                  </el-table-column>
                  <el-table-column label="录音" align="center" min-width="">
                    <template slot-scope="scope">
                      <svg-icon v-if="scope.row.FilePath.length" class="rec_file" icon-class="bofangluyin" @click.native="playSound(scope.row.FilePath, scope.row.agent_code)"/>
                      <span v-else>-</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="呼叫开始时间" align="center" min-width="110">
                    <template slot-scope="scope">
                      <span>{{ scope.row.begintime | timesFilter }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="通话开始时间" align="center" min-width="110">
                    <template slot-scope="scope">
                      <span>{{ scope.row.begintime_talk | timesFilter }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="通话结束时间" align="center" min-width="110">
                    <template slot-scope="scope">
                      <span>{{ scope.row.endtime_talk | timesFilter }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column label="挂机时间" align="center" min-width="110">
                    <template slot-scope="scope">
                      <span>{{ scope.row.endtime | timesFilter }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="longs_talk" label="通话时长" align="center" min-width=""/>
                  <el-table-column label="外呼类型" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ scope.row.callopttype | callopttypeFilter }}
                    </template>
                  </el-table-column>
                </el-table>
                <pagination
                  v-show="pageParams0.total > 0"
                  :total="pageParams0.total"
                  :pageindex.sync="pageParams0.pageindex"
                  :pagesize.sync="pageParams0.pagesize"
                  class="pagination"
                  @pagination="getCallRecord" />
              </div>
            </el-tab-pane>
            <el-tab-pane label="工单记录" name="second">
              <div class="tab_body">
                <el-table v-loading="loading1" :data="dataLists1" border stripe>
                  <el-table-column type="index" label="编号" align="center" fixed width="80"/>
                  <el-table-column label="工单编号" align="center" min-width="140">
                    <template slot-scope="scope">
                      <el-tooltip content="点击查看工单详情" placement="top">
                        <el-button v-permission="'HY_detail'" type="text" @click="btn_orderDetail(scope.row.ordercode)">{{ scope.row.ordercode }}</el-button>
                      </el-tooltip>
                    </template>
                  </el-table-column>
                  <el-table-column prop="sourcename" label="工单来源" align="center" min-width=""/>
                  <el-table-column prop="typename" label="工单类型" align="center" min-width=""/>
                  <el-table-column prop="provincename" label="所在省" align="center"/>
                  <el-table-column prop="cityname" label="所在市" align="center"/>
                  <el-table-column prop="address" label="具体地址" align="center"/>
                  <el-table-column label="工单内容" align="center">
                    <template slot-scope="scope">
                      {{ scope.row.content | formatterContent }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="name" label="姓名" align="center"/>
                  <el-table-column prop="phone" label="电话" align="center"/>
                  <el-table-column prop="sex" label="性别" align="center"/>
                  <el-table-column prop="createuser" label="创建人" align="center"/>
                  <el-table-column prop="createtime" label="创建时间" align="center" min-width="120"/>
                </el-table>
                <pagination
                  v-show="pageParams1.total > 0"
                  :total="pageParams1.total"
                  :pageindex.sync="pageParams1.pageindex"
                  :pagesize.sync="pageParams1.pagesize"
                  class="pagination"
                  @pagination="getOrderRecord" />
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import { mapGetters } from 'vuex'
import MdInput from '@/components/MDinput'
import { getPhoneLocation, cancelBlack } from '@/api/callScreen/callScreen'
// import { getCusUserLists } from '@/api/customer/customerInfo'
import { getCallRecords } from '@/api/trafficData/trafficData'
import { getOrderLists } from '@/api/order/orderSearch'
import { formatterContent } from '@/utils'
import audioPlayer from '@/components/audioPlayer'
// import addOrder from '@/views/order/orderSearch/addOrEdit'
// import addCustomer from '@/views/customer/customerInfo/addOrEdit'
// import detailOrder from '@/views/order/orderSearch/detail'
import addOrCelBlack from './addOrCelBlack'
import { Send } from '@/utils/telWebsocket'
import Pagination from '@/components/Pagination' // 对el-pagination 二次封装
export default {
  name: 'CallScreen',
  components: {
    Pagination,
    MdInput
  },
  filters: {
    // 呼叫类型
    calltypeFilter(status) {
      const statusMap = {
        0: '呼入',
        1: '呼出'
      }
      return statusMap[status]
    },
    // 呼叫状态
    statusFilter(status) {
      const statusMap = {
        0: '未接通',
        1: '已接通'
      }
      return statusMap[status]
    },
    // 外呼类型
    callopttypeFilter(status) {
      const statusMap = {
        0: '拨号外呼',
        1: '回访外呼'
      }
      return statusMap[status]
    },
    // 处理方式
    dealtypeFilter(status) {
      const statusMap = {
        0: 'IVR处理',
        1: '骚扰电话',
        2: '自助服务',
        3: '转值班电话',
        4: '留言',
        5: '呼损',
        6: '人工处理'
      }
      return statusMap[status]
    },
    // 满意度
    evaluationFilter(status) {
      const statusMap = {
        0: '-',
        1: '非常满意',
        2: '基本满意',
        3: '不满意'
      }
      return statusMap[status]
    },
    // 时间格式化
    timesFilter(tm) {
      if (tm === '1970-01-01 08:00:00') {
        return '-'
      } else {
        return tm
      }
    }
  },
  data() {
    const validate = (rule, value, callback) => {
      if (value.length !== 6) {
        callback(new Error('请输入六个字符'))
      } else {
        callback()
      }
    }
    return {
      scoketDatas: {}, // 发送的数据
      loading0: false,
      loading1: false,
      activeName: 'first', // tab切换默认显示通话记录
      telList: {
        keyword: ''
      },
      telRules: {
        keyword: [{
          required: true,
          trigger: 'change',
          validator: validate
        }]
      },
      locations: '未知', // 来电归属地
      callinTime: '00:00:00', // 通话时长
      callinNum: '', // 来电号码
      callinCallid: '', // 来电callid
      dropoff: false, // 是否挂断
      isBlack: false, // 是否加入黑名单
      isShowCusInfo: false,
      cusInfo: {// 客户信息
        cusname: '',
        cussex: '',
        custel: '',
        cusmobile: '',
        cusprovince: '',
        cuscity: '',
        cusaddress: '',
        cusQQ: '',
        cusemail: '',
        cuscompany: '',
        cuscompanytel: '',
        cuscompanyposition: ''
      },
      recordpath: '', // 录音的路径
      pageParams0: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0, // 总共多少数据
        prevText: '上一页',
        nextText: '下一页'
      },
      dataLists0: [], // 通话记录列表数据
      pageParams1: {
        pageindex: 1, // 当前第几页
        pagesize: Number(this.$store.getters.serverConfig.PAGESIZE), // 每页几条数据
        total: 0, // 总共多少数据
        prevText: '上一页',
        nextText: '下一页'
      },
      dataLists1: [] // 工单记录列表数据
    }
  },
  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.callinNum = 15235457489//来电号码
    // this.callinCallid = 1540884241276539386 //来电callid
    if (this.callinNum) {
      this.getMails()
      this.getPhoneLocations()
      this.getCusInfos()
      this.getCallRecord()
    }
  },
  methods: {
    // 获取通讯录
    getMails() { console.log('通讯录信息') },
    // 获取来电归属地
    getPhoneLocations() {
      return new Promise(resolve => {
        getPhoneLocation(this.callinNum).then(response => {
          if (response.state.toLowerCase() === 'success') {
            if (response.data.rows && response.data.rows.length > 0) {
              this.cusInfo = response.data.rows[0]
            }
          }
        })
        resolve()
      })
    },
    // 获取客户信息
    getCusInfos() {
      return new Promise(resolve => {
        const params = {
          key: this.callinNum // 否	string	模糊查询（姓名，手机号码，固话）
        }
        // getCusUserLists(params).then(response => {
        //   if (response.state.toLowerCase() === 'success') {
        //     const dataLists = response.data.rows
        //     if (dataLists && dataLists.length > 0) {
        //       this.isShowCusInfo = true
        //       this.cusInfo = {// 客户信息
        //         cusname: dataLists[0].name,
        //         cussex: dataLists[0].sex,
        //         custel: dataLists[0].telephone,
        //         cusmobile: dataLists[0].mobilephone,
        //         cusprovince: dataLists[0].provincename,
        //         cuscity: dataLists[0].cityname,
        //         cusaddress: dataLists[0].address,
        //         cusQQ: dataLists[0].qq,
        //         cusemail: dataLists[0].email,
        //         cuscompany: dataLists[0].companyname,
        //         cuscompanytel: dataLists[0].companyphone,
        //         cuscompanyposition: dataLists[0].companyposition
        //       }
        //     } else {
        //       this.isShowCusInfo = false
        //     }
        //   }
        // })
        resolve()
      })
    },
    // 获取通话记录
    getCallRecord() {
      this.loading0 = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParams0.pageindex, // 第几页
          pagesize: this.pageParams0.pagesize, // 每页几条信息
          keyword: this.callinNum //	否	string	模糊查询（呼叫号码）
        }
        getCallRecords(params).then(response => {
          this.loading0 = false
          if (response.state.toLowerCase() === 'success') {
            this.recordpath = response.data.recordpath
            this.pageParams0.total = response.data.total
            this.dataLists0 = response.data.rows
          }
        })
        resolve()
      })
    },
    // 播放录音
    playSound(rec_file, artist) {
      this.$layer.iframe({
        content: {
          content: audioPlayer, // 传递的组件对象
          parent: this, // 当前的vue对象
          data: { 'recFiles': this.recordpath + rec_file, 'artists': artist.toString() }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
        },
        area: ['600px', '230px'],
        shadeClose: true,
        title: '录音详情'
      })
    },
    // 获取工单记录
    getOrderRecord() {
      this.loading = true
      return new Promise(resolve => {
        const params = {
          pageindex: this.pageParams1.pageindex, // int 第几页
          pagesize: this.pageParams1.pagesize, // int 每页几条信息
          phone: this.callinNum //	否	string	模糊查询（号码）
          // stime: this.searchDate && this.searchDate[0],//开始时间
          // etime: this.searchDate && this.searchDate[1],//结束时间
          // ordercode: this.sc_ordercode, //	否	string	模糊查询（工单编号）
          // province: this.provinceCity && this.provinceCity[0], //	否	string	省code
          // citycode: this.provinceCity && this.provinceCity[1], //	否	string	市code
          // sourceid: this.sc_source, //	否	string	来源id
          // typeid: this.sc_type, //	否	string	类型id
        }
        getOrderLists(params).then(response => {
          this.loading = false
          if (response.state.toLowerCase() === 'success') {
            this.pageParams1.total = response.data.total
            this.dataLists1 = response.data.rows
          }
        })
        resolve()
      })
    },
    // btn_orderDetail(editId) {
    //   this.$layer.iframe({
    //     content: {
    //       content: detailOrder, // 传递的组件对象
    //       parent: this, // 当前的vue对象
    //       data: { 'rowid': editId }// props
    //     },
    //     area: ['80%', '90%'],
    //     title: '工单详情'
    //   })
    // },
    // btn_orderAdd() {
    //   this.$layer.iframe({
    //     content: {
    //       content: addOrder, // 传递的组件对象
    //       parent: this, // 当前的vue对象
    //       data: { 'rowid': '', 'callid': this.callinCallid }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
    //     },
    //     area: ['80%', '90%'],
    //     title: '创建工单'
    //   })
    // },
    // btn_customerAdd() {
    //   this.$layer.iframe({
    //     content: {
    //       content: addCustomer, // 传递的组件对象
    //       parent: this, // 当前的vue对象
    //       data: { 'rowid': '', 'isCallin': true }// props//该方法会自动添加一个key为layerid的值， 该值为创建层的id， 可以直接使用
    //     },
    //     area: ['60%', '90%'],
    //     title: '创建客户资料'
    //   })
    // },
    // tab 切换
    handleClick(tab, event) {
      // console.log(tab.name, event);
      if (tab.name === 'first') {
        this.getCallRecord()
      } else if (tab.name === 'second') {
        this.getOrderRecord()
      }
    },
    // 加入黑名单
    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',
        '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 .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;
			}

			.callinuser {
				background: url(../../assets/imgs/callinuser.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>
