<template>
  <ContentWrap>
    <!-- 搜索工作栏 -->
    <el-form
      class="-mb-15px"
      :model="queryParams"
      ref="queryFormRef"
      :inline="true"
      label-width="68px"
    >
      <el-form-item :label="t('workOrderMaterial.factory')" prop="factoryId">
        <el-select
          v-model="queryParams.factoryId"
          clearable
          filterable
          :placeholder="t('faultForm.choose')"
          class="!w-240px"
          @change="selectedFactoryChange"
        >
          <el-option
            v-for="item in factoryList"
            :key="item.id"
            :label="item.factoryName"
            :value="item.id!"
          />
        </el-select>
      </el-form-item>
      <el-form-item
        :label="t('workOrderMaterial.storageLocation')"
        prop="storageLocationId"
        style="margin-left: 28px"
      >
        <el-select
          v-model="queryParams.storageLocationId"
          clearable
          filterable
          :placeholder="t('faultForm.choose')"
          class="!w-240px"
        >
          <el-option
            v-for="item in storageLocationList"
            :key="item.id"
            :label="item.storageLocationName"
            :value="item.id!"
          />
        </el-select>
      </el-form-item>
      <el-form-item :label="t('chooseMaintain.materialCode')" prop="materialCode">
        <el-input
          v-model="queryParams.materialCode"
          :placeholder="t('chooseMaintain.materialCode')"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item :label="t('chooseMaintain.materialName')" prop="materialName">
        <el-input
          v-model="queryParams.materialName"
          :placeholder="t('chooseMaintain.materialName')"
          clearable
          @keyup.enter="handleQuery"
          class="!w-240px"
        />
      </el-form-item>
      <el-form-item :label="t('chooseMaintain.createTime')" prop="createTime">
        <el-date-picker
          v-model="queryParams.createTime"
          value-format="YYYY-MM-DD HH:mm:ss"
          type="daterange"
          :start-placeholder="t('info.start')"
          :end-placeholder="t('info.end')"
          :default-time="[new Date('1 00:00:00'), new Date('1 23:59:59')]"
          class="!w-220px"
        />
      </el-form-item>
      <el-form-item :label="t('route.IsItConfigured')" prop="configFlag" label-width="140px">
        <el-select
          v-model="queryParams.configFlag"
          :placeholder="t('faultForm.choose')"
          clearable
          class="!w-240px"
        >
          <el-option
            v-for="dict in resultOptions"
            :key="dict.value"
            :label="dict.label"
            :value="dict.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery"
          ><Icon icon="ep:search" class="mr-5px" /> {{ t('operationFill.search') }}</el-button
        >
        <el-button @click="resetQuery"
          ><Icon icon="ep:refresh" class="mr-5px" /> {{ t('operationFill.reset') }}</el-button
        >
        <!-- v-hasPermi="['pms:iot-sap-stock:export']" -->
        <el-button type="success" plain @click="handleExport" :loading="exportLoading">
          <Icon icon="ep:download" class="mr-5px" /> 导出
        </el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>

  <!-- ========== 统计信息卡片 ========== -->
  <ContentWrap style="margin-bottom: 16px">
    <el-card shadow="never" class="stat-card">
      <div class="stat-container">
        <div class="stat-item">
          <span class="stat-label">{{ t('stock.totalQuantity') }}：</span>
          <span class="stat-value">{{ totalQuantity.toLocaleString() }}</span>
        </div>
        <div class="stat-item">
          <span class="stat-label">{{ t('stock.totalAmount') }}：</span>
          <span class="stat-value"
            >¥
            {{
              totalAmount.toLocaleString(undefined, {
                minimumFractionDigits: 2,
                maximumFractionDigits: 2
              })
            }}</span
          >
        </div>
      </div>
    </el-card>
  </ContentWrap>

  <!-- 列表 -->
  <ContentWrap ref="tableContainerRef" class="table-container">
    <el-table
      ref="tableRef"
      v-loading="loading"
      :data="list"
      :stripe="true"
      :show-overflow-tooltip="false"
      style="width: 100%"
    >
      <el-table-column
        :label="t('workOrderMaterial.factory')"
        align="center"
        prop="factory"
        :width="columnWidths.factory"
      />
      <el-table-column
        :label="t('workOrderMaterial.storageLocation')"
        align="center"
        prop="projectDepartment"
        :width="columnWidths.projectDepartment"
      />
      <el-table-column
        :label="t('chooseMaintain.materialCode')"
        align="center"
        prop="materialCode"
        :width="columnWidths.materialCode"
      />
      <el-table-column
        :label="t('chooseMaintain.materialName')"
        align="left"
        prop="materialName"
        :width="columnWidths.materialName"
      />
      <el-table-column
        :label="t('route.quantity')"
        align="center"
        prop="quantity"
        :width="columnWidths.quantity"
      />
      <el-table-column
        :label="t('workOrderMaterial.unitPrice')"
        align="center"
        prop="unitPrice"
        :width="columnWidths.unitPrice"
      />
      <el-table-column
        :label="t('workOrderMaterial.unit')"
        align="center"
        prop="unit"
        :width="columnWidths.unit"
      />
      <el-table-column
        :label="t('route.safetyStock')"
        align="center"
        prop="safetyStock"
        :width="columnWidths.safetyStock"
      />
      <el-table-column
        :label="t('chooseMaintain.createTime')"
        align="center"
        prop="createTime"
        :formatter="dateFormatter"
        :width="columnWidths.createTime"
      />
    </el-table>
    <!-- 分页 -->
    <Pagination
      :total="total"
      v-model:page="queryParams.pageNo"
      v-model:limit="queryParams.pageSize"
      @pagination="getList"
    />
  </ContentWrap>

  <!-- 表单弹窗：添加/修改 -->
  <IotSapStockForm ref="formRef" @success="getList" />
