<route lang="json5" type="page">
{
  layout: 'default',
  style: {
    navigationBarTitleText: '优惠券审核',
  },
}
</route>

<template>
  <view class="bg-gray-100 min-h-screen">
    <!-- 筛选条件 -->
    <view class="filter-section sticky top-0 z-10 bg-gray-50 p-3">
      <view class="filter-row flex items-center gap-2">
        <wd-drop-menu custom-style="flex: 0 0 120px;">
          <wd-drop-menu-item
            v-model="filterForm.type"
            :title="getFilterTypeLabel()"
            :options="filterTypeOptions"
            @change="onFilterTypeChange"
          />
        </wd-drop-menu>
        <wd-drop-menu v-if="filterForm.type === 'status'" custom-style="flex: 1">
          <wd-drop-menu-item
            v-model="filterForm.value"
            :title="getStatusLabel()"
            :options="statusOptions"
          />
        </wd-drop-menu>
        <wd-input
          v-else
          v-model="filterForm.value"
          :placeholder="getInputPlaceholder()"
          :disabled="!filterForm.type"
          custom-style="flex: 1"
          clearable
        />
        <wd-button type="primary" size="small" @click="handleSearch">搜索</wd-button>
      </view>
    </view>

    <!-- 列表 -->
    <view class="px-4">
      <view v-if="loading" class="flex justify-center py-8">
        <wd-loading />
      </view>

      <view v-else-if="couponList.length === 0" class="text-center py-8 text-gray-500">
        暂无数据
      </view>

      <view v-else class="space-y-3">
        <view
          v-for="item in couponList"
          :key="item.coupon2sid"
          class="bg-white rounded-lg p-4 shadow-sm"
          @click="handleItemClick(item)"
        >
          <!-- 头部信息 -->
          <view class="flex justify-between items-start mb-3">
            <view class="flex-1">
              <view class="text-lg font-bold text-gray-800 mb-1">
                {{ item.coupon2mc || '优惠券' }}
              </view>
              <view class="text-sm text-gray-500">优惠劵编号：{{ item.coupon2code || '-' }}</view>
              <view class="text-sm text-gray-500">
                申请时间：{{ formatDateTime(item.coupon2adddatetime) }}
              </view>
            </view>
            <view class="ml-3">
              <wd-tag :type="getStatusTagType(item.coupon2sype)" size="small">
                {{ getStatusText(item.coupon2sype) }}
              </wd-tag>
            </view>
          </view>

          <!-- 用户信息 -->
          <view class="border-t border-gray-100 pt-3 space-y-2">
            <view class="flex items-center">
              <view class="text-sm text-gray-600 w-20">申请人：</view>
              <view class="text-sm text-gray-800 flex-1">
                {{ item.usersname || '-' }}
              </view>
            </view>
            <view class="flex items-center">
              <view class="text-sm text-gray-600 w-20">用户类型：</view>
              <view class="text-sm text-gray-800 flex-1">
                {{ item.userstype || '-' }}
              </view>
            </view>
            <view class="flex items-center">
              <view class="text-sm text-gray-600 w-20">手机号：</view>
              <view class="text-sm text-gray-800 flex-1">
                {{ item.coupon2phone || '-' }}
              </view>
            </view>
            <view v-if="item.coupon2sype === 2 && item.coupon2shbz" class="flex items-start">
              <view class="text-sm text-gray-600 w-20">驳回原因：</view>
              <view class="text-sm text-red-600 flex-1">
                {{ item.coupon2shbz }}
              </view>
            </view>
          </view>

          <!-- 操作提示 -->
          <view class="mt-3 pt-3 border-t border-gray-100">
            <view class="text-xs text-blue-600 text-center">
              {{ item.coupon2sype === 0 ? '点击进入审核详情' : '点击查看详情' }}
            </view>
          </view>
        </view>
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { ref } from 'vue'
import { onLoad } from '@dcloudio/uni-app'
import { useCouponStore } from '@/store/coupon'
import { useUserStore } from '@/store/user'
import { useMessage } from 'wot-design-uni'
import dayjs from 'dayjs'

const message = useMessage()
const couponStore = useCouponStore()
const userStore = useUserStore()

// 筛选表单数据
const filterForm = ref({
  type: '',
  value: '',
})

