<template>
  <div>
    <el-dialog
      class="common-dialog"
      title="通讯录1"
      :close-on-click-modal="true"
      :visible.sync="dialogVisible"
      width="50%"
      :before-close="handleClose">

      <div id="tableBody" class="content-table">
        <el-table
          height="550"
          :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="100"
            label="操作">
            <template slot-scope="scope">
              <el-button
                size="mini"
                type="success"
                @click="MakeCall(scope.row)">拨号
              </el-button>
            </template>
          </el-table-column>
          -->
        </el-table>
      </div>

      <div slot="footer">
        <el-button @click="handleClose">关 闭</el-button>
      </div>

    </el-dialog>


    <!--呼叫状态弹框-->
    <el-dialog
      title="话机状态"
      center
      top="15%"
      @close="dialogState=false"
      :close-on-click-modal="false"
      :show-close="true"
      :visible.sync="dialogState"
      width="300px"
      :before-close="handleClose">
      <el-row type="flex">
        <el-col :span="8"><span>当前状态：</span></el-col>
        <el-col :span="16"><el-link type="primary" :underline="false">通话中...</el-link></el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="8"><span>当前状态：</span></el-col>
        <el-col :span="16"><el-link type="success" :underline="false">空闲</el-link></el-col>
      </el-row>
      <el-row type="flex">
        <el-col :span="8"><span>当前状态：</span></el-col>
        <el-col :span="16"><el-link type="danger" :underline="false">已挂机</el-link></el-col>
      </el-row>
    </el-dialog>
  </div>

</template>

<script>

  export default {
    name: 'LinkersDialog',
    props: {
      dialogVisible: {
        type: Boolean
      },
      linkerType: {
        type: String,
      },
      clientNo: {
        type: String
      },

    },
    data () {
      return {
        dialogState: false,

        client: {},
        records: [],
      }
    },
    mounted: function () {
      var url = `/clientLinker/getList/${this.clientNo}`
      if (this.linkerType == 'TopCells') {
        url = `/clientLinker/getTopCells/${this.clientNo}`
      }
      if (this.linkerType == 'XmLinkerList') {
        url = `/clientLinker/getXmList/${this.clientNo}`
      }
      if (this.linkerType == 'XmLinkerTopCells') {
        url = `/clientLinker/getXmTopCells/${this.clientNo}`
      }

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

          console.log(this.records, '通讯录');
        })
        .catch(err => this.$$msg.err(err))

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

    },
    methods: {
      //拨打电话
      MakeCall (params) {
        this.dialogState = true;
        console.log(params, '参数内容');
      },
      /** 关闭处理 */
      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 lang="stylus">

  .contact-list table th {
    color: #64656f;
    text-align: center;
    font-size: 16px;
  }

  .contact-list table td {
    color: #64656f;
    text-align: center;
    font-size: 16px;
  }

  .content-table {
    height 550px;
    overflow auto;
    border-top: 1px solid #EBEEF5;
  }

  /*表格*/
  .el-table, .el-table__expanded-cell {
    background transparent;
  }

  .el-table__row {
    background-color transparent !important;
  }

  .el-table th, .el-table tr {
    background-color transparent !important;
  }

  .el-table--striped .el-table__body tr.el-table__row--striped td {
    background transparent;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background transparent;
  }

  .el-table--enable-row-hover .el-table__body tr:hover > td {
    background transparent
  }
</style>