</template>

<script setup lang="ts">
import { dateFormatter } from '@/utils/formatTime'
import download from '@/utils/download'
import { IotSapStockApi, IotSapStockVO } from '@/api/pms/iotsapstock'
import IotSapStockForm from './IotSapStockForm.vue'
import * as SapOrgApi from '@/api/system/saporg'

/** PMS SAP 库存(通用库存/项目部库存) 列表 */
defineOptions({ name: 'IotSapStock' })

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

const factoryList = ref([] as SapOrgApi.SapOrgVO[]) // 工厂列表
const storageLocationList = ref([] as SapOrgApi.SapOrgVO[]) // 库存地点列表
// 新增统计变量
const totalQuantity = ref(0) // 总数量
const totalAmount = ref(0) // 总金额

const loading = ref(true) // 列表的加载中
const list = ref<IotSapStockVO[]>([]) // 列表的数据
const total = ref(0) // 列表的总页数
const queryParams = reactive({
  pageNo: 1,
  pageSize: 10,
  deptId: undefined,
  factoryId: undefined,
  factory: undefined,
  storageLocationId: undefined,
  projectDepartment: undefined,
  materialCode: undefined,
  materialName: undefined,
  materialGroupName: undefined,
  materialGroupId: undefined,
  quantity: undefined,
  unitPrice: undefined,
  unit: undefined,
  safetyStock: undefined,
  shelvesId: undefined,
  cargoLocationId: undefined,
  type: undefined,
  syncStatus: undefined,
  syncTime: [],
  syncError: undefined,
  sort: undefined,
  status: undefined,
  remark: undefined,
  configFlag: 'A',
  createTime: []
})
const queryFormRef = ref() // 搜索的表单
const exportLoading = ref(false) // 导出的加载中

// 表格容器和表格的引用
const tableContainerRef = ref()
const tableRef = ref()

// 列宽度配置
const columnWidths = ref({
  factory: '120px',
  projectDepartment: '120px',
  materialCode: '120px',
  materialName: '200px', // 初始宽度，会被计算覆盖
  quantity: '100px',
  unitPrice: '100px',
  unit: '100px',
  safetyStock: '120px',
  createTime: '180px'
})

/** 获取滚动条宽度 */
const getScrollbarWidth = () => {
  const outer = document.createElement('div')
  outer.style.visibility = 'hidden'
  outer.style.overflow = 'scroll'
  document.body.appendChild(outer)

  const inner = document.createElement('div')
  outer.appendChild(inner)

  const scrollbarWidth = outer.offsetWidth - inner.offsetWidth
  outer.parentNode?.removeChild(outer)

  return scrollbarWidth
}

/** 计算文本宽度 */
const getTextWidth = (text: string, fontSize = 14) => {
  const span = document.createElement('span')
  span.style.visibility = 'hidden'
  span.style.position = 'absolute'
  span.style.whiteSpace = 'nowrap'
  span.style.fontSize = `${fontSize}px`
  span.style.fontFamily = 'inherit'
  span.innerText = text

  document.body.appendChild(span)
  const width = span.offsetWidth
  document.body.removeChild(span)

  return width
}

