<template>
  <!-- 移动端布局 -->
  <el-drawer v-if="isMobile" 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="inTime"><el-date-picker v-model="formData.inTime" type="date" value-format="x" placeholder="选择入库时间" style="width:100%" /></el-form-item>
          <el-form-item label="关联订单" prop="orderNo"><el-input readonly><template #prefix><el-link v-if="formData.orderNo && formData.orderId" type="primary" :underline="false" @click.stop="openPurchaseOrderDetail">{{ formData.orderNo }}</el-link></template><template #append><el-button @click="openPurchaseOrderInEnableList"><Icon icon="ep:search" /></el-button></template></el-input></el-form-item>
          <el-form-item label="供应商" prop="supplierId"><el-select v-model="formData.supplierId" clearable filterable disabled placeholder="请选择供应商" style="width:100%"><el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
          <el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" :rows="2" 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>
          <PurchaseInItemForm 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="4" 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 :model-value="formData.totalPrice - formData.otherPrice" :formatter="erpPriceInputFormatter" /></el-form-item>
          <el-form-item label="其它费用" prop="otherPrice"><el-input-number v-model="formData.otherPrice" controls-position="right" :min="0" :precision="4" placeholder="请输入其它费用" style="width:100%" /></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="应付金额"><el-input disabled v-model="formData.totalPrice" :formatter="erpPriceInputFormatter" /></el-form-item>
        </div>
        <div class="mobile-form__section">
          <div class="mobile-form__section-title">审核信息</div>
          <el-form-item label="审核状态"><el-tag :type="formData.status === 10 ? 'info' : (formData.isQualified ? 'success' : 'danger')">{{ formData.status === 10 ? '未审核' : (formData.isQualified ? '已审核' : '不合格') }}</el-tag></el-form-item>
          <el-form-item label="返回方式" v-if="formData.status !== 10 && !formData.isQualified"><span>{{ RETURN_TYPE_OPTIONS.find(item => item.value === formData.returnType)?.label || '-' }}</span></el-form-item>
          <el-form-item label="返回备注" v-if="formData.status !== 10 && !formData.isQualified"><el-input type="textarea" v-model="formData.returnRemark" :rows="3" disabled placeholder="无" /></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>

  <!-- PC端布局 -->
  <Dialog v-else :title="dialogTitle" v-model="dialogVisible" width="1440">
    <el-form ref="formRef" :model="formData" :rules="formRules" label-width="100px" v-loading="formLoading" :disabled="disabled">
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="入库单号" prop="no"><el-input disabled v-model="formData.no" placeholder="保存时自动生成" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="入库时间" prop="inTime"><el-date-picker v-model="formData.inTime" type="date" value-format="x" placeholder="选择入库时间" class="!w-1/1" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="关联订单" prop="orderNo"><el-input readonly><template #prefix><el-link v-if="formData.orderNo && formData.orderId" type="primary" :underline="false" @click.stop="openPurchaseOrderDetail" class="order-link">{{ formData.orderNo }}</el-link></template><template #append><el-button @click="openPurchaseOrderInEnableList"><Icon icon="ep:search" /> 选择</el-button></template></el-input></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="供应商" prop="supplierId"><el-select v-model="formData.supplierId" clearable filterable disabled placeholder="请选择供应商" class="!w-1/1"><el-option v-for="item in supplierList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col>
        <el-col :span="16"><el-form-item label="备注" prop="remark"><el-input type="textarea" v-model="formData.remark" :rows="1" placeholder="请输入备注" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="附件" prop="fileUrl"><UploadFile :is-show-tip="false" v-model="formData.fileUrl" :limit="1" /></el-form-item></el-col>
      </el-row>
      <ContentWrap>
        <el-tabs v-model="subTabsName" class="-mt-15px -mb-10px">
          <el-tab-pane label="入库产品清单" name="item"><PurchaseInItemForm ref="itemFormRef" :items="formData.items" :disabled="disabled" /></el-tab-pane>
        </el-tabs>
      </ContentWrap>
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="优惠率（%）" prop="discountPercent"><el-input-number v-model="formData.discountPercent" controls-position="right" :min="0" :precision="4" placeholder="请输入优惠率" class="!w-1/1" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="付款优惠" prop="discountPrice"><el-input disabled v-model="formData.discountPrice" :formatter="erpPriceInputFormatter" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="优惠后金额"><el-input disabled :model-value="formData.totalPrice - formData.otherPrice" :formatter="erpPriceInputFormatter" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="其它费用" prop="otherPrice"><el-input-number v-model="formData.otherPrice" controls-position="right" :min="0" :precision="4" placeholder="请输入其它费用" class="!w-1/1" /></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="结算账户" prop="accountId"><el-select v-model="formData.accountId" clearable filterable placeholder="请选择结算账户" class="!w-1/1"><el-option v-for="item in accountList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="应付金额"><el-input disabled v-model="formData.totalPrice" :formatter="erpPriceInputFormatter" /></el-form-item></el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="8"><el-form-item label="审核状态"><el-tag :type="formData.status === 10 ? 'info' : (formData.isQualified ? 'success' : 'danger')">{{ formData.status === 10 ? '未审核' : (formData.isQualified ? '已审核' : '不合格') }}</el-tag></el-form-item></el-col>
        <el-col :span="8" v-if="formData.status !== 10 && !formData.isQualified"><el-form-item label="返回方式"><span>{{ RETURN_TYPE_OPTIONS.find(item => item.value === formData.returnType)?.label || '-' }}</span></el-form-item></el-col>
        <el-col :span="16" v-if="formData.status !== 10 && !formData.isQualified"><el-form-item label="返回备注"><el-input type="textarea" v-model="formData.returnRemark" :rows="2" disabled placeholder="无" /></el-form-item></el-col>
      </el-row>
    </el-form>
    <template #footer>
      <el-button @click="submitForm" type="primary" :disabled="formLoading" v-if="!disabled">确 定</el-button>
      <el-button @click="handlePrint" type="warning">
        <Icon icon="ep:printer" class="mr-5px" /> 打 印
      </el-button>
      <el-button @click="dialogVisible = false">取 消</el-button>
    </template>
  </Dialog>

  <!-- 可入库的订单列表 -->
  <PurchaseOrderInEnableList ref="purchaseOrderInEnableListRef" @success="handlePurchaseOrderChange" />
  <!-- 采购订单详情弹窗 -->
  <PurchaseOrderForm ref="purchaseOrderFormRef" />
