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

    <!-- 搜索栏 -->
    <view class="filter-bar">
      <view class="keyword-box">
        <input
          v-model="searchKeyword"
          class="keyword-input"
          :placeholder="t('sparepartInbound.searchPlaceholder')"
          confirm-type="search"
          @input="handleKeywordInput"
          @confirm="handleSearch"
        />
      </view>
      <view class="status-box-wrapper">
        <view class="status-box" @click="toggleStatusDropdown">
          <text class="status-box-text">{{ currentStatusLabel }}</text>
          <uni-icons type="bottom" size="14" color="#9ca3af"></uni-icons>
        </view>
        <view v-if="showStatusDropdown" class="status-dropdown-panel">
          <view v-for="(item, idx) in statusOptions" :key="idx" class="status-dropdown-item" :class="{ active: selectedStatus === item.value }" @click.stop="selectStatus(item, idx)">
            <text class="status-dropdown-item-text">{{ item.label }}</text>
            <text v-if="selectedStatus === item.value" class="status-dropdown-check">✓</text>
          </view>
        </view>
      </view>
      <view class="reset-filter-btn" @click="resetFilters">{{ t('functionCommon.reset') }}</view>
    </view>

    <!-- 列表 -->
    <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('sparepartInbound.sparepartInfo') }}</text>
              <text class="value">{{ textValue(item.productNames) }}</text>
            </view>
            <view class="row">
              <text class="label">{{ t('sparepartInbound.inboundTime') }}</text>
              <text class="value">{{ formatDateTime(item.inTime || item.createTime) }}</text>
            </view>
            <view class="row">
              <text class="label">{{ t('sparepartInbound.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('sparepartInbound.quantity') }}</text>
              <text class="value highlight">{{ textValue(item.totalCount) }}</text>
            </view>
            <view class="row">
              <text class="label">{{ t('sparepartInbound.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('sparepartInbound.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, nextTick, ref } from 'vue'
import { onShow, onUnload, onHide } from '@dcloudio/uni-app'
import { useI18n } from 'vue-i18n'
import NavBar from '@/components/common/NavBar.vue'
import { getSparepartInboundPage, auditSparepartInbound, submitSparepartInbound } from '@/api/mes/sparepartInbound'
import { getSimpleUserList } from '@/api/mes/moldget'

const { t } = useI18n()

const selectedStatus = ref('')
const searchKeyword = ref('')
const showStatusDropdown = ref(false)

const statusOptions = computed(() => [
  { label: t('functionCommon.all'), value: '' },
  { label: t('sparepartInbound.tabPending'), value: '0' },
  { label: t('sparepartInbound.tabAuditing'), value: '10' },
  { label: t('sparepartInbound.approve'), value: '20' },
  { label: '已驳回', value: '1' }
])

const currentStatusLabel = computed(() => {
  const current = statusOptions.value.find((item) => item.value === selectedStatus.value)
  return current ? current.label : t('functionCommon.all')
})
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 [year, month, day] = value
    const pad = (n) => String(n).padStart(2, '0')
    return `${year}-${pad(month)}-${pad(day)}`
  }
  const date = new Date(Number(value))
  if (Number.isNaN(date.getTime())) return String(value)
  const pad = (n) => String(n).padStart(2, '0')
  return `${date.getFullYear()}-${pad(date.getMonth() + 1)}-${pad(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 candidateList = root?.list || root?.rows || root?.records || root?.data?.list || root?.data?.rows || []
  const candidateTotal = root?.total ?? root?.data?.total ?? (Array.isArray(candidateList) ? candidateList.length : 0)
  return {
    list: Array.isArray(candidateList) ? candidateList : [],
    total: Number(candidateTotal || 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 params = {
      pageNo: pageNo.value,
      pageSize: pageSize.value,
      no: searchKeyword.value.trim() || undefined,
      statusList: selectedStatus.value !== '' ? [Number(selectedStatus.value)] : undefined
    }
    const res = await getSparepartInboundPage(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 toggleStatusDropdown() {
  showStatusDropdown.value = !showStatusDropdown.value
}

function selectStatus(item, _idx) {
  selectedStatus.value = item.value
  showStatusDropdown.value = false
  fetchList(true)
}

function handleSearch() {
  clearSearchTimer()
  uni.hideKeyboard()
  fetchList(true)
}

function handleKeywordInput() {
  clearSearchTimer()
  searchTimer = setTimeout(() => {
    fetchList(true)
  }, 300)
}

function resetFilters() {
  clearSearchTimer()
  searchKeyword.value = ''
  selectedStatus.value = ''
  fetchList(true)
}

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/sparepartInbound/detail?id=${encodeURIComponent(String(item.id))}`
  })
}

async function handleApprove(item) {
  if (!item?.id) return
  uni.showModal({
    title: t('functionCommon.confirmTitle'),
    content: t('sparepartInbound.confirmApprove'),
    confirmColor: '#16a34a',
    success: async (res) => {
      if (res.confirm) {
        try {
          await auditSparepartInbound({ id: item.id, status: 20 })
          uni.showToast({ title: t('sparepartInbound.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('sparepartInbound.confirmReject'),
    confirmColor: '#dc2626',
    success: async (res) => {
      if (res.confirm) {
        try {
          await auditSparepartInbound({ id: item.id, status: 1 })
          uni.showToast({ title: t('sparepartInbound.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) {
    console.error('loadAuditorOptions error', 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 submitSparepartInbound({
      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(event) {
  showGoTop.value = (event?.detail?.scrollTop || 0) > 600
}

function goTop() {
  scrollTop.value = 0
}

function goAdd() {
  uni.navigateTo({
    url: '/pages_function/pages/sparepartInbound/create'
  })
}

function clearSearchTimer() {
  if (searchTimer) {
    clearTimeout(searchTimer)
    searchTimer = null
  }
}

onShow(() => {
  fetchList(true)
})

onUnload(() => {
  clearSearchTimer()
})

onHide(() => {
  showStatusDropdown.value = false
})
</script>

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

/* ====== 搜索栏 ====== */
.filter-bar {
  display: flex;
  align-items: center;
  gap: 12rpx;
  padding: 18rpx 24rpx;
  background: #fff;
}

.keyword-box {
  flex: 1;
  min-width: 0;
  height: 66rpx;
  padding: 0 28rpx;
  background: #f4f5f7;
  border: 1rpx solid #e5e7eb;
  border-radius: 12rpx;
  display: flex;
  align-items: center;
}

.keyword-input {
  width: 100%;
  font-size: 24rpx;
  color: #374151;
}

.status-box-wrapper {
  position: relative;
  flex-shrink: 0;
}

.status-box {
  display: flex;
  align-items: center;
  justify-content: space-between;
  height: 66rpx;
  padding: 0 28rpx;
  min-width: 160rpx;
  background: #fff;
  border: 1rpx solid #e5e7eb;
  border-radius: 12rpx;
}

.status-dropdown-panel {
  position: absolute;
  top: 74rpx;
  left: 0;
  right: 0;
  z-index: 200;
  background: #fff;
  border: 1rpx solid #e0e0e0;
  border-radius: 12rpx;
  box-shadow: 0 8rpx 30rpx rgba(0, 0, 0, 0.12);
  overflow: hidden;
}

.status-dropdown-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 18rpx 24rpx;
  border-bottom: 1rpx solid #f0f0f0;

  &:last-child {
    border-bottom: 0;
  }

  &.active {
    background: #f0f5ff;
  }
}

.status-dropdown-item-text {
  font-size: 26rpx;
  color: #374151;
}

.status-dropdown-check {
  font-size: 26rpx;
  color: #2563eb;
  font-weight: 700;
}

.status-box-text {
  font-size: 24rpx;
  color: #374151;
  min-width: 0;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.reset-filter-btn {
  height: 66rpx;
  line-height: 66rpx;
  padding: 0 28rpx;
  font-size: 24rpx;
  color: #4b5563;
  background: #fff;
  border: 1rpx solid #e5e7eb;
  border-radius: 12rpx;
  flex-shrink: 0;
}

/* ====== 列表 ====== */
.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: #ffffff;
  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>
