<!-- 药库订货单 -->
<template>
  <div class="medicine-container app-container">
    <!-- 顶部按钮 -->
    <el-row :gutter="20" class="mb8">
      <el-col :span="1.5">
        <el-button
          type="primary"
          icon="Plus"
          plain
          @click="handleAdd"
          :disabled="isAddDisabled"
          v-hasPermi="['pharmacy-warehouse:return-order:add']"
        >
          新增
        </el-button>
      </el-col>
      <!-- <el-col :span="1.5">
        <el-button
          type="warning"
          icon="Edit"
          plain
          @click="handleEdit"
          :disabled="isEditDisabled"
          v-hasPermi="['pharmacy-warehouse:return-order:edit']"
          >编辑</el-button
        >
      </el-col> -->
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="Delete"
          plain
          @click="handleDelete"
          :disabled="isDeleteDisabled"
          v-hasPermi="['pharmacy-warehouse:return-order:delete']"
        >
          删除
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="Close"
          plain
          @click="handleCancel"
          :disabled="isCancelDisabled"
          v-hasPermi="['pharmacy-warehouse:return-order:cancel']"
        >
          取消
        </el-button>
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="success"
          icon="Check"
          plain
          @click="handleAudit"
          :disabled="isAuditDisabled"
          v-hasPermi="['pharmacy-warehouse:return-order:audit']"
        >
          审核
        </el-button>
      </el-col>
    </el-row>
    <el-row :gutter="20">
      <!-- 左侧搜索 -->
      <el-col :span="4" style="border: 1px solid #ebeef5; height: calc(100vh - 200px)">
        <el-row :gutter="10" style="margin-top: 10px">
          <el-col :span="24">
            <el-form ref="tableFormRef" :model="tableForm" style="width: 100%" :rules="rules">
              <el-form-item label="库房：" label-width="100px">
                <el-select
                  v-model="tableForm.locationId"
                  placeholder="请选择库房"
                  clearable
                  filterable
                  @change="handleLocationChange(tableForm.locationId)"
                >
                  <el-option
                    v-for="item in cabinetListOptions"
                    :key="item.id"
                    :label="item.name"
                    :value="item.id"
                  />
                </el-select>
              </el-form-item>
            </el-form>
          </el-col>
        </el-row>
        <el-row :gutter="10">
          <el-form
            ref="queryParamsRef"
            :model="queryParams"
            style="width: 100%"
            :rules="rules"
            @submit.prevent
          >
            <el-form-item label="单据搜索" label-width="100px">
              <el-input
                v-model="queryParams.searchKey"
                placeholder="请输入单据号"
                @keyup.enter="getList"
                clearable
              >
                <template #append>
                  <el-button icon="Search" @click="getList" />
                </template>
              </el-input>
            </el-form-item>
          </el-form>
        </el-row>
        <el-row :gutter="10">
          <el-scrollbar height="calc(100vh - 350px)" style="width: 100%">
            <div class="order-list-container">
              <!-- 有数据时显示列表 -->
              <template v-if="orderList.length > 0">
                <div
                  v-for="item in orderList"
                  :key="item.supplyBusNo"
                  :class="['order-item', { 'is-active': selectedOrder === item }]"
                  @click="handleOrderClick(item)"
                >
                  <el-card class="order-card" shadow="hover">
                    <div class="order-header">
                      <div class="order-number">
                        <el-icon><Document /></el-icon>
                        <span class="number-text">{{ item.supplyBusNo }}</span>
                      </div>
                    </div>
                    <div class="order-content">
                      <div class="info-item">
                        <el-icon class="info-icon"><User /></el-icon>
                        <span class="label">采购员：</span>
                        <span class="value">{{ item.applicantId_dictText }}</span>
                      </div>
                      <div class="info-item">
                        <el-icon class="info-icon"><Shop /></el-icon>
                        <span class="label">供应商：</span>
                        <span class="value">{{ item.supplierId_dictText }}</span>
                      </div>
                      <div class="info-item">
                        <el-icon class="info-icon"><User /></el-icon>
                        <span class="label">审核状态：</span>
                        <el-tag type="success" v-if="item.statusEnum_enumText === '同意'">
                          {{ item.statusEnum_enumText }}
                        </el-tag>
                        <el-tag type="danger" v-else>
                          {{ item.statusEnum_enumText }}
                        </el-tag>
                      </div>
                      <div class="info-item">
                        <el-icon class="info-icon"><Files /></el-icon>
                        <span class="label">单据类型：</span>
                        <span class="value">{{ item.typeEnum_enumText }}</span>
                      </div>
                      <div class="info-item">
                        <el-icon class="info-icon"><Calendar /></el-icon>
                        <span class="label">单据日期：</span>
                        <span class="value">{{
                          parseTime(item.applyTime, '{y}-{m}-{d} {h}:{i}:{s}')
                        }}</span>
                      </div>
                    </div>
                  </el-card>
                </div>
              </template>

              <!-- 空状态显示 -->
              <div v-else class="empty-state">
                <el-empty description="暂无单据" :image-size="80">
                  <el-button type="primary" @click="handleAdd"> 新增单据 </el-button>
                </el-empty>
              </div>
            </div>
          </el-scrollbar>
        </el-row>
      </el-col>
      <!-- 右侧表格 -->
      <el-col :span="20">
        <el-row :gutter="10">
          <el-col :span="24">
            <orderTable
              ref="orderTableRef"
              :form="tableForm"
              :table-data="tableData"
              :audit-form="auditForm"
              :table-data-total="tableDataTotal"
              :is-add-or-edit-order="isAddOrEditOrder"
              :supplier-option="supplierOption"
              :supply-type-options="supplyTypeOptions"
              :supply-status-options="supplyStatusOptions"
              :supply-category-options="supplyCategoryOptions"
              :practitioner-option="practitionerOption"
              :packaging-condition-options="packagingConditionOptions"
              :acceptance-resultory-options="acceptanceResultoryOptions"
              :button-show="buttonShow"
              @update:query-params="handleQueryParamsUpdate"
              @update:form="handleFormUpdate"
              @getList="getList"
              @updateButtonState="handleUpdateButtonState"
            >
            </orderTable>
          </el-col>
        </el-row>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref } from 'vue';
