<script setup lang="ts">
import { onMounted, computed, ref } from "vue";
import { onLoad, onShow } from "@dcloudio/uni-app";
import { getApproveOrderAPI, getMessage, read } from "@/services/approveOrder";
import { useLoginStore } from "@/stores/modules/login";
import { formatDate } from "@/utils/index";
const userStore = useLoginStore();
const dictInfo = userStore.dictInfo;
const propertyDictData =
  dictInfo.filter((e) => e.dictType == "heli_project_property") || [];
// 是否分页结束
const isFinish = ref(false);
// 是否触发下拉刷新
const isTriggered = ref(false);
// 定义 porps
const props = defineProps<{
  orderState: number;
}>();

// 是否加载中标记，用于防止滚动触底触发多次请求
const isLoading = ref(false);
// 请求参数
const queryParams: Required<any> = {
  pageNo: 1,
  pageSize: 20,
  status: props.orderState,
  isSnapshot: 0,
};

const dataList = ref([]);
const getListData = async () => {
  if (isLoading.value) return;
  if (isFinish.value === true) {
    return uni.showToast({ icon: "none", title: "没有更多数据~" });
  }
  isLoading.value = true;
  const data = await getMessage(queryParams);
  isLoading.value = false;
  data.list.forEach((e) => {
    const obj = propertyDictData.find((q) => q.value == e.property) || {};
    e.property = obj?.label;
    e.createTime = formatDate(e.createTime, "YYYY-MM-DD HH:mm:ss");
    // e.projectStartTime = formatDate(e.projectStartTime, 'YYYY-MM-DD')
    // e.projectEndTime = formatDate(e.projectEndTime, 'YYYY-MM-DD')
  });
  dataList.value.push(...data.list);
  // 判断是否还有更多数据
  if (data.list.length < queryParams.pageSize) {
    isFinish.value = true;
  } else {
    queryParams.pageNo++;
  }
};
function handlerRead(id: any) {
  isLoading.value = true;
  read(id)
    .then(() => {
      isLoading.value = false;
      onRefresherrefresh();
    })
    .catch((err) => {
      isLoading.value = false;
    });
}
onMounted(async () => {
  console.log("props", props);
  await getListData();
});
onShow(async () => {
  isLoading.value = false;
  queryParams.pageNo = 1;
  dataList.value = [];
  isFinish.value = false;
  await getListData();
});

const handleDetail = (id) => {
  const url = `/pages/approveOrder/approveOrder-detail?id=${id}`;
  uni.navigateTo({ url });
};

// 自定义下拉刷新被触发
const onRefresherrefresh = async () => {
  // 开始动画
  isTriggered.value = true;
  // 重置数据
  queryParams.pageNo = 1;
  dataList.value = [];
  isFinish.value = false;
  // 加载数据
  await getListData();
  // 关闭动画
  isTriggered.value = false;
};
// const searchVal = ref('')
// const handleSearch = async () => {
//   let dataListDefault = []
//   const code = searchVal.value
//   if (code) {
//     dataListDefault = dataList.value
//     dataList.value = dataList.value.filter((e) => {
//       return e.code == code
//     })
//   } else {
//     dataList.value = dataListDefault
//   }
// }
</script>
<template>
  <view class="cont">
    <!-- <view class="search" v-if="dataList.length > 5">
      <view class="title"></view>
      <input class="uni-input" v-model="searchVal" @change="handleSearch" placeholder="根据编号搜索" />
    </view> -->
    <scroll-view
      enable-back-to-top
      scroll-y
      class="data-list"
      refresher-enabled
      :refresher-triggered="isTriggered"
      @refresherrefresh="onRefresherrefresh"
      @scrolltolower="getListData"
    >
      <view class="item" v-for="item in dataList" :key="item.id">
        <!-- 方案1: 使用 flex 布局，推荐 -->
        <view
          class="hd"
          style="
            display: flex;
            justify-content: space-between;
            align-items: center;
          "
        >
          <view style="display: flex; flex-direction: column">
            <view class="statusLabel">{{ item.thingname }}</view>
            <view
              class="product-item"
              style="margin: 0; color: #333; font-size: 22rpx"
              >{{ item.createTime }}</view
            >
          </view>
          <view
            class="read-btn"
            v-if="orderState == 0"
            @click="handlerRead(item.id)"
            >已读</view
          >
        </view>
        <view class="md">
          <view class="product-item"
            >客户简称：<span class="item-value">{{ item.attr6 }}</span></view
          >
          <view class="product-item"
            >项目名称：<span class="item-value">{{ item.attr7 }}</span></view
          >
          <view class="product-item"
            >子项目名称：<span class="item-value">{{ item.attr8 }}</span></view
          >
          <view class="product-item"
            >备注内容：<span class="item-value">{{ item.attr9 }}</span></view
          >
        </view>
      </view>
      <!-- 底部提示文字 -->
      <view
        class="loading-text"
        :style="{ paddingBottom: safeAreaInsets?.bottom + 'px' }"
      >
        {{ isFinish ? "没有更多数据~" : "正在加载..." }}
      </view>
    </scroll-view>
  </view>
