<template>
  <div ref="scrollDistance" class="ui-appMeasurementRecord" @scroll="handleScroll">
    <van-pull-refresh v-model="refreshing" @refresh="onRefresh">
      <van-list v-model:loading="loading" :finished="finished" @load="getList">
        <div v-if="!refreshing && list.length == 0">
          <div v-if="loadingState" class="text-center">
            <img class="ui-no-data-icon" src="https://image.fulllinkai.com/202212/01/f06371b76ab686752486c8b99fa7669a.png" alt="" />
            <div class="color6 font_30">还没有测量数据哦~</div>
          </div>
        </div>
        <div v-else>
          <div v-for="(item, index) in list" :key="index" class="ui-record-list">
            <div class="font_28 color6 ui-record-date">{{ item.yearMonth }}</div>
            <div v-for="(itemSub, indexSub) in item.subList" :key="indexSub" style="background: #ffffff" @click="jumpPath('appMeasuringRecordDetail', itemSub)">
              <div class="ui-record-item">
                <div class="ui-content-box {{itemSub.isTouchMove ? 'shopCon-active' : ''}}">
                  <div class="f-fbc ui-content">
                    <div>
                      <div class="color3 font_30">{{ itemSub.score }}{{ itemSub.unit }}</div>
                      <div class="color6 font_24 ui-pt-6">体脂秤类型：{{ itemSub.type == 1 ? '新版秤' : '旧版秤' }}</div>
                    </div>
                    <div class="f-fcr">
                      <div class="font_30 color9">{{ itemSub.dayHour }}</div>
                      <img class="ui-record-item-icon" src="https://image.fulllinkai.com/202211/22/8cf3979193db3796fe4ca3b3b9be00f7.png" alt="" />
                    </div>
                  </div>
                </div>
              </div>
              <div v-if="indexSub + 1 != item.subList.length" class="ui-record-item-line"></div>
            </div>
          </div>
        </div>
      </van-list>
    </van-pull-refresh>
  </div>
</template>
<script setup lang="ts">
  import { onActivated, onMounted, ref } from 'vue';
  import weChat from '@/utils/weChat';
  import router from '@/router';
  import { useUserStore } from '@/store/modules/user';

  defineOptions({ name: 'AppMeasurementRecord' });

  const userStore = useUserStore() as any;
  const loadingState = ref(false);
  const cacheList = ref<any[]>([]); // 数据存储
  const list = ref<any[]>([]); // 数据存储
  const noMore = ref(false); // 没有更多数据
  const refreshing = ref(true); // 上拉刷新false表示加载完成
  const finished = ref(false); // true表示数据全部加载完成
  const loading = ref(false); // false表示数据加载完成
  const page = ref(1); // 数据分页

  const scrollValue = ref(0); // 记录页面列表的滚动距离
  const scrollDistance = ref<any>(null);

  // 获取备注列表
  const getList = () => {
    weChat({ url: `/h5/get/fat/logs?page=${page.value}&chat_id=${userStore.chatId}`, hideLoading: true, method: 'get' })
      .then((res) => {
        const result = res.data;
        if (cacheList.value.length === 0 || page.value === 1) {
          cacheList.value = result.data;
          setTimeout(() => {
            list.value = transition(cacheList.value);
          }, 100);
        } else if (cacheList.value.length >= 15) {
          result.data.forEach((item) => {
            cacheList.value.push(item);
          });
          setTimeout(() => {
            list.value = transition(cacheList.value);
          }, 100);
        }
        refreshing.value = false;
        loading.value = false;
        if (cacheList.value.length < 15 || result.data.length < 15) {
          finished.value = true;
          noMore.value = true;
        }
        page.value++;
        setTimeout(() => {
          loadingState.value = true;
        }, 200);
      })
      .catch((err) => {
        console.log(err);
      });
  };

  // 上拉初始化数据
  const onRefresh = () => {
    page.value = 1;
    noMore.value = false;
    finished.value = false;
    loading.value = true;
    getList();
  };

  // 根据不同的年月放置不同的数组
  const transition = (list) => {
    let Arr = [] as any;
    list.forEach((e) => {
      let index = -1;
      let state = Arr.some((item, i) => {
        if (e.yearMonth == item.yearMonth) {
          index = i;
          return true;
        }
      });
      if (!state) {
        Arr.push({ yearMonth: e.yearMonth, subList: [{ dayHour: e.dayHour, e_name: e.fat_name || e.e_name, id: e.id, isTouchMove: false, score: e.fat_data || e.score, created_at: e.created_at, unit: e.unit, yearMonth: e.yearMonth, type: e.type }] });
      } else {
        Arr[index].subList.push({ dayHour: e.dayHour, e_name: e.fat_name || e.e_name, id: e.id, isTouchMove: false, score: e.fat_data || e.score, created_at: e.created_at, unit: e.unit, yearMonth: e.yearMonth, type: e.type });
      }
    });
    return Arr;
  };

  const jumpPath = (url, e) => {
    router.push({
      name: url,
      query: { tested_at: e.created_at, type: e.type, id: e.id },
    });
  };

  // 监听页面滚动距离
  const handleScroll = (event) => {
    scrollValue.value = event.target.scrollTop;
  };

  onActivated(() => {
    scrollDistance.value.scrollTop = scrollValue.value;
  });

  onMounted(() => {});
</script>
<style lang="scss" scoped>
  .ui-appMeasurementRecord {
    background: #f6f7f8;
    overflow-y: auto;
    height: 100vh;
  }

  .ui-tabBar-box {
    position: fixed;
    top: 0;
    left: 0;
    z-index: 8;
    width: 100vw;
    height: px2rem(90);
    background: #f8f8f8;

    .ui-tabBar-list {
      padding: px2rem(24) px2rem(180) px2rem(0) px2rem(180);
    }

    .ui-tabBar-line {
      position: absolute;
      bottom: px2rem(2);
      width: 100%;
      height: px2rem(10);
      background: linear-gradient(90deg, rgba(95, 226, 175, 0.1) 0%, #41d5a9 100%);
      border-radius: px2rem(5);
    }
  }

  .ui-placeholder {
    width: 100vw;
    height: px2rem(70);
  }

  .ui-no-data-icon {
    width: px2rem(500);
    height: px2rem(360);
    border-radius: 50%;
    margin-top: 20vh;
  }

  .ui-record-list {
    .ui-record-date {
      padding: px2rem(20) px2rem(30);
    }

    .ui-record-item {
      display: flex;
      width: 100%;
      position: relative;

      .ui-content-box {
        width: 100%;
        padding: px2rem(24) 0 px2rem(24) px2rem(30);
        margin-right: 0;
        transition: all 0.4s;
        display: flex;
        position: relative;
        left: 0;

        .ui-content {
          width: 100%;

          .ui-record-item-icon {
            width: px2rem(16);
            display: block;
            margin: 0 px2rem(30);
          }
        }
      }

      .ui-del {
        background-color: #f1013d;
        width: px2rem(180);
        height: 100%;
        color: #fff;
        position: absolute;
        z-index: 222;
        right: px2rem(-180);
        top: 0;
        transition: all 0.4s;
      }
    }

    .shopCon-active {
      left: px2rem(-180);
    }

    .shopDel-active {
      right: 0 !important;
    }

    .ui-record-item-line {
      width: 100%;
      height: px2rem(2);
      background: #f7f7f7;
      margin-left: px2rem(30);
    }
  }
</style>