import { useRoute, useRouter } from 'vue-router';
import orderTable from './components/orderTable.vue';
import {
  getInit,
  getOrderList,
  deleteOrder,
  agreeApproval,
  getOrderDetail,
} from './components/api';
import useUserStore from '@/store/modules/user';
import { parseTime } from '@/utils/his';

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

// 获取 pinia 中用户信息
const userInfo = useUserStore();
// 左侧查询参数
const queryParams = ref({
  searchKey: '',
});
// 获取当前实例
const { proxy } = getCurrentInstance();
// 右侧表格查询参数 + 分页参数 + 添加查询参数
const tableForm = ref({
  locationId: undefined,
  busNo: undefined,
  applyTime: undefined,
  applicantId: undefined,
  reason: undefined,
  categoryEnum: undefined,
  supplierId: undefined,
  pageNo: 1,
  pageSize: 10,
});
// 右侧表格数据
const tableData = ref([]);
// 右侧审核表单
const auditForm = ref({
  approvalTime: undefined,
  statusEnum: undefined,
  statusEnum_enumText: undefined,
  approverId: undefined,
});
// 订单编辑还是新增
const isAddOrEditOrder = ref({
  isAddOrder: false,
  isEditOrder: false,
});
// 仓库列表 cabinetList
const cabinetListOptions = ref([]);
// 查询经手人列表 practitionerOption
const practitionerOption = ref([]);
// 查询供应商列表 supplierOption
const supplierOption = ref([]);
// 审批状态 supplyStatusOptions
const supplyStatusOptions = ref([]);
// 单据类型 supplyTypeOptions
const supplyTypeOptions = ref([]);
// 单据分类 supplyCategoryOptions
const supplyCategoryOptions = ref([]);
// 包装情况 packagingConditionOptions
const packagingConditionOptions = ref([]);
// 验收结果 acceptanceResultoryOptions
const acceptanceResultoryOptions = ref([]);
// 订货单单据列表 orderList
const orderList = ref([]);
// 订货单单据列表总条数
const tableDataTotal = ref(0);
// 选中的单据ID
const selectedOrder = ref(null);
// 是否禁用新增按钮
const isAddDisabled = ref(false);
// 是否禁用编辑按钮
const isEditDisabled = ref(true);
// 是否禁用取消按钮
const isCancelDisabled = ref(true);
// 是否禁用删除按钮
const isDeleteDisabled = ref(true);
// 是否禁用审核按钮
const isAuditDisabled = ref(true);
// 按钮显示 buttonShow
const buttonShow = ref({
  isAddShow: false,
  isDeleteShow: false,
  isSaveShow: false,
  isEditShow: false,
});
const rules = ref({
  locationId: [{ required: true, message: '请选择库房', trigger: 'blur' }],
});

