<template>
  <div class="contradiction-div">
    <div class="search-div">
      <div style="width:90%;float: left;">
        <Row>
          <Col span="6">
            <span>所属市州：</span>
            <Select style="width: 70%;" v-model="searchInfo.status">
                <Option value="">全部</Option>
                <Option value="1">已办结</Option>
                <Option value="2">处理中 </Option>
            </Select>
          </Col>
          <Col span="6">
            <span>在线状态：</span>
            <Select style="width: 70%;" v-model="searchInfo.is_point_event" :clearable="true">
                <Option value="1">是</Option>
                <Option value="2">否 </Option>
            </Select>
          </Col>
          <Col span="2" offset="8">
            <Button type="primary" @click="getUserIdData">搜索</Button>
          </Col>
           <Col span="2">
            <Button type="primary" @click="resert">重置</Button>
          </Col>
        </Row>
      </div>
    </div>
    <Table stripe :columns="columns1" :data="userList">
      <template slot-scope="{ row, index }" slot="link">
        <Icon @click="initiateVideo(row)" type="md-videocam" style="font-size:20px;cursor:pointer;" />
      </template>
      <template slot-scope="{ row, index }" slot="voice">
        <Icon @click="initiateVoice(row)" type="ios-mic" style="font-size:20px;cursor:pointer;" />
      </template>
    </Table>
    <im-video :user-id="userId" :token="token" ref="imVideo"></im-video>
  </div>
</template>
<script>
import { getImToken, selectUserAppIdList, getUserAppidByCode } from '@/api/contradiction.js'
export default {
  name: 'register',
  data () {
    return {
      clientId: '',
      userList: [],
      userId: '',
      token: '',
      searchInfo: {},
      columns1: [
        { type: 'index', title: '序号', align: 'center', width: '80px' },
        { title: '联系人', key: 'name', align: 'center' },
        { title: '视频通话', slot: 'link', align: 'center' },
        { title: '语音通话', slot: 'voice', align: 'center' }
      ]
    }
  },
  mounted () {
    this.clientId = this.$refs.imVideo.getClientId()
    this.getUserIdData()
    this.getLoginUserUsetId()
  },
  methods: {
    resert () {
      this.searchInfo.status = ''
      this.searchInfo.is_point_event = ''
      this.getUserIdData()
    },
    getLoginUserUsetId () {
      getUserAppidByCode().then(res => {
        if (res.data.errcode === 0) {
          this.userId = res.data.data.userId
          this.getTokenData(res.data.data.userId)
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getTokenData (userId) {
      getImToken({ userId: userId, clientId: this.clientId }).then(res => {
        if (res.data.errcode === 0) {
          console.log(res.data.data.data, 'tokeeeee')
          this.token = res.data.data.data.userInfo.token
          setTimeout(() => {
            this.$refs.imVideo.onConnectImServer()
          }, 1500)
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    getUserIdData () {
      selectUserAppIdList().then(res => {
        if (res.data.errcode === 0) {
          this.userList = res.data.data
          return
        }
        this.$Message.error(res.data.errmsg)
      })
    },
    initiateVideo (item) { // 发起视频
      // 视频聊天
      this.$refs.imVideo.audioCall(item.userId)
    },
    initiateVoice (item) { // 单纯的语音通话
      this.$refs.imVideo.audioOnlyCall(item.userId)
    }
  },
  computed: {}
}
</script>
<style scoped lang="less">
  .contradiction-div {
    padding: 10px;
    .search-div {
      float: left;
      width: 100%;
      padding: 15px 30px 15px 15px;
      // min-height: 200px;
      border: 1px solid skyblue;
      border-radius: 5px;;
      background-color: #f6fdfd;
      margin-bottom: 15px;
    }
  }
  .mb10 {
    margin-bottom: 10px;
  }
  .mt8 {
    margin-top: 8px;
  }
  .mr15 {
    margin-right: 15px;
  }
  .mr5 {
    margin-right: 5px;
  }
  .page_style {
    margin-top: 10px;
    text-align: right;
  }
  .flex-div {
    display: flex;
    flex-direction: row;
    justify-content: center;
    align-items: center;
  }
  .circle-div1 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: green;
  }
  .circle-div2 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: orange;
  }
  .circle-div3 {
    width: 10px;
    height: 10px;
    border-radius: 5px;
    background-color: red;
  }
  .show-more {
    margin-top: 5px;
    cursor: pointer;
  }
  /deep/ .ivu-input[disabled] {
    color: #515a6e;
  }
  /deep/ .ivu-form-label-top .ivu-form-item-label {
    font-size: 16px;;
  }
</style>
