<template>
  <div id="tableBody" class="system-list">
    <!--通讯录列表-->
    <el-button type="primary" round @click="goBack">返回</el-button>
    <el-table
      :data="records"
      style="width: 100%">
      <el-table-column type="index" width="60"></el-table-column>
      <el-table-column prop="linker" sortable label="联系人"></el-table-column>
      <el-table-column prop="linkPhone" sortable label="联系方式"></el-table-column>

      <el-table-column prop="callCount" sortable label="通话次数"></el-table-column>
      <!--添加拨打电话-->
      <el-table-column
        align="center"
        width="240"
        label="操作">
        <template slot-scope="scope">
          <el-row>
            <el-button
              size="mini"
              type="success"
              @click="MakeCall(scope.row)">拨号
            </el-button>
          </el-row>
        </template>
      </el-table-column>
    </el-table>

    <!--呼叫状态弹框-->
    <el-dialog
      title="状态变更"
      center
      top="15%"
      :close-on-click-modal="false"
      :show-close="true"
      :visible.sync="dialogState"
      width="380px"
    >
      <!--  <el-row type="flex">
          <el-col :span="6"><span>当前状态：</span></el-col>
          <el-col :span="18">
            <el-link type="primary" :underline="false">正在拨号</el-link>
            <el-link type="success" :underline="false">通话中</el-link>
            <el-link type="danger"  :underline="false">空闲 | 挂断</el-link>
            <el-link type="default" :underline="false">静音</el-link>
          </el-col>
        </el-row>-->
      <span slot="footer">
        <el-button
          size="mini"
          type="info"
          @click="SetMute">{{muteText}}
        </el-button>
        <el-button
          size="mini"
          type="danger"
          @click="HandUp"> 挂断
        </el-button>
      </span>
    </el-dialog>
  </div>
</template>

<script>
  export default {
    data () {
      return {
        // 客户编号
        clientNo: null,
        linkerType: "TopCells", // TopCells XmLinkerList XmLinkerTopCells
        dialogState: false,
        client: {},
        records: [],
        mute: false,
        muteText:"置忙"
      }
    },
    created () {
      const {clientNo, linkerType} = this.$route.query;
      this.initLinkerList(clientNo, linkerType);
    },
    mounted () {

      console.log(window.CallServer);

      this.$nextTick(() => {
        const bg = localStorage.getItem('bg')
        document.getElementById('tableBody').style.background = 'url("' + bg + '") 0 0 repeat';
      });

    },
    methods: {
      // 请求数据
      initLinkerList (clientNo, linkerType) {
        let url = `/clientLinker/getList/${clientNo}`
        switch (linkerType) {
          case "TopCells":
            url = `/clientLinker/getTopCells/${clientNo}`
            break;
          case "XmLinkerList":
            url = `/clientLinker/getXmList/${clientNo}`
            break;
          case "XmLinkerTopCells":
            url = `/clientLinker/getXmTopCells/${clientNo}`
            break;
        }

        this.$$get(url)
          .then(res => {
            if (res.data.code < 1) {
              throw res.data.msg
            }
            this.records = res.data.data.linkerInfos;

            var array = []
            this.records.forEach((item, index) => {
                if(res.data.data.hidePhone == 1){  // 0是不脱敏  1是脱敏
                    var linkPhone =  item.linkPhone.substring(0,3) + '****' + item.linkPhone.substring( item.linkPhone.length-4);
                }else{
                  var linkPhone = item.linkPhone;
                }
                var linkPhoneTrue =  item.linkPhone;
                array[index] = {
                  linkPhone: linkPhone, 
                  linker: item.linker,
                  linkerType: item.linkerType,
                  clientNo: item.clientNo,
                  callCount: item.callCount,
                  gmtCreated: item.gmtCreated,
                  gmtModified: item.gmtModified,
                  lastModifier: item.lastModifier,
                  creator: item.creator,
                  memo: item.memo,
                  linkPhoneMm: linkPhoneTrue,
                }
                this.records = array;
            })

          })
          .catch(err => this.$$msg.err(err))

      },

      
      //返回
      goBack() {
        var backRule = '';
        if(this.$route.query.pageType=='yuqi'){
            backRule = '/byh/collect/ByhLoanCollectList';
        }else if(this.$route.query.pageType=='all'){
            backRule = '/byh/ByhPlanRemindList';
        }else{
            backRule = '/byh/ByhPlanRemindListNew';
        }
          this.$router.push({
              path: backRule,
              query: {
                  flag: true,
                  clientNo: this.$route.query.clientNo,
                  linkerType: this.$route.query.linkerType,
                  status: this.$route.query.status,
                  current: this.$route.query.current,
                  planDateStart: this.$route.query.planDateStart,
                  planDateEnd: this.$route.query.planDateEnd,
              }
          })
      },

      //拨打电话
      MakeCall (params) {
        const {linkPhoneMm} = params;
        if (window.CallServer !== null) {
          window.CallServer.MakeCall(linkPhoneMm)
        } else {
          this.$message.error("请先签入话机");
        }
      },
      // 挂断
      HandUp () {
        window.CallServer.Hangup();
        this.dialogState = false;
      },
      // 静音
      SetMute () {
        if (!this.mute) {
          this.muteText = "取消"
          CallServer.SetInGroup(true);
        } else {
          this.muteText = "置忙"
          CallServer.SetInGroup(false);
        }
      },
      /** 关闭处理 */
      handleClose () {
        this.visible = false
        setTimeout(() => {
          this.$emit('update:dialogVisible', false)
        }, 100)
      },
      cellFormat: function (row, column) {
        var cellFormat = row[column]
        return cellFormat.substring(0, 3) + '-' + cellFormat.substring(3, 7) + '-' + cellFormat.substring(7, 11)
      },

    }
  }
</script>

<style scoped>

</style>
