<template>
  <view class="yd-page-container">
    <!-- 顶部导航栏 -->
    <wd-navbar
      :title="getTitle"
      left-arrow placeholder safe-area-inset-top fixed
      @click-left="handleBack"
    />

    <!-- 表单区域 -->
    <view class="pb-180rpx">
      <wd-form ref="formRef" :model="formData" :rules="formRules">
        <wd-cell-group title="基本信息" border>
          <wd-cell title="入库单号" :value="formData.no || '保存时自动生成'" />
          <wd-cell
            title="入库时间"
            title-width="180rpx"
            is-link
            :value="formData.inTime ? formatDate(formData.inTime) : '请选择'"
            @click="datePickerVisible = true"
          />
          <wd-cell
            title="供应商"
            title-width="180rpx"
            is-link
            :value="getSupplierName()"
            @click="supplierPickerVisible = true"
          />
          <wd-textarea
            v-model="formData.remark"
            label="备注"
            label-width="180rpx"
            placeholder="请输入备注"
            :maxlength="200"
            show-word-limit
            clearable
          />
        </wd-cell-group>

        <!-- 入库产品清单 -->
        <wd-cell-group title="入库产品清单" border>
          <view v-if="formData.items.length === 0" class="py-40rpx text-center text-[#999]">
            暂无产品，请点击下方按钮添加
          </view>
          <view v-else>
            <view
              v-for="(item, index) in formData.items"
              :key="index"
              class="mx-24rpx mb-20rpx rounded-12rpx bg-[#f9f9f9] p-24rpx"
            >
              <view class="mb-12rpx flex items-center justify-between">
                <view class="text-28rpx text-[#333] font-semibold">
                  {{ item.productName || '请选择产品' }}
                </view>
                <wd-icon name="delete" size="40rpx" color="#f56c6c" @click="removeItem(index)" />
              </view>
              <view class="mb-12rpx">
                <wd-cell
                  title="仓库"
                  title-width="120rpx"
                  is-link
                  :value="item.warehouseName || '请选择'"
                  @click="openWarehousePicker(index)"
                />
              </view>
              <view class="mb-12rpx">
                <wd-cell
                  title="产品"
                  title-width="120rpx"
                  is-link
                  :value="item.productName || '请选择'"
                  @click="openProductPicker(index)"
                />
              </view>
              <view class="mb-12rpx">
                <wd-input
                  v-model="item.count"
                  label="数量"
                  label-width="120rpx"
                  type="number"
                  placeholder="请输入数量"
                  @change="calcItemTotal(item)"
                />
              </view>
              <view class="mb-12rpx">
                <wd-input
                  v-model="item.productPrice"
                  label="单价"
                  label-width="120rpx"
                  type="digit"
                  placeholder="请输入单价"
                  @change="calcItemTotal(item)"
                />
              </view>
              <view class="flex items-center justify-between text-26rpx">
                <text class="text-[#999]">金额</text>
                <text class="text-[#1890ff] font-semibold">{{ formatPrice(item.totalPrice) }}</text>
              </view>
              <view class="mt-12rpx">
                <wd-input
                  v-model="item.remark"
                  label="备注"
                  label-width="120rpx"
                  placeholder="请输入备注"
                />
              </view>
            </view>
          </view>
          <view class="px-24rpx pb-24rpx">
            <wd-button type="primary" plain block @click="addItem">
              <wd-icon name="add" class="mr-8rpx" />
              添加产品
            </wd-button>
          </view>
        </wd-cell-group>

        <!-- 合计信息 -->
        <wd-cell-group title="合计信息" border>
          <wd-cell title="合计数量" :value="formatCount(totalCount)" />
          <wd-cell title="合计金额" :value="formatPrice(totalPrice)" />
        </wd-cell-group>
      </wd-form>
    </view>

    <!-- 底部保存按钮 -->
    <view class="yd-detail-footer">
      <wd-button
        type="primary"
        block
        :loading="formLoading"
        @click="handleSubmit"
      >
        保存
      </wd-button>
    </view>

    <!-- 日期选择器 -->
    <wd-datetime-picker
      v-model="datePickerVisible"
      type="date"
      :value="formData.inTime"
      @confirm="onDateConfirm"
    />

    <!-- 供应商选择器 -->
    <wd-picker
      v-model="supplierPickerVisible"
      :columns="supplierColumns"
      @confirm="onSupplierConfirm"
    />

    <!-- 仓库选择器 -->
    <wd-picker
      v-model="warehousePickerVisible"
      :columns="warehouseColumns"
      @confirm="onWarehouseConfirm"
    />

    <!-- 产品选择器 -->
    <wd-picker
      v-model="productPickerVisible"
      :columns="productColumns"
      @confirm="onProductConfirm"
    />
  </view>
