﻿<template>
  <view class="page-container">
    <NavBar :title="t('materialOutbound.moduleName')" />

    <view class="filter-bar">
      <view class="filter-row quick-row">
        <picker :range="statusPickerLabels" :value="statusPickerIndex" @change="onStatusFilterChange">
          <view class="status-filter">
            <text :class="['status-filter-text', selectedStatus === '' ? 'placeholder' : '']">{{ currentStatusLabel }}</text>
            <uni-icons type="bottom" size="14" color="#a8adb7"></uni-icons>
          </view>
        </picker>
      </view>
      <view class="filter-row search-row">
        <view class="keyword-wrap">
          <input v-model="searchKeyword" class="keyword-input" type="text" :placeholder="t('materialOutbound.searchPlaceholder')" confirm-type="search" @input="handleKeywordInput" @confirm="handleSearch" />
        </view>
        <view class="icon-filter-btn" @click="resetFilters"><uni-icons type="refresh" size="24" color="#7b8491"></uni-icons></view>
        <view class="icon-filter-btn" @click="openFilterDrawer"><uni-icons type="settings" size="24" color="#7b8491"></uni-icons></view>
      </view>
    </view>

    <uni-popup ref="filterPopupRef" class="material-outbound-filter-popup" type="right" background-color="transparent" :animation="false">
      <view class="filter-drawer">
        <view class="drawer-header"><text class="drawer-title">{{ t('functionCommon.moreFilter') }}</text></view>
        <scroll-view scroll-y class="drawer-body">
          <view class="drawer-section">
            <view class="drawer-section-head"><text class="drawer-section-title">{{ t('materialOutbound.materialInfo') }}</text></view>
            <view class="drawer-grid">
              <view class="drawer-field drawer-field-wide"><text class="drawer-label">{{ t('materialOutbound.creator') }}</text>
                <view class="drawer-picker" @click="toggleCreatorPanel">
                  <text :class="['drawer-picker-text', !selectedCreator ? 'placeholder' : '']">{{ selectedCreatorLabel }}</text>
                  <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
                </view>
                <scroll-view v-if="creatorPanelOpen" scroll-y class="drawer-option-panel">
                  <view v-for="item in creatorOptions" :key="item.value" :class="['drawer-option-item', selectedCreator === item.value ? 'active' : '']" @click="selectCreator(item)">
                    <text class="drawer-option-text">{{ item.label }}</text>
                    <text v-if="selectedCreator === item.value" class="drawer-option-check">✓</text>
                  </view>
                </scroll-view>
              </view>
              <view class="drawer-field drawer-field-wide">
                <text class="drawer-label">{{ t('materialOutbound.outboundTime') }}</text>
                <view class="drawer-date"><uni-datetime-picker v-model="inTimeFilter" type="daterange" :clear-icon="true" :start-placeholder="t('materialOutbound.startTime')" :end-placeholder="t('materialOutbound.endTime')" /></view>
              </view>
            </view>
          </view>
        </scroll-view>
        <view class="drawer-actions">
          <view class="drawer-action reset" @click="resetFilters">{{ t('functionCommon.reset') }}</view>
          <view class="drawer-action confirm" @click="confirmFilterDrawer">{{ t('functionCommon.confirm') }}</view>
        </view>
      </view>
    </uni-popup>

    <scroll-view scroll-y class="list-scroll" :scroll-top="scrollTop" @scroll="onScroll" @scrolltolower="loadMore" :lower-threshold="80">
      <view class="list-wrap">
        <view v-for="item in list" :key="item.id" class="task-card" @click="openDetail(item)">
          <view class="card-header">
            <view class="header-main">
              <view class="header-left"><text class="task-no">{{ textValue(item.no) }}</text></view>
              <view class="header-tags"><text :class="['record-tag', statusClass(item.status)]">{{ statusText(item.status) }}</text></view>
            </view>
          </view>
          <view class="card-body">
            <view class="row"><text class="label">{{ t('materialOutbound.materialInfo') }}</text><text class="value">{{ textValue(item.productNames) }}</text></view>
            <view class="row"><text class="label">{{ t('materialOutbound.outboundTime') }}</text><text class="value">{{ formatDateTime(item.outTime || item.createTime) }}</text></view>
            <view class="row"><text class="label">{{ t('materialOutbound.creator') }}</text><text class="value">{{ textValue(item.creatorName || item.creator) }}</text></view>
            <view class="row"><text class="label">经办人</text><text class="value">{{ textValue(item.stockUserName) }}</text></view>
            <view class="row"><text class="label">{{ t('materialOutbound.quantity') }}</text><text class="value highlight">{{ textValue(item.totalCount) }}</text></view>
            <view class="row"><text class="label">{{ t('materialOutbound.reviewer') }}</text><text class="value">{{ textValue(item.auditUserName) }}</text></view>
          </view>
          <view v-if="Number(item.status) === 0" class="card-actions">
            <view class="action-btn submit-btn" @click.stop="openSubmitAudit(item)">提交审核</view>
          </view>
          <view v-if="Number(item.status) === 10" class="card-actions">
            <view class="action-btn approve-btn" @click.stop="handleApprove(item)">审核通过</view>
            <view class="action-btn reject-btn" @click.stop="handleReject(item)">审核驳回</view>
          </view>
        </view>
        <view v-if="loading && pageNo === 1" class="hint">{{ t('functionCommon.loading') }}</view>
        <view v-else-if="!list.length" class="hint">{{ t('materialOutbound.empty') }}</view>
        <view v-else-if="loadingMore" class="hint">{{ t('functionCommon.loadingMore') }}</view>
        <view v-else-if="finished" class="hint">{{ t('functionCommon.noMoreData') }}</view>
      </view>
    </scroll-view>

    <view v-if="showGoTop" class="go-top-btn" @click="goTop"><uni-icons type="arrow-up" size="20" color="#1f4b79"></uni-icons></view>

    <!-- <view class="add-btn" @click="goAdd"><text class="add-icon">+</text></view> -->

    <!-- 提交审核弹框 -->
    <view v-if="showAuditModal" class="modal-overlay" @click="closeAuditModal">
      <view class="modal-card" @click.stop>
        <view class="modal-header"><text class="modal-title">提交审核</text><text class="modal-close" @click="closeAuditModal">✕</text></view>
        <view class="modal-body">
          <view class="modal-field">
            <text class="modal-label"><text class="required">*</text>审核人</text>
            <view class="modal-dropdown" @click="toggleAuditorDropdown">
              <text :class="{ placeholder: !selectedAuditor }">{{ selectedAuditor ? selectedAuditor.label : '请选择' }}</text>
              <text class="dropdown-arrow">▼</text>
              <view v-if="showAuditorDropdown" class="dropdown-panel">
                <scroll-view scroll-y class="dropdown-scroll">
                  <view v-for="u in auditorOptions" :key="u.value" class="dropdown-item" :class="{ active: selectedAuditor?.value === u.value }" @click.stop="selectAuditor(u)">
                    <text class="dropdown-item-text">{{ u.label }}</text>
                    <text v-if="selectedAuditor?.value === u.value" class="dropdown-check">✓</text>
                  </view>
                </scroll-view>
              </view>
            </view>
          </view>
          <view class="modal-field">
            <text class="modal-label">备注</text>
            <textarea v-model="auditRemark" class="modal-textarea" placeholder="请输入备注" placeholder-class="textarea-placeholder" :maxlength="200" />
          </view>
        </view>
        <view class="modal-footer">
          <view class="modal-btn cancel-btn" @click="closeAuditModal">取消</view>
          <view class="modal-btn confirm-btn" @click="confirmSubmitAudit">确定</view>
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { computed, ref } from 'vue'
import { onShow, onUnload, onHide } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import NavBar from '@/components/common/NavBar.vue'
import { getMaterialOutboundPage, auditMaterialOutbound, submitMaterialOutbound } from '@/api/mes/materialOutbound'
import { getSimpleUserList } from '@/api/mes/moldget'