/** 计算列宽度 */
const calculateColumnWidths = () => {
  const MIN_WIDTH = 80 // 最小列宽
  const PADDING = 25 // 列内边距
  const FLEXIBLE_COLUMN = 'materialName' // 可伸缩列
  const scrollbarWidth = getScrollbarWidth() // 动态获取滚动条宽度

  if (!tableContainerRef.value?.$el || list.value.length === 0) return

  const containerWidth = tableContainerRef.value.$el.clientWidth

  // 需要自适应的列配置
  const autoColumns = [
    { key: 'factory', label: t('workOrderMaterial.factory'), getValue: (row) => row.factory },
    {
      key: 'projectDepartment',
      label: t('workOrderMaterial.storageLocation'),
      getValue: (row) => row.projectDepartment
    },
    {
      key: 'materialCode',
      label: t('chooseMaintain.materialCode'),
      getValue: (row) => row.materialCode
    },
    {
      key: 'materialName',
      label: t('chooseMaintain.materialName'),
      getValue: (row) => row.materialName
    },
    { key: 'quantity', label: t('route.quantity'), getValue: (row) => String(row.quantity) },
    {
      key: 'unitPrice',
      label: t('workOrderMaterial.unitPrice'),
      getValue: (row) => String(row.unitPrice)
    },
    { key: 'unit', label: t('workOrderMaterial.unit'), getValue: (row) => row.unit },
    {
      key: 'safetyStock',
      label: t('route.safetyStock'),
      getValue: (row) => String(row.safetyStock)
    },
    {
      key: 'createTime',
      label: t('chooseMaintain.createTime'),
      getValue: (row) => dateFormatter(null, null, row.createTime)
    }
  ]

  const newWidths: Record<string, string> = {}
  let totalFixedWidth = 0 // 所有固定列的总宽度

  // 计算除可伸缩列外的所有列宽度
  autoColumns.forEach((col) => {
    if (col.key === FLEXIBLE_COLUMN) return

    const headerText = col.label
    const headerWidth = getTextWidth(headerText) * 1.3 // 表头宽度（加粗效果增加30%）

    // 计算内容最大宽度
    let contentMaxWidth = 0
    list.value.forEach((row) => {
      const text = col.getValue ? String(col.getValue(row)) : String(row[col.key] || '')
      const textWidth = getTextWidth(text)
      if (textWidth > contentMaxWidth) contentMaxWidth = textWidth
    })

    // 取表头宽度、内容最大宽度和最小宽度的最大值
    const finalWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH) + PADDING
    newWidths[col.key] = `${finalWidth}px`
    totalFixedWidth += finalWidth
  })

  // 处理可伸缩列（materialName）
  const flexibleCol = autoColumns.find((col) => col.key === FLEXIBLE_COLUMN)
  if (flexibleCol) {
    const headerText = flexibleCol.label
    const headerWidth = getTextWidth(headerText) * 1.3

    let contentMaxWidth = 0
    list.value.forEach((row) => {
      const text = flexibleCol.getValue
        ? String(flexibleCol.getValue(row))
        : String(row[flexibleCol.key] || '')
      const textWidth = getTextWidth(text)
      if (textWidth > contentMaxWidth) contentMaxWidth = textWidth
    })

    const baseWidth = Math.max(headerWidth, contentMaxWidth, MIN_WIDTH) + PADDING

    // 剩余空间 = 容器宽度 - 其他列总宽度 - 垂直滚动条宽度
    const remainingWidth = containerWidth - totalFixedWidth - scrollbarWidth

    // 可伸缩列的宽度取剩余空间和基础宽度的最大值
    const flexibleWidth = Math.max(remainingWidth, baseWidth)
    newWidths[FLEXIBLE_COLUMN] = `${flexibleWidth}px`
  }

  // 更新列宽度
  columnWidths.value = newWidths

  // 重新布局表格
  nextTick(() => {
    tableRef.value?.doLayout()
  })
}

/** 查询列表 */
const getList = async () => {
  loading.value = true
  try {
    const data = await IotSapStockApi.getIotSapStockPage(queryParams)
    list.value = data.list
    total.value = data.total
    // 从第一条记录中提取统计值
    if (data.list && data.list.length > 0) {
      // 确保取到有效的数值（第一条记录中的统计值代表整个查询结果）
      totalQuantity.value = Number(data.list[0].totalQuantity) || 0
      totalAmount.value = Number(data.list[0].totalAmount) || 0
    } else {
      // 没有数据时重置为0
      totalQuantity.value = 0
      totalAmount.value = 0
    }
    // 数据加载完成后计算列宽
    nextTick(() => {
      calculateColumnWidths()
    })
  } finally {
    loading.value = false
  }
  // 加载工厂(SAP)列表
  factoryList.value = await SapOrgApi.SapOrgApi.getSimpleSapOrgList(1)
  // 加载库存地点(SAP)列表
  storageLocationList.value = await SapOrgApi.SapOrgApi.getSimpleSapOrgList(3)
}

