pms-iot-vue/src/views/pms/maintenance/IotMaintenancePlanEdit.vue

<template>
  <ContentWrap v-loading="formLoading">
    <el-form
      ref="formRef"
      :model="formData"
      :rules="formRules"
      v-loading="formLoading"
      style="margin-right: 4em; margin-left: 0.5em; margin-top: 1em"
      label-width="130px"
    >
      <div class="base-expandable-content">
        <el-row>
          <el-col :span="12">
            <el-form-item :label="t('main.planName')" prop="name">
              <el-input type="text" v-model="formData.name" />
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item :label="t('main.planCode')" prop="serialNumber">
              <el-input type="text" v-model="formData.serialNumber" disabled />
            </el-form-item>
          </el-col>
          <el-col :span="24">
            <el-form-item :label="t('iotMaintain.remark')" prop="remark">
              <el-input
                v-model="formData.remark"
                type="textarea"
                :placeholder="t('iotMaintain.remarkHolder')"
              />
            </el-form-item>
          </el-col>
        </el-row>
      </div>
    </el-form>
  </ContentWrap>
  <ContentWrap>
    <ContentWrap>
      <!-- 搜索工作栏 -->
      <el-form
        class="-mb-15px"
        :model="queryParams"
        ref="queryFormRef"
        :inline="true"
        label-width="68px"
      >
        <el-form-item>
          <el-button @click="openForm" type="warning">
            <Icon icon="ep:plus" class="mr-5px" /> {{ t('operationFill.add') }}</el-button
          >
        </el-form-item>
      </el-form>
    </ContentWrap>

    <!-- 列表 -->
    <ContentWrap>
      <el-table
        ref="tableRef"
        @header-dragend="handleHeaderDragEnd"
        v-loading="loading"
        :data="pagedList"
        :stripe="true"
        :show-overflow-tooltip="true"
        style="table-layout: fixed"
        border
        :header-cell-style="tableHeaderStyle"
        :cell-class-name="cellClassName"
        :max-height="420"
        scrollbar-always-on
      >
        <!-- 添加序号列 -->
        <el-table-column
          type="index"
          :label="t('iotDevice.serial')"
          :min-width="48"
          align="center"
          prop="serial"
          fixed="left"
        />
        <el-table-column label="设备id" align="center" prop="deviceId" v-if="false" />
        <el-table-column
          :label="t('iotMaintain.deviceCode')"
          align="center"
          prop="deviceCode"
          :min-width="columnWidths.deviceCode"
          fixed="left"
        />
        <el-table-column
          :label="t('iotMaintain.deviceName')"
          align="center"
          prop="deviceName"
          :min-width="columnWidths.deviceName"
          fixed="left"
        />
        <el-table-column
          :label="t('bomList.bomNode')"
          align="center"
          prop="name"
          :show-overflow-tooltip="false"
          :min-width="columnWidths.name"
          fixed="left"
        >
          <template #default="{ row }">
            <div class="full-content-cell">
              {{ row.name }}
            </div>
          </template>
        </el-table-column>
        <el-table-column
          :label="t('main.runTime')"
          align="center"
          key="runningTimeRule"
          prop="runningTimeRule"
          :min-width="columnWidths.runningTimeRule"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.runningTimeRule"
              :active-value="0"
              :inactive-value="1"
              @change="handleRuleChange(scope.row, 'runningTime')"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="t('main.mileage')"
          align="center"
          key="mileageRule"
          prop="mileageRule"
          :min-width="columnWidths.mileageRule"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.mileageRule"
              :active-value="0"
              :inactive-value="1"
              @change="handleRuleChange(scope.row, 'mileage')"
            />
          </template>
        </el-table-column>

        <el-table-column
          :label="t('main.date')"
          align="center"
          key="naturalDateRule"
          prop="naturalDateRule"
          :min-width="columnWidths.naturalDateRule"
        >
          <template #default="scope">
            <el-switch
              v-model="scope.row.naturalDateRule"
              :active-value="0"
              :inactive-value="1"
              @change="handleRuleChange(scope.row, 'date')"
            />
          </template>
        </el-table-column>
        <el-table-column
          :label="t('operationFillForm.sumTime')"
          align="center"
          prop="totalRunTime"
          :formatter="erpPriceTableColumnFormatter"
          :min-width="columnWidths.totalRunTime"
        >
          <template #default="{ row }">
            {{ row.totalRunTime ?? row.tempTotalRunTime }}
          </template>
        </el-table-column>
        <el-table-column
          :label="t('operationFillForm.sumKil')"
          align="center"
          prop="totalMileage"
          :formatter="erpPriceTableColumnFormatter"
          :min-width="columnWidths.totalMileage"
        >
          <template #default="{ row }">
            {{ row.totalMileage ?? row.tempTotalMileage }}
          </template>
        </el-table-column>
        <el-table-column
          label="tempTotalRunTime"
          align="center"
          prop="tempTotalRunTime"
          :formatter="erpPriceTableColumnFormatter"
          v-if="false"
        />
        <el-table-column
          label="tempTotalMileage"
          align="center"
          prop="tempTotalMileage"
          :formatter="erpPriceTableColumnFormatter"
          v-if="false"
        />
        <el-table-column
          :label="t('mainPlan.lastMaintenanceDate')"
          prop="lastMaintenanceDate"
          align="center"
          :min-width="columnWidths.lastMaintenanceDate"
        >
          <template #default="{ row }">
            <div class="full-content-cell">
              {{ row.lastMaintenanceDate }}
            </div>
          </template>
        </el-table-column>
        <!-- 保养时长 分组 -->
        <el-table-column v-if="hasTimeRuleInCurrentPage" label="保养时长" align="center">
          <el-table-column
            :label="t('mainPlan.lastMaintenanceOperationTime')"
            align="center"
            prop="lastRunningTime"
            :formatter="erpPriceTableColumnFormatter"
            :min-width="columnWidths.lastRunningTime"
          >
            <template #default="{ row }">
              {{ row.lastRunningTime }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('mainPlan.nextMaintenanceH')"
            align="center"
            prop="nextMaintenanceH"
            :min-width="columnWidths.nextMaintenanceH"
          >
            <template #default="{ row }">
              {{ row.nextMaintenanceH ?? '-' }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('mainPlan.remainH')"
            align="center"
            prop="remainH"
            :min-width="columnWidths.remainH"
          >
            <template #default="{ row }">
              {{ row.remainH ?? '-' }}
            </template>
          </el-table-column>
        </el-table-column>
        <!-- 保养里程 分组 -->
        <el-table-column v-if="hasMileageRuleInCurrentPage" label="保养里程" align="center">
          <el-table-column
            :label="t('mainPlan.lastMaintenanceMileage')"
            align="center"
            prop="lastRunningKilometers"
            :formatter="erpPriceTableColumnFormatter"
            :min-width="columnWidths.lastRunningKilometers"
          >
            <template #default="{ row }">
              {{ row.lastRunningKilometers }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('mainPlan.nextMaintenanceKm')"
            align="center"
            prop="nextMaintenanceKm"
            :min-width="columnWidths.nextMaintenanceKm"
          >
            <template #default="{ row }">
              {{ row.nextMaintenanceKm ?? '-' }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('mainPlan.remainKm')"
            align="center"
            prop="remainKm"
            :min-width="columnWidths.remainKm"
          >
            <template #default="{ row }">
              {{ row.remainKm ?? '-' }}
            </template>
          </el-table-column>
        </el-table-column>

        <!-- 保养时长 分组 -->
        <el-table-column v-if="hasDateRuleInCurrentPage" label="保养日期" align="center">
          <el-table-column
            :label="t('mainPlan.lastMaintenanceNaturalDate')"
            align="center"
            prop="tempLastNaturalDate"
            :formatter="erpPriceTableColumnFormatter"
            :min-width="columnWidths.tempLastNaturalDate"
          >
            <template #default="{ row }">
              {{ row.tempLastNaturalDate }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('mainPlan.nextMaintDate')"
            align="center"
            prop="nextMaintenanceDate"
            :min-width="columnWidths.nextMaintenanceDate"
          >
            <template #default="{ row }">
              {{ row.nextMaintenanceDate ?? '-' }}
            </template>
          </el-table-column>
          <el-table-column
            :label="t('mainPlan.remainDay')"
            align="center"
            prop="remainDay"
            :min-width="columnWidths.remainDay"
          >
            <template #default="{ row }">
              {{ row.remainDay ?? '-' }}
            </template>
          </el-table-column>
        </el-table-column>

        <el-table-column
          :label="t('operationFill.operation')"
          align="center"
          :min-width="columnWidths.operation"
          prop="operation"
          fixed="right"
        >
          <template #default="scope">
            <div style="display: flex; justify-content: center; align-items: center; width: 100%">
              <div>
                <Icon style="vertical-align: middle; color: #ea3434" icon="ep:zoom-out" />
                <el-button
                  style="vertical-align: middle"
                  link
                  type="danger"
                  @click="handleDelete(scope.row.deviceId + '-' + scope.row.bomNodeId)"
                >
                  {{ t('modelTemplate.delete') }}
                </el-button>
              </div>
              <!-- 新增配置按钮 -->
              <div style="margin-left: 12px">
                <el-button link type="primary" @click="openConfigDialog(scope.row)">
                  {{ t('modelTemplate.update') }}
                </el-button>
              </div>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <!-- 添加分页组件 -->
      <!-- <el-pagination
        style="margin-top: 20px; justify-content: flex-end"
        :total="list.length"
        v-model:current-page="currentPage"
        v-model:page-size="pageSize"
        :page-sizes="[10, 20, 50, 100]"
        layout="total, sizes, prev, pager, next, jumper"
        @current-change="handlePageChange"
        @size-change="handleSizeChange"
      /> -->
    </ContentWrap>
  </ContentWrap>
  <ContentWrap>
    <el-form>
      <el-form-item style="float: right">
        <el-button @click="submitForm" type="primary" :disabled="formLoading">{{
          t('iotMaintain.save')
        }}</el-button>
        <el-button @click="close">{{ t('iotMaintain.cancel') }}</el-button>
      </el-form-item>
    </el-form>
  </ContentWrap>
  <MainPlanDeviceList ref="deviceFormRef" @choose="deviceChoose" />
  <!-- 新增配置对话框 -->
  <el-dialog
    v-model="configDialog.visible"
    :title="`设备 ${configDialog.current?.deviceCode + '-' + configDialog.current?.name} 保养配置`"
    width="600px"
    :close-on-click-modal="false"
  >
    <!-- 使用header插槽自定义标题 -->
    <template #header>
      <span
        >设备
        <strong>{{ configDialog.current?.deviceCode }}-{{ configDialog.current?.name }}</strong>
        保养项配置</span
      >
    </template>
    <el-form
      :model="configDialog.form"
      label-width="200px"
      :rules="configFormRules"
      ref="configFormRef"
    >
      <div class="form-group">
        <div class="group-title">{{ t('mainPlan.basicMaintenanceRecords') }}</div>
        <!-- 里程配置 -->
        <el-form-item
          v-if="configDialog.current?.mileageRule === 0"
          :label="t('mainPlan.lastMaintenanceMileage')"
          prop="lastRunningKilometers"
        >
          <el-input-number
            v-model="configDialog.form.lastRunningKilometers"
            :precision="2"
            :min="0"
            controls-position="right"
            :controls="false"
            style="width: 60%"
          />
        </el-form-item>
        <!-- 运行时间配置 -->
        <el-form-item
          v-if="configDialog.current?.runningTimeRule === 0"
          :label="t('mainPlan.lastMaintenanceOperationTime')"
          prop="lastRunningTime"
        >
          <el-input-number
            v-model="configDialog.form.lastRunningTime"
            :precision="1"
            :min="0"
            controls-position="right"
            :controls="false"
            style="width: 60%"
          />
        </el-form-item>
        <!-- 自然日期配置 -->
        <el-form-item
          v-if="configDialog.current?.naturalDateRule === 0"
          :label="t('mainPlan.lastMaintenanceNaturalDate')"
          prop="lastNaturalDate"
        >
          <el-date-picker
            v-model="configDialog.form.lastNaturalDate"
            type="date"
            placeholder="选择日期"
            format="YYYY-MM-DD"
            value-format="YYYY-MM-DD"
            style="width: 60%"
          />
        </el-form-item>
      </div>

      <div class="form-group" v-if="configDialog.current?.mileageRule === 0">
        <div class="group-title">{{ t('mainPlan.operatingMileageRuleConfiguration') }}</div>
        <!-- 保养规则周期值 + 提前量 -->
        <el-form-item
          v-if="configDialog.current?.mileageRule === 0"
          :label="t('mainPlan.operatingMileageCycle')"
          prop="nextRunningKilometers"
        >
          <el-input-number
            v-model="configDialog.form.nextRunningKilometers"
            :precision="2"
            :min="0"
            controls-position="right"
            :controls="false"
            style="width: 60%"
          />
        </el-form-item>
        <el-form-item
          v-if="configDialog.current?.mileageRule === 0"
          :label="t('mainPlan.OperatingMileageCycle_lead')"
          prop="kiloCycleLead"
        >
          <el-input-number
            v-model="configDialog.form.kiloCycleLead"
            :precision="2"
            :min="0"
            controls-position="right"
            :controls="false"
            style="width: 60%"
          />
        </el-form-item>
      </div>

      <div class="form-group" v-if="configDialog.current?.runningTimeRule === 0">
        <div class="group-title">{{ t('mainPlan.RunTimeRuleConfiguration') }}</div>
        <el-form-item
          v-if="configDialog.current?.runningTimeRule === 0"
          :label="t('mainPlan.RunTimeCycle')"
          prop="nextRunningTime"
        >
          <el-input-number
            v-model="configDialog.form.nextRunningTime"
            :precision="1"
            :min="0"
            controls-position="right"
            :controls="false"
            style="width: 60%"
          />
        </el-form-item>
        <el-form-item
          v-if="configDialog.current?.runningTimeRule === 0"
          :label="t('mainPlan.RunTimeCycle_Lead')"
          prop="timePeriodLead"
        >
          <el-input-number
            v-model="configDialog.form.timePeriodLead"
            :precision="1"
            :min="0"
            controls-position="right"
            :controls="false"
            style="width: 60%"
          />
        </el-form-item>
      </div>

      <div class="form-group" v-if="configDialog.current?.naturalDateRule === 0">
        <div class="group-title">{{ t('mainPlan.NaturalDayRuleConfig') }}</div>
        <el-form-item
          v-if="configDialog.current?.naturalDateRule === 0"
          :label="t('mainPlan.NaturalDailyCycle')"
          prop="nextNaturalDate"
        >
          <el-input-number
            v-model="configDialog.form.nextNaturalDate"
            :min="0"
            controls-position="right"
            :controls="false"
            style="width: 60%"
          />
        </el-form-item>
        <el-form-item
          v-if="configDialog.current?.naturalDateRule === 0"
          :label="t('mainPlan.NaturalDailyCycle_Lead')"
          prop="naturalDatePeriodLead"
        >
          <el-input-number
            v-model="configDialog.form.naturalDatePeriodLead"
            :min="0"
            controls-position="right"
            :controls="false"
            style="width: 60%"
          />
        </el-form-item>
      </div>

      <!-- 运行记录模板中 多个 累计运行时长 累计运行里程 属性匹配-->
      <div
        class="form-group"
        v-if="
          (configDialog.current?.runningTimeRule === 0 ||
            configDialog.current?.mileageRule === 0) &&
          (configDialog.current?.timeAccumulatedAttrs?.length ||
            configDialog.current?.mileageAccumulatedAttrs?.length) &&
          (configDialog.current.totalRunTime == null || isNaN(configDialog.current.totalRunTime)) &&
          (configDialog.current.totalMileage == null || isNaN(configDialog.current.totalMileage))
        "
      >
        <div class="group-title">{{ t('mainPlan.accumulatedParams') }}</div>
        <!-- 累计运行时长 -->
        <el-form-item
          v-if="
            configDialog.current?.runningTimeRule === 0 &&
            configDialog.current?.timeAccumulatedAttrs?.length &&
            (configDialog.current.totalRunTime == null || isNaN(configDialog.current.totalRunTime))
          "
          :label="t('mainPlan.accumulatedRunTime')"
          prop="accumulatedTimeOption"
          :rules="[
            {
              required:
                configDialog.current?.runningTimeRule === 0 &&
                configDialog.current?.timeAccumulatedAttrs?.length &&
                (configDialog.current.totalRunTime == null ||
                  isNaN(configDialog.current.totalRunTime)),
              message: '请选择累计运行时长',
              trigger: 'change'
            }
          ]"
        >
          <el-select
            v-model="configDialog.form.accumulatedTimeOption"
            placeholder="请选择累计运行时长"
            style="width: 80%"
            clearable
            @change="handleAccumulatedTimeChange"
          >
            <el-option
              v-for="(item, index) in configDialog.current.timeAccumulatedAttrs"
              :key="`time-${item.pointName}-${index}`"
              :label="item.pointName"
              :value="item.pointName"
            />
          </el-select>
        </el-form-item>
        <!-- 累计运行公里数 -->
        <el-form-item
          v-if="
            configDialog.current?.mileageRule === 0 &&
            configDialog.current?.mileageAccumulatedAttrs?.length &&
            (configDialog.current.totalMileage == null || isNaN(configDialog.current.totalMileage))
          "
          :label="t('mainPlan.accumulatedMileage')"
          prop="accumulatedMileageOption"
          :rules="[
            {
              required:
                configDialog.current?.mileageRule === 0 &&
                configDialog.current?.mileageAccumulatedAttrs?.length &&
                (configDialog.current.totalMileage == null ||
                  isNaN(configDialog.current.totalMileage)),
              message: '请选择累计运行公里数',
              trigger: 'change'
            }
          ]"
        >
          <el-select
            v-model="configDialog.form.accumulatedMileageOption"
            placeholder="请选择累计运行公里数"
            style="width: 80%"
            clearable
            @change="handleAccumulatedMileageChange"
          >
            <el-option
              v-for="(item, index) in configDialog.current.mileageAccumulatedAttrs"
              :key="`mileage-${item.pointName}-${index}`"
              :label="item.pointName"
              :value="item.pointName"
            />
          </el-select>
        </el-form-item>
      </div>
    </el-form>
    <template #footer>
      <el-button @click="configDialog.visible = false">{{ t('common.cancel') }}</el-button>
      <el-button type="primary" @click="saveConfig">{{ t('common.save') }}</el-button>
    </template>
  </el-dialog>
</template>
<script setup lang="ts">
import { IotDeviceApi } from '@/api/pms/device'
import * as UserApi from '@/api/system/user'
import { useUserStore } from '@/store/modules/user'
import { ref, computed, watch } from 'vue'
import { IotMaintenanceBomApi, IotMaintenanceBomVO } from '@/api/pms/iotmaintenancebom'
import { IotMaintenancePlanApi } from '@/api/pms/maintenance'
import { useTagsViewStore } from '@/store/modules/tagsView'
import { CACHE_KEY, useCache } from '@/hooks/web/useCache'
import MainPlanDeviceList from '@/views/pms/maintenance/MainPlanDeviceList.vue'
import * as DeptApi from '@/api/system/dept'
import { erpPriceTableColumnFormatter } from '@/utils'
import dayjs from 'dayjs'

/** 保养计划 编辑 */
defineOptions({ name: 'IotMainPlanEdit' })

const { t } = useI18n() // 国际化
const message = useMessage() // 消息弹窗
const { delView } = useTagsViewStore() // 视图操作
const { currentRoute, push } = useRouter()
const deptUsers = ref<UserApi.UserVO[]>([]) // 用户列表
const dept = ref() // 当前登录人所属部门对象
const configFormRef = ref() // 配置弹出框对象
const dialogTitle = ref('') // 弹窗的标题
const formLoading = ref(false) // 表单的加载中：1）修改时的数据加载；2）提交的按钮禁用
const formType = ref('') // 表单的类型：create - 新增；update - 修改
const deviceLabel = ref('') // 表单的类型：create - 新增；update - 修改
const list = ref<IotMaintenanceBomVO[]>([]) // 设备bom关联列表的数据

const lastNaturalDateWatchers = ref(new Map())

const deviceIds = ref<number[]>([]) // 已经选择的设备id数组

const bomNodeColumnWidth = ref('auto')

const tableRef = ref()

const columnWidths = ref<Record<string, string>>({})

// 分页相关变量
const currentPage = ref(1)
const pageSize = ref(10)

// 计算分页后的数据
const pagedList = computed(() => {
  console.log('list.value :>> ', list.value)
  return list.value
  // const start = (currentPage.value - 1) * pageSize.value
  // const end = start + pageSize.value
  // return list.value.slice(start, end)
})

// 处理页码变化
const handlePageChange = (page: number) => {
  currentPage.value = page
}

// 处理每页数量变化
const handleSizeChange = (size: number) => {
  pageSize.value = size
  currentPage.value = 1 // 重置到第一页
}

const { params, name } = useRoute() // 查询参数
const id = params.id
const formData = ref({
  id: undefined,
  deptId: undefined,
  name: '',
  serialNumber: undefined,
  responsiblePerson: undefined,
  remark: undefined,
  failureName: undefined,
  status: undefined,
  devicePersons: ''
})

const formRules = reactive({
  name: [{ required: true, message: '计划名称不能为空', trigger: 'blur' }],
  responsiblePerson: [{ required: true, message: '责任人不能为空', trigger: 'blur' }]
})
const formRef = ref() // 表单 Ref

// 新增配置相关状态
const configDialog = reactive({
  visible: false,
  current: null as IotMaintenanceBomVO | null,
  form: {
    lastRunningKilometers: 0,
    lastRunningTime: 0,
    lastNaturalDate: '',
    // 保养规则 周期
    nextRunningKilometers: 0,
    nextRunningTime: 0,
    nextNaturalDate: 0,
    // 提前量
    kiloCycleLead: 0,
    timePeriodLead: 0,
    naturalDatePeriodLead: 0,
    // 多个累计时长 累计里程 匹配
    accumulatedTimeOption: null, // 累计运行时长选项
    accumulatedMileageOption: null // 累计运行公里数选项
  }
})

// 打开配置对话框
const openConfigDialog = (row: IotMaintenanceBomVO) => {
  // 新增规则校验：至少一个规则开启
  if (row.mileageRule !== 0 && row.runningTimeRule !== 0 && row.naturalDateRule !== 0) {
    message.error('请先设置保养规则')
    return
  }

  configDialog.current = row

  // 处理日期初始化（核心修改）
  let initialDate = ''
  if (row.lastNaturalDate) {
    // 如果已有值：时间戳 -> 日期字符串
    initialDate = dayjs(row.lastNaturalDate).format('YYYY-MM-DD')
  } else {
    // 如果无值：设置默认值避免1970问题
    initialDate = ''
  }

  configDialog.form = {
    lastRunningKilometers: row.lastRunningKilometers || 0,
    lastRunningTime: row.lastRunningTime || 0,
    // 时间戳 -> Date对象（用于日期选择器）
    lastNaturalDate: row.lastNaturalDate ? dayjs(row.lastNaturalDate).format('YYYY-MM-DD') : null,
    // 保养规则 周期值
    nextRunningKilometers: row.nextRunningKilometers || 0,
    nextRunningTime: row.nextRunningTime || 0,
    nextNaturalDate: row.nextNaturalDate || 0,
    // 提前量
    kiloCycleLead: row.kiloCycleLead || 0,
    timePeriodLead: row.timePeriodLead || 0,
    naturalDatePeriodLead: row.naturalDatePeriodLead || 0,
    // 多个累计时长 累计里程 匹配
    accumulatedTimeOption: null, // 累计运行时长选项
    accumulatedMileageOption: null // 累计运行公里数选项
  }

  // 初始化累计参数选择
  /* configDialog.form.accumulatedTimeOption = row.isRuntimeFromTemp
    ? row.code
    : null;

  configDialog.form.accumulatedMileageOption = row.isMileageFromTemp
    ? row.type
    : null; */

  configDialog.form.accumulatedTimeOption = row.code || null
  configDialog.form.accumulatedMileageOption = row.type || null

  configDialog.visible = true
}

// 列宽调整后的处理
const handleHeaderDragEnd = () => {
  nextTick(() => {
    tableRef.value?.doLayout()
  })
}

// 保存配置
const saveConfig = () => {
  ;(configFormRef.value as any).validate((valid: boolean) => {
    if (!valid) return
    if (!configDialog.current) return

    // 累计运行时长配置 校验逻辑
    if (
      configDialog.current.runningTimeRule === 0 &&
      configDialog.current.timeAccumulatedAttrs?.length &&
      !configDialog.form.accumulatedTimeOption &&
      (configDialog.current.totalRunTime == null || isNaN(configDialog.current.totalRunTime))
    ) {
      message.error('请选择累计运行时长')
      return
    }
    // 累计运行公里数配置 校验逻辑
    if (
      configDialog.current.mileageRule === 0 &&
      configDialog.current.mileageAccumulatedAttrs?.length &&
      !configDialog.form.accumulatedMileageOption &&
      (configDialog.current.totalMileage == null || isNaN(configDialog.current.totalMileage))
    ) {
      message.error('请选择累计运行公里数')
      return
    }

    // 动态校验逻辑
    const requiredFields = []
    if (configDialog.current.mileageRule === 0) {
      requiredFields.push('nextRunningKilometers', 'kiloCycleLead')
    }
    if (configDialog.current.runningTimeRule === 0) {
      requiredFields.push('nextRunningTime', 'timePeriodLead')
    }
    if (configDialog.current.naturalDateRule === 0) {
      requiredFields.push('nextNaturalDate', 'naturalDatePeriodLead')
    }

    const missingFields = requiredFields.filter(
      (field) => !configDialog.form[field as keyof typeof configDialog.form]
    )

    if (missingFields.length > 0) {
      message.error('请填写所有必填项')
      return
    }

    // 强制校验逻辑
    if (configDialog.current.naturalDateRule === 0) {
      if (!configDialog.form.lastNaturalDate) {
        message.error('必须选择自然日期')
        return
      }

      // 验证日期有效性
      const dateValue = dayjs(configDialog.form.lastNaturalDate)
      if (!dateValue.isValid()) {
        message.error('日期格式不正确')
        return
      }
    }

    // 转换逻辑（关键修改）
    const finalDate = configDialog.form.lastNaturalDate
      ? dayjs(configDialog.form.lastNaturalDate).valueOf()
      : null // 改为null而不是0

    const updateData = {
      ...configDialog.form,
      lastNaturalDate: finalDate
    }

    // 关闭保养规则，无论是否有选择值，都清除相关数据
    // 处理累计运行时长
    if (configDialog.current.runningTimeRule !== 0) {
      configDialog.current.code = null
      configDialog.current.totalRunTime = null
      configDialog.form.accumulatedTimeOption = null // 清除选择值
    } else if (configDialog.form.accumulatedTimeOption) {
      // 查找选中的累计运行时长项
      const selectedTimeOption = configDialog.current.timeAccumulatedAttrs?.find(
        (item) => item.pointName === configDialog.form.accumulatedTimeOption
      )
      if (selectedTimeOption) {
        configDialog.current.code = selectedTimeOption.pointName
        // 优先使用接口值，没有则使用临时值
        configDialog.current.tempTotalRunTime = selectedTimeOption.totalRunTime
        configDialog.current.isRuntimeFromTemp = true
        // 只有接口未提供值时才使用临时值
        if (!configDialog.current.totalRunTime) {
        }
      }
    }
    // 处理累计运行公里数
    if (configDialog.current.mileageRule !== 0) {
      configDialog.current.type = null
      configDialog.current.totalMileage = null
      configDialog.form.accumulatedMileageOption = null // 清除选择值
    } else if (configDialog.form.accumulatedMileageOption) {
      // 查找选中的累计运行公里数项
      const selectedMileageOption = configDialog.current.mileageAccumulatedAttrs?.find(
        (item) => item.pointName === configDialog.form.accumulatedMileageOption
      )
      if (selectedMileageOption) {
        configDialog.current.type = selectedMileageOption.pointName
        configDialog.current.tempTotalMileage = selectedMileageOption.totalRunTime
        configDialog.current.isMileageFromTemp = true
        if (!configDialog.current.totalMileage) {
        }
      }
    }

    // 更新当前行的数据
    if (configDialog.current) {
      Object.assign(configDialog.current, updateData)
      // 重新计算 下次保养公里数 剩余公里数
      configDialog.current.nextMaintenanceKm = calculateNextMaintenanceKm(configDialog.current)
      configDialog.current.remainKm = calculateRemainKm(configDialog.current)
      // 重新计算 下次保养运行时长 剩余时长
      configDialog.current.nextMaintenanceH = calculateNextMaintenanceH(configDialog.current)
      configDialog.current.remainH = calculateRemainH(configDialog.current)
      // 重新计算 下次保养日期 剩余天数
      if (configDialog.form.lastNaturalDate) {
        configDialog.current.tempLastNaturalDate = dayjs(configDialog.form.lastNaturalDate).format(
          'YYYY-MM-DD'
        )
        configDialog.current.nextMaintenanceDate = calculateNextMaintenanceDate(
          configDialog.current
        )
        configDialog.current.remainDay = calculateRemainDay(configDialog.current)
      }
    }
    configDialog.visible = false
  })
}

const queryParams = reactive({
  deviceIds: undefined,
  planId: id,
  bomFlag: 'b'
})

// 处理保养规则变化 取消保养规则 时 清空已经设置的相应保养规则数据
const handleRuleChange = (
  row: IotMaintenanceBomVO,
  ruleType: 'mileage' | 'runningTime' | 'date'
) => {
  // 当规则关闭时（inactive-value=1）
  console.log('执行了保养规则变化事件' + row.totalRunTime + ' - ' + row.totalMileage)
  // 当前保养项行已经返回了 totalRunTime totalMileage 数据 不需要再清空 累计运行时长 累计公里数

  // 选择完设备匹配了保养项后 不能直接置空 因为可能是正常的累计时长 累计公里数
  if (ruleType === 'runningTime' && row.runningTimeRule === 1) {
    // 清除临时来源的值
    if (row.isRuntimeFromTemp) {
      row.totalRunTime = null
      row.tempTotalRunTime = null
      row.code = null
      // row.isRuntimeFromTemp = false;
    }
    // 强制清除配置对话框中的值（如果打开的是当前行）
    if (
      configDialog.current?.deviceId === row.deviceId &&
      configDialog.current?.bomNodeId === row.bomNodeId
    ) {
      configDialog.form.accumulatedTimeOption = null
    }
  } else if (ruleType === 'mileage' && row.mileageRule === 1) {
    if (row.isMileageFromTemp) {
      row.totalMileage = null
      row.tempTotalMileage = null
      row.type = null
      // row.isMileageFromTemp = false;
    }
    // 强制清除配置对话框中的值（如果打开的是当前行）
    if (
      configDialog.current?.deviceId === row.deviceId &&
      configDialog.current?.bomNodeId === row.bomNodeId
    ) {
      configDialog.form.accumulatedMileageOption = null
    }
  }

  // 如果配置对话框打开的是当前行，同步清除对话框中的选择值
  if (
    configDialog.visible &&
    configDialog.current &&
    configDialog.current.deviceId === row.deviceId &&
    configDialog.current.bomNodeId === row.bomNodeId
  ) {
    if (ruleType === 'runningTime') {
      configDialog.form.accumulatedTimeOption = null
    } else if (ruleType === 'mileage') {
      configDialog.form.accumulatedMileageOption = null
    }
  }

  // 规则变化后按新条件重新计算 下次保养公里数 剩余公里数
  if (ruleType === 'mileage') {
    if (row.mileageRule === 0) {
      row.nextMaintenanceKm = calculateNextMaintenanceKm(row)
      row.remainKm = calculateRemainKm(row)
    } else {
      row.nextMaintenanceKm = null
      row.remainKm = null
    }
  }

  // 规则变化后按新条件重新计算 下次保养时长 剩余时长
  if (ruleType === 'runningTime') {
    if (row.runningTimeRule === 0) {
      row.nextMaintenanceH = calculateNextMaintenanceH(row)
      row.remainH = calculateRemainH(row)
    } else {
      row.nextMaintenanceH = null
      row.remainH = null
    }
  }

  // 规则变化后按新条件重新计算 下次保养日期 剩余天数
  if (ruleType === 'date') {
    if (row.naturalDateRule === 0) {
      row.nextMaintenanceDate = calculateNextMaintenanceDate(row)
      row.remainDay = calculateRemainDay(row)
    } else {
      row.nextMaintenanceDate = null
      row.remainDay = null
    }
  }
}

const deviceChoose = async (selectedDevices) => {
  const newIds = selectedDevices.map((device) => device.id)
  deviceIds.value = [...new Set([...deviceIds.value, ...newIds])]
  const params = {
    deviceIds: newIds.join(',') // 明确传递数组参数
  }
  queryParams.deviceIds = JSON.parse(JSON.stringify(params.deviceIds))
  queryParams.bomFlag = 'b'
  // 根据选择的设备筛选出设备BOM中与保养相关的节点项
  const res = await IotDeviceApi.deviceAssociateBomList(queryParams)
  const rawData = res || []
  if (rawData.length === 0) {
    message.error('选择的设备不存在待保养BOM项')
  }
  if (!Array.isArray(rawData)) {
    console.error('接口返回数据结构异常:', rawData)
    return
  }

  // 创建当前列表的唯一键集合（关键修改）
  const existingKeys = new Set(list.value.map((item) => `${item.deviceId}-${item.bomNodeId}`))

  // 转换数据结构（根据你的接口定义调整）
  const newItems = rawData
    .filter((device) => {
      // 排除已存在的项（设备ID+bom节点ID）
      const key = `${device.id}-${device.bomNodeId}`
      return !existingKeys.has(key)
    })
    .map((device) => ({
      assetClass: device.assetClass,
      deviceCode: device.deviceCode,
      deviceName: device.deviceName,
      deviceStatus: device.deviceStatus,
      deptName: device.deptName,
      name: device.name,
      code: device.code,
      assetProperty: device.assetProperty,
      remark: null, // 初始化备注
      deviceId: device.id, // 移除操作需要
      bomNodeId: device.bomNodeId,
      totalRunTime: device.totalRunTime,
      totalMileage: device.totalMileage,
      nextRunningKilometers: 0,
      nextRunningTime: 0,
      nextNaturalDate: 0,
      lastNaturalDate: null, // 初始化为null而不是0
      // 保养规则 提前量
      kiloCycleLead: 0,
      timePeriodLead: 0,
      naturalDatePeriodLead: 0,
      tempTotalRunTime: null,
      tempTotalMileage: null,
      isRuntimeFromTemp: false,
      isMileageFromTemp: false,
      // 添加累计时长参数列表 属性
      timeAccumulatedAttrs: device.timeAccumulatedAttrs || [],
      // 添加累计里程参数列表 属性
      mileageAccumulatedAttrs: device.mileageAccumulatedAttrs || []
    }))
  // 获取选择的设备相关的id数组
  newItems.forEach((item) => {
    deviceIds.value.push(item.deviceId)
  })
  // 合并到现有列表（去重）
  newItems.forEach((item) => {
    const exists = list.value.some(
      (existing) => existing.deviceId === item.deviceId && existing.bomNodeId === item.bomNodeId
    )
    if (!exists) {
      list.value.push(item)
    }
  })
  // 排序保养项
  applySorting()
  // 新增数据后自动跳转到第一页
  currentPage.value = 1
}

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 calculateNextMaintenanceKm = (row: IotMaintenanceBomVO) => {
  // 验证条件：规则开启 + 两个值都存在且 > 0
  const isValid =
    row.mileageRule === 0 && row.lastRunningKilometers > 0 && row.nextRunningKilometers > 0

  return isValid ? row.lastRunningKilometers + row.nextRunningKilometers : null // 不满足条件返回null
}

// 计算剩余保养公里数（通用函数）
const calculateRemainKm = (row: IotMaintenanceBomVO) => {
  // 确定使用的里程值（优先totalMileage）
  const mileageValue = row.totalMileage ?? row.tempTotalMileage
  // 验证条件：规则开启 + 3个值都存在且 > 0
  const isValid =
    row.mileageRule === 0 &&
    row.lastRunningKilometers > 0 &&
    mileageValue > 0 &&
    row.nextRunningKilometers > 0

  return isValid
    ? parseFloat(
        (row.nextRunningKilometers - (mileageValue - row.lastRunningKilometers)).toFixed(2)
      )
    : null // 不满足条件返回null
}

// 计算下次保养运行时长（通用函数）
const calculateNextMaintenanceH = (row: IotMaintenanceBomVO) => {
  // 验证条件：规则开启 + 两个值都存在且 > 0
  const isValid = row.runningTimeRule === 0 && row.lastRunningTime > 0 && row.nextRunningTime > 0

  return isValid ? row.lastRunningTime + row.nextRunningTime : null // 不满足条件返回null
}

// 计算剩余运行时间（通用函数）
const calculateRemainH = (row: IotMaintenanceBomVO) => {
  // 确定使用的 运行时长 值（优先 totalRunTime）
  const runTimeValue = row.totalRunTime ?? row.tempTotalRunTime
  // 验证条件：规则开启 + 3个值都存在且 > 0
  const isValid =
    row.runningTimeRule === 0 &&
    row.lastRunningTime > 0 &&
    runTimeValue > 0 &&
    row.nextRunningTime > 0

  return isValid
    ? parseFloat((row.nextRunningTime - (runTimeValue - row.lastRunningTime)).toFixed(2))
    : null // 不满足条件返回null
}

// 计算下次保养日期（通用函数）
const calculateNextMaintenanceDate = (row: IotMaintenanceBomVO) => {
  // 验证条件：规则开启 + 两个值都存在且 > 0
  const isValid = row.naturalDateRule === 0 && row.lastNaturalDate && row.nextNaturalDate

  return isValid
    ? dayjs(row.lastNaturalDate).add(row.nextNaturalDate, 'day').format('YYYY-MM-DD')
    : null // 不满足条件返回null
}

// 计算 自然日期保养 剩余天数（通用函数）
const calculateRemainDay = (row: IotMaintenanceBomVO) => {
  // 验证条件：规则开启 + 两个值都存在且有效
  const isValid =
    row.naturalDateRule === 0 &&
    row.lastNaturalDate !== null &&
    row.nextNaturalDate !== null &&
    row.nextNaturalDate > 0

  if (!isValid) {
    return null
  }

  try {
    // 上次保养日期：将时间戳转换为 Day.js 对象
    const lastNaturalDate = dayjs(row.lastNaturalDate)

    // 计算下次保养日期
    const nextMaintenanceDate = lastNaturalDate.add(row.nextNaturalDate, 'day')

    // 计算剩余天数（当前日期到下次保养日期的天数差）
    return nextMaintenanceDate.diff(dayjs(), 'day')
  } catch (error) {
    console.error('计算保养剩余天数错误:', error)
    return null
  }
}

// 单元格类名回调方法
const cellClassName = ({ row, column }) => {
  // 只对序号列进行处理
  if (column.type === 'index') {
    // 检查该行所有启用的规则是否都已配置完整
    if (checkRowFilled(row)) {
      return 'all-filled' // 返回自定义类名
    }
  }
  return ''
}

// 检查行数据是否完整填写
const checkRowFilled = (row: IotMaintenanceBomVO) => {
  // 检查是否启用了至少一个规则
  const hasRuleEnabled =
    row.mileageRule === 0 || row.runningTimeRule === 0 || row.naturalDateRule === 0

  if (!hasRuleEnabled) {
    return false // 没有任何规则启用，不显示背景色
  }
  // 检查里程规则
  const mileageFilled =
    row.mileageRule !== 0
      ? true // 规则未启用，视为已"填写"
      : row.lastRunningKilometers > 0 &&
        row.nextRunningKilometers > 0 &&
        row.kiloCycleLead > 0 &&
        // 检查累计里程参数是否已选择（当条件满足时）
        (!(
          row.mileageAccumulatedAttrs?.length &&
          (row.totalMileage == null || isNaN(row.totalMileage))
        ) ||
          (row.mileageAccumulatedAttrs?.length &&
            (row.totalMileage == null || isNaN(row.totalMileage)) &&
            row.type))

  // 检查运行时间规则
  const runningTimeFilled =
    row.runningTimeRule !== 0
      ? true
      : row.lastRunningTime > 0 &&
        row.nextRunningTime > 0 &&
        row.timePeriodLead > 0 &&
        // 检查累计时间参数是否已选择（当条件满足时）
        (!(
          row.timeAccumulatedAttrs?.length &&
          (row.totalRunTime == null || isNaN(row.totalRunTime))
        ) ||
          (row.timeAccumulatedAttrs?.length &&
            (row.totalRunTime == null || isNaN(row.totalRunTime)) &&
            row.code))

  // 检查自然日期规则
  const naturalDateFilled =
    row.naturalDateRule !== 0
      ? true
      : row.lastNaturalDate && row.nextNaturalDate > 0 && row.naturalDatePeriodLead > 0

  return mileageFilled && runningTimeFilled && naturalDateFilled
}

// 统一计算所有列宽
const calculateAllColumnsWidth = () => {
  const MIN_WIDTH = 80 // 最小列宽
  const PADDING = 10 // 列内边距
  const FIXED_COLUMN_PADDING = 15 // 固定列额外内边距

  // 需要自适应的列配置
  const autoColumns = [
    { prop: 'serial', label: t('iotDevice.serial') },
    { prop: 'deviceCode', label: t('iotMaintain.deviceCode') },
    { prop: 'deviceName', label: t('iotMaintain.deviceName') },
    {
      prop: 'totalRunTime',
      label: t('operationFillForm.sumTime'),
      getValue: (row) => row.totalRunTime ?? row.tempTotalRunTime
    },
    {
      prop: 'totalMileage',
      label: t('operationFillForm.sumKil'),
      getValue: (row) => row.totalMileage ?? row.tempTotalMileage
    },
    { prop: 'name', label: t('bomList.bomNode') },
    { prop: 'lastMaintenanceDate', label: t('mainPlan.lastMaintenanceDate') },
    { prop: 'mileageRule', label: t('main.mileage') },
    { prop: 'runningTimeRule', label: t('main.runTime') },
    { prop: 'naturalDateRule', label: t('main.date') },
    { prop: 'lastRunningKilometers', label: t('mainPlan.lastMaintenanceMileage') },
    { prop: 'nextMaintenanceKm', label: t('mainPlan.nextMaintenanceKm') },
    { prop: 'remainKm', label: t('mainPlan.remainKm') },
    { prop: 'lastRunningTime', label: t('mainPlan.lastMaintenanceOperationTime') },
    { prop: 'nextMaintenanceH', label: t('mainPlan.nextMaintenanceH') },
    { prop: 'remainH', label: t('mainPlan.remainH') },
    { prop: 'tempLastNaturalDate', label: t('mainPlan.lastMaintenanceNaturalDate') },
    { prop: 'nextMaintenanceDate', label: t('mainPlan.nextMaintDate') },
    { prop: 'remainDay', label: t('mainPlan.remainDay') },
    { prop: 'operation', label: t('operationFill.operation') }
  ]

  const newWidths: Record<string, number> = {}

  autoColumns.forEach((col) => {
    const headerText = col.label
    // 计算表头宽度
    const headerWidth = getTextWidth(headerText)

    // 计算内容最大宽度
    let contentMaxWidth = 0
    if (col.prop === 'operation') {
      // 操作列固定宽度（根据按钮数量）
      contentMaxWidth = 100
    } else if (['mileageRule', 'runningTimeRule', 'naturalDateRule'].includes(col.prop)) {
      // 开关列固定宽度
      contentMaxWidth = headerWidth
    } else {
      list.value.forEach((row) => {
        const text = col.getValue ? String(col.getValue(row)) : String(row[col.prop] || '')
        const textWidth = getTextWidth(text)
        if (textWidth > contentMaxWidth) contentMaxWidth = textWidth
      })
    }
    // 取最大值并添加内边距
    newWidths[col.prop] = Math.max(headerWidth, contentMaxWidth)
  })

  // 固定列特殊处理 - 增加额外空间
  // ;['serial', 'deviceCode', 'deviceName', 'name'].forEach((prop) => {
  //   if (newWidths[prop]) {
  //     newWidths[prop] += FIXED_COLUMN_PADDING
  //   }
  // })

  // 转换为CSS宽度值
  Object.keys(newWidths).forEach((prop) => {
    columnWidths.value[prop] = `${newWidths[prop]}px`
  })
}

// 计算属性 - 检查当前页是否有开启的里程规则
const hasMileageRuleInCurrentPage = computed(() => {
  return pagedList.value.some((row) => row.mileageRule === 0)
})

// 计算属性 - 检查当前页是否有开启的 运行时间 规则
const hasTimeRuleInCurrentPage = computed(() => {
  return pagedList.value.some((row) => row.runningTimeRule === 0)
})

// 计算属性 - 检查当前页是否有开启的 自然日期 规则
const hasDateRuleInCurrentPage = computed(() => {
  return pagedList.value.some((row) => row.naturalDateRule === 0)
})

// 为每一行建立lastNaturalDate到tempLastNaturalDate的同步
const setupNaturalDateSync = (row: IotMaintenanceBomVO) => {
  // 如果该行已有watcher则跳过
  if (lastNaturalDateWatchers.value.has(row.id)) return

  // 为该行创建单独的watcher
  const unwatch = watch(
    () => row.lastNaturalDate,
    (newVal) => {
      // 转换日期格式 (时间戳 -> YYYY-MM-DD)
      row.tempLastNaturalDate = newVal ? dayjs(newVal).format('YYYY-MM-DD') : null
    },
    { immediate: true, deep: true }
  )

  // 保存watcher用于后续清理
  lastNaturalDateWatchers.value.set(row.id, unwatch)
}

const tableHeaderStyle = ({ row, rowIndex }) => {
  return {
    border: '1px solid #333',
    backgroundColor: rowIndex === 0 ? '#f0f9eb' : '#f5f7fa' // 分组行特殊背景
  }
}

// 在添加新行时建立同步关系
watch(
  list,
  (newList) => {
    newList.forEach((row) => {
      if (!lastNaturalDateWatchers.value.has(row.id)) {
        setupNaturalDateSync(row)
      }
    })
  },
  { deep: true, immediate: true }
)

// 监听数据变化重新计算列宽
watch(
  () => [...list.value],
  () => {
    calculateAllColumnsWidth()
  },
  { deep: true, immediate: true }
)

// 监听分页数据和规则变化 - 重新布局表格
watch(
  [pagedList, hasMileageRuleInCurrentPage, hasTimeRuleInCurrentPage, hasDateRuleInCurrentPage],
  () => {
    nextTick(() => {
      tableRef.value?.doLayout()
      calculateAllColumnsWidth() // 重新计算列宽
    })
  }
)

const deviceFormRef = ref<InstanceType<typeof MainPlanDeviceList>>()
const openForm = () => {
  deviceFormRef.value?.open()
}

const close = () => {
  delView(unref(currentRoute))
  push({ name: 'IotMaintenancePlan', params: {} })
}

/** 提交表单 */
const emit = defineEmits(['success']) // 定义 success 事件，用于操作成功后的回调
const submitForm = async () => {
  // 校验表单
  await formRef.value.validate()
  // 校验表格数据
  const isValid = validateTableData()
  if (!isValid) return
  // 提交请求
  formLoading.value = true
  try {
    // 将值为NULL 的保养规则 设置为 1
    list.value.forEach((item) => {
      // 确保保养规则不为null
      item.mileageRule = item.mileageRule ?? 1
      item.runningTimeRule = item.runningTimeRule ?? 1
      item.naturalDateRule = item.naturalDateRule ?? 1
    })

    // 转换日期格式
    const convertedList = list.value.map((item) => ({
      ...item,
      lastNaturalDate:
        typeof item.lastNaturalDate === 'number'
          ? item.lastNaturalDate
          : item.lastNaturalDate
            ? dayjs(item.lastNaturalDate).valueOf()
            : null
    }))

    const data = {
      mainPlan: formData.value,
      mainPlanBom: convertedList
    }
    if (formType.value === 'create') {
      await IotMaintenancePlanApi.createIotMaintenancePlan(data)
      message.success(t('common.createSuccess'))
      close()
    } else {
      await IotMaintenancePlanApi.updatePlan(data)
      message.success(t('common.updateSuccess'))
      close()
    }
    // 发送操作成功的事件
    emit('success')
  } finally {
    formLoading.value = false
  }
}

// 新增表单校验规则
const configFormRules = reactive({
  nextRunningKilometers: [
    {
      required: true,
      message: '里程周期必须填写',
      trigger: 'blur'
    }
  ],
  kiloCycleLead: [
    {
      required: true,
      message: '提前量必须填写',
      trigger: 'blur'
    }
  ],
  nextRunningTime: [
    {
      required: true,
      message: '时间周期必须填写',
      trigger: 'blur'
    }
  ],
  timePeriodLead: [
    {
      required: true,
      message: '提前量必须填写',
      trigger: 'blur'
    }
  ],
  nextNaturalDate: [
    {
      required: true,
      message: '自然日周期必须填写',
      trigger: 'blur'
    }
  ],
  naturalDatePeriodLead: [
    {
      required: true,
      message: '提前量必须填写',
      trigger: 'blur'
    }
  ]
})

/** 校验表格数据 */
const validateTableData = (): boolean => {
  let isValid = true
  const errorMessages: string[] = []
  const noRulesErrorMessages: string[] = [] // 未设置任何保养项规则 的错误提示信息
  const noRules: string[] = [] // 行记录中设置了保养规则的记录数量
  const configErrors: string[] = [] // 保养规则配置弹出框
  let shouldBreak = false

  if (list.value.length === 0) {
    errorMessages.push('请至少添加一条设备保养明细')
    isValid = false
    // 直接返回无需后续校验
    message.error('请至少添加一条设备保养明细')
    return isValid
  }

  list.value.forEach((row, index) => {
    if (shouldBreak) return
    const rowNumber = index + 1 // 用户可见的行号从1开始
    const deviceIdentifier = `${row.deviceCode}-${row.name}` // 设备标识

    // 累计参数校验逻辑
    if (
      row.mileageRule === 0 &&
      row.mileageAccumulatedAttrs?.length &&
      (row.totalMileage == null || isNaN(row.totalMileage)) &&
      !row.type
    ) {
      errorMessages.push(`第 ${rowNumber} 行（${deviceIdentifier}）：请选择累计运行公里数参数`)
      isValid = false
    }

    if (
      row.runningTimeRule === 0 &&
      row.timeAccumulatedAttrs?.length &&
      (row.totalRunTime == null || isNaN(row.totalRunTime)) &&
      !row.code
    ) {
      errorMessages.push(`第 ${rowNumber} 行（${deviceIdentifier}）：请选择累计运行时长参数`)
      isValid = false
    }

    // 校验逻辑
    const checkConfig = (ruleName: string, ruleValue: number, configField: keyof typeof row) => {
      if (ruleValue === 0) {
        // 规则开启
        if (!row[configField] || row[configField] <= 0) {
          configErrors.push(
            `第 ${rowNumber} 行（${deviceIdentifier}）：请点击【配置】维护${ruleName}上次保养值`
          )
          isValid = false
        }
      }
    }
    // 里程校验逻辑
    if (row.mileageRule === 0) {
      // 假设 0 表示开启状态
      if (!row.nextRunningKilometers || row.nextRunningKilometers <= 0) {
        errorMessages.push(`第 ${rowNumber} 行：开启里程规则必须填写有效的里程周期`)
        isValid = false
      }
      // 再校验配置值
      checkConfig('里程', row.mileageRule, 'lastRunningKilometers')
    } else {
      noRules.push(`第 ${rowNumber} 行：未设置里程规则`)
    }
    // 运行时间校验逻辑
    if (row.runningTimeRule === 0) {
      if (!row.nextRunningTime || row.nextRunningTime <= 0) {
        errorMessages.push(`第 ${rowNumber} 行：开启运行时间规则必须填写有效的时间周期`)
        isValid = false
      }
      checkConfig('运行时间', row.runningTimeRule, 'lastRunningTime')
    } else {
      noRules.push(`第 ${rowNumber} 行：未设置运行时间规则`)
    }
    // 自然日期校验逻辑
    if (row.naturalDateRule === 0) {
      if (!row.nextNaturalDate) {
        errorMessages.push(`第 ${rowNumber} 行：开启自然日期规则必须填写有效的自然日期周期`)
        isValid = false
      }
      checkConfig('自然日期', row.naturalDateRule, 'lastNaturalDate')
    } else {
      noRules.push(`第 ${rowNumber} 行：未设置自然日期规则`)
    }
    // 如果选中的一行记录未设置任何保养规则 提示 ‘保养项未设置任何保养规则’
    if (noRules.length === 3) {
      isValid = false
      shouldBreak = true // 设置标志变量为true，退出循环
      noRulesErrorMessages.push('保养项至少设置1个保养规则')
    }
    noRules.length = 0
  })
  if (errorMessages.length > 0) {
    message.error('设置保养规则后，请维护对应的周期值')
  } else if (noRulesErrorMessages.length > 0) {
    message.error(noRulesErrorMessages.pop())
  } else if (configErrors.length > 0) {
    message.error(configErrors.pop())
  }
  return isValid
}

// 修改后的排序应用方法
const applySorting = () => {
  // 创建新数组并排序
  const sortedList = sortDeviceList(list.value)

  // 使用Vue的响应式方法更新数组
  list.value = sortedList

  // 重置分页到第一页
  currentPage.value = 1
}

// 保养项排序函数
const sortDeviceList = (devices: IotMaintenanceBomVO[]) => {
  // 使用slice()创建数组副本，避免修改原数组
  return devices.slice().sort((a, b) => {
    // 处理可能的空值
    const aCode = a.deviceCode || ''
    const bCode = b.deviceCode || ''
    const aName = a.name || ''
    const bName = b.name || ''

    // 设备编码排序
    if (aCode !== bCode) {
      return aCode.localeCompare(bCode)
    }

    // 保养项名称排序
    return aName.localeCompare(bName)
  })
}

// 累计运行时长变更
const handleAccumulatedTimeChange = (option) => {}

// 累计运行公里数变更
const handleAccumulatedMileageChange = (option) => {}

/** 重置表单 */
const resetForm = () => {
  formData.value = {
    id: undefined,
    failureName: undefined,
    deviceId: undefined,
    status: undefined,
    ifStop: undefined,
    failureTime: undefined,
    failureInfluence: undefined,
    failureSystem: undefined,
    description: undefined,
    pic: undefined,
    solution: undefined,
    maintainStartTime: undefined,
    maintainEndTime: undefined,
    remark: undefined,
    deviceName: undefined,
    processInstanceId: undefined,
    auditStatus: undefined,
    deptId: undefined
  }
  formRef.value?.resetFields()
}
onMounted(async () => {
  // 如果已有数据（从缓存恢复），则跳过初始化
  if (list.value.length > 0) return

  const deptId = useUserStore().getUser.deptId
  // 查询当前登录人所属部门名称
  dept.value = await DeptApi.getDept(deptId)
  // 根据当前登录人部门信息生成生成 保养计划 名称
  formData.value.name = dept.value.name + ' - 保养计划'
  formData.value.deptId = deptId
  if (id) {
    formType.value = 'update'
    const plan = await IotMaintenancePlanApi.getIotMaintenancePlan(id)
    deviceLabel.value = plan.deviceName
    formData.value = plan

    if (list.value.length === 0) {
      // 查询保养计划明细
      const data = await IotMaintenanceBomApi.getMainPlanBOMs(queryParams)
      list.value = []
      if (Array.isArray(data)) {
        list.value = data.map((item) => {
          if (item.mileageRule === 0) {
            item.nextMaintenanceKm = calculateNextMaintenanceKm(item)
            item.remainKm = calculateRemainKm(item)
          }
          if (item.runningTimeRule === 0) {
            item.nextMaintenanceH = calculateNextMaintenanceH(item)
            item.remainH = calculateRemainH(item)
          }
          if (item.naturalDateRule === 0) {
            item.nextMaintenanceDate = calculateNextMaintenanceDate(item)
            item.remainDay = calculateRemainDay(item)
          }
          setupNaturalDateSync(item)
          return {
            ...item,
            lastNaturalDate: item.lastNaturalDate,
            /* tempLastNaturalDate: item.lastNaturalDate
              ? dayjs(item.lastNaturalDate).format("YYYY-MM-DD")  // 时间戳 → 日期字符串
              : null, */
            lastMaintenanceDate: item.lastMaintenanceDate
              ? dayjs(item.lastMaintenanceDate).format('YYYY-MM-DD') // 时间戳 → 日期字符串
              : null // 处理空值
          }
        })
        applySorting()
      }
    }
  } else {
    formType.value = 'create'
    const { wsCache } = useCache()
    const userInfo = wsCache.get(CACHE_KEY.USER)
    formData.value.responsiblePerson = userInfo.user.id
  }
  nextTick(() => {
    calculateAllColumnsWidth()
    window.addEventListener('resize', calculateAllColumnsWidth)
  })
})

onUnmounted(async () => {
  window.removeEventListener('resize', calculateAllColumnsWidth)
})

const handleDelete = async (str: string) => {
  try {
    const [deviceIdStr, bomNodeId] = str.split('-')
    const deviceId = parseInt(deviceIdStr)
    // 删除列表项
    const index = list.value.findIndex((item) => item.deviceId + '-' + item.bomNodeId === str)
    if (index !== -1) {
      list.value.splice(index, 1)
      // 删除保养项后对保养项重新排序
      applySorting()
      deviceIds.value = []
    }
    // 更新设备ID列表（需要检查是否还有该设备的其他项）
    const hasOtherItems = list.value.some((item) => item.deviceId === deviceId)
    if (!hasOtherItems) {
      deviceIds.value = deviceIds.value.filter((id) => id !== deviceId)
    }
    // message.success('移除成功')
  } catch (error) {
    console.error('移除失败:', error)
    message.error('移除失败')
  }

  // 检查是否需要调整页码
  if (list.value.length > 0 && pagedList.value.length === 0) {
    currentPage.value = Math.max(1, currentPage.value - 1)
  }
}
</script>
<style scoped>
.base-expandable-content {
  overflow: hidden; /* 隐藏溢出的内容 */
  transition: max-height 0.3s ease; /* 平滑过渡效果 */
}

:deep(.el-input-number .el-input__inner) {
  text-align: left !important;
  padding-left: 10px; /* 保持左侧间距 */
}

/* 分组容器样式 */
.form-group {
  position: relative;
  border: 1px solid #dcdfe6;
  border-radius: 4px;
  padding: 20px 15px 10px;
  margin-bottom: 18px;
  transition: border-color 0.2s;
}

/* 分组标题样式 */
.group-title {
  position: absolute;
  top: -10px;
  left: 20px;
  background: white;
  padding: 0 8px;
  color: #606266;
  font-size: 12px;
  font-weight: 500;
}

/* 确保分页组件右对齐 */
.el-pagination {
  display: flex;
  justify-content: flex-end;
  margin-top: 20px;
}

.full-content-cell {
  white-space: nowrap; /* 禁止换行 */
  overflow: visible; /* 允许内容溢出单元格 */
}

/* 确保表格容器可滚动 */
.table-container {
  overflow-x: auto;
  width: 100%;

  /* 修复固定列错位 */
  :deep(.el-table__fixed-body-wrapper) {
    bottom: 8px !important;
  }
}

/* 滚动条调整 */
:deep(.el-table__body-wrapper) {
  overflow-x: auto;
  padding-bottom: 12px;
}

/* 固定表格布局 */
el-table {
  table-layout: fixed;
  min-width: 100%;
}

/* 全局禁止换行和省略号 */
:deep(.el-table th > .cell),
:deep(.el-table td > .cell) {
  white-space: nowrap !important;
  overflow: visible !important;
  text-overflow: clip !important;
}

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

:deep(.el-table__header tr) {
  border-bottom: 1px solid #e4e7ed !important;
}

:deep(.el-table__header th) {
  border-right: 1px solid #dcdfe6 !important;
  border-bottom: 1px solid #dcdfe6 !important;
}

:deep(.el-table__header .is-group th) {
  background-color: #f5f7fa !important;
  border-bottom: 1px solid #dcdfe6 !important;
  font-weight: 600;
  position: relative;
}

:deep(.el-table__header .is-group th::after) {
  display: none !important;
}

/* 分组标题下的子表头单元格 */
:deep(.el-table__header .el-table__cell:not(.is-group)) {
  border-top: 1px solid #dcdfe6 !important; /* 添加顶部边框连接分组标题 */
}

/* 单元格内容强制不换行 */
:deep(.el-table__body) {
  .cell {
    white-space: nowrap !important;
  }
}

:deep(.el-table__body-wrapper::-webkit-scrollbar) {
  height: 12px;
}

/* 固定列样式修复 */
:deep(.el-table__fixed) {
  height: calc(100% - 12px) !important;
  box-shadow: none !important;
}

:deep(.el-table__fixed:before) {
  background-color: transparent !important;
}

:deep(.el-table__fixed-body-wrapper) {
  bottom: 12px !important;
}

/* 固定列内容对齐 */
:deep(.el-table__fixed .el-table__cell) {
  background-color: var(--el-table-bg-color);
}

/* 日期选择器特殊处理 */
:deep(.el-date-editor) {
  width: 100% !important;
  min-width: 220px;

  .el-input__wrapper {
    padding: 0 30px 0 11px !important; /* 日历图标空间 */
  }
}

/* 已完整填写行的背景色 */
:deep(.el-table .all-filled) {
  background-color: #67c23a !important; /* 淡绿色背景 */
  transition: background-color 0.3s ease; /* 平滑过渡效果 */
}

:deep(.el-table .cell) {
  padding: 0;
}
</style>