<template>
  <view class="history_page">
    <BackBar title="售后历史" />
    <Empty v-if="pageStatus === 'empty'" />
    <!-- 售后历史列表 -->
    <scroll-view
      v-else
      class="history_list"
      scroll-with-animation
      scroll-y
      :scroll-top="scrollView.scrollTop"
      :show-scrollbar="false"
      lower-threshold="30"
      @scroll="handleScroll"
      @scrolltolower="loadData"
    >
      <view
        v-for="(i, idx) in serviceHistortList"
        :key="idx"
        class="history_list_item"
        @click="lookServiceDetails(i)"
      >
        <view class="serial">
          <text>序列号：{{ i.simSerialNumber }}</text>
          <text :class="['status', i.status === 1 ? 'active' : 'inactive']">{{
            i.status === 1 ? '进行中' : '已完成'
          }}</text>
        </view>
        <view class="describe">
          问题描述：
          <text class="text">{{ i.description }}</text>
        </view>
        <view>
          {{ dayjs(i.createTime).format('YYYY-MM-DD') }}
        </view>
      </view>
    </scroll-view>
    <!-- 回到顶部 -->
    <view v-if="scrollView.oldScrollTop > 0" class="top" @click="handleBackTop">
      <image :src="`${OSS_URL}/backTop2.png`" mode="" class="top_icon"> </image>
    </view>
  </view>
</template>

<script setup>
import { computed, nextTick, ref, watch } from 'vue';
import dayjs from 'dayjs';

import Empty from '@/components/Empty/index.vue';
import { onLoad } from '@dcloudio/uni-app';
import { getServiceHistoryApi } from '@/api';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const familyId = ref(''); // 家长id
const pageStatus = ref('');
const serviceHistortList = ref([]);
const page = ref({
  current: 1,
  size: 10,
  total: 0,
});
const timer = ref(null);

const scrollView = ref({
  oldScrollTop: 0,
  scrollTop: 0,
});

function handleScroll(e) {
  scrollView.value.oldScrollTop = e.detail.scrollTop;
}
// 回到顶部
function handleBackTop() {
  if (timer.value) {
    clearTimeout(timer.value);
  }
  timer.value = setTimeout(() => {
    scrollView.value.scrollTop = scrollView.value.oldScrollTop;
    nextTick(() => {
      scrollView.value.scrollTop = 0;
    });
  }, 300);
}
// 加载更多
function loadData() {
  if (serviceHistortList.value.length < page.value.total) {
    page.value.current++;
    fetchServiceHistoryList();
  }
}
// 售后详情
function lookServiceDetails(i) {
  let details = encodeURIComponent(JSON.stringify(i));
  uni.navigateTo({
    url: `/pages/mine/warranty/serviceHistoryDetails?details=${details}`,
  });
}
// 获取售后历史
function fetchServiceHistoryList() {
  uni.showLoading({
    title: '加载中',
  });
  getServiceHistoryApi(page.value)
    .then(res => {
      if (res.code === 200) {
        let { data } = res;
        page.value.total = data.totalRows;
        if (data.rows.length === 0) {
          pageStatus.value = 'empty';
        } else {
          pageStatus.value = '';
          serviceHistortList.value.push(...data.rows);
        }
        wx.hideLoading();
      }
    })
    .catch(err => {
      wx.hideLoading();
    });
}
onLoad(() => {
  serviceHistortList.value = [];
  fetchServiceHistoryList();
});
</script>

<style lang="scss" scoped>
.history_page {
  padding: 0 30rpx 0;
  box-sizing: border-box;
  color: #333;

  .history_list {
    height: 100vh;
    margin-top: 30rpx;
    overflow-y: auto;
    scrollbar-width: none;
    scrollbar-color: transparent transparent;
    ::-webkit-scrollbar {
      width: 0;
    }

    &_item {
      padding: 30rpx 30rpx 40rpx 30rpx;
      margin-bottom: 30rpx;
      box-sizing: border-box;
      border-radius: 30rpx;
      background-color: #fff;
      font-size: 28rpx;

      .describe {
        margin-bottom: 16rpx;
        overflow: hidden;
        text-overflow: ellipsis;
        display: -webkit-box;
        -webkit-box-orient: vertical;
        -webkit-line-clamp: 2;
        word-break: break-all;

        .text {
          color: #666;
        }
      }

      .serial {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 16rpx;
        line-height: 45rpx;
        font-size: 32rpx;

        .status {
          font-size: 26rpx;
        }

        .active {
          color: #615dff;
        }

        .inactive {
          color: #a9aab5;
        }
      }
    }
  }

  .top {
    position: fixed;
    bottom: 186rpx;
    right: 30rpx;

    .top_icon {
      width: 100rpx;
      height: 100rpx;
    }
  }
}
</style>