const { t } = useI18n()

const selectedStatus = ref('')
const searchKeyword = ref('')
const filterPopupRef = ref(null)
const selectedCreator = ref(null)
const inTimeFilter = ref([])
const creatorOptions = ref([])
const creatorPanelOpen = ref(false)

const statusOptions = computed(() => [
  { label: t('materialOutbound.tabPending'), value: '0' },
  { label: t('materialOutbound.tabAuditing'), value: '10' },
  { label: t('materialOutbound.approve'), value: '20' },
  { label: '已驳回', value: '1' }
])
const statusPickerLabels = computed(() => [t('materialOutbound.allStatus'), ...statusOptions.value.map(i => i.label)])
const statusPickerIndex = computed(() => { if (selectedStatus.value === '') return 0; const idx = statusOptions.value.findIndex(i => i.value === selectedStatus.value); return idx >= 0 ? idx + 1 : 0 })
const currentStatusLabel = computed(() => { if (selectedStatus.value === '') return t('materialOutbound.allStatus'); const cur = statusOptions.value.find(i => i.value === selectedStatus.value); return cur ? cur.label : t('materialOutbound.allStatus') })
const selectedCreatorLabel = computed(() => { if (!selectedCreator.value) return t('materialOutbound.creator'); const found = creatorOptions.value.find(u => u.value === selectedCreator.value); return found ? found.label : t('materialOutbound.creator') })
const list = ref([])
const loading = ref(false)
const loadingMore = ref(false)
const finished = ref(false)
const pageNo = ref(1)
const pageSize = ref(10)
const scrollTop = ref(0)
const showGoTop = ref(false)
let searchTimer = null

