<template>
  <div class="box">
    <!-- <table>
      <tbody>
        <tr>
          <td>彭</td>
          <td>彭先生</td>
          <td>联系方式:15013224279</td>
          <td>地区:/</td>
        </tr>
        <tr>
          <td>彭</td>
          <td>彭先生</td>
          <td>联系方式:15013224279</td>
          <td>地区:/</td>
        </tr>
        <tr>
          <td>彭</td>
          <td>彭先生</td>
          <td>联系方式:15013224279</td>
          <td>地区:/</td>
        </tr>
        <tr>
          <td>彭</td>
          <td>彭先生</td>
          <td>联系方式:15013224279</td>
          <td>地区:/</td>
        </tr>
      </tbody>
    </table> -->
    <el-table
      :show-header="false"
      :data="tableData"
      :row-style="{ height: '60px', color: 'blue' }"
      width="100%"
    >
      <el-table-column width="50px">
        <template slot-scope="">
          <span class="icon-surname">彭</span>
        </template>
      </el-table-column>
      <el-table-column
        prop="name"
        width="80px"
        style="font-weight: 600"
      ></el-table-column>
      <el-table-column width="200px">
        <template>
          <span>电话号:{{ text }}</span>
          <el-tooltip content="复制号码" placement="top" effect="light">
            <span
              class="copy-btn icon-fuzhi"
              :data-clipboard-text="text"
              @click="copy"
            ></span>
          </el-tooltip>
        </template>
      </el-table-column>
      <el-table-column prop="region"></el-table-column>
    </el-table>
    <div class="block">
      <el-pagination
        background
        :current-page="page.pagenum"
        :page-size="page.pagesize"
        layout="prev, pager, next, jumper"
        :total="total"
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
      ></el-pagination>
    </div>
  </div>
</template>

<script>
  import Clipboard from 'clipboard'
  export default {
    name: 'BusinessConsulting',
    data() {
      return {
        total: 0,
        text: '15643256789',
        tableData: [
          {
            date: '彭',
            name: '彭先生',
            address: '联系方式:15013224279',
            region: '地区:/',
          },
          {
            date: '彭',
            name: '彭先生',
            address: '联系方式:15013224279',
            region: '地区:',
          },
          {
            date: '彭',
            name: '彭先生',
            address: '联系方式:15013224279',
            region: '地区:/',
          },
          {
            date: '彭',
            name: '彭先生',
            address: '联系方式:15013224279',
            region: '地区:',
          },
          {
            date: '彭',
            name: '彭先生',
            address: '联系方式:15013224279',
            region: '地区:',
          },
        ],
        page: {
          //当前页数
          pagenum: 1,
          //当前每页多少条数据
          pagesize: 4,
        },
      }
    },
    mounted() {},
    methods: {
      copy() {
        let clipboard = new Clipboard('.copy-btn ')
        clipboard.on('success', (e) => {
          clipboard.destroy()
        })
        clipboard.on('error', () => {
          clipboard.destroy()
        })
      },
    },
  }
</script>

<style lang="scss" scoped>
  .icon-surname {
    padding: 8px 8px;
    background: #efefef;
    border-radius: 50%;
    font-weight: 600;
    color: #000;
  }
  .icon-name {
    font-weight: 600;
  }
  .icon-fuzhi {
    width: 20px;
    height: 20px;
    background: url('../../../../assets/images/fuzhi.png') no-repeat;
    background-size: 100% 100%;
    vertical-align: middle;
  }
  .box {
    width: 100%;
  }
  el-table-column {
    span {
      padding: 5px 5px;
      background-color: #888;
      border-radius: 50%;
    }
  }
  .block {
    width: 255px;
    float: right;
    margin-top: 30px;
  }
</style>