</template>

<script lang="ts" setup>
import type { FormInstance } from 'wot-design-uni/components/wd-form/types'
import type { StockIn, StockInItem } from '@/api/erp/stock-in'
import { computed, onMounted, ref } from 'vue'
import { useToast } from 'wot-design-uni'
import { createStockIn, getStockIn, updateStockIn } from '@/api/erp/stock-in'
import { getSupplierSimpleList } from '@/api/erp/supplier'
import { getWarehouseSimpleList } from '@/api/erp/warehouse'
import { navigateBackPlus } from '@/utils'

const props = defineProps<{
  id?: number | any
}>()

definePage({
  style: {
    navigationBarTitleText: '',
    navigationStyle: 'custom',
  },
})

const toast = useToast()
const getTitle = computed(() => props.id ? '编辑入库单' : '新增入库单')
const formLoading = ref(false)
const formData = ref<StockIn>({
  id: undefined,
  no: undefined,
  supplierId: undefined,
  inTime: undefined,
  remark: undefined,
  items: [],
})
const formRules = {
  inTime: [{ required: true, message: '入库时间不能为空' }],
}
const formRef = ref<FormInstance>()

// 供应商列表
const supplierList = ref<{ id: number, name: string }[]>([])
const supplierPickerVisible = ref(false)
const supplierColumns = computed(() => [
  supplierList.value.map(v => ({ value: v.id, label: v.name })),
])

// 仓库列表
const warehouseList = ref<{ id: number, name: string }[]>([])
const warehousePickerVisible = ref(false)
const warehouseColumns = computed(() => [
  warehouseList.value.map(v => ({ value: v.id, label: v.name })),
])

// 产品列表（简化，实际可能需要从产品API获取）
const productList = ref<{ id: number, name: string, unitName?: string }[]>([])
const productPickerVisible = ref(false)
const productColumns = computed(() => [
  productList.value.map(v => ({ value: v.id, label: v.name })),
])

// 日期选择器
const datePickerVisible = ref(false)

// 当前编辑的产品项索引
const currentItemIndex = ref(-1)

/** 合计数量 */
const totalCount = computed(() => {
  return formData.value.items?.reduce((sum, item) => sum + (Number(item.count) || 0), 0) || 0
})

/** 合计金额 */
const totalPrice = computed(() => {
  return formData.value.items?.reduce((sum, item) => sum + (Number(item.totalPrice) || 0), 0) || 0
})

/** 获取供应商名称 */
function getSupplierName() {
  if (!formData.value.supplierId) return '请选择'
  const supplier = supplierList.value.find(s => s.id === formData.value.supplierId)
  return supplier?.name || '请选择'
}

/** 格式化数量 */
function formatCount(count?: number) {
  if (count === undefined || count === null) return '-'
  return count.toFixed(2)
}

/** 格式化金额 */
function formatPrice(price?: number) {
  if (price === undefined || price === null) return '-'
  return `¥${price.toFixed(2)}`
}

