<template>
  <div ref="seatMonitor" class="seat_monitor app-container">
    <el-row :gutter="10">
      <el-col :lg="18" class="real_time_statistics">
        <el-card shadow="hover">
          <h3 class="seat_monitor_title">实时统计</h3>
          <div class="clearfix">
            <el-col :md="4" class="seat_sts_col">
              <div class="seat_sts_items">
                <count-to :start-val="0" :end-val="count.totalCount" :duration="2600" class="seat_total_count total_count_color"/>
                <p class="seat_state_sts">全部坐席</p>
              </div>
            </el-col>
            <el-col :md="3" class="seat_sts_col">
              <div class="seat_sts_items">
                <count-to :start-val="0" :end-val="count.onlineCount" :duration="2600" class="seat_total_count online_count_color"/>
                <p class="seat_state_sts">在线</p>
              </div>
            </el-col>
            <el-col :md="3" class="seat_sts_col">
              <div class="seat_sts_items">
                <count-to :start-val="0" :end-val="count.offlineCount" :duration="2600" class="seat_total_count outline_count_color"/>
                <p class="seat_state_sts">离线</p>
              </div>
            </el-col>
            <el-col :md="4" class="seat_sts_col">
              <div class="seat_sts_items">
                <count-to :start-val="0" :end-val="count.freeCount" :duration="2600" class="seat_total_count free_count_color"/>
                <p class="seat_state_sts">空闲</p>
              </div>
            </el-col>
            <el-col :md="4" class="seat_sts_col">
              <div class="seat_sts_items">
                <count-to :start-val="0" :end-val="count.callingCount" :duration="2600" class="seat_total_count calling_count_color"/>
                <p class="seat_state_sts">通话中</p>
              </div>
            </el-col>
            <el-col :md="3" class="seat_sts_col">
              <div class="seat_sts_items">
                <count-to :start-val="0" :end-val="count.busyCount" :duration="2600" class="seat_total_count callbusy_count_color"/>
                <p class="seat_state_sts">忙碌</p>
              </div>
            </el-col>
            <el-col :md="3" class="seat_sts_col">
              <div class="seat_sts_items">
                <count-to :start-val="0" :end-val="count.afterCallCount" :duration="2600" class="seat_total_count callafter_count_color"/>
                <p class="seat_state_sts">话后处理</p>
              </div>
            </el-col>
          </div>
        </el-card>
      </el-col>
      <el-col :lg="6" class="state_description">
        <el-card shadow="hover" class="clearfix">
          <div slot="header" class="state_des_title">
            <span>状态说明</span>
          </div>
          <div class="clearfix">
            <el-col :xl="8" :lg="12" :md="8" :sm="8" :xs="12" class="state_col">
              <i class="state_icon state_icon_color1"/>已签入
            </el-col>
            <el-col :xl="8" :lg="12" :md="8" :sm="8" :xs="12" class="state_col">
              <i class="state_icon state_icon_color2"/>离线
            </el-col>
            <el-col :xl="8" :lg="12" :md="8" :sm="8" :xs="12" class="state_col">
              <i class="state_icon state_icon_color3"/>未知
            </el-col>
            <el-col :xl="8" :lg="12" :md="8" :sm="8" :xs="12" class="state_col">
              <i class="state_icon state_icon_color4"/>空闲
            </el-col>
            <el-col :xl="8" :lg="12" :md="8" :sm="8" :xs="12" class="state_col">
              <i class="state_icon state_icon_color5"/>小休
            </el-col>
            <el-col :xl="8" :lg="12" :md="8" :sm="8" :xs="12" class="state_col">
              <i class="state_icon state_icon_color6"/>通话中
            </el-col>
            <el-col :xl="8" :lg="12" :md="8" :sm="8" :xs="12" class="state_col">
              <i class="state_icon state_icon_color7"/>被请求
            </el-col>
            <el-col :xl="8" :lg="12" :md="8" :sm="8" :xs="12" class="state_col">
              <i class="state_icon state_icon_color8"/>话后处理
            </el-col>
          </div>
        </el-card>
      </el-col>
      <!-- 全部坐席 列表展示 -->
      <el-col :lg="24">
        <el-card shadow="hover" class="tab_card">
          <el-button v-show="!isStartMonitor" type="primary" plain class="monitor_btn" @click="startMonitor">开始监控</el-button>
          <el-button v-show="isStartMonitor" type="primary" plain class="monitor_btn" @click="cancelMonitor">取消监控</el-button>
          <el-tabs v-model="activeName">
            <el-tab-pane label="全部坐席" name="first">
              <div class="tab_body seat_card">
                <el-row :gutter="10" class="clearfix">
                  <el-col v-for="item in seatCardLists" :xl="4" :lg="6" :md="8" :sm="12" :key="item.id" :class="{seat_card_item: !isStartMonitor}" class="seat_cards">
                    <div class="seat_col" @click="oparateBtnShow(item)">
                      <el-col :md="10" :sm="10" :xs="10" class="text_center">
                        <img :src="item.head_small_img" alt="头像" class="seat_avatar">
                        <p :class="item.seat_state | seatStateClassFilter" class="seat_state">{{ item.seat_state | seatStateFilter }}</p>
                      </el-col>
                      <el-col :md="14" :sm="14" :xs="14" class="seat_detail_right">
                        <h5>{{ item.username }}</h5>
                        <p>工号：{{ item.usercode }}</p>
                        <p>分机号：{{ item.seat_ext }}</p>
                        <p v-show="item.isCalling">
                          <b :class="[{call_out: item.isCallout, call_in: !item.isCallout }]" class="call_direction">{{ item.call_type }}</b>
                          <span class="call_num">{{ item.call_num }}</span>
                        </p>
                        <svg-icon v-show="item.isListen" icon-class="weibiaoti3" class="seat_listen el-icon-view" />
                      </el-col>
                    </div>
                    <ul v-show="item.visible && ((item.seat_state === 5 && item.ext_state === 1)|| (item.seat_state === 3 && item.ext_state === 6) || (item.seat_state === 2 && item.ext_state === 5))" class="oparate_btn_lists">
                      <li v-show="item.seat_state === 5 && item.ext_state === 1" class="oparate_btn" @click="oparateSeats(item, 'ForceAgentState')"><svg-icon class="oparate_icon" icon-class="icon-test" />置闲</li>
                      <li v-show="item.seat_state === 3 && item.ext_state === 6" class="oparate_btn" @click="oparateSeats(item, 'Listen')"><svg-icon class="oparate_icon" icon-class="erji" />监听</li>
                      <li v-show="item.seat_state === 2 && item.ext_state === 5" class="oparate_btn" @click="oparateSeats(item, 'Instead')"><svg-icon class="oparate_icon" icon-class="zhuanjie" />代接</li>
                      <li v-show="item.seat_state === 3 && item.ext_state === 6" class="oparate_btn oparate_divider" @click="oparateSeats(item, 'Insert')"><svg-icon class="oparate_icon" icon-class="qiangzhixiaxian" />强插</li>
                      <li v-show="item.seat_state === 3 && item.ext_state === 6" class="oparate_btn" @click="oparateSeats(item, 'Intercept')"><svg-icon class="oparate_icon" icon-class="saoraolanjie" />拦截</li>
                      <li v-show="item.seat_state === 3 && item.ext_state === 6" class="oparate_btn" @click="oparateSeats(item, 'Break')"><svg-icon class="oparate_icon" icon-class="chexiaochaifen" />强拆</li>
                    </ul>
                  </el-col>
                </el-row>
              </div>
            </el-tab-pane>
            <el-tab-pane label="列表展示" name="second">
              <div class="tab_body tab_table">
                <el-table :data="dataLists" border stripe>
                  <el-table-column type="index" label="编号" align="center" fixed width="80"/>
                  <el-table-column prop="username" label="坐席姓名" align="center" min-width=""/>
                  <el-table-column prop="usercode" label="坐席工号" align="center" min-width=""/>
                  <el-table-column prop="seat_ext" label="分机号" align="center" min-width=""/>
                  <el-table-column prop="agent_ip" label="坐席IP" align="center" min-width="120"/>
                  <el-table-column label="坐席组" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ groupFilter(scope.row.group_id) }}
                    </template>
                  </el-table-column>
                  <el-table-column prop="agent_type" label="坐席类型" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ scope.row.agent_type | agentTypeFilter }}
                    </template>
                  </el-table-column>
                  <el-table-column label="签入时间" align="center" min-width="150">
                    <template slot-scope="scope">
                      <i v-show="scope.row.time_login" class="el-icon-time"/>
                      <span>{{ scope.row.time_login | timestampToTime }}</span>
                    </template>
                  </el-table-column>
                  <el-table-column prop="login_times" label="签入时长" align="center" min-width=""/>
                  <el-table-column prop="free_times" label="空闲时长" align="center" min-width=""/>
                  <el-table-column prop="repose_times" label="休息时长" align="center" min-width=""/>
                  <el-table-column prop="talk_times" label="通话时长" align="center" min-width=""/>
                  <el-table-column prop="repose_num" label="休息次数" align="center" min-width=""/>
                  <el-table-column prop="answer_num" label="应答次数" align="center" min-width=""/>
                  <el-table-column prop="cur_state_times" label="当前状态时长" align="center" min-width="100"/>
                  <el-table-column label="坐席状态" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ scope.row.agent_state | seatStateFilter }}
                    </template>
                  </el-table-column>
                  <el-table-column label="分机状态" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ scope.row.ext_state | extStateFilter }}
                    </template>
                  </el-table-column>
                  <el-table-column label="被监听状态" align="center" min-width="">
                    <template slot-scope="scope">
                      {{ scope.row.mon_state | listenStateFilter }}
                    </template>
                  </el-table-column>
                </el-table>
              </div>
            </el-tab-pane>
          </el-tabs>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import CountTo from 'vue-count-to'