</template>
<script setup lang="ts">
import { ref, reactive, computed, watch, nextTick } from 'vue'
import { useI18n } from '@/hooks/web/useI18n'
import { useMessage } from '@/hooks/web/useMessage'
import { PurchaseInApi, PurchaseInVO, RETURN_TYPE_OPTIONS } from '@/api/erp/purchase/in'
import PurchaseInItemForm from './components/PurchaseInItemForm.vue'
import { AccountApi, AccountVO } from '@/api/erp/finance/account'
import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
import PurchaseOrderInEnableList from '@/views/erp/purchase/order/components/PurchaseOrderInEnableList.vue'
import PurchaseOrderForm from '@/views/erp/purchase/order/PurchaseOrderForm.vue'
import { PurchaseOrderVO } from '@/api/erp/purchase/order'
import * as UserApi from '@/api/system/user'
import { SupplierApi, SupplierVO } from '@/api/erp/purchase/supplier'
import { ElTag } from 'element-plus'
import { useWindowSize } from '@vueuse/core'

/** ERP 采购入库表单 */
defineOptions({ name: 'PurchaseInForm' })

const { width } = useWindowSize()
const isMobile = computed(() => width.value < 768)

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

const dialogVisible = ref(false) // 弹窗的是否展示
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改；detail - 详情
const formData = ref({
  id: undefined,
  supplierId: undefined,
  accountId: undefined,
  inTime: undefined,
  remark: undefined,
  fileUrl: '',
  discountPercent: 0,
  discountPrice: 0,
  totalPrice: 0,
  otherPrice: 0,
  orderNo: undefined,
  items: [],
  no: undefined, // 入库单号，后端返回
  isQualified: true,
  returnType: null,
  returnRemark: undefined,
  status: 10 // 默认未审核
})
const formRules = reactive({
  supplierId: [{ required: true, message: '供应商不能为空', trigger: 'blur' }],
  inTime: [{ required: true, message: '入库时间不能为空', trigger: 'blur' }],
  returnType: [
    {
      required: true,
      message: '请选择返回方式',
      trigger: 'change',
      // 只有在不合格时才验证
      validator: (rule: any, value: any, callback: any) => {
        if (!formData.value.isQualified && !value) {
          callback(new Error('不合格时必须选择返回方式'))
        } else {
          callback()
        }
      }
    }
  ]
})
const disabled = computed(() => formType.value === 'detail')
const formRef = ref() // 表单 Ref
const supplierList = ref<SupplierVO[]>([]) // 供应商列表
const accountList = ref<AccountVO[]>([]) // 账户列表
const userList = ref<UserApi.UserVO[]>([]) // 用户列表
const subTabsName = ref('item')
const itemFormRef = ref()