function textValue(v) { if (v === 0) return '0'; if (v == null) return '-'; const s = String(v).trim(); return s || '-' }
function formatDateTime(value) {
  if (!value) return '-'
  if (Array.isArray(value) && value.length >= 3) { const [y,m,d]=value; const p=n=>String(n).padStart(2,'0'); return `${y}-${p(m)}-${p(d)}` }
  const date = new Date(Number(value)); if (Number.isNaN(date.getTime())) return String(value)
  const p=n=>String(n).padStart(2,'0'); return `${date.getFullYear()}-${p(date.getMonth()+1)}-${p(date.getDate())}`
}

const STATUS_MAP = { 0: '待出库', 10: '待审核', 20: '已出库', 1: '已驳回' }
function statusText(s) { const num = Number(s); return STATUS_MAP[num] || textValue(num) }
function statusClass(s) {
  const num = Number(s)
  if (num === 0) return 'text-primary'
  if (num === 10) return 'text-warning'
  if (num === 20) return 'text-success'
  if (num === 1) return 'text-danger'
  return ''
}

function normalizePageData(res) {
  const root = res && res.data !== undefined ? res.data : res
  const l = root?.list || root?.rows || root?.records || root?.data?.list || root?.data?.rows || []
  const t = root?.total ?? root?.data?.total ?? (Array.isArray(l) ? l.length : 0)
  return { list: Array.isArray(l) ? l : [], total: Number(t || 0) }
}

async function fetchList(reset) {
  if (reset) { pageNo.value = 1; finished.value = false }
  if (pageNo.value === 1) loading.value = true; else loadingMore.value = true
  try {
    const inTimeRange = Array.isArray(inTimeFilter.value) ? inTimeFilter.value : []
    const params = { pageNo: pageNo.value, pageSize: pageSize.value, no: searchKeyword.value.trim() || undefined, statusList: selectedStatus.value !== '' ? [Number(selectedStatus.value)] : undefined, creator: selectedCreator.value || undefined, outTime: inTimeRange.length === 2 ? [inTimeRange[0] + ' 00:00:00', inTimeRange[1] + ' 23:59:59'] : undefined }
    const res = await getMaterialOutboundPage(params)
    const page = normalizePageData(res)
    list.value = reset ? page.list : [...list.value, ...page.list]
    finished.value = list.value.length >= page.total || page.list.length < pageSize.value
  } catch (e) { if (!reset) pageNo.value = Math.max(1, pageNo.value - 1); uni.showToast({ title: t('functionCommon.loadFailed'), icon: 'none' }) }
  finally { loading.value = false; loadingMore.value = false }
}

