<!--编辑客户-->
<template>
  <view class="assemble">
<!--切换-->
    <view class="tab_section">
      <fui-segmented-control
          :values="optionTable"
          :current="(Number(optionTableId))"
          type="button"
          radius="8"
          height="80"
          color="#465cff"
          bold="true"
          @click="segmented">
      </fui-segmented-control>
    </view>

<!--    客户资源修改记录-->
    <scroll-view
        v-show="filteredData.type == `resource`"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="margin-top:40rpx;height: 80vh;"
    >
      <!--时间轴-->
      <view class="table_list">
        <fui-timeaxis background="#f8f8f8" :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">
                  <!--修改时间-->
                  {{v.modification_time}}
                </view>
                <view class="itme_box">
                  <view class="title_name">修改人：{{v.staff_id_name}} 修改了如下内容</view>
                  <view class="table_section">
                    <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 v.update_arr" :key="index">
                        <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.field_name_zh }}</td>
                        <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.old_value }}</td>
                        <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.new_value }}</td>
                      </tr>
                      </tbody>
                    </table>
                  </view>
                </view>
              </view>
            </template>
          </fui-timeaxis-node>
        </fui-timeaxis>
      </view>
    </scroll-view>

<!--    六要素修改记录-->
    <scroll-view
        v-show="filteredData.type == `six_speed`"
        scroll-y="true"
        :lower-threshold="lowerThreshold"
        @scrolltolower="loadMoreData"
        style="margin-top:40rpx;height: 80vh;"
    >
      <!--时间轴-->
      <view class="table_list">
        <fui-timeaxis background="#f8f8f8" :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">
                  <!--修改时间-->
                  {{v.modification_time}}
                </view>
                <view class="itme_box">
                  <view class="title_name">修改人：{{v.staff_id_name}} 修改了如下内容</view>
                  <view class="table_section">
                    <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 v.update_arr" :key="index">
                        <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.field_name_zh }}</td>
                        <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.old_value }}</td>
                        <td style="border: 1px solid #ddd; padding: 12rpx;">{{ row.new_value }}</td>
                      </tr>
                      </tbody>
                    </table>
                  </view>
                </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,//数据总条数
        type:'resource',//查询类型|resource=客户资源,six_speed=六要素
        customer_resource_id: '',//客户资源表id
      },
      //数据列表
      tableList:[],//表格数据

      //tab切换
      optionTableId:0,//分段器初始选中项索引
      optionTable:[
        {
          id: 0,
          name: '客户资源修改记录',
          type:'resource',
        },
        {
          id: 1,
          name: '六要素修改记录',
          type:'six_speed',
        }
      ]
    }
  },
  onLoad(options) {
    this.filteredData.customer_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_customerResourcesGetEditLogList(data)
      this.loading = false
      this.isReachedBottom = false;
      if (res.code != 1){
        uni.showToast({
          title: res.msg,
          icon: 'none'
        })
        return
      }

      console.log(123123123,res)

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

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

    },

    //切换tag列表
    async segmented(e) {
      console.log('切换',e)
      //e.id|0=基础信息 1=六要素
      let status = e.id
      this.optionTableId = String(status)
      this.filteredData.type = e.type//查询类型|resource=客户资源,six_speed=六要素

      await this.resetFilteredData()
      await this.getList()
    },

  }
}
</script>

<style lang="less" scoped>
.assemble{
  width: 100%;
  height: 100%;
  //background-color: #292929;
  overflow: auto;
  .tab_section{
    padding: 0 20rpx;
    padding-top: 30rpx;
  }
  .table_list{
    .itme_box {
      margin-top: 30rpx;
      display: flex;
      flex-direction: column;
      gap: 25rpx;
      .title_name{
        font-size: 28rpx;
      }
      .table_section{
        .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>