<script setup lang="ts">
/**
 * 物资出入库
 *
 * 对防汛物资进行入库或出库操作，
 * 记录数量、类型和操作说明。
 */
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { showSuccessToast } from 'vant'

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

/** 操作类型 */
const opType = ref<'in' | 'out'>('in')
const quantity = ref('')
const batchNo = ref('')
const operator = ref('')
const remark = ref('')

/** 模拟物资信息 */
const material = {
  id: route.params.id,
  name: '柴油水泵',
  stock: 12,
  unit: '台',
  location: '1号仓库',
}

function onSubmit() {
  if (!quantity.value) {
    showSuccessToast('请填写数量')
    return
  }
  if (!operator.value) {
    showSuccessToast('请填写操作人')
    return
  }
  const action = opType.value === 'in' ? '入库' : '出库'
  showSuccessToast(`${action}成功`)
  router.back()
}
</script>

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

    <van-cell-group inset>
      <van-cell title="物资名称" :value="material.name" />
      <van-cell title="当前库存" :value="`${material.stock} ${material.unit}`" />
      <van-cell title="存放位置" :value="material.location" />
    </van-cell-group>

    <van-form @submit="onSubmit" style="margin-top: 12px">
      <van-cell-group inset>
        <van-field
          name="opType"
          label="操作类型"
        >
          <template #input>
            <van-radio-group v-model="opType" direction="horizontal">
              <van-radio name="in">入库</van-radio>
              <van-radio name="out">出库</van-radio>
            </van-radio-group>
          </template>
        </van-field>
        <van-field
          v-model="quantity"
          name="quantity"
          label="数量"
          :placeholder="`请输入${opType === 'in' ? '入库' : '出库'}数量`"
          type="digit"
          :rules="[{ required: true, message: '请填写数量' }]"
        >
          <template #extra>
            <span class="unit-text">{{ material.unit }}</span>
          </template>
        </van-field>
        <van-field
          v-model="batchNo"
          name="batchNo"
          label="批次号"
          placeholder="可选填写批次号"
        />
        <van-field
          v-model="operator"
          name="operator"
          label="操作人"
          placeholder="请输入操作人姓名"
          :rules="[{ required: true, message: '请填写操作人' }]"
        />
        <van-field
          v-model="remark"
          name="remark"
          label="备注"
          placeholder="可选填写备注说明"
          type="textarea"
          rows="2"
          autosize
        />
      </van-cell-group>

      <div class="submit-wrap">
        <van-button type="primary" block round native-type="submit">
          确认{{ opType === 'in' ? '入库' : '出库' }}
        </van-button>
      </div>
    </van-form>
  </div>
</template>

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

  :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;
  }
}

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

.submit-wrap {
  padding: 24px 16px;
}
</style>