function onStatusFilterChange(event) { const index = Number(event?.detail?.value || 0); if (index === 0) { selectedStatus.value = '' } else { const item = statusOptions.value[index - 1]; selectedStatus.value = item ? item.value : '' }; fetchList(true) }
function handleSearch() { clearSearchTimer(); uni.hideKeyboard(); fetchList(true) }
function handleKeywordInput() { clearSearchTimer(); searchTimer = setTimeout(() => fetchList(true), 300) }
function resetFilters() { clearSearchTimer(); searchKeyword.value = ''; selectedStatus.value = ''; selectedCreator.value = null; inTimeFilter.value = []; fetchList(true) }
function openFilterDrawer() { loadCreatorOptions(); filterPopupRef.value?.open() }
function confirmFilterDrawer() { filterPopupRef.value?.close(); fetchList(true) }
function toggleCreatorPanel() { creatorPanelOpen.value = !creatorPanelOpen.value }
function selectCreator(item) { selectedCreator.value = selectedCreator.value === item.value ? null : item.value; creatorPanelOpen.value = false }
async function loadCreatorOptions() { if (creatorOptions.value.length) return; try { const res = await getSimpleUserList(); const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : []); creatorOptions.value = data.map(u => ({ value: u.id || u.userId, label: u.nickname || u.userName || u.name || String(u.id || '') })) } catch (e) {} }
async function loadMore() { if (loading.value || loadingMore.value || finished.value) return; pageNo.value += 1; await fetchList(false) }
function openDetail(item) { if (!item?.id) { uni.showToast({ title: t('functionCommon.noIdView'), icon: 'none' }); return }; uni.navigateTo({ url: `/pages_function/pages/materialOutbound/detail?id=${encodeURIComponent(String(item.id))}` }) }

async function handleApprove(item) {
  if (!item?.id) return
  uni.showModal({ title: t('functionCommon.confirmTitle'), content: t('materialOutbound.confirmApprove'), confirmColor: '#16a34a',
    success: async (res) => { if (res.confirm) { try { await auditMaterialOutbound({ id: item.id, status: 20 }); uni.showToast({ title: t('materialOutbound.approveSuccess'), icon: 'success' }); fetchList(true) } catch (e) { uni.showToast({ title: t('functionCommon.saveFailed'), icon: 'none' }) } } }
  })
}
async function handleReject(item) {
  if (!item?.id) return
  uni.showModal({ title: t('functionCommon.confirmTitle'), content: t('materialOutbound.confirmReject'), confirmColor: '#dc2626',
    success: async (res) => { if (res.confirm) { try { await auditMaterialOutbound({ id: item.id, status: 1 }); uni.showToast({ title: t('materialOutbound.rejectSuccess'), icon: 'success' }); fetchList(true) } catch (e) { uni.showToast({ title: t('functionCommon.saveFailed'), icon: 'none' }) } } }
  })
}

// 提交审核弹框
const showAuditModal = ref(false)
const currentAuditItem = ref(null)
const auditorOptions = ref([])
const selectedAuditor = ref(null)
const showAuditorDropdown = ref(false)
const auditRemark = ref('')

function openSubmitAudit(item) { currentAuditItem.value = item; selectedAuditor.value = null; auditRemark.value = ''; showAuditModal.value = true; loadAuditorOptions() }
function closeAuditModal() { showAuditModal.value = false; currentAuditItem.value = null; showAuditorDropdown.value = false }
function toggleAuditorDropdown() { showAuditorDropdown.value = !showAuditorDropdown.value }
function selectAuditor(u) { selectedAuditor.value = u; showAuditorDropdown.value = false }
async function loadAuditorOptions() { if (auditorOptions.value.length) return; try { const res = await getSimpleUserList(); const data = Array.isArray(res) ? res : (Array.isArray(res?.data) ? res.data : []); auditorOptions.value = data.map(u => ({ value: u.id || u.userId, label: u.nickname || u.userName || u.name || String(u.id || '') })) } catch (e) {} }
async function confirmSubmitAudit() {
  if (!selectedAuditor.value) { uni.showToast({ title: '请选择审核人', icon: 'none' }); return }
  if (!currentAuditItem.value?.id) return
  try { uni.showLoading({ title: '提交中...', mask: true }); await submitMaterialOutbound({ id: currentAuditItem.value.id, auditUserId: selectedAuditor.value.value, remark: auditRemark.value || undefined }); uni.hideLoading(); uni.showToast({ title: '提交审核成功', icon: 'success' }); closeAuditModal(); fetchList(true) }
  catch (e) { uni.hideLoading(); uni.showToast({ title: '提交失败', icon: 'none' }) }
}