// 下拉选项数据
const filterTypeOptions = ref([
  { label: '手机号', value: 'phone' },
  { label: '姓名', value: 'name' },
  { label: '审核状态', value: 'status' },
])

// 审核状态选项
const statusOptions = ref([
  { label: '全部', value: '' },
  { label: '待审核', value: '0' },
  { label: '已通过', value: '1' },
  { label: '已驳回', value: '2' },
])

// 列表数据
const couponList = ref([])
const originalCouponList = ref([])
const loading = ref(false)

// 格式化日期时间
const formatDateTime = (dateTime: string) => {
  if (!dateTime) return '-'
  return dayjs(dateTime).format('YYYY-MM-DD HH:mm:ss')
}

// 获取状态文本
const getStatusText = (status: number) => {
  switch (status) {
    case 0:
      return '待审核'
    case 1:
      return '已通过'
    case 2:
      return '已驳回'
    default:
      return '未知'
  }
}

// 获取状态标签类型
const getStatusTagType = (status: number) => {
  switch (status) {
    case 0:
      return 'warning'
    case 1:
      return 'success'
    case 2:
      return 'danger'
    default:
      return 'primary'
  }
}

// 获取当前筛选类型的标签
const getFilterTypeLabel = () => {
  if (!filterForm.value.type) return '筛选类型'

  const selectedOption = filterTypeOptions.value.find(
    (option) => option.value === filterForm.value.type,
  )
  return selectedOption ? selectedOption.label : '筛选类型'
}

// 获取当前选中状态的标签
const getStatusLabel = () => {
  if (!filterForm.value.value) return '选择状态'

  const selectedOption = statusOptions.value.find(
    (option) => option.value === filterForm.value.value,
  )
  return selectedOption ? selectedOption.label : '选择状态'
}

// 获取输入框占位符
const getInputPlaceholder = () => {
  if (!filterForm.value.type) return '请先选择筛选类型'

  const placeholderMap = {
    phone: '请输入手机号',
    name: '请输入姓名',
    status: '请选择审核状态',
  }
  return placeholderMap[filterForm.value.type] || '请输入查询条件'
}

// 筛选类型变化处理
const onFilterTypeChange = () => {
  // 清空筛选值
  filterForm.value.value = ''
}

// 获取列表数据
const loadCouponList = async () => {
  try {
    loading.value = true

    const result = await couponStore.getCoupon2AuditList({})

    if (result && result.Data) {
      originalCouponList.value = result.Data
      couponList.value = [...originalCouponList.value]
    } else {
      originalCouponList.value = []
      couponList.value = []
    }
  } catch (error) {
    console.error('获取审核列表失败:', error)
    message.alert({
      title: '提示',
      msg: '获取数据失败，请稍后重试',
    })
  } finally {
    loading.value = false
  }
}

// 处理搜索
const handleSearch = () => {
  // 从原始数据中筛选
  let filteredList = [...originalCouponList.value]

  if (filterForm.value.type && filterForm.value.value) {
    if (filterForm.value.type === 'phone') {
      filteredList = filteredList.filter(
        (item) => item.coupon2phone && item.coupon2phone.includes(filterForm.value.value),
      )
    } else if (filterForm.value.type === 'name') {
      filteredList = filteredList.filter(
        (item) => item.usersname && item.usersname.includes(filterForm.value.value),
      )
    } else if (filterForm.value.type === 'status') {
      if (filterForm.value.value !== '') {
        filteredList = filteredList.filter(
          (item) => item.coupon2sype.toString() === filterForm.value.value,
        )
      }
    }
  }

  couponList.value = filteredList
}

// 点击列表项
const handleItemClick = (item: any) => {
  // 所有状态都可以进入详情页查看
  uni.navigateTo({
    url: `/pages/coupon/audit-detail?coupon2sid=${item.coupon2sid}`,
  })
}

onLoad(() => {
  // 检查审核权限
  if (!userStore.audit_auth) {
    message
      .alert({
        title: '提示',
        msg: '您没有审核权限',
      })
      .then(() => {
        uni.navigateBack()
      })
    return
  }

  loadCouponList()
})
</script>

<style lang="scss" scoped>
.filter-section {
  border-radius: 0 0 8px 8px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
}

.filter-row {
  display: flex;
  gap: 8px;
  align-items: center;
}
</style>
