<!--  -->
<template>
  <div :id="tableID" class="p-table-con table-container">

    <table class="p-table">
        <thead class="p-thead">
          <!-- <tr class="p-tr">
            <th :class="['p-th ant-table-row-cell-break-word ',showFixed.left==true && 'sticky dir-l']">姓名</th>
            <th class="p-th ant-table-row-cell-break-word ta-c">性别性别性别性别</th>
            <th class="p-th ant-table-row-cell-break-word">性别</th>
            <th class="p-th ant-table-row-cell-break-word">性别</th>
            <th class="p-th ant-table-row-cell-break-word ta-r">性别</th>
            <th :class="['p-th ant-table-row-cell-break-word',showFixed.right==true && 'sticky dir-r']">性别</th>
          </tr> -->
          <TR type="th" :columns="columnList" :showFixed="showFixed" ></TR>
        </thead>
        <tbody class="p-tbody">
          <!-- <tr class="p-tr">
            <td class="p-td ant-table-row-cell-break-word">数据</td>
            <td class="p-td ant-table-row-cell-break-word cell-ellipsis sticky dir-l">数据12345678901234567890123456789012345678901234567890</td>
            <td class="p-td ant-table-row-cell-break-word cell-ellipsis">数据12345678901234567890123456789012345678901234567890</td>
            <td class="p-td ant-table-row-cell-break-word">数据</td>
            <td class="p-td ant-table-row-cell-break-word cell-ellipsis">数据12345678901234567890123456789012345678901234567890</td>
            <td class="p-td ant-table-row-cell-break-word">数据</td>
          </tr> -->
          <!-- <tr :key="'tr-'+item" class="p-tr" v-for="item in 100">
            <td :class="['p-td ant-table-row-cell-break-word cell-ellipsis',showFixed.left==true && 'sticky dir-l']">数据-{{item}}</td>
            <td class="p-td ant-table-row-cell-break-word ta-c">性别性别性别性别</td>
            <td class="p-td ant-table-row-cell-break-word cell-ellipsis">性别性别性别性别</td>
            <td class="p-td ant-table-row-cell-break-word">数据</td>
            <td class="p-td ant-table-row-cell-break-word cell-ellipsis ta-r">数据</td>
            <td :class="['p-td ant-table-row-cell-break-word',showFixed.right==true && 'sticky dir-r']">数据</td>
          </tr> -->
          <TR :key="getKey(item)+index" v-for="(item,index) in dataSource" type="td" :columns="columnList" :rowData="item" :showFixed="showFixed" ></TR>
        </tbody>
    </table>
  </div>
</template>

<script>
import UUID from './../utils/uuid'
import TR from './components/TR'
function throttle (fn, delay, atleast = 0) {
  let timer = null; //定时器
  let previous = 0; //记录上一次执行的时间
  
  return (...args) => {
    let now = +new Date();   //当前时间戳
    if (!previous) previous = now; // 赋值开始时间
    
    if (atleast && (now - previous) > atleast) {
      fn.apply(this, args);  //文章下面有给出该行代码的理解
      // 重置上一次开始时间为本次结束时间
      previous = now;
      timer && clearTimeout(timer);
    } else {
      timer && clearTimeout(timer); // 清除上次定时器
      timer = setTimeout(() => {
        fn.apply(this, args);
        console.log('else')
        previous = 0;
      }, delay);
    }
  }
}

const columnList = [
  //  {
  //     title: '',
  //     dataIndex: 'isCheck',
  //     type:'checkbox', // radio  checkbox  tag
  //     width: 50,
  //     ellipsis:true,
  //     align: 'center'
  //   },
    {
      title: '姓名',
      dataIndex: 'userName',
      type:'tag', // radio  checkbox  tag
      tagOption:[{value:'',color:''}],
      component:{},
      ellipsis:true,
      fixed:'left', // left right
      width: 200,
      align: 'center'
    },
    {
      title: '手机号',
      dataIndex: 'mobileList',
      width: 330,
      align: 'left'
    },
    {
      title: '身份证',
      dataIndex: 'certNo',
      width: 380,
      align: 'center'
    },
    {
      title: '银行账号',
      dataIndex: 'bankCardList',
      width: 330,
      align: 'left',
      fixed:'right', // left right
    },
  ]



