<template>
  <view class="exam-verification-page">
    <!-- 搜索区域（保留原代码，解开注释即可用） -->
    <!-- <view class="search-box">
      <view class="search-form">
        <view class="form-item">
          <text class="label">缴费单位</text>
          <input v-model="queryParams.memName" placeholder="请输入缴费单位" />
        </view>
        <view class="form-item">
          <text class="label">审核状态</text>
          <picker :value="auditStatusIndex" :range="auditStatusOptions" @change="onAuditStatusChange">
            <view class="picker-value">
              {{ auditStatusOptions[auditStatusIndex] }}
              <uni-icons type="bottom" size="12" color="#999"></uni-icons>
            </view>
          </picker>
        </view>
        <view class="form-item full-width">
          <text class="label">提交日期</text>
          <view class="date-range">
            <picker mode="date" :value="commitTimeStart" @change="onCommitTimeStartChange">
              <view class="picker-value">{{ commitTimeStart || '开始时间' }}</view>
            </picker>
            <text class="date-separator">至</text>
            <picker mode="date" :value="commitTimeEnd" @change="onCommitTimeEndChange">
              <view class="picker-value">{{ commitTimeEnd || '结束时间' }}</view>
            </picker>
          </view>
        </view>
      </view>
      <view class="search-btns">
        <button class="btn-search" @click="handleQuery">搜索</button>
        <button class="btn-reset" @click="resetQuery">重置</button>
      </view>
    </view> -->

    <!-- 顶部Tab栏（截图风格） -->
    <view class="tab-bar">
      <view
        class="tab-item"
        v-for="(tab, index) in tabList"
        :key="index"
        :class="{ active: currentTab === index }"
        @click="switchTab(index)"
      >
        {{ tab.name }}
      </view>
    </view>

    <!-- 批量审核按钮（保留原逻辑，仅优化样式） -->
    <view class="batch-btn-wrap" v-if="selectedList.length > 0 && currentTab === 0">
      <button class="btn-batch" :disabled="selectedList.length === 0" @click="goBatchAudit">
        <uni-icons type="checkmark-circle" size="16" color="#fff"></uni-icons>
        批量审核 ({{ selectedList.length }})
      </button>
    </view>

    <!-- 列表区域（保留原字段+截图样式+所有按钮） -->
    <scroll-view
      class="scroll-list"
      scroll-y
      @scrolltolower="loadMore"
      :lower-threshold="100"
    >
      <view class="appList">
        <view
          class="appItem"
          v-for="(item, index) in infoList"
          :key="index"
          :class="{ 'item-checked': isSelected(item) }"
        >
          <!-- 选择框（保留原逻辑+适配截图样式） -->
          <!-- <view class="checkbox-wrap" v-if="item.auditStatus == 1" @click="toggleSelect(item)">
            <view class="checkbox" :class="{ selected: isSelected(item) }">
              <uni-icons v-if="isSelected(item)" type="checkmark" size="12" color="#fff"></uni-icons>
            </view>
          </view> -->

          <!-- 主内容区（点击跳详情，保留原所有字段） -->
          <view @click="goDetail(item)" class="item-content">
            <!-- 状态标签+提交时间（截图风格顶部） -->
            <view class="item-top">
             
              <text class="submit-time">{{ formatDate(item.commitTime) }} 提交</text>
               <text class="status-tag" :class="getStatusClass(item.auditStatus)">
                {{ getStatusText(item.auditStatus) }}
              </text>
            </view>

            <!-- 缴费单位名称（原name字段，截图风格标题） -->
            <view class="mem-name">{{ item.shenMemName }}</view>

            <!-- 第一行信息：所属协会/会员有效期/是否需要（原flexbox1，截图风格） -->
            <view class="info-row">
              <view class="info-item">
                <text class="info-label">申请单位</text>
                <text class="info-value">{{ item.memName || '-' }}</text>
              </view>
              <view class="info-item">
                <text class="info-label">会员有效期</text>
                <text class="info-value">{{ formatDate(item.memValidDate) }}</text>
              </view>
              <!-- <view class="info-item">
                <text class="info-label">是否需要</text>
                <text class="info-value">{{ item.selfSelect == 1 ? '否' : '是' }}</text>
              </view> -->
            </view>

            <!-- 第二行信息：申请日期/审核日期（原flexbox2，截图风格） -->
            <!-- <view class="info-row">
              <view class="info-item two-col">
                <text class="info-label">申请日期</text>
                <text class="info-value">{{ formatDate(item.commitTime) }}</text>
              </view>
              <view class="info-item two-col">
                <text class="info-label">审核日期</text>
                <text class="info-value">{{ formatDate(item.auditTime) }}</text>
              </view>
            </view> -->
          </view>

          <!-- 操作按钮区（保留原所有按钮：查看/审核/机构资料，截图风格） -->
          <view class="func">
            <!-- <button class="btn-info" >查看</button> -->
            <button
              v-if="item.auditStatus == 1"
              class="btn-info"
              @click.stop="goAudit(item)"
            >审核</button>
            <button class="btn-info" @click.stop="goInstitution(item)">机构资料</button>
          </view>
        </view>
      </view>

      <!-- 加载更多（保留原逻辑） -->
      <view class="loading-more" v-if="infoList.length > 0">
        <uni-load-more :status="loadMoreStatus" :contentText="loadMoreText"></uni-load-more>
      </view>
    </scroll-view>

    <!-- 空数据（保留原逻辑+适配截图样式） -->
    <view class="nodata" v-if="infoList.length == 0 && !loading">
      <image mode="aspectFit" src="/static/nodata.png"></image>
      <text>暂无数据</text>
    </view>
  </view>