/** 格式化日期 */
function formatDate(dateStr?: string) {
  if (!dateStr) return '-'
  if (typeof dateStr === 'number') {
    const d = new Date(dateStr)
    const pad = (n: number) => n.toString().padStart(2, '0')
    return `${d.getFullYear()}-${pad(d.getMonth() + 1)}-${pad(d.getDate())}`
  }
  return dateStr.substring(0, 10)
}

/** 返回上一页 */
function handleBack() {
  navigateBackPlus('/pages-erp/stock-in/index')
}

/** 加载详情 */
async function getDetail() {
  if (!props.id) return
  try {
    toast.loading('加载中...')
    formData.value = await getStockIn(props.id)
  } finally {
    toast.close()
  }
}

/** 日期确认 */
function onDateConfirm({ value }: any) {
  formData.value.inTime = value
  datePickerVisible.value = false
}

/** 供应商确认 */
function onSupplierConfirm({ value }: any) {
  formData.value.supplierId = value?.[0]
  supplierPickerVisible.value = false
}

/** 打开仓库选择器 */
function openWarehousePicker(index: number) {
  currentItemIndex.value = index
  warehousePickerVisible.value = true
}

/** 仓库确认 */
function onWarehouseConfirm({ value }: any) {
  if (currentItemIndex.value >= 0 && formData.value.items) {
    const item = formData.value.items[currentItemIndex.value]
    item.warehouseId = value?.[0]
    const warehouse = warehouseList.value.find(w => w.id === item.warehouseId)
    item.warehouseName = warehouse?.name
  }
  warehousePickerVisible.value = false
}

/** 打开产品选择器 */
function openProductPicker(index: number) {
  currentItemIndex.value = index
  productPickerVisible.value = true
}

/** 产品确认 */
function onProductConfirm({ value }: any) {
  if (currentItemIndex.value >= 0 && formData.value.items) {
    const item = formData.value.items[currentItemIndex.value]
    item.productId = value?.[0]
    const product = productList.value.find(p => p.id === item.productId)
    item.productName = product?.name
    item.productUnitName = product?.unitName
  }
  productPickerVisible.value = false
}

/** 添加产品项 */
function addItem() {
  if (!formData.value.items) {
    formData.value.items = []
  }
  formData.value.items.push({
    warehouseId: undefined,
    warehouseName: undefined,
    productId: undefined,
    productName: undefined,
    productUnitName: undefined,
    count: undefined,
    productPrice: undefined,
    totalPrice: 0,
    remark: undefined,
  })
}

/** 移除产品项 */
function removeItem(index: number) {
  formData.value.items?.splice(index, 1)
}

/** 计算产品项金额 */
function calcItemTotal(item: StockInItem) {
  const count = Number(item.count) || 0
  const price = Number(item.productPrice) || 0
  item.totalPrice = count * price
}

/** 提交表单 */
async function handleSubmit() {
  const { valid } = await formRef.value!.validate()
  if (!valid) return

  // 校验产品清单
  if (!formData.value.items || formData.value.items.length === 0) {
    toast.error('请添加入库产品')
    return
  }

  for (const item of formData.value.items) {
    if (!item.warehouseId) {
      toast.error('请选择仓库')
      return
    }
    if (!item.productId) {
      toast.error('请选择产品')
      return
    }
    if (!item.count || Number(item.count) <= 0) {
      toast.error('请输入有效的数量')
      return
    }
  }

  formLoading.value = true
  try {
    // 设置合计
    formData.value.totalCount = totalCount.value
    formData.value.totalPrice = totalPrice.value

    if (props.id) {
      await updateStockIn(formData.value)
      toast.success('修改成功')
    } else {
      await createStockIn(formData.value)
      toast.success('新增成功')
    }
    setTimeout(() => {
      handleBack()
    }, 500)
  } finally {
    formLoading.value = false
  }
}

/** 初始化 */
onMounted(async () => {
  // 加载供应商列表
  supplierList.value = await getSupplierSimpleList()
  // 加载仓库列表
  warehouseList.value = await getWarehouseSimpleList()
  // 加载详情
  getDetail()
})
</script>

<style lang="scss" scoped>
</style>