import { Send } from '@/utils/telWebsocket'
import { getSeatGroup } from '@/api/commonAPI'
import { getSeatLists, getSeatRealStates } from '@/api/telCall/seatMonitor'
import { mapGetters } from 'vuex'
import store from '@/store'
import { timestampToTime } from '@/utils'

export default {
  name: 'SeatMonitor',
  components: {
    CountTo
  },
  filters: {
    seatStateFilter(status) {
      const statusMap = {
        0x00: '未知',
        0x01: '已签入',
        0x02: '空闲',
        0x03: '通话中',
        0x04: '话后处理',
        0x05: '小休',
        0x06: '被请求',
        0x07: '离线'
      }
      return statusMap[status]
    },
    seatStateClassFilter(status) {
      const statusMap = {
        0x00: 'seat_state_color0',
        0x01: 'seat_state_color1',
        0x02: 'seat_state_color2',
        0x03: 'seat_state_color3',
        0x04: 'seat_state_color4',
        0x05: 'seat_state_color5',
        0x06: 'seat_state_color6',
        0x07: 'seat_state_color7'
      }
      return statusMap[status]
    },
    // 坐席类型
    agentTypeFilter(status) {
      const statusMap = {
        0: '班长坐席',
        1: '普通坐席'
      }
      return statusMap[status]
    },
    // 分机状态
    extStateFilter(status) {
      const statusMap = {
        0x00: '分机不可用',
        0x01: '空闲',
        0x02: '摘机等待拨号',
        0x03: '正在拨号',
        0x04: '呼出振铃',
        0x05: '来电振铃',
        0x06: '通话中',
        0x07: '播放忙音中',
        0x08: '移除IP分机',
        0x0100: '通话保持中'
      }
      return statusMap[status]
    },
    // 坐席监听状态
    listenStateFilter(status) {
      const statusMap = {
        0: '未被监听',
        1: '被监听中'
      }
      return statusMap[status]
    }
  },
  data() {
    return {
      seatRealSateTimer: null, // 定时器
      seatGroups: [], // 坐席组数据
      seatCardLists: [], // 坐席card列表数据
      postSeatsLists: [], // 请求数据
      dataLists: [], // 表格数据
      isStartMonitor: false, // 是否开始监控
      count: {
        totalCount: 0, // 全部坐席数量
        onlineCount: 0, // 在线数量
        offlineCount: 0, // 离线数量
        freeCount: 0, // 空闲数量
        callingCount: 0, // 通话中数量
        busyCount: 0, // 忙碌数量
        afterCallCount: 0 // 话后处理数量
      },
      activeName: 'first',
      scoketDatas: {} // 发送的 websocket数据
    }
  },
  computed: {
    ...mapGetters([
      'telIsLogin', // 是否签入
      'usercode', // 坐席工号
      'extension', // 分机号
      'telLineState', // 线路状态
      'telMonitor' // 监控操作是否成功
    ]),
    groupFilter() {
      return function(id) {
        for (let i = 0; i < this.seatGroups.length; i++) {
          if (this.seatGroups[i].id === id) {
            return this.seatGroups[i].name
          }
        }
      }
    }
  },
  watch: {
    // 如果 `telMonitor` 发生改变，这个函数就会运行
    telMonitor: function(newT, oldT) {
      if (newT) {
        this.monitorSeatState()
      }
    }
  },
  created() {
    this.getSeatGroupList()
      .then(() => {
        this.getLists()
      })
  },
  methods: {
    // 初始化 坐席card 和 表格 列表
    getLists() {
      getSeatLists().then(response => {
        if (response.state.toLowerCase() === 'success') {
          this.seatCardLists = []
          this.postSeatsLists = []
          this.dataLists = []
          if (response.data && response.data.length > 0) {
            this.count.totalCount = response.data.length // 全部坐席数量
            // 计算 实时状态的数量
            this.calculatCount()
            response.data.forEach((v, i) => {
              // 初始化 card 数据
              this.seatCardLists.push({
                id: v.id,
                head_small_img: !v.head_small_img ? '/static/img/user.png' : v.head_small_img,
                seat_state: 0x00, // 坐席状态
                ext_state: 0x00, // 线路状态
                username: v.username,
                usercode: v.usercode,
                seat_ext: '未知', // 分机号
                isListen: false, // 是否监听
                isCalling: false, // 是否通话中
                isCallout: null, // 是否是呼出(初始是这类 !isCallout 为false 的值)
                call_type: null, // 通话类型
                call_num: null, // 通话号码
                visible: false // 是否可以操作
              })
              // 初始化表格数据
              this.dataLists.push({
                id: v.id,
                username: v.username, // 姓名
                usercode: v.usercode, // 工号
                seat_ext: '未知', // 分机号
                agent_ip: '未知', // 坐席IP
                group_id: v.group, // 坐席组
                agent_type: v.type, // 坐席类型
                time_login: 0, // 签入时间
                login_times: 0, // 签入时长
                free_times: 0, // 空闲时长
                repose_times: 0, // 休息时长
                talk_times: 0, // 通话时长
                repose_num: 0, // 休息次数
                answer_num: 0, // 应答次数
                cur_state_times: 0, // 当前状态时长
                agent_state: '未知', // 参考坐席状态值说明
                ext_state: '未知', // 参考分机状态值说明
                mon_state: '未知' // 1-被监听状态
              })
              // 拼接请求数据
              this.postSeatsLists.push({
                'group_id': v.group, // 坐席所在组ID
                'agent_id': Number(v.usercode) // 坐席ID
              })
            })
          }
        }
      })
    },
    // 开始监控
    startMonitor() {
      this.isStartMonitor = true // 是否开始监控
      this.monitorSeatState()
      if (this.seatRealSateTimer) {
        clearInterval(this.seatRealSateTimer) // 停止刷新数据
      }
      // this.refreshDatas(process.env.monitorPlatformTime) // 开始刷新数据
      this.refreshDatas(Number(this.$store.getters.serverConfig.monitorPlatformTime)) // 开始刷新数据
    },
    // 取消监控
    cancelMonitor() {
      this.isStartMonitor = false // 是否开始监控
      this.initCalCount() // 初始化 实时状态数量
      clearInterval(this.seatRealSateTimer) // 停止刷新数据
      this.getLists()
    },
    /**
			 * 刷新 数据
			 * @mTime 刷新间隔
			 * */
    refreshDatas(mTime) {
      const _self = this
      const objTime = {
        init: 0,
        time: function() {
          objTime.init += 1000
          // 当页面没有click、keydown、mousewheel 时；每间隔  mTime 刷新数据；
          if (objTime.init === mTime) {
            // console.count()
            _self.monitorSeatState()
            objTime.init = 0
          }
        },
        eventFun: function() {
          clearInterval(_self.seatRealSateTimer)
          objTime.init = 0
          if (_self.isStartMonitor) {
            _self.seatRealSateTimer = setInterval(objTime.time, 1000)
          }
        }
      }
      this.seatRealSateTimer = setInterval(objTime.time, 1000)
      const body = document.querySelector('html')
      body.addEventListener('click', objTime.eventFun)
      body.addEventListener('keydown', objTime.eventFun)
      body.addEventListener('mousewheel', objTime.eventFun)
    },
    // 监测坐席状态 坐席实时状态
    monitorSeatState() {
      store.dispatch('ChangeMonitor', false)// 修改监听操作的返回值
      this.isStartMonitor = true // 是否开始监控
      const rData = {
        // 'posturl': process.env.callcenter_acd_url + 'v1/acd/AgentlMgr/state', // （请求的连接）
        // 'posturl': this.$store.getters.serverConfig.callcenter_acd_url + 'v1/acd/AgentlMgr/state', // （请求的连接）
        'paramcode': 'ACD_URL', // 是	string	对应的基础数据中的编号，如CTI_URL，ACD_URL
        'postobj': JSON.stringify(this.postSeatsLists) // （json数据）
      }
      getSeatRealStates(rData).then(response => {
        if (response.state.toLowerCase() === 'success') {
          if (response.state.toLowerCase() === 'success') {
            if (response.data.data && response.data.data.length > 0) {
              this.count.totalCount = response.data.data.length // 全部坐席数量
              this.initCalCount() // 初始化 实时状态数量
              // 同步 card 数据
              this.seatCardLists.forEach((m, k) => {
                response.data.data.forEach((v, i) => {
                  if (Number(m.usercode) === v.agent_id) {
                    // 更新 card 视图
                    this.getCardList(m, v)
                    // 计算 实时状态的数量
                    this.calculatCount(v.agent_state)
                    return
                  }
                })
              })
              // 同步表格数据
              this.dataLists.forEach((m, k) => {
                response.data.data.forEach((v, i) => {
                  if (Number(m.usercode) === v.agent_id) {
                    // 同步表格数据
                    this.getDataList(m, v)
                    return
                  }
                })
              })
            }
          }
        }
      })
    },
    /**
			 * 监测 坐席通话关联状态
			 * agent_id  坐席ID
			 * ext_id    分机ID
			 * m 当前坐席数据
			 */
    getSeatsCallStates(agent_id, ext_id, m) {
      const postCallJson = [{
        'agent_id': agent_id,
        'ext_id': ext_id
      }]
      const rData = {
        // 'posturl': process.env.callcenter_cti_url + 'v1/cti/AgentlMgr/assoc/info', // （请求的连接）
        // 'posturl': this.$store.getters.serverConfig.callcenter_cti_url + 'v1/cti/AgentlMgr/assoc/info', // （请求的连接）
        'paramcode': 'CTI_URL', // 是	string	对应的基础数据中的编号，如CTI_URL，ACD_URL
        'postobj': JSON.stringify(postCallJson) // （json数据）
      }
      getSeatRealStates(rData).then(response => {
        if (response.state.toLowerCase() === 'success') {
          if (response.state.toLowerCase() === 'success') {
            m.isCalling = true
            const data = response.data.data
            if (data && data.length > 0) {
              if (data[0].caller_flag === 1) { // 1-是主叫
                if (data[0].callee) {
                  m.isCallout = true
                  m.call_type = '去'
                  m.call_num = data[0].callee
                }
              } else {
                if (data[0].caller) {
                  m.isCallout = false
                  m.call_type = '来'
                  m.call_num = data[0].caller
                }
              }
            }
          }
        }
      })
    },
    /**
			 * 获取 card表格数据
			 * @m 当前坐席数据
			 * @v 获取的数据
			 */
    getCardList(m, v) {
      if (Number(m.usercode) === v.agent_id) {
        m.ext_state = v.ext_state // 线路状态
        m.seat_state = v.agent_state // 坐席状态
        m.seat_ext = v.extid === 0 ? '未知' : v.extid
        // 通话中,获取电话号码
        if (v.agent_state === 3) {
          // 同步坐席状态
          this.getSeatsCallStates(v.agent_id, v.extid, m)
        } else {
          m.isCalling = false
        }
        // console.log('被监听状态:.............' + v.mon_state);
        // 被监听状态
        if (v.mon_state === 1) {
          m.isListen = true
        } else {
          m.isListen = false
        }
      }
    },
    /**
			 * 获取表格数据
			 * @m 当前坐席数据
			 * @v 获取的数据
			 */
    getDataList(m, v) {
      m.seat_ext = v.extid === 0 ? '未知' : v.extid // 分机号
      m.agent_ip = v.agent_ip === '' ? '未知' : v.agent_ip // 坐席IP
      m.group_id = v.group_id // 坐席组
      m.agent_type = v.agent_type // 坐席类型
      m.time_login = v.time_login // 签入时间
      m.login_times = v.login_times // 签入时长
      m.free_times = v.free_times // 空闲时长
      m.repose_times = v.repose_times // 休息时长
      m.talk_times = v.talk_times // 通话时长
      m.repose_num = v.repose_num // 休息次数
      m.answer_num = v.answer_num // 应答次数
      m.cur_state_times = v.cur_state_times // 当前状态时长
      m.agent_state = v.agent_state // 参考坐席状态值说明
      m.ext_state = v.ext_state // 参考分机状态值说明
      m.mon_state = v.mon_state // 1-被监听状态
    },
    // 初始化 实时状态数量
    initCalCount() {
      this.count.offlineCount = 0 // 离线数量
      this.count.freeCount = 0 // 空闲数量
      this.count.callingCount = 0 // 通话中数量
      this.count.afterCallCount = 0 // 话后处理
      this.count.busyCount = 0
      this.count.onlineCount = 0
    },
    // 计算 实时状态的数量
    calculatCount(stateCode) {
      switch (stateCode) {
        case 0x07:
          this.count.offlineCount++ // 离线数量
          break
        case 0x02:
          this.count.freeCount++ // 空闲数量
          break
        case 0x03:
          this.count.callingCount++ // 通话中数量
          break
        case 0x04:
          this.count.afterCallCount++ // 话后处理
          break
        case 0x05: // 小休
          this.count.busyCount++
          break
        default:
          break
      }
      this.count.onlineCount = this.count.freeCount + this.count.callingCount + this.count.afterCallCount + this.count.busyCount // 在线数量
    },

    // 获取坐席组数据
    getSeatGroupList() {
      return new Promise(resolve => {
        getSeatGroup().then(response => {
          if (response.state.toLowerCase() === 'success') {
            const res = response.data
            if (res && res.length > 0) {
              for (let i = 0; i < res.length; i++) {
                this.seatGroups.push({
                  id: res[i].id,
                  name: res[i].zxzname
                })
              }
            }
          }
        })
        resolve()
      })
    },

    // 操作坐席
    oparateBtnShow(item) {
      if (!this.isStartMonitor) {
        this.$message.warning('您还没有开始监测,请点击开始监测后再操作!')
        return
      }

      if (!this.telIsLogin) {
        this.$message.warning('您还没有签入,请签入后再操作!')
        return
      }

      if (item.usercode === this.usercode) {
        this.$message.warning('您不能在坐席监控中对自己进行操作!')
        return
      }
      if (this.telLineState === 6) {
        this.$message.warning('您当前在通话中不能对坐席进行操作!')
        return
      }
      if ((item.seat_state === 5 && item.ext_state === 1) ||
					(item.seat_state === 3 && item.ext_state === 6) ||
					(item.seat_state === 2 && item.ext_state === 5)) {
        item.visible = !item.visible
        this.seatCardLists.forEach((v, i) => {
          if (item.id !== v.id) {
            v.visible = false
          }
        })
      } else {
        this.$message.warning('当前坐席无需操作!')
      }
    },

    // 置闲 监听 代接 强插 拦截 强拆
    oparateSeats(item, angenttype) {
      this.scoketDatas = {
        'AgentID': this.usercode,
        'AgentExten': this.extension,
        'Type': angenttype,
        'TargetAgentID': item.usercode // 目标座席工号
      }
      Send(this.scoketDatas)
      item.visible = !item.visible
    }
  },
  beforeRouteLeave(to, from, next) {
    // 导航离开该组件的对应路由时调用
    // 可以访问组件实例 `this`
    if (this.isStartMonitor) {
      this.cancelMonitor()
    }
    next()
  }
}