export default {
  // import引入的组件需要注入到对象中才能使用
  name: 'PTable',
  components: {TR},
  props: {
    // handA: {
    //   type: String,
    //   required: true,
    //   default: '100'
    // }
  },
  data() {
    // 这里存放数据  document.getElementsByClassName('p-table-con')[0].scrollLeft  document.getElementsByClassName('p-table-con')[0].scrollTop
    return {
      // 容器id
      tableID:'',
      // 控制当需要显示冻结列和横向滚动条时，自动显示阴影  false 不显示  true 显示
      showFixed:{left:false,right:true,top:false},
      // 	超过宽度是否自动省略 false 不省略  true 省略
      showEllipsis:false,
      columnList,
      dataSource:[
        {userName:'小明1',mobileList:'18213776500',certNo:'12345678900',bankCardList:'000000000000001',isCheck:''},
        {userName:'小明2',mobileList:'18213776502',certNo:'12345678902',bankCardList:'000000000000002',isCheck:''},
        {userName:'小明3',mobileList:'18213776503',certNo:'12345678903',bankCardList:'000000000000003',isCheck:''},
        {userName:'小明4',mobileList:'18213776504',certNo:'12345678904',bankCardList:'000000000000004',isCheck:''},
        {userName:'小明5',mobileList:'18213776505',certNo:'12345678905',bankCardList:'000000000000005',isCheck:''},
        {userName:'小明6',mobileList:'18213776506',certNo:'12345678906',bankCardList:'000000000000006',isCheck:''},
        {userName:'小明7',mobileList:'18213776507',certNo:'12345678907',bankCardList:'000000000000007',isCheck:''},
        {userName:'小明8',mobileList:'18213776508',certNo:'12345678908',bankCardList:'000000000000008',isCheck:''},
        {userName:'小明9',mobileList:'18213776509',certNo:'12345678909',bankCardList:'000000000000009',isCheck:''},
        {userName:'小明10',mobileList:'18213776500',certNo:'12345678900',bankCardList:'000000000000001',isCheck:''},
        {userName:'小明20',mobileList:'18213776502',certNo:'12345678902',bankCardList:'000000000000002',isCheck:''},
        {userName:'小明30',mobileList:'18213776503',certNo:'12345678903',bankCardList:'000000000000003',isCheck:''},
        {userName:'小明40',mobileList:'18213776504',certNo:'12345678904',bankCardList:'000000000000004',isCheck:''},
        {userName:'小明50',mobileList:'18213776505',certNo:'12345678905',bankCardList:'000000000000005',isCheck:''},
        {userName:'小明60',mobileList:'18213776506',certNo:'12345678906',bankCardList:'000000000000006',isCheck:''},
        {userName:'小明70',mobileList:'18213776507',certNo:'12345678907',bankCardList:'000000000000007',isCheck:''},
        {userName:'小明80',mobileList:'18213776508',certNo:'12345678908',bankCardList:'000000000000008',isCheck:''},
      ]
    };
  },
  // 监听属性 类似于data概念
  computed: {},
  // 监控data中的数据变化
  watch: {},
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
   this.tableID = UUID()
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() {
    this.init()
  },
  updated(){
    const tempLeftSize = document.getElementById(this.tableID).scrollLeft
    console.log('left',tempLeftSize);
    this.scrollEvent('left',tempLeftSize)
  },
  // 方法集合
  methods: {
    getKey(value){
      return UUID('MDUUID',JSON.stringify(value))
    },
    init(){
      this.scrollListener()
    },
    scrollListener(){
      const self = this
      var scrollableElement = document.getElementById(this.tableID);
      scrollableElement.addEventListener('scroll', function() {
          // console.log(this.scrollTop, this.scrollLeft); // 输出当前滚动位置
          if(this.scrollLeft>0){
            throttle(self.scrollEvent('left',this.scrollLeft),1000)
            
          }
          if(this.scrollTop>0){
            throttle(self.scrollEvent('top',this.scrollTop),1000)
          }
      });
    },
    scrollEvent(type,size){
      const tempLeftSize = document.getElementById(this.tableID).scrollLeft
      // console.log('====>',type,size,tempLeftSize);
      const actionList = {
        'left':()=>{
          if(tempLeftSize<=10){
            this.showFixed.left = false
          }else{
            this.showFixed.left = true
          }
          const scrollWidth =document.getElementById(this.tableID).scrollWidth
          const offsetWidth = document.getElementById(this.tableID).offsetWidth
          const temp =scrollWidth-offsetWidth
          // console.log('=======>',temp,tempLeftSize,temp-tempLeftSize);
          if(temp-tempLeftSize<=10){
            this.showFixed.right = false
          }else{
            this.showFixed.right = true
          }
          if(scrollWidth+5 == offsetWidth){
            this.showFixed.right = false
          }
        },
        'top':()=>{
          if(size<=5){
            this.showFixed.top = false
          }else{
            this.showFixed.top = true
          }
        }
      }
      actionList[type] && actionList[type]()
    },
  },
  }
