<template>
  <view class="audit-page">
    <!-- 顶部标签栏 -->
    <view class="tab-bar">
      <view
        v-for="tab in tabs"
        :key="tab.value"
        class="tab-item"
        :class="{ active: currentTab === tab.value }"
        @click="onTabChange(tab.value)"
      >
        <text class="tab-text">{{ tab.label }}</text>
        <view class="tab-indicator" v-if="currentTab === tab.value"></view>
      </view>
    </view>

    <!-- 列表内容 -->
    <scroll-view
      scroll-y
      class="list-content"
      @scrolltolower="onLoadMore"
    >
      <view class="loading-wrap" v-if="loading && list.length === 0">
        <uni-load-more status="loading"></uni-load-more>
      </view>

      <view class="empty-wrap" v-else-if="!loading && list.length === 0">
        <uni-load-more status="noMore"></uni-load-more>
      </view>

      <view class="card-list" v-else>
        <view
          class="card-item"
          v-for="item in list"
          :key="item.recordId || item.id"
          @click="goDetail(item)"
        >
          <view class="card-header">
            <text class="company-name">{{ item.memName || '-' }}</text>
            <text class="status-badge" :class="getStatusClass(item.shenAuditStatus)">
              {{ getStatusText(item.shenAuditStatus) }}
            </text>
          </view>

          <view class="card-body">
            <view class="info-row">
              <text class="label">所属协会</text>
              <text class="value">{{ item.shenMemName || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="label">会员编号</text>
              <text class="value">{{ item.wfCode || '-' }}</text>
            </view>
            <view class="info-row">
              <text class="label">认证年限</text>
              <text class="value">{{ item.renewYear ? item.renewYear + '年' : '-' }}</text>
            </view>
            <view class="info-row">
              <text class="label">付款费用</text>
              <text class="value text-red">¥{{ Number(item.finalPrice || 0).toFixed(2) }}</text>
            </view>
            <view class="info-row">
              <text class="label">提交日期</text>
              <text class="value">{{ formatDate(item.commitTime) }}</text>
            </view>
          </view>

          <view class="card-footer">
            <view class="tag-row">
              <view class="tag" :class="item.isNew == 1 ? 'tag-new' : 'tag-renew'">
                {{ item.isNew == 1 ? '新会员' : '续费' }}
              </view>
            </view>
            <view class="btn-row">
              <view class="btn btn-default" @click.stop="goInstitutionInfo(item)">机构资料</view>
              <view class="btn btn-primary" @click.stop="goAudit(item)" v-if="item.shenAuditStatus == 1">审核</view>
            </view>
          </view>
        </view>
      </view>

      <view class="load-more-wrap" v-if="list.length > 0">
        <uni-load-more :status="loadStatus"></uni-load-more>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import * as api from '@/common/api_exam.js'
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'

const tabs = [
  { label: '全部', value: '' },
  { label: '审核中', value: '1' },
  { label: '审核通过', value: '2' },
  { label: '审核拒绝', value: '3' }
]

const currentTab = ref('')
const list = ref([])
const loading = ref(false)
const loadStatus = ref('more')
const queryParams = ref({
  pageNum: 1,
  pageSize: 10,
  auditFlag:'1',
  
})

onLoad(() => {
  getList()
})

function onTabChange(value) {
  currentTab.value = value
  list.value = []
  queryParams.value.pageNum = 1
  getList()
}

function getList() {
  if (loading.value) return
  loading.value = true
  loadStatus.value = 'loading'

  const params = {
    ...queryParams.value,
    shenAuditStatus: currentTab.value
  }

  api.certifiedNewList(params).then(res => {
    if (res.rows) {
      if (queryParams.value.pageNum === 1) {
        list.value = res.rows
      } else {
        list.value = [...list.value, ...res.rows]
      }
      loadStatus.value = res.rows.length >= queryParams.value.pageSize ? 'more' : 'noMore'
    } else {
      list.value = []
      loadStatus.value = 'noMore'
    }
  }).catch(err => {
    console.error('获取会员审核列表失败', err)
    loadStatus.value = 'noMore'
  }).finally(() => {
    loading.value = false
  })
}

function onLoadMore() {
  if (loadStatus.value === 'noMore' || loading.value) return
  queryParams.value.pageNum++
  getList()
}

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

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

function formatDate(dateStr) {
  if (!dateStr) return '-'
  if (typeof dateStr === 'string' && dateStr.indexOf('T') > -1) {
    return dateStr.slice(0, 10)
  }
  return dateStr
}

function goDetail(item) {
  uni.navigateTo({
    url: `/group/groupOrderDetail?form=${encodeURIComponent(JSON.stringify(item))}`
  })
}

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

function goAudit(item) {
  uni.navigateTo({
    url: `/level/ztx/memberAuditPage?type=single&ids=${item.recordId || item.id}`
  })
}
</script>

<style lang="scss" scoped>
.audit-page {
  min-height: 100vh;
  background-color: #f5f5f5;
}

.tab-bar {
  display: flex;
  background-color: #fff;
  padding: 0 20rpx;
  position: sticky;
  top: 0;
  z-index: 100;

  .tab-item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 24rpx 0;
    position: relative;

    .tab-text {
      font-size: 28rpx;
      color: #666;
    }

    .tab-indicator {
      position: absolute;
      bottom: 0;
      left: 50%;
      transform: translateX(-50%);
      width: 80rpx;
      height: 6rpx;
      background-color: #AD181F;
      border-radius: 3rpx;
    }

    &.active {
      .tab-text {
        color: #AD181F;
        font-weight: 600;
      }
    }
  }
}

.list-content {
  height: calc(100vh - 100rpx);
  padding: 20rpx;
  box-sizing: border-box;
}

.loading-wrap,
.empty-wrap {
  padding: 100rpx 0;
  text-align: center;
}

.card-list {
  .card-item {
    background-color: #fff;
    border-radius: 16rpx;
    padding: 30rpx;
    margin-bottom: 20rpx;
    box-shadow: 0 4rpx 12rpx rgba(0, 0, 0, 0.05);

    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-bottom: 24rpx;
      padding-bottom: 20rpx;
      border-bottom: 1rpx solid #f0f0f0;

      .company-name {
        font-size: 32rpx;
        font-weight: 600;
        color: #333;
        flex: 1;
        margin-right: 20rpx;
      }

      .status-badge {
        font-size: 24rpx;
        padding: 6rpx 16rpx;
        border-radius: 20rpx;
        flex-shrink: 0;

        &.status-warning {
          background-color: #fff7e6;
          color: #fa8c16;
        }

        &.status-success {
          background-color: #f6ffed;
          color: #52c41a;
        }

        &.status-danger {
          background-color: #fff1f0;
          color: #f5222d;
        }

        &.status-gray {
          background-color: #f5f5f5;
          color: #999;
        }
      }
    }

    .card-body {
      .info-row {
        display: flex;
        justify-content: space-between;
        padding: 12rpx 0;

        .label {
          font-size: 26rpx;
          color: #999;
          flex-shrink: 0;
        }

        .value {
          font-size: 26rpx;
          color: #333;
          text-align: right;
          flex: 1;
          margin-left: 20rpx;
        }

        .text-red {
          color: #AD181F;
        }
      }
    }

    .card-footer {
      display: flex;
      justify-content: space-between;
      align-items: center;
      margin-top: 20rpx;
      padding-top: 20rpx;
      border-top: 1rpx solid #f0f0f0;

      .tag-row {
        display: flex;
        gap: 12rpx;

        .tag {
          font-size: 24rpx;
          padding: 6rpx 16rpx;
          border-radius: 20rpx;
          font-weight: 500;

          &.tag-new {
            background-color: rgba(#AD181F, 0.1);
            color: #AD181F;
          }

          &.tag-renew {
            background-color: rgba(#999, 0.1);
            color: #666;
          }
        }
      }

      .btn-row {
        display: flex;
        gap: 16rpx;

        .btn {
          font-size: 26rpx;
          padding: 12rpx 24rpx;
          border-radius: 8rpx;
        }

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

        .btn-primary {
          background-color: #AD181F;
          color: #fff;
        }
      }
    }
  }
}

.load-more-wrap {
  padding: 20rpx 0;
  text-align: center;
}
</style>