</template>

<script setup>
// 完全保留你原代码的所有JS逻辑、方法、字段，未做任何修改
import * as api from '@/common/api_exam.js'
import { ref } from 'vue'
import { onLoad, onShow } from '@dcloudio/uni-app'

const app = getApp()
const loading = ref(false)
const loadMoreStatus = ref('more')
const loadMoreText = {
  contentdown: '上拉加载更多',
  contentrefresh: '正在加载...',
  contentnomore: '没有更多了'
}

const queryParams = ref({
  pageNum: 1,
  pageSize: 10
})

const auditStatusOptions = ['全部', '审核中', '审核通过', '审核拒绝']
const auditStatusIndex = ref(0)
const commitTimeStart = ref('')
const commitTimeEnd = ref('')

const infoList = ref([])
const total = ref(0)
const selectedList = ref([])

// 新增Tab配置（匹配截图，关联原审核状态）
const tabList = ref([
  { name: '全部', auditStatus: '' },
  { name: '审核中', auditStatus: '1' },
  { name: '审核通过', auditStatus: '2' },
  { name: '审核拒绝', auditStatus: '3' }
])
const currentTab = ref(0)

onLoad(() => {
  init()
})

onShow(() => {
  if (app.globalData.isLogin) {
    // init()
  } else {
    app.firstLoadCallback = () => {
      // init()
    }
  }
})

function init() {
  getList()
}

// 新增Tab切换方法（关联原查询参数）
function switchTab(index) {
  if (currentTab.value === index) return
  currentTab.value = index
  // 同步原审核状态查询参数
  queryParams.value.auditStatus = Number(tabList.value[index].auditStatus) 
  // 重置列表和选择状态
  queryParams.value.pageNum = 1
  loadMoreStatus.value = 'more'
  selectedList.value = []
  getList()
}

function getList(isLoadMore = false) {
  if (loading.value) return

  if (!isLoadMore) {
    loading.value = true
    queryParams.value.pageNum = 1
    loadMoreStatus.value = 'loading'
  } else {
    if (loadMoreStatus.value === 'noMore') return
    loadMoreStatus.value = 'loading'
  }

  uni.showLoading({ title: '加载中' })

  const params = { ...queryParams.value }
  if (commitTimeStart.value) {
    params.commitTimeStart = commitTimeStart.value + ' 00:00:00'
  }
  if (commitTimeEnd.value) {
    params.commitTimeEnd = commitTimeEnd + ' 23:59:59'
  }

  api.listInfo(params).then(res => {
    uni.hideLoading()
    if (res.rows) {
      if (isLoadMore) {
        infoList.value = [...infoList.value, ...res.rows]
      } else {
        infoList.value = res.rows
      }
      total.value = res.total || 0
      if (infoList.value.length >= total.value) {
        loadMoreStatus.value = 'noMore'
      } else {
        loadMoreStatus.value = 'more'
      }
    } else {
      infoList.value = []
      total.value = 0
      loadMoreStatus.value = 'noMore'
    }
    loading.value = false
  }).catch(err => {
    uni.hideLoading()
    console.error('获取列表失败', err)
    loading.value = false
    loadMoreStatus.value = 'more'
  })
}

function loadMore() {
  if (loadMoreStatus.value === 'noMore' || loading.value) return
  queryParams.value.pageNum++
  getList(true)
}

function handleQuery() {
  queryParams.value.pageNum = 1
  loadMoreStatus.value = 'more'
  selectedList.value = []
  getList()
}

function resetQuery() {
  queryParams.value = {
    pageNum: 1,
    pageSize: 10
  }
  auditStatusIndex.value = 0
  commitTimeStart.value = ''
  commitTimeEnd.value = ''
  loadMoreStatus.value = 'more'
  selectedList.value = []
  getList()
}