</template>

<style lang="scss">
// 订单列表
.search {
  padding: 4rpx;
  width: 80%;
  margin: 30rpx auto;

  .uni-input {
    border: 1px solid #d1d6db;
    height: 60rpx;
    line-height: 60rpx;
    padding: 4rpx 10rpx;
    font-size: 32rpx;
    border-radius: 6rpx;
  }
}

.data-list {
  height: 90vh;
  .item {
    position: relative;
    padding: 20rpx 0;
    margin: 20rpx 20rpx;
    border-radius: 10rpx;
    background-color: #fff;

    .hd {
      padding: 10rpx;
      font-size: 28rpx;
      display: flex;
      align-items: center;

      .statusLabel {
        font-size: 28rpx;
        font-weight: 500;
        color: #333333;
        margin-right: 20rpx;
      }
      .read-btn {
        font-size: 24rpx;
        padding: 6rpx 24rpx;
        border: 1rpx solid #3775f6;
        border-radius: 30rpx;
        color: #3775f6;
        background: #f7f8fa;
        margin-left: auto;
      }
    }

    .md {
      position: relative;
      padding: 10rpx;
      min-height: 100rpx;
      font-size: 28rpx;
      border-top: 2rpx solid #f2f2f2;

      .product-item {
        margin: 20rpx 0;
        display: flex;
        font-size: 22rpx;
        align-items: center;
        color: #737d88;
        .item-value {
          color: #333;
        }
      }
    }

    &:last-child {
      padding-bottom: 40rpx;
    }
  }

  .status {
    display: flex;
    align-items: center;
    justify-content: space-between;
    font-size: 28rpx;
    color: #999;
    margin-bottom: 15rpx;

    .date {
      color: #666;
      flex: 1;
    }

    .primary {
      color: #ff9240;
    }

    .icon-delete {
      line-height: 1;
      margin-left: 10rpx;
      padding-left: 10rpx;
      border-left: 1rpx solid #e3e3e3;
    }
  }

  .goods {
    display: flex;
    margin-bottom: 20rpx;

    .cover {
      width: 170rpx;
      height: 170rpx;
      margin-right: 20rpx;
      border-radius: 10rpx;
      overflow: hidden;
      position: relative;

      .image {
        width: 170rpx;
        height: 170rpx;
      }
    }

    .quantity {
      position: absolute;
      bottom: 0;
      right: 0;
      line-height: 1;
      padding: 6rpx 4rpx 6rpx 8rpx;
      font-size: 24rpx;
      color: #fff;
      border-radius: 10rpx 0 0 0;
      background-color: rgba(0, 0, 0, 0.6);
    }

    .meta {
      flex: 1;
      display: flex;
      flex-direction: column;
      justify-content: center;
    }

    .name {
      height: 80rpx;
      font-size: 26rpx;
      color: #444;
    }

    .type {
      line-height: 1.8;
      padding: 0 15rpx;
      margin-top: 10rpx;
      font-size: 24rpx;
      align-self: flex-start;
      border-radius: 4rpx;
      color: #888;
      background-color: #f7f7f8;
    }

    .more {
      flex: 1;
      display: flex;
      align-items: center;
      justify-content: center;
      font-size: 22rpx;
      color: #333;
    }
  }

  .payment {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    line-height: 1;
    padding: 20rpx 0;
    text-align: right;
    color: #999;
    font-size: 28rpx;
    border-bottom: 1rpx solid #eee;

    .quantity {
      font-size: 24rpx;
      margin-right: 16rpx;
    }

    .amount {
      color: #444;
      margin-left: 6rpx;
    }

    .symbol {
      font-size: 20rpx;
    }
  }

  .action {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding-top: 20rpx;

    .button {
      width: 180rpx;
      height: 60rpx;
      display: flex;
      justify-content: center;
      align-items: center;
      margin-left: 20rpx;
      border-radius: 60rpx;
      border: 1rpx solid #ccc;
      font-size: 26rpx;
      color: #444;
    }

    .secondary {
      color: #3775f6;
      border-color: #3775f6;
    }

    .primary {
      color: #fff;
      background-color: #3775f6;
      border-color: #3775f6;
    }
  }

  .loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0;
  }
}
</style>import type { stringify } from 'querystring';