/** 搜索按钮操作 */
const handleQuery = () => {
  queryParams.pageNo = 1
  getList()
}

/** 重置按钮操作 */
const resetQuery = () => {
  queryFormRef.value.resetFields()
  handleQuery()
}

/** 添加/修改操作 */
const formRef = ref()
const openForm = (type: string, id?: number) => {
  formRef.value.open(type, id)
}

const selectedFactoryReqVO = ref({
  type: 0, // 类型(1工厂 2成本中心 3库位)
  factoryCodes: [] // 已经选择的SAP工厂code 列表
})

/** 已经选择了 SAP工厂 */
const selectedFactoryChange = async (selectedId: number | undefined) => {
  // 获取选中的factoryCode数组
  const selectedFactory = factoryList.value.find((item) => item.id === selectedId)
  const selectedFactoryCodes = selectedFactory ? [selectedFactory.factoryCode] : []

  // 获得已经选择的 SAP 工厂 数组
  // const factoryIds = formData.value.factoryIds
  console.log('选择的工厂代码：', selectedFactoryCodes)
  // 根据选择的 SAP工厂 调用后台接口查询 SAP工厂下属的 库存地点列表
  selectedFactoryReqVO.value.type = 3
  selectedFactoryReqVO.value.factoryCodes = selectedFactoryCodes
  storageLocationList.value = await SapOrgApi.SapOrgApi.getSelectedList(selectedFactoryReqVO.value)
}

// 是否已经配置了安全库存 下拉列表 模拟字典项
const resultOptions = computed(() => [
  {
    label: '全部',
    value: 'A' // 空值会触发 clearable 效果
  },
  {
    label: '是',
    value: 'Y' // 空值会触发 clearable 效果
  },
  {
    label: '否',
    value: 'N' // 空值会触发 clearable 效果
  }
])

/** 删除按钮操作 */
const handleDelete = async (id: number) => {
  try {
    // 删除的二次确认
    await message.delConfirm()
    // 发起删除
    await IotSapStockApi.deleteIotSapStock(id)
    message.success(t('common.delSuccess'))
    // 刷新列表
    await getList()
  } catch {}
}

/** 导出按钮操作 */
const handleExport = async () => {
  try {
    exportLoading.value = true
    const data = await IotSapStockApi.exportIotSapStock(queryParams)
    download.excel(data, 'SPA库存.xls')
  } catch {
  } finally {
    exportLoading.value = false
  }
}

/** 初始化 **/
onMounted(() => {
  getList()
  // 添加窗口大小变化监听
  window.addEventListener('resize', calculateColumnWidths)
})

onUnmounted(() => {
  // 移除窗口大小变化监听
  window.removeEventListener('resize', calculateColumnWidths)
})

// 监听列表数据变化，重新计算列宽
watch(
  list,
  () => {
    nextTick(calculateColumnWidths)
  },
  { deep: true }
)
</script>

<style scoped>
/* 统计卡片样式 */
.stat-card {
  border-radius: 4px;
  border: 1px solid #ebeef5;
}

.stat-container {
  display: flex;
  padding: 1px;
}

.stat-item {
  display: flex;
  align-items: center;
  margin-right: 40px; /* 控制项间距 */
}

.stat-label {
  font-weight: bold;
  color: #606266;
  margin-right: 8px;
}

.stat-value {
  font-size: 18px;
  font-weight: bold;
  color: #409eff;
}

/* 表格容器样式 - 确保可以水平滚动 */
.table-container {
  overflow-x: auto;
}

/* 防止表格内容换行 */
:deep(.el-table) .cell {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: unset !important;
}

/* 确保表格行不换行 */
:deep(.el-table__row) {
  white-space: nowrap;
}

/* 表头特别处理 */
:deep(.el-table__header) {
  .cell {
    display: inline-block;
    white-space: nowrap;
    width: auto !important;
  }
}

/* 表格整体布局优化 */
:deep(.el-table__inner-wrapper) {
  min-width: 100% !important;
  width: auto !important;
}

/* 单元格内容完全显示 */
:deep(.el-table__body-wrapper) .el-table__cell .cell {
  display: block;
  overflow: visible;
  text-overflow: unset;
}
</style>
