<script setup lang="ts">
/**
 * 物资出入库 — 防汛物资出入库操作
 *
 * 对防汛物资进行入库或出库操作，记录数量、批次号、
 * 操作人和备注。支持表单验证和操作确认。
 * DESIGN: #1E74FF NavBar, #F4F7F8 bg, white cards border-radius 10px.
 */
import { ref, computed, onMounted } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showSuccessToast, showToast } from 'vant'

const router = useRouter()
const route = useRoute()

// ── 类型 ──
type OpType = 'in' | 'out'

interface MaterialInfo {
  id: string | string[]
  name: string
  stock: number
  unit: string
  location: string
  type: string
}

// ── 状态 ──
const opType = ref<OpType>('in')
const quantity = ref('')
const batchNo = ref('')
const operator = ref('')
const remark = ref('')
const submitting = ref(false)
const loading = ref(true)

// ── 数据 ──
const material = ref<MaterialInfo>({
  id: route.params.id || '1',
  name: '柴油水泵',
  stock: 12,
  unit: '台',
  location: '1号仓库',
  type: '水泵类',
})

// ── 计算属性 ──
const submitLabel = computed(() => opType.value === 'in' ? '确认入库' : '确认出库')
const opLabel = computed(() => opType.value === 'in' ? '入库' : '出库')

/** 出库时检查是否超量 */
const isOverStock = computed(() => {
  if (opType.value === 'out' && quantity.value) {
    return Number(quantity.value) > material.value.stock
  }
  return false
})

// ── 方法 ──
function onRadioChange(val: OpType) {
  opType.value = val
  quantity.value = '' // 切换类型时清空数量
}

function onSubmit() {
  if (!quantity.value) {
    showToast('请填写数量')
    return
  }
  const num = Number(quantity.value)
  if (num <= 0 || !Number.isInteger(num)) {
    showToast('请输入正整数')
    return
  }
  if (opType.value === 'out' && num > material.value.stock) {
    showToast('出库数量不能超过当前库存')
    return
  }
  if (!operator.value.trim()) {
    showToast('请填写操作人')
    return
  }

  submitting.value = true
  setTimeout(() => {
    submitting.value = false
    showSuccessToast(`${opLabel.value}成功`)
    router.back()
  }, 600)
}

onMounted(async () => {
  await new Promise(resolve => setTimeout(resolve, 300))
  loading.value = false
})
</script>

<template>
  <div class="page-container">
    <!-- 导航栏 -->
    <van-nav-bar
      title="出入库"
      left-arrow
      fixed
      placeholder
      @click-left="router.back()"
    />

    <!-- 加载状态 -->
    <van-loading v-if="loading" class="loading-center" size="24" />

    <template v-else>
      <!-- 物资信息卡片 -->
      <div class="info-card">
        <div class="card-title-row">{{ material.name }}</div>
        <div class="info-grid">
          <div class="info-item">
            <span class="info-label">当前库存</span>
            <span class="info-value stock-val">{{ material.stock }} {{ material.unit }}</span>
          </div>
          <div class="info-item">
            <span class="info-label">存放位置</span>
            <span class="info-value">{{ material.location }}</span>
          </div>
        </div>
      </div>

      <!-- 操作表单 -->
      <van-form @submit="onSubmit" class="form-wrap">
        <!-- 操作类型 (Radio 组) -->
        <div class="form-card">
          <div class="form-label">操作类型</div>
          <van-radio-group
            :model-value="opType"
            direction="horizontal"
            class="radio-group"
          >
            <van-radio
              name="in"
              icon-size="18"
              checked-color="var(--color-success)"
              @click="onRadioChange('in')"
            >
              <span class="radio-label" :class="{ active: opType === 'in' }">入库</span>
            </van-radio>
            <van-radio
              name="out"
              icon-size="18"
              checked-color="var(--color-danger)"
              @click="onRadioChange('out')"
            >
              <span class="radio-label" :class="{ active: opType === 'out' }">出库</span>
            </van-radio>
          </van-radio-group>
        </div>

        <!-- 表单字段 -->
        <div class="form-card">
          <van-field
            v-model="quantity"
            name="quantity"
            :label="`${opLabel}数量`"
            :placeholder="`请输入${opLabel}数量`"
            type="digit"
            clearable
            :rules="[{ required: true, message: `请填写${opLabel}数量` }]"
            :error="isOverStock"
            :error-message="isOverStock ? '出库数量不能超过当前库存' : ''"
          >
            <template #extra>
              <span class="unit-text">{{ material.unit }}</span>
            </template>
          </van-field>

          <van-field
            v-model="batchNo"
            name="batchNo"
            label="批次号"
            placeholder="可选填写批次号"
            clearable
          />

          <van-field
            v-model="operator"
            name="operator"
            label="操作人"
            placeholder="请输入操作人姓名"
            clearable
            :rules="[{ required: true, message: '请填写操作人' }]"
          />

          <van-field
            v-model="remark"
            name="remark"
            label="备注"
            placeholder="可选填写备注说明"
            type="textarea"
            rows="2"
            autosize
            maxlength="200"
            show-word-limit
          />
        </div>

        <!-- 操作预览提示 -->
        <div class="preview-hint" :class="opType">
          <van-icon
            :name="opType === 'in' ? 'arrow-up' : 'arrow-down'"
            size="16"
          />
          <span>
            {{ opType === 'in' ? '入库' : '出库' }}
            <template v-if="quantity">
              <strong>{{ quantity }}</strong> {{ material.unit }}
            </template>
            {{ material.name }}
          </span>
        </div>

        <!-- 提交按钮 -->
        <div class="submit-wrap">
          <van-button
            :type="opType === 'in' ? 'primary' : 'danger'"
            block
            round
            size="large"
            native-type="submit"
            :loading="submitting"
          >
            {{ submitLabel }}
          </van-button>
        </div>
      </van-form>
    </template>
  </div>
