<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="outTime"><el-date-picker v-model="formData.outTime" 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="openSaleOrderDetail">{{ formData.orderNo }}</el-link></template><template #append><el-button @click="openSaleOrderOutEnableList"><Icon icon="ep:search" /></el-button></template></el-input></el-form-item>
          <el-form-item label="客户" prop="customerId"><el-select v-model="formData.customerId" clearable filterable disabled placeholder="请选择客户" style="width:100%"><el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item>
          <el-form-item label="销售人员" prop="saleUserId"><el-select v-model="formData.saleUserId" clearable filterable placeholder="请选择销售人员" style="width:100%"><el-option v-for="item in userList" :key="item.id" :label="item.nickname" :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>
          <SaleOutItemForm 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>
      </el-form>
    </div>
    <template #footer>
      <div class="mobile-form__footer">
        <el-button @click="dialogVisible = false" style="flex:1">取 消</el-button>
        <el-button type="primary" @click="submitForm" :disabled="formLoading" v-if="!disabled" style="flex:2">确 定</el-button>
      </div>
    </template>
  </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="outTime"><el-date-picker v-model="formData.outTime" 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="openSaleOrderDetail" class="order-link">{{ formData.orderNo }}</el-link></template><template #append><el-button @click="openSaleOrderOutEnableList"><Icon icon="ep:search" /> 选择</el-button></template></el-input></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="客户" prop="customerId"><el-select v-model="formData.customerId" clearable filterable disabled placeholder="请选择客户" class="!w-1/1"><el-option v-for="item in customerList" :key="item.id" :label="item.name" :value="item.id" /></el-select></el-form-item></el-col>
        <el-col :span="8"><el-form-item label="销售人员" prop="saleUserId"><el-select v-model="formData.saleUserId" clearable filterable placeholder="请选择销售人员" class="!w-1/1"><el-option v-for="item in userList" :key="item.id" :label="item.nickname" :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"><SaleOutItemForm 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-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>

  <!-- 可出库的订单列表 -->
  <SaleOrderOutEnableList ref="saleOrderOutEnableListRef" @success="handleSaleOrderChange" />
  <!-- 销售订单详情弹窗 -->
  <SaleOrderForm ref="saleOrderFormRef" />
</template>
<script setup lang="ts">
import { computed } from 'vue'
import { SaleOutApi, SaleOutVO } from '@/api/erp/sale/out'
import SaleOutItemForm from './components/SaleOutItemForm.vue'
import { CustomerApi, CustomerVO } from '@/api/erp/sale/customer'
import { AccountApi, AccountVO } from '@/api/erp/finance/account'
import { erpPriceInputFormatter, erpPriceMultiply } from '@/utils'
import SaleOrderOutEnableList from '@/views/erp/sale/order/components/SaleOrderOutEnableList.vue'
import SaleOrderForm from '@/views/erp/sale/order/SaleOrderForm.vue'
import { SaleOrderVO } from '@/api/erp/sale/order'
import * as UserApi from '@/api/system/user'
import { useWindowSize } from '@vueuse/core'

/** ERP 销售出库表单 */
defineOptions({ name: 'SaleOutForm' })

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,
  customerId: undefined,
  accountId: undefined,
  saleUserId: undefined,
  outTime: undefined,
  remark: undefined,
  fileUrl: '',
  discountPercent: 0,
  discountPrice: 0,
  totalPrice: 0,
  otherPrice: 0,
  orderNo: undefined,
  items: [],
  no: undefined // 出库单号，后端返回
})
const formRules = reactive({
  customerId: [{ required: true, message: '客户不能为空', trigger: 'blur' }],
  outTime: [{ required: true, message: '出库时间不能为空', trigger: 'blur' }]
})
const disabled = computed(() => formType.value === 'detail')
const formRef = ref() // 表单 Ref
const customerList = ref<CustomerVO[]>([]) // 客户列表
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
  resetForm()
  // 修改时，设置数据
  if (id) {
    formLoading.value = true
    try {
      formData.value = await SaleOutApi.getSaleOut(id)
    } finally {
      formLoading.value = false
    }
  }
  // 加载客户列表
  customerList.value = await CustomerApi.getCustomerSimpleList()
  // 加载用户列表
  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 saleOrderOutEnableListRef = ref() // 可出库的订单列表 Ref
const openSaleOrderOutEnableList = () => {
  saleOrderOutEnableListRef.value.open()
}

/** 打开【销售订单详情】弹窗 */
const saleOrderFormRef = ref() // 销售订单表单 Ref
const openSaleOrderDetail = () => {
  if (formData.value.orderId) {
    saleOrderFormRef.value.open('detail', formData.value.orderId)
  }
}

const handleSaleOrderChange = (order: SaleOrderVO) => {
  // 将订单设置到出库单
  formData.value.orderId = order.id
  formData.value.orderNo = order.no
  formData.value.customerId = order.customerId
  formData.value.accountId = order.accountId
  formData.value.saleUserId = order.saleUserId
  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.outCount
    item.orderItemId = item.id
    item.id = undefined
  })
  formData.value.items = order.items.filter((item) => item.count > 0)
}

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

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    customerId: undefined,
    accountId: undefined,
    saleUserId: undefined,
    outTime: undefined,
    remark: undefined,
    fileUrl: undefined,
    discountPercent: 0,
    discountPrice: 0,
    totalPrice: 0,
    otherPrice: 0,
    items: []
  }
  formRef.value?.resetFields()
}


/** 打印当前页面数据 */
const handlePrint = () => {
  // 获取客户名称
  const customer = customerList.value.find((item) => item.id === formData.value.customerId)
  const customerName = customer ? customer.name : ''
  // 获取销售人员名称
  const saleUser = userList.value.find((item) => item.id === formData.value.saleUserId)
  const saleUserName = saleUser ? saleUser.nickname : ''
  // 获取结算账户名称
  const account = accountList.value.find((item) => item.id === formData.value.accountId)
  const accountName = account ? account.name : ''
  // 格式化出库时间
  const outTime = formData.value.outTime
    ? new Date(formData.value.outTime).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>
          </tr>
        </thead>
        <tbody>
          ${formData.value.items
      .map(
        (item, index) => `
            <tr>
              <td style="text-align: center;">${index + 1}</td>
              <td>${item.productName || ''}</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 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">${outTime}</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">${customerName}</span></div>
          <div class="info-item"><span class="info-label">销售人员:</span><span class="info-value">${saleUserName}</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: 12px;
}

.mobile-form__section {
  background: #fff;
  border-radius: 8px;
  padding: 14px;
  margin-bottom: 12px;
}

.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 {
  display: flex;
  gap: 12px;
  padding: 0 12px;
}
</style>
