<!--编辑客户-->
<template>
  <view class="assemble">
    <scroll-view
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="margin-top:40rpx;height: 88vh;"
    >
      <!--时间轴-->
      <view class="table_list">
        <fui-timeaxis background="#fff" :padding="['36rpx','16rpx']">
          <fui-timeaxis-node
              :lineColor="k<3?v.activeColor:'#ccc'"
              :lined="k!==tableList.length-1"
              v-for="(v,k) in tableList"
              :key="k"
          >
            <!--inco-->
            <view
                class="fui-node"
                :style="{borderColor:(k != tableList.length-1 ? '#465CFF' :'' ) }"
            >
            </view>
            <template v-slot:right>
              <view
                  class="fui-process__node table_itme"
                  :style="{paddingBottom:(k !== tableList.length-1 ? '50rpx' :'0rpx')}"
                  :class="{'fui-node__pb':k!==tableList.length-1}"
              >

                <view class="fui-title">
                  2025-04-01 23:05:05
                </view>
                <view class="itme_box">
                  <view class="title_name">修改人：张三 修改了如下内容</view>
                  <table class="table_box">
                    <!-- 自定义表头 -->
                    <thead>
                    <tr>
                      <th style="width: 30%; border: 1px solid #ddd; padding: 12rpx;">字段名称</th>
                      <th style="width: 35%; border: 1px solid #ddd; padding: 12rpx;">原数据</th>
                      <th style="width: 35%; border: 1px solid #ddd; padding: 12rpx;">新数据</th>
                    </tr>
                    </thead>

                    <!-- 自定义每一行数据 -->
                    <tbody>
                    <tr v-for="(row, index) in customTableData" :key="index">
                      <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.field }}</td>
                      <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.oldValue }}</td>
                      <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.newValue }}</td>
                    </tr>
                    </tbody>
                  </table>
                </view>
              </view>
            </template>
          </fui-timeaxis-node>
        </fui-timeaxis>
      </view>
    </scroll-view>
  </view>
</template>

<script>
import apiRoute from '@/api/apiRoute.js';

export default {
  data() {
    return {

      loading:false,//加载状态
      lowerThreshold: 100,//距离底部多远触发
      isReachedBottom: false,//防止重复加载|true=不可加载|false=可加载

      //筛选条件
      filteredData:{
        page:1,//当前页码
        limit:10,//每页返回数据条数
        total:10,//数据总条数
        resource_id: '',//客户资源表id
      },
      //数据列表
      tableList:[{
        title: '入场',
        time: '07:00',
        activeColor: '#465CFF'
      }, {
        title: '主场演讲',
        time: '08:00',
        descr: '马云（阿里巴巴）',
        activeColor: '#465CFF'
      }, {
        title: '世界互联经济',
        time: '08:30',
        descr: '马云（阿里巴巴）',
        activeColor: '#465CFF'
      }, {
        title: '打造自己的互联帝国',
        time: '09:30',
        descr: '马化腾（腾讯）',
        activeColor: '#FFB703'
      }, {
        title: '散场',
        time: '11:00',
        descr: '请带走垃圾，有序散场。'
      }],//表格数据

      customTableData:[
        {
          field:'姓名',
          oldValue:'张三',
          newValue:'11李四李四李四李四李四李四李四李四李四李四李四123',
        }
      ]
    }
  },
  onLoad(options) {
    this.filteredData.resource_id = options.resource_id//客户资源表id
  },
  onShow() {
    // this.init()
  },
  //下拉刷新
  async onPullDownRefresh() {
    //重置为第一页
    await this.resetFilteredData()
    await this.getList()
  },
  methods: {
    //初始化
    async init() {
      await this.getList()//获取客户修改记录列表
    },

    //加载更多(下一页)
    loadMoreData() {
      //判断是否加载
      if (!this.isReachedBottom) {
        this.isReachedBottom = true;//设置为不可请求状态
        this.getList();
      }
    },
    //重置为第一页
    async resetFilteredData() {
      this.isReachedBottom = false; // 重置状态，以便下次触发加载更多

      this.filteredData.page = 1//当前页码
      this.filteredData.limit = 10//每页返回数据条数
      this.filteredData.total = 10//数据总条数
    },
    //获取列表-我的客户
    async getList(){
      this.loading = true

      let data = {...this.filteredData}

      //判断是否还有数据
      if(this.filteredData.page * this.filteredData.limit > this.filteredData.total){
        this.loading = false
        uni.showToast({
          title: '暂无更多',
          icon: 'none'
        })
        return
      }

      if(data.page == 1){
        this.tableList = []
      }

      let res = await apiRoute.xs_resourceSharingIndex(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      this.tableList = this.tableList.concat(res.data.data); // 使用 concat 方法 将新数据追加到数组中

      console.log('列表1',this.tableList)
      this.filteredData.total = res.data.total
      this.filteredData.page++

    },

  }
}
</script>

<style lang="less" scoped>
.assemble{
  width: 100%;
  height: 100%;
  //background-color: #292929;
  overflow: auto;
  .table_list{
    border: 1px solid red;

    .itme_box {
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 20rpx;
      .title_name{
        font-size: 28rpx;
      }
      .table_box{
        width: 100%;
        border-collapse: collapse;
        table-layout: fixed;
      }
    }

    ::v-deep .fui-timeaxis__wrap{

    }
    .fui-node {
      width: 32rpx;
      height: 32rpx;
      border-radius: 50%;
      background: #fff;
      display: flex;
      align-items: center;
      justify-content: center;
      border: 4px solid #ccc;
      box-sizing: border-box;
    }

    .fui-process__node {
      padding-left: 20rpx;
    }

    .fui-title {
      font-size: 34rpx;
      line-height: 34rpx;
      font-weight: bold;
    }

    .fui-descr {
      font-size: 28rpx;
      padding-top: 12rpx;
      color: #7F7F7F;
    }

    .fui-time__left {
      font-size: 36rpx;
      line-height: 36rpx;
      text-align: right;
      padding-right: 20rpx;
    }

    .fui-node__pbtm {
      padding-bottom: 88rpx;
    }


  }

}
</style>