function onScroll(e) { showGoTop.value = (e?.detail?.scrollTop || 0) > 600 }
function goTop() { scrollTop.value = 0 }
function goAdd() { uni.navigateTo({ url: '/pages_function/pages/materialOutbound/create' }) }
function clearSearchTimer() { if (searchTimer) { clearTimeout(searchTimer); searchTimer = null } }

onShow(() => { fetchList(true) })
onUnload(() => { clearSearchTimer() })
onHide(() => {})
</script>

<style lang="scss" scoped>
.page-container { min-height: 100vh; background: #f4f5f7; }
.filter-bar { padding: 18rpx 14rpx 20rpx; background: #f3f4f6; }
.filter-row { display: flex; align-items: center; gap: 18rpx; }
.search-row { margin-top: 18rpx; }
.quick-row > picker { min-width: 0; flex: 1; }
.keyword-wrap, .status-filter, .icon-filter-btn { height: 66rpx; border: 1rpx solid #d9dde5; background: #ffffff; box-sizing: border-box; }
.keyword-wrap { min-width: 0; flex: 1; display: flex; align-items: center; }
.keyword-input { width: 100%; height: 64rpx; padding: 0 20rpx; font-size: 26rpx; color: #374151; }
.status-filter { min-width: 0; flex: 1; display: flex; align-items: center; justify-content: space-between; padding: 0 18rpx 0 26rpx; }
.status-filter-text { min-width: 0rpx; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #374151; }
.status-filter-text.placeholder { color: #a8adb7; }
.icon-filter-btn { width: 66rpx; flex: 0 0 66rpx; display: flex; align-items: center; justify-content: center; border-color: transparent; background: transparent; }

::deep(.material-outbound-filter-popup.right .uni-popup__content-transition) { transform: none !important; }
.filter-drawer { width: 630rpx; height: calc(100vh - var(--status-bar-height)); margin-top: var(--status-bar-height); background: #f5f5f7; display: flex; flex-direction: column; overflow: hidden; border-radius: 28rpx 0 0 28rpx; }
.drawer-header { height: 104rpx; padding: 18rpx 34rpx 0; background: #ffffff; display: flex; align-items: center; justify-content: flex-start; box-sizing: border-box; }
.drawer-title { color: #1f2937; font-size: 34rpx; line-height: 1.3; font-weight: 700; }
.drawer-body { flex: 1; min-height: 0; padding-bottom: 40rpx; box-sizing: border-box; }
.drawer-actions { height: 126rpx; padding: 18rpx 28rpx 24rpx; box-sizing: border-box; display: flex; align-items: center; gap: 0; background: #ffffff; box-shadow: 0 -8rpx 24rpx rgba(17, 24, 39, 0.06); }
.drawer-action { flex: 1; height: 72rpx; display: flex; align-items: center; justify-content: center; font-size: 28rpx; font-weight: 600; border: 2rpx solid #174b78; box-sizing: border-box; }
.drawer-action.reset { border-radius: 12rpx 0 0 12rpx; background: #ffffff; color: #174b78; }
.drawer-action.confirm { border-radius: 0 12rpx 12rpx 0; background: #174b78; color: #ffffff; }

.drawer-section { margin-bottom: 18rpx; padding: 28rpx 28rpx 30rpx; border-radius: 24rpx; background: #ffffff; box-sizing: border-box; }
.drawer-section-head { display: flex; align-items: center; justify-content: space-between; margin-bottom: 24rpx; }
.drawer-section-title { font-size: 32rpx; line-height: 1.3; color: #1f2937; font-weight: 700; }
.drawer-grid { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 22rpx 20rpx; }
.drawer-field { min-width: 0; }
.drawer-field-wide { grid-column: 1 / -1; }
.drawer-label { display: block; margin-bottom: 12rpx; font-size: 24rpx; line-height: 1.3; color: #4b5563; font-weight: 500; }
.drawer-picker { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; justify-content: center; padding: 0 18rpx; gap: 8rpx; }
.drawer-picker-text { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #111827; text-align: center; }
.drawer-picker-text.placeholder { color: #9ca3af; }
.drawer-option-panel { max-height: 360rpx; margin-top: 12rpx; border-radius: 12rpx; background: #f7f8fb; overflow: hidden; }
.drawer-option-item { min-height: 72rpx; padding: 0 24rpx; display: flex; align-items: center; justify-content: space-between; border-bottom: 1rpx solid #eceff3; box-sizing: border-box; }
.drawer-option-item:last-child { border-bottom: 0; }
.drawer-option-item.active { background: rgba(23, 75, 120, 0.1); }
.drawer-option-item.active .drawer-option-text { color: #174b78; font-weight: 600; }
.drawer-option-text { min-width: 0; flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 26rpx; color: #1f2937; }
.drawer-option-check { flex-shrink: 0; font-size: 28rpx; color: #174b78; margin-left: 16rpx; }
.drawer-date { width: 100%; min-height: 74rpx; border: 0; border-radius: 8rpx; background: #f7f8fb; box-sizing: border-box; display: flex; align-items: center; padding: 0 12rpx; }
.drawer-date :deep(.uni-date), .drawer-date :deep(.uni-date-editor), .drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { width: 100%; }
.drawer-date :deep(.uni-date-editor), .drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { min-height: 74rpx; }
.drawer-date :deep(.uni-date-editor--x), .drawer-date :deep(.uni-date-x) { border: 0; padding: 0; background: transparent; }
.drawer-date :deep(.uni-date-range) { display: flex; align-items: center; }
.drawer-date :deep(.uni-date__x-input) { text-align: center; font-size: 26rpx; color: #111827; }

.list-scroll { height: calc(100vh - 194rpx); }
.list-wrap { padding: 0 24rpx 60rpx; }
.task-card { position: relative; margin-top: 20rpx; padding: 28rpx; background: #fff; border-radius: 22rpx; box-shadow: 0 8rpx 28rpx rgba(15,23,42,0.06); }
.card-header { margin-bottom: 18rpx; }
.header-main { display: flex; align-items: center; justify-content: space-between; gap: 16rpx; }
.header-left { min-width: 0; flex: 1; }
.task-no { font-size: 32rpx; font-weight: 700; color: #0f172a; }
.header-tags { display: flex; align-items: center; gap: 12rpx; flex-shrink: 0; }
.record-tag { padding: 8rpx 18rpx; border-radius: 999rpx; font-size: 22rpx; line-height: 1; background: #e2e8f0; color: #64748b; }
.card-body .row { display: flex; justify-content: space-between; align-items: flex-start; gap: 20rpx; margin-top: 12rpx; &:first-child { margin-top: 0; } }
.label { width: 140rpx; font-size: 25rpx; color: #94a3b8; flex-shrink: 0; }
.value { flex: 1; text-align: right; font-size: 27rpx; color: #334155; line-height: 1.5; &.highlight { color: #1f4b79; font-weight: 600; } }

.card-actions { display: flex; gap: 16rpx; margin-top: 20rpx; padding-top: 20rpx; border-top: 1rpx solid #f0f0f0; }
.action-btn { flex: 1; height: 64rpx; line-height: 64rpx; text-align: center; border-radius: 10rpx; font-size: 26rpx; font-weight: 500;
  &.approve-btn { background: #dcfce7; color: #16a34a; }
  &.reject-btn { background: #fee2e2; color: #dc2626; }
  &.submit-btn { background: #dbeafe; color: #1d4ed8; }
  &:active { opacity: 0.8; }
}

.text-success { color: #16a34a; } .text-danger { color: #dc2626; } .text-warning { color: #d97706; } .text-primary { color: #2563eb; }
.record-tag.text-success { color: #15803d; background: #dcfce7; }
.record-tag.text-danger { color: #dc2626; background: #fee2e2; }
.record-tag.text-warning { color: #d97706; background: #fef3c7; }
.record-tag.text-primary { color: #1d4ed8; background: #dbeafe; }

.hint { padding: 36rpx 0; text-align: center; color: #94a3b8; font-size: 26rpx; }
.go-top-btn { position: fixed; right: 28rpx; bottom: calc(140rpx + env(safe-area-inset-bottom)); width: 92rpx; height: 92rpx; border-radius: 46rpx; background: rgba(255,255,255,0.96); box-shadow: 0 8rpx 24rpx rgba(15,23,42,0.12); display: flex; align-items: center; justify-content: center; }
.add-btn { position: fixed; right: 28rpx; bottom: calc(56rpx + env(safe-area-inset-bottom)); width: 92rpx; height: 92rpx; border-radius: 46rpx; background: #1f4b79; box-shadow: 0 14rpx 30rpx rgba(24,63,108,0.24); display: flex; align-items: center; justify-content: center; }
.add-icon { color: #fff; font-size: 64rpx; line-height: 1; margin-top: -4rpx; }

/* 提交审核弹框 */
.modal-overlay { position: fixed; top: 0; left: 0; right: 0; bottom: 0; background: rgba(0,0,0,0.45); z-index: 999; display: flex; align-items: center; justify-content: center; }
.modal-card { width: 640rpx; background: #fff; border-radius: 20rpx; box-shadow: 0 16rpx 48rpx rgba(0,0,0,0.15); }
.modal-header { display: flex; align-items: center; justify-content: space-between; padding: 32rpx 32rpx 20rpx; border-bottom: 1rpx solid #f0f0f0; }
.modal-title { font-size: 32rpx; font-weight: 700; color: #1a1a1a; }
.modal-close { font-size: 32rpx; color: #999; padding: 8rpx; }
.modal-body { padding: 28rpx 32rpx; }
.modal-field { margin-bottom: 28rpx; &:last-child { margin-bottom: 0; } }
.modal-label { font-size: 28rpx; color: #374151; font-weight: 500; margin-bottom: 14rpx; display: block; }
.modal-label .required { color: #ef4444; }
.modal-dropdown { position: relative; display: flex; align-items: center; justify-content: space-between; height: 80rpx; padding: 0 24rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; font-size: 28rpx; color: #374151;
  .placeholder { color: #bbb; }
  .dropdown-arrow { font-size: 20rpx; color: #999; }
}
.modal-textarea { width: 100%; min-height: 140rpx; padding: 20rpx; background: #f8fafc; border: 1rpx solid #e0e0e0; border-radius: 12rpx; font-size: 27rpx; color: #374151; box-sizing: border-box; }
.textarea-placeholder { color: #bbb; }
.dropdown-panel { position: absolute; top: 100%; left: 0; right: 0; z-index: 200; margin-top: 4rpx; background: #fff; border: 1rpx solid #e0e0e0; border-radius: 12rpx; box-shadow: 0 8rpx 30rpx rgba(0,0,0,0.1); overflow: hidden; }
.dropdown-scroll { height: 300rpx; }
.dropdown-item { display: flex; align-items: center; justify-content: space-between; padding: 20rpx 24rpx; border-bottom: 1rpx solid #f0f0f0; &:last-child { border-bottom: 0; } &.active { background: #f0f5ff; } }
.dropdown-item-text { font-size: 27rpx; color: #333; }
.dropdown-check { font-size: 28rpx; color: #2563eb; font-weight: 700; }
.modal-footer { display: flex; gap: 18rpx; padding: 24rpx 32rpx; border-top: 1rpx solid #f0f0f0; }
.modal-btn { flex: 1; height: 80rpx; line-height: 80rpx; text-align: center; border-radius: 14rpx; font-size: 30rpx; font-weight: 600; &:active { opacity: 0.85; }
  &.cancel-btn { background: #f0f0f0; color: #6b7280; }
  &.confirm-btn { background: #1f4b79; color: #fff; }
}
</style>