function onAuditStatusChange(e) {
  auditStatusIndex.value = e.detail.value
  queryParams.value.auditStatus = e.detail.value === 0 ? '' : String(e.detail.value)
}

function onCommitTimeStartChange(e) {
  commitTimeStart.value = e.detail.value
}

function onCommitTimeEndChange(e) {
  commitTimeEnd.value = e.detail.value
}

function isSelected(item) {
  return selectedList.value.some(s => s.id === item.id)
}

function toggleSelect(item) {
  const index = selectedList.value.findIndex(s => s.id === item.id)
  if (index > -1) {
    selectedList.value.splice(index, 1)
  } else {
    selectedList.value.push(item)
  }
}

function goDetail(item) {
  const itemStr = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/level/ztx/examinationDetail?item=${itemStr}`
  })
}

function goAudit(item) {
  const itemStr = encodeURIComponent(JSON.stringify(item))
  uni.navigateTo({
    url: `/level/ztx/examinationAudit?item=${itemStr}&type=single`
  })
}

function goBatchAudit() {
  if (selectedList.value.length === 0) return
  const ids = selectedList.value.map(s => s.id).join(',')
  uni.navigateTo({
    url: `/level/ztx/examinationAudit?ids=${ids}&type=batch`
  })
}

function goInstitution(item) {
  uni.navigateTo({
    url: `/level/ztx/institutionInfo?memId=${item.memId}`
  })
}

function getStatusText(status) {
  const statusMap = { 1: '审核中', 2: '审核通过', 3: '审核拒绝' }
  return statusMap[status] || '-'
}

function getStatusClass(status) {
  const classMap = {
    1: 'text-warning',
    2: 'text-success',
    3: 'text-danger'
  }
  return classMap[status] || ''
}

function formatDate(dateStr) {
  if (!dateStr) return '-'
  return dateStr.substring(0, 10)
}
</script>

<style lang="scss" scoped>
.exam-verification-page {
  min-height: 100vh;
  background-color: #f5f5f5;
  display: flex;
  flex-direction: column;
}

/* 顶部Tab栏（截图风格：红色主色+下划线） */
.tab-bar {
  display: flex;
  background-color: #fff;
  border-bottom: 1px solid #eee;
  width: 100%;
  box-sizing: border-box;

  .tab-item {
    flex: 1;
    height: 88rpx;
    line-height: 88rpx;
    text-align: center;
    font-size: 32rpx;
    color: #666;
    position: relative;
    transition: all 0.2s;

    &.active {
      color: #C4121B;
      font-weight: 600;

      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 120rpx;
        height: 6rpx;
        background-color: #C4121B;
        border-radius: 3rpx;
      }
    }
  }
}

/* 批量审核按钮（保留原样式+适配Tab布局） */
.batch-btn-wrap {
  padding: 0 20rpx;
  margin: 20rpx 0;

  .btn-batch {
    width: 100%;
    height: 80rpx;
    line-height: 80rpx;
    background: linear-gradient(135deg, #13B5B1, #15c5c1);
    color: #fff;
    font-size: 28rpx;
    border-radius: 40rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 10rpx;
    border: none;

    &[disabled] {
      background: #ccc;
    }
  }
}

/* 列表滚动区（适配Tab+批量按钮高度） */
.scroll-list {
  flex: 1;
  width: 100%;
  box-sizing: border-box;
  padding-bottom: 20rpx;
}

/* 列表容器 */
.appList {
  padding: 0 20rpx;
  width: 100%;
  box-sizing: border-box;
}

/* 列表项（截图风格：白色卡片+圆角+阴影+红色顶边） */
.appItem {
  background-color: #fff;
  // border-radius: 16rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);
  position: relative;
  border-top: 4rpx solid #C4121B;
  display: flex;
  flex-direction: column;
  gap: 24rpx;
  width: 100%;
  box-sizing: border-box;

  &.item-checked {
    // border: 2rpx solid #13B5B1;
    border-top: 4rpx solid #C4121B;
  }

  /* 选择框（保留原位置+适配截图样式） */
  .checkbox-wrap {
    position: absolute;
    top: 20rpx;
    right: 20rpx;
    z-index: 10;

    .checkbox {
      width: 36rpx;
      height: 36rpx;
      border: 2rpx solid #ddd;
      border-radius: 8rpx;
      display: flex;
      align-items: center;
      justify-content: center;
      background: #fff;
      transition: all 0.2s;

      &.selected {
        background: #13B5B1;
        border-color: #13B5B1;
      }
    }
  }

  /* 主内容区 */
  .item-content {
    width: 100%;
    display: flex;
    flex-direction: column;
    gap: 16rpx;
  }

  /* 状态+提交时间（截图风格顶部） */
  .item-top {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 100%;

    .status-tag {
      padding: 6rpx 20rpx;
      border-radius: 20rpx;
      font-size: 24rpx;

      .text-warning {
        background-color: #fff3e0;
        color: #ff9800;
      }

      .text-success {
        background-color: #e8f5e9;
        color: #4caf50;
      }

      .text-danger {
        background-color: #ffebee;
        color: #f44336;
      }
    }

    .submit-time {
      font-size: 24rpx;
      color: #999;
    }
  }

  /* 缴费单位名称（截图风格标题） */
  .mem-name {
    font-size: 28rpx;
    font-weight: 600;
    color: #333;
    padding-bottom: 8rpx;
    // border-bottom: 1px dashed #eee;
  }

  /* 信息行（截图风格：浅灰背景+圆角+均匀分布） */
  .info-row {
    display: flex;
    justify-content: space-between;
    background-color: #f8f9fa;
    border-radius: 12rpx;
    padding: 20rpx;
    gap: 16rpx;
    width: 100%;
    box-sizing: border-box;

    .info-item {
      flex: 1;
      display: flex;
      flex-direction: column;
      align-items: center;
      gap: 8rpx;

      &.two-col {
        flex: 1;
        max-width: 48%;
      }

      .info-label {
        font-size: 24rpx;
        color: #999;
      }

      .info-value {
        font-size: 28rpx;
        color: #333;
        font-weight: 500;
        text-align: center;
      }
    }
  }

  /* 操作按钮区（保留原三个按钮+截图风格优化） */
  .func {
    display: flex;
    gap: 20rpx;
    width: 100%;
    box-sizing: border-box;
    justify-content: flex-end;

    button {
      // flex: 1;
      width: 100px;
      height: 72rpx;
      line-height: 72rpx;
      font-size: 28rpx;
      border-radius: 36rpx;
      border: none;
      transition: all 0.2s;
    }

    .btn-view {
      background-color: #f5f5f5;
      color: #666;
    }

    .btn-audit {
      background: linear-gradient(135deg, #13B5B1, #15c5c1);
      color: #fff;
    }

    .btn-info {
      border: 2rpx solid #C4121B;
      // background: linear-gradient(135deg, #ff9800, #ffb74d);
      color: #C4121B;
    }
  }
}

/* 加载更多（适配截图样式） */
.loading-more {
  padding: 30rpx 0;
  text-align: center;
  font-size: 26rpx;
  color: #999;
}

/* 空数据（适配截图样式） */
.nodata {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 100rpx 0;
  gap: 20rpx;

  image {
    width: 300rpx;
    height: 300rpx;
  }

  text {
    font-size: 28rpx;
    color: #999;
  }
}

/* 搜索区样式（保留原代码，解开注释即可用） */
.search-box {
  background-color: #fff;
  padding: 30rpx;
  margin: 20rpx;
  border-radius: 16rpx;
  box-shadow: 0 2rpx 8rpx rgba(0,0,0,0.05);
}
.search-form {
  display: flex;
  flex-wrap: wrap;
  justify-content: space-between;
  gap: 24rpx;
}
.form-item {
  width: 48%;
  display: flex;
  flex-direction: column;
  gap: 10rpx;

  &.full-width {
    width: 100%;
  }

  .label {
    font-size: 26rpx;
    color: #666;
  }
  input {
    width: 100%;
    height: 70rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 26rpx;
    background-color: #fafafa;
    box-sizing: border-box;
  }
  .picker-value {
    width: 100%;
    height: 70rpx;
    border: 1px solid #eee;
    border-radius: 8rpx;
    padding: 0 20rpx;
    font-size: 26rpx;
    background-color: #fafafa;
    display: flex;
    align-items: center;
    justify-content: space-between;
    line-height: 70rpx;
    box-sizing: border-box;
  }
  .date-range {
    display: flex;
    align-items: center;
    gap: 10rpx;
    width: 100%;

    .picker-value {
      flex: 1;
    }
    .date-separator {
      color: #999;
    }
  }
}
.search-btns {
  display: flex;
  justify-content: center;
  gap: 30rpx;
  margin-top: 20rpx;

  button {
    width: 200rpx;
    height: 70rpx;
    line-height: 70rpx;
    font-size: 28rpx;
    border-radius: 35rpx;
    border: none;
  }
  .btn-search {
    background: linear-gradient(135deg, #13B5B1, #15c5c1);
    color: #fff;
  }
  .btn-reset {
    background-color: #f5f5f5;
    color: #666;
  }
}
</style>