/** 计算 discountPrice、totalPrice 价格 */
watch(
  () => formData.value,
  (val) => {
    if (!val) {
      return
    }
    // 计算
    const totalPrice = val.items.reduce((prev, curr) => prev + curr.totalPrice, 0)
    const discountPrice =
      val.discountPercent != null ? erpPriceMultiply(totalPrice, val.discountPercent / 100.0) : 0
    formData.value.discountPrice = discountPrice
    formData.value.totalPrice = totalPrice - discountPrice + val.otherPrice
  },
  { 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 {
      const data = await PurchaseInApi.getPurchaseIn(id)
      formData.value = {
        ...data,
        returnRemark: data.returnRemark || undefined // 确保 returnRemark 字段被正确赋值
      }
    } finally {
      formLoading.value = false
    }
  }
  // 加载供应商列表
  supplierList.value = await SupplierApi.getSupplierSimpleList()
  // 加载用户列表
  userList.value = await UserApi.getSimpleUserList()
  // 加载账户列表
  accountList.value = await AccountApi.getAccountSimpleList()
  const defaultAccount = accountList.value.find((item) => item.defaultStatus)
  if (defaultAccount) {
    formData.value.accountId = defaultAccount.id
  }
}
defineExpose({ open }) // 提供 open 方法，用于打开弹窗

/** 打开【可入库的订单列表】弹窗 */
const purchaseOrderInEnableListRef = ref() // 可入库的订单列表 Ref
const openPurchaseOrderInEnableList = () => {
  purchaseOrderInEnableListRef.value.open()
}

/** 打开【采购订单详情】弹窗 */
const purchaseOrderFormRef = ref() // 采购订单表单 Ref
const openPurchaseOrderDetail = () => {
  if (formData.value.orderId) {
    purchaseOrderFormRef.value.open('detail', formData.value.orderId)
  }
}

const handlePurchaseOrderChange = (order: PurchaseOrderVO) => {
  // 将订单设置到入库单
  formData.value.orderId = order.id
  formData.value.orderNo = order.no
  formData.value.supplierId = order.supplierId
  formData.value.accountId = order.accountId
  formData.value.discountPercent = order.discountPercent
  formData.value.remark = order.remark
  formData.value.fileUrl = order.fileUrl
  // 将订单项设置到入库单项
  order.items.forEach((item) => {
    item.totalCount = item.count
    item.count = item.totalCount - item.inCount
    item.orderItemId = item.id
    item.id = undefined
  })
  formData.value.items = order.items.filter((item) => item.count > 0)
}