</template>

<style lang="scss" scoped>
.page-container {
  min-height: 100vh;
  background: var(--color-bg-page);
  padding-bottom: 40px;

  :deep(.van-nav-bar) {
    background: var(--color-primary);
    --van-nav-bar-title-text-color: #fff;
    --van-nav-bar-text-color: #fff;
    --van-nav-bar-icon-color: #fff;
  }
}

.loading-center {
  display: flex;
  justify-content: center;
  padding-top: 160px;
}

// ── 物资信息卡片 ──
.info-card {
  margin: 0 12px 10px;
  padding: 16px;
  background: var(--color-bg-card);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.card-title-row {
  font-size: 17px;
  font-weight: 600;
  color: var(--color-text-primary);
  margin-bottom: 12px;
  padding-bottom: 10px;
  border-bottom: 1px solid var(--color-border-light);
}

.info-grid {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.info-item {
  display: flex;
  align-items: center;

  .info-label {
    width: 70px;
    font-size: 13px;
    color: var(--color-text-secondary);
    flex-shrink: 0;
  }

  .info-value {
    font-size: 14px;
    color: var(--color-text-primary);

    &.stock-val {
      font-size: 18px;
      font-weight: 700;
      color: var(--color-primary);
    }
  }
}

// ── 表单 ──
.form-wrap {
  padding: 0 12px;
}

.form-card {
  margin-bottom: 10px;
  padding: 12px 0 0;
  background: var(--color-bg-card);
  border-radius: 10px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  overflow: hidden;

  :deep(.van-cell) {
    padding: 12px 16px;
  }

  :deep(.van-cell::after) {
    left: 16px;
    right: 16px;
  }
}

.form-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--color-text-primary);
  padding: 0 16px 4px;
}

// ── 操作类型 Radio ──
.radio-group {
  display: flex;
  gap: 32px;
  padding: 8px 16px 12px;

  :deep(.van-radio) {
    margin-right: 0;
  }
}

.radio-label {
  font-size: 15px;
  font-weight: 500;
  color: var(--color-text-secondary);
  transition: color 0.2s;

  &.active {
    color: var(--color-text-primary);
    font-weight: 600;
  }
}

.unit-text {
  color: var(--color-text-secondary);
  font-size: 14px;
}

// ── 预览提示 ──
.preview-hint {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  border-radius: 8px;

  &.in {
    background: var(--color-success-bg);
    color: var(--color-success-dark);
  }

  &.out {
    background: var(--color-danger-bg);
    color: var(--color-danger-dark);
  }

  strong {
    font-weight: 600;
  }

  &:empty {
    display: none;
  }
}

// ── 提交按钮 ──
.submit-wrap {
  padding: 8px 4px 40px;
}
</style>