// 初始化 获取下拉列表
const init = async () => {
  const res = await getInit();
  // 仓库列表 cabinetListOptions
  cabinetListOptions.value = res.data.cabinetListOptions;
  // 查询经手人列表 practitionerList
  practitionerOption.value = res.data.practitionerOption;
  // 查询供应商列表 supplierOption
  supplierOption.value = res.data.supplierOption;
  // 审批状态 supplyStatusOptions
  supplyStatusOptions.value = res.data.supplyStatusOptions;
  // 单据类型 supplyTypeOptions
  supplyTypeOptions.value = res.data.supplyTypeOptions;
  // 单据分类
  supplyCategoryOptions.value = res.data.supplyCategoryOptions;
  // 包装情况 packagingConditionOptions
  packagingConditionOptions.value = res.data.packagingConditionOptions;
  // 验收结果 acceptanceResultoryOptions
  acceptanceResultoryOptions.value = res.data.acceptanceResultoryOptions;
};

// 获取订货单单据列表
const getList = async () => {
  const res = await getOrderList(queryParams.value);
  // 订货单单据列表 orderList
  orderList.value = res.data.records;
};

// 新增按钮
const handleAdd = async () => {
  // 清空当前表格数据 和 选中状态
  resetFormAndTableData();
  // 校验库房ID
  if (!tableForm.value.locationId) {
    proxy.$modal.msgWarning('新增单据前，请选择库房');
    return;
  }

  // 右侧表单数据
  tableForm.value = {
    // 采购员
    applicantId: userInfo.practitionerId,
    // 单据日期
    applyTime: parseTime(new Date(), '{y}-{m}-{d} {h}:{i}:{s}'),
    // 库房ID
    locationId: tableForm.value.locationId,
    // 开单人
    practitionerId: undefined,
  };

  // 订单编辑还是新增
  isAddOrEditOrder.value = {
    isAddOrder: true,
    isEditOrder: false,
  };

  // 延迟执行
  nextTick(() => {
    // 更新按钮状态为编辑模式
    handleUpdateButtonState({
      // 审核 按钮禁用
      isAuditDisabled: true,
      // 取消 按钮禁用
      isCancelDisabled: false,
      // 删除 按钮禁用
      isDeleteDisabled: true,
      // 添加 按钮禁用
      isAddDisabled: true,
      // 编辑 按钮禁用
      isEditDisabled: true,
      // 添加行 按钮显示
      isAddShow: true,
      // 删除行 按钮显示
      isDeleteShow: false,
      // 保存行 按钮显示
      isSaveShow: false,
      // 编辑行 按钮显示
      isEditShow: false,
      // 警戒订货 按钮显示
      isOrderImport: true,
    });
  });
};
// 清空当前表格数据
const resetFormAndTableData = () => {
  // 清空右侧表格数据
  tableData.value = [];
  // 清空审核表单数据
  auditForm.value = {};
  // 清空右侧表格数据总条数
  tableDataTotal.value = 0;
};