/** 处理合格状态变化 */
const handleQualifiedChange = (value: boolean) => {
  if (value) {
    // 如果选择合格，清空返回方式
    formData.value.returnType = null
  }
}

/** 提交表单 */
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 PurchaseInVO
    if (formType.value === 'create') {
      await PurchaseInApi.createPurchaseIn(data)
      message.success(t('common.createSuccess'))
    } else {
      await PurchaseInApi.updatePurchaseIn(data)
      message.success(t('common.updateSuccess'))
    }
    dialogVisible.value = false
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    supplierId: undefined,
    accountId: undefined,
    inTime: undefined,
    remark: undefined,
    fileUrl: undefined,
    discountPercent: 0,
    discountPrice: 0,
    totalPrice: 0,
    otherPrice: 0,
    items: [],
    isQualified: true,
    returnType: null,
    returnRemark: undefined,
    status: 10 // 默认未审核
  }
  formRef.value?.resetFields()
}


/** 打印当前页面数据 */
const handlePrint = () => {
  // 获取供应商名称
  const supplier = supplierList.value.find((item) => item.id === formData.value.supplierId)
  const supplierName = supplier ? supplier.name : ''
  // 获取结算账户名称
  const account = accountList.value.find((item) => item.id === formData.value.accountId)
  const accountName = account ? account.name : ''
  // 格式化入库时间
  const inTime = formData.value.inTime
    ? new Date(formData.value.inTime).toLocaleDateString('zh-CN')
    : ''

  // 构建产品清单表格
  let itemsTableHtml = ''
  if (formData.value.items && formData.value.items.length > 0) {
    // 计算合计
    const totalCount = formData.value.items.reduce((sum, item) => sum + (item.count || 0), 0)
    const totalProductPrice = formData.value.items.reduce((sum, item) => sum + (item.totalProductPrice || 0), 0)
    const totalTaxPrice = formData.value.items.reduce((sum, item) => sum + (item.taxPrice || 0), 0)
    const totalPriceSum = formData.value.items.reduce((sum, item) => sum + (item.totalPrice || 0), 0)

    itemsTableHtml = `
      <table border="1" cellpadding="6" cellspacing="0" style="width:100%; border-collapse: collapse; margin-top: 10px; font-size: 12px;">
        <thead>
          <tr style="background-color: #f5f5f5;">
            <th>序号</th>
            <th>产品名称</th>
            <th>产品分类</th>
            <th>库存</th>
            <th>条码</th>
            <th>单位</th>
            <th>数量</th>
            <th>产品单价</th>
            <th>金额</th>
            <th>税率(%)</th>
            <th>税额</th>
            <th>税额合计</th>
            <th>备注</th>
          </tr>
        </thead>
        <tbody>
          ${formData.value.items
      .map(
        (item, index) => `
            <tr>
              <td style="text-align: center;">${index + 1}</td>
              <td>${item.productName || ''}</td>
              <td>${item.productCategoryName || ''}</td>
              <td style="text-align: right;">${item.stockCount || 0}</td>
              <td>${item.productBarCode || ''}</td>
              <td style="text-align: center;">${item.productUnitName || ''}</td>
              <td style="text-align: right;">${item.count || 0}</td>
              <td style="text-align: right;">${item.productPrice || 0}</td>
              <td style="text-align: right;">${item.totalProductPrice || 0}</td>
              <td style="text-align: right;">${item.taxPercent || 0}</td>
              <td style="text-align: right;">${item.taxPrice || 0}</td>
              <td style="text-align: right;">${item.totalPrice || 0}</td>
              <td>${item.remark || ''}</td>
            </tr>
          `
      )
      .join('')}
        </tbody>
        <tfoot>
          <tr style="background-color: #f9f9f9; font-weight: bold;">
            <td style="text-align: center;">合计</td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td></td>
            <td style="text-align: right;">${totalCount}</td>
            <td></td>
            <td style="text-align: right;">${totalProductPrice}</td>
            <td></td>
            <td style="text-align: right;">${totalTaxPrice}</td>
            <td style="text-align: right;">${totalPriceSum}</td>
            <td></td>
          </tr>
        </tfoot>
      </table>
    `
  }

  // 构建打印内容
  const printContent = `
    <html>
      <head>
        <title>采购入库单打印</title>
        <style>
          body { font-family: 'Microsoft YaHei', Arial, sans-serif; padding: 20px; }
          h1 { text-align: center; margin-bottom: 20px; }
          .info-row { display: flex; flex-wrap: wrap; margin-bottom: 10px; }
          .info-item { width: 33%; margin-bottom: 10px; }
          .info-label { font-weight: bold; color: #666; }
          .info-value { margin-left: 10px; }
          .section-title { font-size: 16px; font-weight: bold; margin: 20px 0 10px; border-bottom: 1px solid #ddd; padding-bottom: 5px; }
          table { font-size: 14px; }
          th, td { padding: 8px; text-align: left; }
          @media print {
            body { padding: 0; }
          }
        </style>
      </head>
      <body>
        <h1>采购入库单</h1>
        <div class="info-row">
          <div class="info-item"><span class="info-label">入库单号:</span><span class="info-value">${formData.value.no || '(保存后生成)'}</span></div>
          <div class="info-item"><span class="info-label">入库时间:</span><span class="info-value">${inTime}</span></div>
          <div class="info-item"><span class="info-label">关联订单:</span><span class="info-value">${formData.value.orderNo || ''}</span></div>
          <div class="info-item"><span class="info-label">供应商:</span><span class="info-value">${supplierName}</span></div>
          <div class="info-item"><span class="info-label">结算账户:</span><span class="info-value">${accountName}</span></div>
        </div>
        <div class="info-row">
          <div class="info-item" style="width: 100%;"><span class="info-label">备注:</span><span class="info-value">${formData.value.remark || ''}</span></div>
        </div>
        <div class="section-title">入库产品清单</div>
        ${itemsTableHtml}
        <div class="info-row" style="margin-top: 20px;">
          <div class="info-item"><span class="info-label">优惠率(%):</span><span class="info-value">${formData.value.discountPercent || 0}</span></div>
          <div class="info-item"><span class="info-label">付款优惠:</span><span class="info-value">${formData.value.discountPrice || 0}</span></div>
          <div class="info-item"><span class="info-label">优惠后金额:</span><span class="info-value">${(formData.value.totalPrice || 0) - (formData.value.otherPrice || 0)}</span></div>
          <div class="info-item"><span class="info-label">其它费用:</span><span class="info-value">${formData.value.otherPrice || 0}</span></div>
          <div class="info-item"><span class="info-label">应付金额:</span><span class="info-value">${formData.value.totalPrice || 0}</span></div>
        </div>
      </body>
    </html>
  `

  // 使用iframe打印，避免被浏览器拦截
  const iframe = document.createElement('iframe')
  iframe.style.position = 'absolute'
  iframe.style.width = '0'
  iframe.style.height = '0'
  iframe.style.border = 'none'
  iframe.style.left = '-9999px'
  document.body.appendChild(iframe)

  const iframeDoc = iframe.contentWindow?.document
  if (iframeDoc) {
    iframeDoc.open()
    iframeDoc.write(printContent)
    iframeDoc.close()

    // 等待内容加载完成后打印
    iframe.contentWindow?.focus()
    setTimeout(() => {
      iframe.contentWindow?.print()
      // 打印完成后移除iframe
      setTimeout(() => {
        document.body.removeChild(iframe)
      }, 1000)
    }, 250)
  }
}


</script>

<style lang="scss" scoped>
.mobile-form {
  padding: 0 4px;
}
.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__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 -4px;

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