</script>
<style lang='less'>
.p-table-con{
    box-sizing: border-box;
    width: 1000px;
    height: 300px;
    overflow: auto;
    position: relative;
    // padding: 0 0 0 20px;

    .cell-ellipsis {
      overflow: hidden;
      white-space: nowrap;
      text-overflow: ellipsis;
    }

 

    .p-table {
      box-sizing: border-box;
      text-align: left;
      border-radius: 4px 4px 0 0;
      border-collapse: separate;
      border-spacing: 0;
      table-layout: fixed;
      
      margin: 0;
      padding: 0;
      color: rgba(0, 0, 0, 0.65);
      font-size: 14px;
      font-variant: tabular-nums;
      line-height: 1.5;
      list-style: none;
      font-feature-settings: 'tnum';
      position: relative;
      clear: both;
      width: 100%;
      max-height: 300px;
      // border: 1px solid #e8e8e8;
      // border-right: 0;
      // border-bottom: 0;
      

      // width: calc(100% + 17px); /* 加上滚动条的宽度 */
      // margin-left: -17px; /* 内边距应与滚动条宽度相反 */
    
      .p-thead {
        position: sticky; 
        top: 0;
        z-index: 99999;
        .p-tr {
          border-left: 1px solid #e8e8e8;
          .p-th {
            border-top-left-radius: 4px;
            border-right: 1px solid #e8e8e8;
            border-bottom: 1px solid #e8e8e8;
            padding: 16px 16px;
            overflow-wrap: break-word;
            transition: background 0.3s ease;
            color: rgba(0, 0, 0, 0.85);
            font-weight: 500;
            text-align: left;
            background: #fafafa;
            word-break: break-word;
            // width: 200px;

            &.ta-l{
              text-align: left;
            }
            &.ta-c{
              text-align: center;
            }
            &.ta-r{
              text-align: right;
            }

            &.sticky{
              position: sticky;
              z-index: 9999;
            }
            &.dir-l{
              left: 0;
              // box-shadow: 6px 0 6px -4px rgba(0,0,0,.15);
              box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.15);
              transition: box-shadow .3s ease;
            }
            &.dir-r{
              right: 0;
              // box-shadow: -6px 0 6px -4px rgba(0,0,0,.15);
              box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.15);
              transition: box-shadow .3s ease;
            }
          }
          .p-th:nth-child(1){
            border-left: 1px solid #e8e8e8;
          }
        }
      }
      .p-tbody {
        .p-tr {
          border-left: 1px solid #e8e8e8;
          .p-td {
            // border-top-left-radius: 4px;
            border-right: 1px solid #e8e8e8;
            padding: 16px 16px;
            overflow-wrap: break-word;
            transition: background 0.3s ease;
            // color: rgba(0, 0, 0, 0.85);
            // font-weight: 500;
            text-align: left;
            border-bottom: 1px solid #e8e8e8;
            word-break: break-word;
            // width: 200px;
            background: #ffffff;
            &.ta-l{
              text-align: left;
            }
            &.ta-c{
              text-align: center;
            }
            &.ta-r{
              text-align: right;
            }
            &.sticky{
              position: sticky;
              z-index: 9999;
            }
            &.dir-l{
              left: 0;
              // box-shadow: 6px 0 6px -4px rgba(0,0,0,.15);
              box-shadow: 6px 0 6px 0px rgba(0, 0, 0, 0.15);
              transition: box-shadow .3s ease;
            }
            &.dir-r{
              right: 0;
              // box-shadow: -6px 0 6px -4px rgba(0,0,0,.15);
              box-shadow: -5px 0 4px -1px rgba(0, 0, 0, 0.15);
              transition: box-shadow .3s ease;
            }
          }
          .p-td:nth-child(1){
            border-left: 1px solid #e8e8e8;
          }
          &.show{
            display: table-row;
          }
          &.hide{
            display: none;
          }
        }
    
        .p-tr:hover {
          background: #cad4e0;
        }
      }
      .ant-table-row-cell-break-word {
        word-wrap: break-word;
        word-break: break-word;
      }
    }


    .table-container {
        // width: 300px; /* 设置表格容器的宽度 */
        // overflow-x: auto; /* 水平滚动条 */
        // position: relative;
    }
    
    .table-container table {
        // width: calc(100% + 17px); /* 加上滚动条的宽度 */
        // margin-left: -17px; /* 内边距应与滚动条宽度相反 */
    }
    
    // .frozen-column {
    //     position: absolute;
    //     left: 0;
    //     width: 150px; /* 冻结列的宽度 */
    //     background-color: #f9f9f9; /* 背景颜色 */
    //     border-right: 1px solid #ddd; /* 右边框 */
    //     z-index: 1; /* 确保冻结列在上方 */
    // }

}

</style>