<template>
  <el-drawer
    v-model="dialogVisible"
    :title="dialogTitle"
    direction="rtl"
    size="100%"
    :close-on-press-escape="true"
    :destroy-on-close="true"
    :append-to-body="true"
    class="mobile-form-drawer"
  >
    <div class="mobile-form" v-loading="formLoading">
      <el-form
        ref="formRef"
        :model="formData"
        :rules="formRules"
        label-position="top"
        :disabled="disabled"
      >
        <!-- 基本信息 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">基本信息</div>
          <el-form-item label="订单单号" prop="no">
            <el-input disabled v-model="formData.no" placeholder="保存时自动生成" />
          </el-form-item>
          <el-form-item label="订单时间" prop="orderTime">
            <el-date-picker
              v-model="formData.orderTime"
              type="date"
              value-format="x"
              placeholder="选择订单时间"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="关联请购单" prop="purchaseRequisitionNo">
            <div class="mobile-form__requisition">
              <el-link
                v-if="formData.purchaseRequisitionNo && formData.purchaseRequisitionId"
                type="primary"
                :underline="false"
                @click.stop="openRequisitionDetail"
              >
                {{ formData.purchaseRequisitionNo }}
              </el-link>
              <span v-else class="mobile-form__requisition-empty">未选择</span>
              <el-button size="small" @click="openRequisitionSelect" :disabled="disabled">选择</el-button>
            </div>
          </el-form-item>
          <el-form-item label="供应商" prop="supplierId">
            <el-select
              v-model="formData.supplierId"
              clearable
              filterable
              placeholder="请选择供应商"
              style="width: 100%"
            >
              <el-option
                v-for="item in supplierList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
            <div class="mobile-form__tip">*如果没有供应商请忽略此项填写</div>
          </el-form-item>
          <el-form-item label="备注" prop="remark">
            <el-input
              type="textarea"
              v-model="formData.remark"
              :rows="3"
              placeholder="请输入备注"
            />
          </el-form-item>
          <el-form-item label="附件" prop="fileUrl">
            <UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" />
          </el-form-item>
        </div>

        <!-- 产品清单 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">订单产品清单</div>
          <PurchaseOrderItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" />
        </div>

        <!-- 费用信息 -->
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">费用信息</div>
          <el-form-item label="优惠率（%）" prop="discountPercent">
            <el-input-number
              v-model="formData.discountPercent"
              controls-position="right"
              :min="0"
              :precision="2"
              placeholder="请输入优惠率"
              style="width: 100%"
            />
          </el-form-item>
          <el-form-item label="付款优惠" prop="discountPrice">
            <el-input disabled v-model="formData.discountPrice" :formatter="erpPriceInputFormatter" />
          </el-form-item>
          <el-form-item label="优惠后金额">
            <el-input disabled v-model="formData.totalPrice" :formatter="erpPriceInputFormatter" />
          </el-form-item>
          <el-form-item label="结算账户" prop="accountId">
            <el-select
              v-model="formData.accountId"
              clearable
              filterable
              placeholder="请选择结算账户"
              style="width: 100%"
            >
              <el-option
                v-for="item in accountList"
                :key="item.id"
                :label="item.name"
                :value="item.id"
              />
            </el-select>
          </el-form-item>
          <el-form-item label="支付订金" prop="depositPrice">
            <el-input-number
              v-model="formData.depositPrice"
              controls-position="right"
              :min="0"
              :precision="2"
              placeholder="请输入支付订金"
              style="width: 100%"
            />
          </el-form-item>
        </div>
      </el-form>

      <!-- 底部操作按钮 -->
      <div class="mobile-form__footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
      </div>
    </div>
  </el-drawer>

  <!-- 请购单选择弹窗 -->
  <PurchaseRequisitionTableSelect ref="requisitionSelectRef" @change="onRequisitionSelected" />
  <!-- 请购单详情弹窗 -->
  <PurchaseRequisitionForm ref="requisitionFormRef" />