// 编辑按钮
const handleEdit = async (order) => {
  // 清空当前表格数据 和 选中状态
  resetFormAndTableData();

  if (!selectedOrder.value) {
    proxy.$modal.msgError('请选择要编辑的单据');
    return;
  }
  const res = await getOrderDetail({
    busNo: selectedOrder.value.supplyBusNo,
    pageNo: tableForm.value.pageNo,
    pageSize: tableForm.value.pageSize,
  });
  // 构建编辑后的表单数据
  buildEditForm(res.data.records);
  // 更新表格数据总条数
  tableDataTotal.value = res.data.total;
  // 根据订单状态更新按钮状态
  const isApproved = order.statusEnum_enumText === '同意' || order.statusEnum === 3;
  if (isApproved) {
    // 设置编辑状态
    isAddOrEditOrder.value = {
      isAddOrder: false,
      isEditOrder: false,
    };
    // 更新按钮状态为初始状态
    handleUpdateButtonState({
      // 审核 按钮禁用
      isAuditDisabled: true,
      // 取消 按钮禁用
      isCancelDisabled: true,
      // 删除 按钮禁用
      isDeleteDisabled: true,
      // 添加 按钮禁用
      isAddDisabled: false,
      // 编辑 按钮禁用
      isEditDisabled: true,
      // 添加行 按钮显示
      isAddShow: false,
      // 删除行 按钮显示
      isDeleteShow: false,
      // 保存行 按钮显示
      isSaveShow: false,
      // 编辑行 按钮显示
      isEditShow: false,
      // 警戒订货 按钮显示
      isOrderImport: false,
    });
    return;
  }
  // 设置编辑状态
  isAddOrEditOrder.value = {
    isAddOrder: false,
    isEditOrder: true,
  };

  // 更新按钮状态
  handleUpdateButtonState({
    // 审核 按钮禁用
    isAuditDisabled: isApproved,
    // 取消 按钮禁用
    isCancelDisabled: false,
    // 删除 按钮禁用
    isDeleteDisabled: isApproved,
    // 添加 按钮禁用
    isAddDisabled: false,
    // 编辑 按钮禁用
    isEditDisabled: true,
    // 添加行 按钮显示
    isAddShow: !isApproved,
    // 删除行 按钮显示
    isDeleteShow: !isApproved,
    // 保存行 按钮显示
    isSaveShow: !isApproved,
    // 编辑行 按钮显示
    isEditShow: !isApproved,
    // 警戒订货 按钮显示
    isOrderImport: !isApproved,
  });
};
// 构建进货价和销售价
const buildPrice = (item) => {
  // 判断当前单位是最大单位还是最小单位
  const isMaxUnit = item.unitCode === item.maxUnitCode;
  if (isMaxUnit) {
    // 进货价
    item.price = item.price;
    item.priceMaxUnit = item.price;
    item.priceMinUnit = item.price / parseInt(item.partPercent);

    // 销售价
    item.retailPrice = item.retailPrice;
    item.retailPriceMaxUnit = item.retailPrice;
    item.retailPriceMinUnit = (parseFloat(item.retailPrice) / parseFloat(item.partPercent)).toFixed(
      2
    );
  } else {
    // 进货价
    item.price = item.price;
    item.priceMaxUnit = parseFloat((item.price * parseInt(item.partPercent)).toFixed(2));
    item.priceMinUnit = item.price;

    // 销售价
    item.retailPrice = item.retailPrice;
    item.retailPriceMaxUnit = parseFloat(
      (item.retailPrice * parseInt(item.partPercent)).toFixed(2)
    );
    item.retailPriceMinUnit = item.retailPrice;
  }
};
//  构建单位列表
const buildUnitList = (item) => {
  // 表格单位列表
  (item.unitList || []).forEach((unit) => {
    // 判断当前单位是最大单位还是最小单位
    const isMaxUnit = unit.value === item.maxUnitCode;
    const isMinUnit = unit.value === item.minUnitCode;

    // // 进货价（假）
    unit.priceMask = item.price;

    // 销售价（假）
    unit.retailPriceMask = item.retailPrice;

    // 进价金额（假）
    unit.totalPriceMask = (parseFloat(item.price) * parseFloat(item.itemQuantity)).toFixed(2);

    // 销售金额（假）
    unit.totalRetailPriceMask = (
      parseFloat(item.retailPrice) * parseFloat(item.itemQuantity)
    ).toFixed(2);

    // 规格库存
    unit.specificationInventoryOriginal = item.specificationInventory;

    // 规格库存显示逻辑
    if (isMaxUnit) {
      // 最大单位：显示为 "X盒"
      unit.specificationInventoryMax = Math.floor(
        item.specificationInventory / parseInt(item.partPercent)
      );
      unit.specificationInventoryMaxUnit =
        unit.specificationInventoryMax > 0 ? item.maxUnitCode_dictText : '';
      unit.specificationInventoryMin = item.specificationInventory % parseInt(item.partPercent);
      unit.specificationInventoryMinUnit =
        unit.specificationInventoryMin > 0 ? item.minUnitCode_dictText : '';

      // 批次库存
      unit.batchInventoryMax = Math.floor(item.batchInventory / parseInt(item.partPercent));
      unit.batchInventoryMaxUnit = unit.batchInventoryMax > 0 ? item.maxUnitCode_dictText : '';
      unit.batchInventoryMin = item.batchInventory % parseInt(item.partPercent);
      unit.batchInventoryMinUnit = unit.batchInventoryMin > 0 ? item.minUnitCode_dictText : '';
    } else if (isMinUnit) {
      // 最小单位：显示为 "X瓶"
      unit.specificationInventoryMax = item.specificationInventory;
      unit.specificationInventoryMaxUnit =
        unit.specificationInventoryMax > 0 ? item.minUnitCode_dictText : '';
      unit.specificationInventoryMin = 0;
      unit.specificationInventoryMinUnit =
        unit.specificationInventoryMin > 0 ? item.minUnitCode_dictText : '';

      // 批次库存
      unit.batchInventoryMax = item.batchInventory;
      unit.batchInventoryMaxUnit = unit.batchInventoryMax > 0 ? item.minUnitCode_dictText : '';
      unit.batchInventoryMin = 0;
      unit.batchInventoryMinUnit = unit.batchInventoryMin > 0 ? item.minUnitCode_dictText : '';
    } else {
      // 其他单位：显示为 "X瓶"
      unit.specificationInventoryMax = item.specificationInventory;
      unit.specificationInventoryMaxUnit =
        unit.specificationInventoryMax > 0 ? item.minUnitCode_dictText : '';
      unit.specificationInventoryMin = 0;
      unit.specificationInventoryMinUnit =
        unit.specificationInventoryMin > 0 ? item.minUnitCode_dictText : '';

      // 批次库存
      unit.batchInventoryMax = item.batchInventory;
      unit.batchInventoryMaxUnit = unit.batchInventoryMax > 0 ? item.minUnitCode_dictText : '';
      unit.batchInventoryMin = 0;
      unit.batchInventoryMinUnit = unit.batchInventoryMin > 0 ? item.minUnitCode_dictText : '';
    }
  });
};
// 构建编辑后的表单数据
const buildEditForm = (data) => {
  // 构建表格数据
  if (data.length > 0) {
    // 表单数据
    tableForm.value = {
      // 单据号
      busNo: data[0].busNo,
      // 单据日期
      applyTime: data[0].applyTime,
      // 供应商
      supplierId: data[0].supplierId,
      // 供应商联系人
      phone: data[0].phone,
      // 采购员
      applicantId: data[0].applicantId,
      // 单据类型
      categoryEnum: data[0].categoryEnum,
      // 摘要
      reason: data[0].reason,
      // 仓库
      locationId: data[0].sourceLocationId,
      // 开单人
      practitionerId: data[0].practitionerId,
      // 发票号
      invoiceNo: data[0].invoiceNo,
    };
    // 表格数据
    data.forEach((item) => {
      // 表格编辑状态
      item.isEditing = false;
      // 表格查看状态
      item.isViewing = true;
      // 判断当前单位是否是最大单位
      buildPrice(item);
      // 构建单位列表
      buildUnitList(item);
    });
    // 更新表格数据
    tableData.value = data;

    // 审核表格数据
    auditForm.value = {
      // 审核时间
      approvalTime: data[0].approvalTime,
      // 审核状态
      statusEnum: data[0].statusEnum,
      // 审核状态文本
      statusEnum_enumText: data[0].statusEnum_enumText,
      // 审核人
      approverId: data[0].approverId,
    };
    // 订单编辑还是新增
    isAddOrEditOrder.value = {
      isAddOrder: false,
      isEditOrder: true,
    };
  }
};
// 取消按钮
const handleCancel = () => {
  // 更新按钮状态为初始状态
  handleUpdateButtonState({
    // 审核 按钮禁用
    isAuditDisabled: true,
    // 取消 按钮禁用
    isCancelDisabled: true,
    // 删除 按钮禁用
    isDeleteDisabled: true,
    // 添加 按钮禁用
    isAddDisabled: false,
    // 编辑 按钮禁用
    isEditDisabled: true,
    // 添加行 按钮显示
    isAddShow: false,
    // 删除行 按钮显示
    isDeleteShow: false,
    // 保存行 按钮显示
    isSaveShow: false,
    // 编辑行 按钮显示
    isEditShow: false,
    // 警戒订货 按钮显示
    isOrderImport: false,
  });

  // 清空表单
  clearForm();
};

