<template>
    <!-- 政策法规列表页面容器 -->
    <view class="policy-container">
      <!-- 搜索框区域 -->
      <view class="search-box">
        <van-search
          :value="abc"
          placeholder="输入关键字查询"
          @search="handleSearch"
          id="sreach"
          @clear="handleClear"
        />
      </view>
  
      <!-- 政策法规列表区域 -->
      <!-- 修改列表项部分 -->
      <view class="policy-list">
        <view 
          class="policy-item"
          v-for="item in policyList"
          :key="item.id"
          @click="handlePolicyClick(item)"
        >
          <view class="item-left">
            <image :src="itemImgUrl" class="policy-icon"></image>
          </view>
          <view class="item-right">
            <view class="policy-title">{{ item.title }}</view>
            <view class="policy-time">生效时间: {{ item.effectiveDate }}</view>
          </view>
        </view>
      </view>
  
      
  
      <!-- 加载更多状态组件 -->
      <uni-load-more :status="loadMoreStatus" />
    </view>
  </template>
  
  <script>
  import { PolicyApi, formatPolicyContext } from '@/api/policy/index.js'
  import { formatDate } from '@/utils/ruoyi.js'
  import config from '@/config'
  
  
  export default {
    data() {
      return {
        searchValue: '', // 搜索关键字
        abc: '',
        policyList: [], // 政策法规列表数据
        pageNum: 1, // 当前页码
        pageSize: 10, // 每页显示条数
        total: 0, // 总数据条数
        loadMoreStatus: 'more' ,// 加载更多状态：more-加载前 loading-加载中 noMore-没有更多
        itemImgUrl: config.imgUrl + '/miniohb/c103c92335bdd30d33ff8a062c219ead0626bf0a1898536bd7590285ca11c9db.png'
      }
    },
    // 页面加载时获取列表数据
    onShow() {
        console.log(this.itemImgUrl)
      this.getPolicyList()
    },
  
  
    // 触底加载更多数据
    onReachBottom() {
      if (this.policyList.length < this.total) {
        this.pageNum++
        this.getPolicyList()
      }
    },
    methods: {
      // 获取政策法规列表数据
      async getPolicyList() {
        try {
          console.log('PolicyApi',this.searchValue)
          this.loadMoreStatus = 'loading'
          const res = await PolicyApi.getPolicyPage({
            pageNum: this.pageNum,
            pageSize: this.pageSize,
            name: this.searchValue // 搜索关键字
          })
          
          if (res.code === 0 && res.data.total > 0) {
            // 限制标题长度，超出显示省略号
            const formattedData = res.data.list.map(item => ({
              ...item,
              title: item.name.length > 15 ? item.name.slice(0, 15) + '...' : item.name,
              effectiveDate: formatDate(item.effectiveDate,'YYYY年MM月DD日')
          }))
            
            // 判断是首次加载还是加载更多
            if (this.pageNum === 1) {
              this.policyList = formattedData
            } else {
              this.policyList = [...this.policyList, ...formattedData]
            }
            
            this.total = res.total
            // 更新加载状态
            this.loadMoreStatus = this.policyList.length >= this.total ? 'noMore' : 'more'
          }
        } catch (error) {
          console.error(error)
          this.loadMoreStatus = 'more'
          uni.showToast({
            title: '获取列表失败',
            icon: 'none'
          })
        }
      },
      // 搜索事件处理
      handleSearch(e) {
        this.pageNum = 1 // 重置页码
        this.searchValue = e.detail // 更新搜索关键字
        this.getPolicyList()
      },
      // 清除搜索事件处理
      handleClear() {
        this.pageNum = 1 // 重置页码
        this.searchValue = '' // 清空搜索关键字
        this.getPolicyList()
      },
      // 点击政策条目跳转详情
      handlePolicyClick(item) {
        uni.navigateTo({
          url: `/sub/owner/policy-detail?id=${item.id}`
        })
      }
    }
  }
  </script>
  
  <style lang="scss">
  
  
      .policy-container {
        background: var(--LightMode-Secondary-Secondary, #F9F9F9);
        min-height: 100vh;
        
        .search-box {
          padding: 20rpx;
          background: #fff;
        }
        
        .policy-list {
          display: flex;
          flex-direction: column;
          align-items: flex-start;
          background: var(--LightMode-Secondary-Secondary, #F9F9F9);
          
          .policy-item {
           display: flex;
           padding: var(--Number-12px, 12px);
           align-items: center;
           gap: var(--Number-12px, 12px);
           align-self: stretch;
           border-radius: var(--Number-8px, 8px);
           border-bottom: 1px solid var(--LightMode-Grey-Grey-100, #F9F9F9);
           background: var(--LightMode-Light-Light, #FFF);
           margin-top: 12px;
           margin-left: 12px;
           margin-right: 12px;
           margin-bottom: 0px;
            .item-left {
              margin-right: 20rpx;
              border-radius: 100px;
              background: var(--LightMode-Grey-Grey-100, #F9F9F9);
              display: flex;
              padding: 8px;
              justify-content: center;
              align-items: center;
              gap: 8px;
              .policy-icon {
                  display: flex;
                  width: 20px;
                  height: 20px;
                  justify-content: center;
                  align-items: center;
                  aspect-ratio: 1/1;
              }
            }
            
            .item-right {
              flex: 1;
              
              .policy-title {
                font-size: 28rpx;
                color: #333;
                margin-bottom: 10rpx;
              }
              
              .policy-time {
                font-size: 24rpx;
                color: #999;
              }
            }
          }
        }
      }
  </style>