<script setup lang="ts">
import { ref, reactive, onMounted } from "vue";
//到顶部多远时触发事件
//more  上拉加载更多
//loading //加载中
//noMore 没有更多
const status = ref<string>("more");
onMounted(() => {});
const scrollLower = () => {
  //我到底部了
  console.log("我到底部了");
};
</script>
<template>
  <view class="home_list_view">
    <view style="height: 100%">
      <scroll-view scroll-y="true" lower-threshold="30" @scrolltolower="scrollLower">
        <view class="list_out">
          <view class="list_title">
            <view class="report_name">测试报告</view>
            <view class="report_status">已生成</view>
          </view>
          <view class="list_button">
            <view class="list_time"> 2024-04-15 23:33:05 </view>
            <view> <button class="button_detail" size="mini">查看详情</button></view>
          </view>
        </view>
        <view class="list_out">
          <view class="list_title">
            <view class="report_name">测试报告</view>
            <view class="report_status">已生成</view>
          </view>
          <view class="list_button">
            <view class="list_time"> 2024-04-15 23:33:05 </view>
            <view> <button class="button_detail" size="mini">查看详情</button></view>
          </view>
        </view>
        <view class="list_out">
          <view class="list_title">
            <view class="report_name">测试报告</view>
            <view class="report_status">已生成</view>
          </view>
          <view class="list_button">
            <view class="list_time"> 2024-04-15 23:33:05 </view>
            <view> <button class="button_detail" size="mini">查看详情</button></view>
          </view>
        </view>
        <view class="list_out">
          <view class="list_title">
            <view class="report_name">测试报告</view>
            <view class="report_status">已生成</view>
          </view>
          <view class="list_button">
            <view class="list_time"> 2024-04-15 23:33:05 </view>
            <view> <button class="button_detail" size="mini">查看详情</button></view>
          </view>
        </view>
        <view class="list_out">
          <view class="list_title">
            <view class="report_name">测试报告</view>
            <view class="report_status">已生成</view>
          </view>
          <view class="list_button">
            <view class="list_time"> 2024-04-15 23:33:05 </view>
            <view> <button class="button_detail" size="mini">查看详情</button></view>
          </view>
        </view>
        <view class="list_out">
          <view class="list_title">
            <view class="report_name">测试报告</view>
            <view class="report_status">已生成</view>
          </view>
          <view class="list_button">
            <view class="list_time"> 2024-04-15 23:33:05 </view>
            <view> <button class="button_detail" size="mini">查看详情</button></view>
          </view>
        </view>
        <uni-load-more iconType="circle" :status="status" />
      </scroll-view>
    </view>
  </view>
</template>

<style lang="scss" scoped>
.home_list_view {
  flex: 1;
  display: flex;
  flex-direction: column;
  height: 100%;
  overflow: scroll;
  .list_out {
    margin-top: 20rpx;
    border-radius: 40rpx;
    background-color: #ffffff;
    display: flex;
    flex-direction: column;
    .list_title {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      .report_name {
        font-size: 30rpx;
        font-weight: 700;
        padding-left: 20rpx;
        padding-top: 30rpx;
      }
      .report_status {
        height: 40rpx;
        border-top-right-radius: 40rpx;
        border-bottom-left-radius: 40rpx;
        font-size: 20rpx;
        background-color: yellow;
        display: flex;
        align-items: center;
        padding: 10rpx 20rpx;
      }
    }
    .list_button {
      display: flex;
      flex-direction: row;
      justify-content: space-between;
      align-items: center;
      padding: 30rpx 20rpx 20rpx;
      .list_time {
        color: #c4c4c4;
      }
      .button_detail {
        color: #ffffff;
        background: linear-gradient(rgb(198, 198, 243), rgb(94, 91, 247));
      }
    }
  }
}

.is-input-border {
  display: flex;
  box-sizing: border-box;
  flex-direction: row;
  align-items: center;
  border: 10px solid #dcdfe6;
  border-radius: 400px !important;
}
</style>