// 清空表单
const clearForm = () => {
  // 清空表单数据
  tableForm.value = {};
  tableData.value = [];
  // 清空右侧表格数据
  proxy.$refs.orderTableRef.resetAllData();
  // 重置订单状态
  isAddOrEditOrder.value = {
    isAddOrder: false,
    isEditOrder: false,
  };
};
// 删除按钮
const handleDelete = async () => {
  if (!selectedOrder.value) {
    proxy.$modal.msgError('请选择要删除的单据');
    return;
  }

  // 校验是否可以删除（已审批的单据不能删除）
  if (selectedOrder.value.statusEnum_enumText === '同意' || selectedOrder.value.statusEnum === 3) {
    proxy.$modal.msgError('已审批的单据不能删除');
    return;
  }

  try {
    await proxy.$modal.confirm('确认删除该采购单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });

    // 删除单据
    await deleteOrder(selectedOrder.value.supplyBusNo);
    proxy.$modal.msgSuccess('删除成功');
    // 清空右侧表格数据
    clearForm();
    // 重新获取列表 库房ID
    await getList(tableForm.value.locationId);

    // 清空选中状态
    selectedOrder.value = null;
    // 更新按钮状态为初始状态
    handleUpdateButtonState({
      // 审核 按钮禁用
      isAuditDisabled: true,
      // 取消 按钮禁用
      isCancelDisabled: true,
      // 删除 按钮禁用
      isDeleteDisabled: true,
      // 添加 按钮禁用
      isAddDisabled: false,
      // 编辑 按钮禁用
      isEditDisabled: true,
      // 添加行 按钮显示
      isAddShow: false,
      // 删除行 按钮显示
      isDeleteShow: false,
      // 保存行 按钮显示
      isSaveShow: false,
      // 编辑行 按钮显示
      isEditShow: false,
      // 警戒订货 按钮显示
      isOrderImport: false,
    });
  } catch (error) {
    if (error !== 'cancel') {
      proxy.$modal.msgError('删除失败');
      console.error('删除失败:', error);
    }
  }
};
// 审核按钮
const handleAudit = async () => {
  if (!selectedOrder.value) {
    proxy.$modal.msgError('请选择要审核的单据');
    return;
  }

  // 校验是否是已审批状态
  if (selectedOrder.value.statusEnum_enumText === '同意' || selectedOrder.value.statusEnum === 3) {
    proxy.$modal.msgError('该单据已审批，不能重复审批');
    return;
  }

  try {
    await proxy.$modal.confirm('确认同意该采购单吗？', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning',
    });

    // 同意审批
    await agreeApproval(selectedOrder.value.supplyBusNo);
    proxy.$modal.msgSuccess('同意审批成功');
    // 编辑
    handleEdit(selectedOrder);
    // 重新获取列表
    await getList();

    // 清空选中状态
    selectedOrder.value = null;
    // 更新按钮状态为初始状态
    handleUpdateButtonState({
      // 审核 按钮禁用
      isAuditDisabled: true,
      // 取消 按钮禁用
      isCancelDisabled: true,
      // 删除 按钮禁用
      isDeleteDisabled: true,
      // 添加 按钮禁用
      isAddDisabled: false,
      // 编辑 按钮禁用
      isEditDisabled: true,
      // 添加行 按钮显示
      isAddShow: false,
      // 删除行 按钮显示
      isDeleteShow: false,
      // 保存行 按钮显示
      isSaveShow: false,
      // 编辑行 按钮显示
      isEditShow: false,
      // 警戒订货 按钮显示
      isOrderImport: false,
    });
  } catch (error) {
    if (error !== 'cancel') {
      proxy.$modal.msgError('同意审批失败');
      console.error('同意审批失败:', error);
    }
  }
};