</template>
<script setup lang="ts">
import { nextTick } from 'vue'
import { PurchaseOrderApi, PurchaseOrderVO } from '@/api/erp/purchase/order'
import PurchaseOrderItemForm from './components/PurchaseOrderItemForm.vue'
import PurchaseRequisitionTableSelect from './components/PurchaseRequisitionTableSelect.vue'
import PurchaseRequisitionForm from '@/views/erp/purchaserequisition/PurchaseRequisitionForm.vue'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
import * as UserApi from '@/api/system/user'
import { AccountApi, AccountVO } from '@/api/erp/finance/account'
import { PurchaseRequisitionApi, PurchaseRequisition } from '@/api/erp/purchaserequisition'

/** ERP 销售订单表单 */
defineOptions({ name: 'PurchaseOrderForm' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗

// 类型声明，确保表单有稳定的类型
interface PurchaseOrderItem {
  totalPrice?: number
  // 其余字段不强制约束
  [key: string]: any
}
interface PurchaseOrderFormModel {
  id?: number
  purchaseRequisitionId?: number
  purchaseRequisitionNo?: string
  supplierId?: number
  accountId?: number
  orderTime?: number
  remark?: string
  fileUrl: string
  discountPercent: number
  discountPrice: number
  totalPrice: number
  depositPrice: number
  items: PurchaseOrderItem[]
  no?: string
}

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
const formData = ref<PurchaseOrderFormModel>({
  id: undefined,
  purchaseRequisitionId: undefined,
  purchaseRequisitionNo: undefined,
  supplierId: undefined,
  accountId: undefined,
  orderTime: Date.now(),
  remark: undefined,
  fileUrl: '',
  discountPercent: 0,
  discountPrice: 0,
  totalPrice: 0,
  depositPrice: 0,
  items: [],
  no: undefined // 订单单号，后端返回
})
const formRules = reactive({
  supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
  orderTime: [{ required: true, message: '订单时间不能为空', trigger: 'blur' }]
})
const disabled = computed(() => formType.value === 'detail')
const formRef = ref() // 表单 Ref
const supplierList = ref<SupplierVO[]>([]) // 供应商列表
const accountList = ref<AccountVO[]>([]) // 账户列表
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const requisitionSelectRef = ref() // 请购单选择弹窗Ref
const requisitionFormRef = ref() // 请购单详情弹窗Ref

const itemFormRef = ref()

/** 计算 discountPrice、totalPrice 价格 */
watch(
  () => formData.value,
  (val) => {
    if (!val) {
      return
    }
    const totalPrice = (val.items || []).reduce(
      (prev: number, curr: PurchaseOrderItem) => prev + (curr.totalPrice || 0),
      0
    )
    const discountPrice =
      val.discountPercent != null
        ? erpPriceMultiply(totalPrice, val.discountPercent / 100.0) ?? 0
        : 0
    formData.value.discountPrice = discountPrice
    formData.value.totalPrice = totalPrice - discountPrice
  },
  { deep: true }
)

/** 打开弹窗 */
const open = async (type: string, id?: number) => {
  dialogVisible.value = true
  dialogTitle.value = t('action.' + type)
  formType.value = type
  await nextTick()
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = (await PurchaseOrderApi.getPurchaseOrder(id)) as unknown as PurchaseOrderFormModel
    } finally {
      formLoading.value = false
    }
  }
  // 加载供应商列表
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  // 如果是新增，默认选择第一个供应商
  if (formType.value === 'create' && supplierList.value.length > 0 && !formData.value.supplierId) {
    formData.value.supplierId = supplierList.value[0].id
  }
  // 加载用户列表
  userList.value = await UserApi.getSimpleUserList()
  // 加载账户列表
  accountList.value = await AccountApi.getAccountSimpleList()
  const defaultAccount = accountList.value.find((item) => item.defaultStatus)
  if (formType.value === 'create' && defaultAccount) {
    formData.value.accountId = defaultAccount.id
  }
}

defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  await itemFormRef.value.validate()
  // 提交请求
  formLoading.value = true
  try {
    const data = formData.value as unknown as PurchaseOrderVO
    if (formType.value === 'create') {
      await PurchaseOrderApi.createPurchaseOrder(data)
      message.success(t('common.createSuccess'))
    } else {
      await PurchaseOrderApi.updatePurchaseOrder(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 打开请购单选择弹窗 */
const openRequisitionSelect = () => {
  requisitionSelectRef.value?.open(formData.value.purchaseRequisitionNo)
}

/** 打开请购单详情弹窗 */
const openRequisitionDetail = () => {
  if (formData.value.purchaseRequisitionId) {
    requisitionFormRef.value?.open('detail', formData.value.purchaseRequisitionId)
  }
}

/** 请购单选择回调 */
const onRequisitionSelected = async (requisition: PurchaseRequisition) => {
  debugger;
  if (!requisition) {
    return
  }
  formData.value.purchaseRequisitionId = requisition.id
  formData.value.purchaseRequisitionNo = requisition.no

  // 自动填充供应商信息（直接从主表数据获取）
  if (requisition.supplierId) {
    formData.value.supplierId = requisition.supplierId
  }

  try {
    // 获取请购单详情（仅用于获取明细项）
    const requisitionDetail = await PurchaseRequisitionApi.getPurchaseRequisition(requisition.id)

    // 转换请购单明细为采购订单明细
    const orderItems = (requisitionDetail.items || []).map(requisitionItem => ({
      id: undefined,
      productId: requisitionItem.productId,
      productName: requisitionItem.productName,
      productUnitName: requisitionItem.productUnitName,
      productBarCode: undefined,
      productPrice: requisitionItem.productPrice,
      stockCount: undefined,
      count: requisitionItem.count,
      totalProductPrice: requisitionItem.totalPrice,
      taxPercent: 0,
      taxPrice: 0,
      totalPrice: requisitionItem.totalPrice,
      remark: requisitionItem.remark
    }))

    formData.value.items = orderItems

    // 如果请购单有备注，也带过来（优先使用主表数据）
    if (requisition.remark) {
      formData.value.remark = `基于请购单 ${requisition.no} 生成\n${requisition.remark}`
    } else if (requisitionDetail.remark) {
      formData.value.remark = `基于请购单 ${requisitionDetail.no} 生成\n${requisitionDetail.remark}`
    }
  } catch (error) {
    console.error('获取请购单详情失败', error)
    message.error('获取请购单详情失败')
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    purchaseRequisitionId: undefined,
    purchaseRequisitionNo: undefined,
    supplierId: undefined,
    accountId: undefined,
    orderTime: Date.now(),
    remark: undefined,
    fileUrl: '',
    discountPercent: 0,
    discountPrice: 0,
    totalPrice: 0,
    depositPrice: 0,
    items: []
  }
  formRef.value?.resetFields()
}

</script>

<style lang="scss" scoped>
.mobile-form {
  padding: 12px;
}
.mobile-form__section {
  background: #fff;
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 12px;
  box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
}
.mobile-form__section-title {
  font-size: 15px;
  font-weight: 600;
  color: #303133;
  margin-bottom: 12px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}
.mobile-form__tip {
  margin-top: 4px;
  font-size: 12px;
  color: var(--el-color-danger);
}
.mobile-form__requisition {
  display: flex;
  align-items: center;
  justify-content: space-between;
  width: 100%;
}
.mobile-form__requisition-empty {
  color: #909399;
  font-size: 13px;
}
.mobile-form__footer {
  position: sticky;
  bottom: 0;
  background: #fff;
  padding: 12px 16px;
  padding-bottom: calc(12px + constant(safe-area-inset-bottom));
  padding-bottom: calc(12px + env(safe-area-inset-bottom));
  border-top: 1px solid #eee;
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  z-index: 10;
  margin: 0 -12px -12px;

  .el-button {
    flex: 1;
    height: 40px;
    font-size: 15px;
  }
}
</style>