</script>

<style rel="stylesheet/scss" lang="scss">
	.seat_monitor{
		.el-col{
			margin-bottom: 20px;
		}
		.state_description{
			.el-card__header{
				background-color: #f5f5f6;
				height: 40px;
				line-height: 40px;
				padding: 0 15px;
				margin: 0;
				font-size: 14px;
				color: #666666;
			}
		}
		.tab_card {
			.el-card__body{
				padding: 0;
				.el-tabs__content{
					overflow: inherit;
				}
			}
			.el-tabs__header{
				padding: 0px 20px;
				background-color: #F5F5F6;
				.el-tabs__item{
					font-size: 14px;
					height: 40px;
					line-height: 40px;
				}
			}
		}
	}

</style>

<style rel="stylesheet/scss" lang="scss" scoped>
	.seat_monitor{
		.real_time_statistics{
			.seat_monitor_title{
				font-size: 14px;
				color: #333;
				margin-top: 0;
				margin-bottom: 16px;
				font-weight: normal;
				padding-left: 7.5px;
			}
			.seat_sts_col{
				height: 100px;
				text-align: center;
				.seat_sts_items {
					background-color: #F5F5F6;
					width: 100%;
					height: 100%;
				}
				.seat_total_count {
					font-size: 24px;
					padding-top: 18px;
					line-height: 34px;
					margin: 0;
					display: inline-block;
				}
				.seat_state_sts {
					padding-top: 12px;
					font-size: 12px;
					margin: 0;
					color: #333333;
				}
			}

		}

		.state_description{
			.state_col {
				font-size: 14px;
				color: #333744;
				margin-bottom: 21px;
				.state_icon{
					display: inline-block;
					width: 16px;
					height: 16px;
					margin-right: 12px;
					vertical-align: text-bottom;
				}
			}

		}

		.tab_card{
			position: relative;
			overflow: inherit;
			.monitor_btn{
				position: absolute;
				right: 30px;
				top: 4px;
				z-index: 2;
			}
		}

		.seat_card {
			padding: 10px 20px 0 20px;
			.seat_cards{
				position: relative;
			}
			.seat_card_item{
				color: #bebebe;
			}
			.seat_col{
				width: 100%;
				border: 1px solid #e1e6eb;
				border-radius: 2px;
				font-size: 12px;
				height: 136px;
				overflow: hidden;
				cursor: pointer;
				transition: all 0.38s ease-out;
				&:hover {
					border-color: #409eff;
				}
				.seat_avatar {
					display: block;
					width: 80px;
					height: 80px;
					border-radius: 50%;
					margin: 15px auto 0 auto;
				}
				.seat_state{
					margin: 10px 0 0 0;
					padding: 0;
					text-align: center;
				}
				.seat_detail_right{
					position: relative;
				}
				.call_direction{
					display: inline-block;
					width: 22px;
					height: 22px;
					line-height: 22px;
					border-radius: 50%;
					text-align: center;
					color: #ffffff;
					vertical-align: baseline;
					margin-right: 5px;
				}
				.call_out{
					background-color: #409eff;
				}
				.call_in{
					background-color: #44af3d;
				}
				.call_num{
					font-size: 14px;
				}
				.seat_listen{
					position: absolute;
					right: 15px;
					top: 10px;
					color: #00c1de;
					font-size: 20px;
				}
			}
			.oparate_btn_lists{
				z-index: 1600;
				left: 80%;
				top: 40px;
				margin: 0;
				padding: 0;
				width: 100px;
				background: #fff;
				border: 1px solid #eee;
				position: absolute;
				list-style-type: none;
				border-radius: 4px;
				font-size: 12px;
				color: #676a6c;
				font-weight: 400;
				box-shadow: 2px 2px 3px 0 rgba(0, 0, 0, .3);
				.oparate_btn {
					margin: 0;
					padding: 0 15px;
					line-height: 36px;
					cursor: pointer;
					&:hover {
						background: #eee;
					}
					.oparate_icon{
						margin-right: 8px;
					}
				}
				.oparate_divider{
					border-bottom: 1px solid #E9E9E9;
				}
			}
		}

		.tab_table{
			padding: 0 20px 15px 20px;
		}
		.total_count_color{
			color: #30a8d8;
		}
		.online_count_color{
			color: #009900;
		}
		.outline_count_color{
			color: #666666;
		}
		.free_count_color{
			color: #1296db;
		}
		.calling_count_color{
			color: #d81e06;
		}
		.callafter_count_color{
			color: #f4bd2a;
		}
		.callbusy_count_color{
			color: #1297da;
		}

		.state_icon_color1{
			background-color: #3acaa6;
		}
		.state_icon_color2{
			background-color: #707070;
		}
		.state_icon_color3{
			background-color: #bebebe;
		}
		.state_icon_color4{
			background-color: #44af3d;
		}
		.state_icon_color5{
			background-color: #1297da;
		}
		.state_icon_color6{
			background-color: #d81e06;
		}
		.state_icon_color7{
			background-color: #fd7c78;
		}
		.state_icon_color8{
			background-color: #f8c11b;
		}

		.seat_state_color0{
			color: #bebebe;
		}
		.seat_state_color1{
			color: #3acaa6;
		}
		.seat_state_color2{
			color: #44af3d;
		}
		.seat_state_color3{
			color: #d81e06;
		}
		.seat_state_color4{
			color: #f8c11b;
		}
		.seat_state_color5{
			color: #1297da;
		}
		.seat_state_color6{
			color: #fd7c78;
		}
		.seat_state_color7{
			color: #707070;
		}

	}

</style>