// 处理订单点击事件
const handleOrderClick = (order) => {
  // 选中订单
  selectedOrder.value = order;
  // 编辑
  handleEdit(order);
};

// 处理查询参数更新
const handleQueryParamsUpdate = (newParams) => {
  // 更新右侧表格的分页参数
  tableForm.value.pageNo = newParams.pageNo;
  tableForm.value.pageSize = newParams.pageSize;

  // 如果有选中的订单，重新获取订单详情
  if (selectedOrder.value) {
    handleEdit(selectedOrder.value);
  }
};
//
// 处理库房变化
const handleLocationChange = (locationId) => {
  queryParams.value.locationId = locationId;
  // 重新获取列表
  getList();
};
//
// 处理表单更新
const handleFormUpdate = (newForm) => {
  tableForm.value = { ...tableForm.value, ...newForm };
};

// 处理按钮状态更新
const handleUpdateButtonState = (buttonState) => {
  // 按钮禁用
  // 审核 按钮禁用
  isAuditDisabled.value = buttonState.isAuditDisabled;
  // 取消 按钮禁用
  isCancelDisabled.value = buttonState.isCancelDisabled;
  // 删除 按钮禁用
  isDeleteDisabled.value = buttonState.isDeleteDisabled;
  // 添加 按钮禁用
  isAddDisabled.value = buttonState.isAddDisabled;
  // 编辑 按钮禁用
  isEditDisabled.value = buttonState.isEditDisabled;
  // 按钮显示
  // 添加行 按钮显示
  buttonShow.value.isAddShow = buttonState.isAddShow;
  // 删除行 按钮显示
  buttonShow.value.isDeleteShow = buttonState.isDeleteShow;
  // 保存行 按钮显示
  buttonShow.value.isSaveShow = buttonState.isSaveShow;
  // 编辑行 按钮显示
  buttonShow.value.isEditShow = buttonState.isEditShow;
  // 警戒订货 按钮显示
  buttonShow.value.isOrderImport = buttonState.isOrderImport;
};
// 监听路由变化
watch(
  () => route.query,
  async (newQuery) => {
    //console.log('路由参数发生变化:', newQuery);
    if (newQuery.busNo) {
      queryParams.value.searchKey = newQuery.busNo;
      await getList();
      // 设置选中状态
      selectedOrder.value = orderList.value.find((item) => item.supplyBusNo === newQuery.busNo);
      // 编辑按钮
      handleEdit(selectedOrder.value);
      // 清空路由参数
      // router.replace({ query: {} });
    }
  },
  { immediate: true }
);
// 下拉列表初始化
init();
</script>

<style scoped lang="scss">
.medicine-container :deep(.el-row) {
  margin-bottom: 10px;
}
.medicine-container :deep(.el-row:last-child) {
  margin-bottom: 0;
}

// 订单列表容器
.order-list-container {
  width: 100%;
  padding: 0;
}

// 订单列表项样式
.order-item {
  width: 100%;
  cursor: pointer;
  transition: all 0.3s ease;
  border-radius: 6px;
  overflow: hidden;
  margin: 4px 0;

  &:hover {
    transform: translateY(-1px);
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.08);

    .order-card {
      border-color: #409eff;
    }
  }

  &.is-active {
    .order-card {
      border-color: #409eff;
      background: linear-gradient(135deg, #ecf5ff 0%, #f0f9ff 100%);
    }

    .order-number .number-text {
      color: #409eff;
      font-weight: 600;
    }
  }
}

// 订单卡片样式
.order-card {
  border: 1px solid #e4e7ed;
  border-radius: 6px;
  transition: all 0.3s ease;
  background: #fff;
  overflow: hidden;

  :deep(.el-card__body) {
    padding: 12px;
  }
}

// 订单头部样式
.order-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 8px;
  padding-bottom: 8px;
  border-bottom: 1px solid #f0f0f0;
}

.order-number {
  display: flex;
  align-items: center;
  gap: 6px;
  min-width: 0;
  flex: 1;

  .el-icon {
    color: #409eff;
    font-size: 14px;
    flex-shrink: 0;
  }

  .number-text {
    font-size: 13px;
    font-weight: 500;
    color: #303133;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
}

.order-status {
  flex-shrink: 0;

  .el-tag {
    border-radius: 10px;
    font-weight: 500;
    font-size: 11px;
    padding: 2px 6px;
  }
}

// 订单内容样式
.order-content {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.info-item {
  display: flex;
  align-items: center;
  gap: 4px;
  padding: 4px 0;
  min-width: 0;

  .info-icon {
    color: #909399;
    font-size: 12px;
    flex-shrink: 0;
  }

  .label {
    color: #606266;
    font-size: 12px;
    font-weight: 500;
    flex-shrink: 0;
  }

  .value {
    color: #303133;
    font-size: 12px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    min-width: 0;
    flex: 1;
  }
}

// 空状态样式
.empty-state {
  display: flex;
  justify-content: center;
  align-items: center;
  height: 200px;
  color: #909399;

  :deep(.el-empty__description) {
    color: #909399;
    font-size: 14px;
  }

  :deep(.el-button) {
    margin-top: 16px;
  }
}

// 响应式设计
@media (max-width: 768px) {
  .order-header {
    flex-direction: column;
    align-items: flex-start;
    gap: 6px;
  }

  .info-item {
    padding: 2px 0;
  }

  .empty-state {
    height: 150px;
  }
}
</style>