<template>
  <div class="app-container">
    <el-row style="margin-bottom: 20px">
      <el-col style="display: flex; justify-content: space-between">
        <div>
          <el-button type="primary" plain icon="Refresh" @click="updateSpecies('update')">更新规格</el-button>
        </div>
      </el-col>
    </el-row>
    <el-table :data="tableData" :span-method="objectSpanMethod" border style="width: 100%; margin-top: 20px"  height="70%"
      row-key="rowKey">
      <!-- 动态生成所有列 -->
      <template v-for="column in tableColumns" :key="column.prop">
        <el-table-column :prop="column.prop" :label="column.label" />
      </template>

      <!-- 固定操作列 -->
      <el-table-column label="操作" :width="tableData.length > 0 ? 180 : 0" align="center" fixed="right">
        <template #default="scope">
          <el-button type="primary" size="small" @click="handleCommissionSetting(scope.row)">
            佣金设置
          </el-button>
        </template>
      </el-table-column>
    </el-table>
    <pagination v-show="total > 0" :total="total" v-model:page="queryParams.pageNo" v-model:limit="queryParams.pageSize"
      @pagination="getSpeciesList" style="margin-top: 10px" />
    <!-- 佣金设置 -->
    <el-dialog title="佣金设置" v-model="showCommisionSetting" width="1200px" append-to-body :close-on-click-modal="false">
      <el-form :model="settingQueryParams" ref="settingQueryRef" :inline="true" label-width="68px">
        <!-- <el-form-item label="项目名称" prop="projectName">
          <el-input
            v-model="platFormQueryParams.projectName"
            placeholder="请输入项目名称"
            clearable
            style="width: 240px"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="Search" @click="searchPlatformTable">搜索</el-button>
          <el-button icon="Refresh" @click="paltformReset">重置</el-button>
        </el-form-item> -->
      </el-form>

      <!-- 表格数据 -->
      <el-table v-loading="settingLoading" :data="settingList" border ref="settingTableRef">
        <el-table-column label="序号 " width="55" align="center" type="index" fixed="left"></el-table-column>
        <el-table-column label="费用名称" prop="expenseName" width="150" fixed="left">
          <template #header>
            <span class="required-label">费用名称</span>
          </template>
          <template #default="scope">
            <el-select v-model="scope.row.expenseName" placeholder="请选择">
              <el-option v-for="item in commission_cost_type" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="佣金年限(起)" prop="startPeriod" width="120">
          <template #header>
            <span class="required-label">佣金年限(起)</span>
          </template>
          <template #default="scope">
            <el-input v-model="scope.row.startPeriod" type="number" placeholder="请输入" :min="1" clearable
              @input="handleNumberInput(scope.row, 'startPeriod', 'positive')"
              @blur="handlePeriodBlur(scope.row, scope.$index, 'startPeriod')" />
          </template>
        </el-table-column>
        <el-table-column label="佣金年限(止)" prop="endPeriod" width="120">
          <template #header>
            <span class="required-label">佣金年限(止)</span>
          </template>
          <template #default="scope">
            <el-input v-model="scope.row.endPeriod" type="number" :min="1" placeholder="请输入" clearable
              @input="handleNumberInput(scope.row, 'endPeriod', 'positive')"
              @blur="handlePeriodBlur(scope.row, scope.$index, 'endPeriod')" />
          </template>
        </el-table-column>

        <el-table-column label="佣金率(%)" prop="commissionRate" width="120">
          <template #header>
            <span class="required-label">佣金率(%)</span>
          </template>
          <template #default="scope">
            <el-input v-model="scope.row.commissionRate" type="number" :min="0" placeholder="请输入" clearable
              @input="handleNumberInput(scope.row, 'commissionRate', 'non-negative')" />
          </template>
        </el-table-column>
        <el-table-column label="折标系数(%)" prop="discountRatio" width="120">
          <template #header>
            <span class="required-label">折标系数(%)</span>
          </template>
          <template #default="scope">
            <el-input v-model="scope.row.discountRatio" type="number" :min="0" placeholder="请输入" clearable
              @input="handleNumberInput(scope.row, 'discountRatio', 'non-negative')" />
          </template>
        </el-table-column>
        <el-table-column label="生效日期(起)" prop="effectiveStart" width="150">
          <template #header>
            <span class="required-label">生效日期(起)</span>
          </template>
          <template #default="scope">
            <el-date-picker v-model="scope.row.effectiveStart" style="width: 100%" type="date" placeholder="请选择日期"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleStartDateChange(scope.row, scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column label="生效日期(止)" prop="effectiveEnd" width="150">
          <template #header>
            <span class="required-label">生效日期(止)</span>
          </template>
          <template #default="scope">
            <el-date-picker v-model="scope.row.effectiveEnd" style="width: 100%" type="date" placeholder="请选择日期"
              format="YYYY-MM-DD" value-format="YYYY-MM-DD" @change="handleEndDateChange(scope.row, scope.$index)" />
          </template>
        </el-table-column>
        <el-table-column label="适用范围" prop="scope" width="300">
          <template #header>
            <span class="required-label">适用范围</span>
          </template>
          <template #default="scope">
            <el-select v-model="scope.row.scope" style="width: 100%" multiple collapse-tags collapse-tags-tooltip
              :max-collapse-tags="2" placeholder="请选择" clearable>
              <el-option v-for="item in commission_scope_type" :key="item.value" :label="item.label"
                :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="是否受汇率影响" prop="isExchangeRate" width="150">
          <template #header>
            <span class="required-label">是否受汇率影响</span>
          </template>
          <template #default="scope">
            <el-select v-model="scope.row.isExchangeRate" style="width: 100%" placeholder="请选择" clearable>
              <el-option v-for="item in sys_no_yes" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="结算币种" prop="currency" width="120">
          <template #header>
            <span class="required-label">结算币种</span>
          </template>
          <template #default="scope">
            <el-select v-model="scope.row.currency" style="width: 100%" placeholder="请选择" clearable>
              <el-option v-for="item in bx_currency_type" :key="item.value" :label="item.label" :value="item.value" />
            </el-select>
          </template>
        </el-table-column>
        <el-table-column label="状态" prop="status" width="120">
          <template #header>
            <span class="required-label">状态</span>
          </template>
          <template #default="scope">
            <el-switch v-model="scope.row.status" active-value="1" inactive-value="0"
              @change="switchChange(scope.row)" />
            <span style="margin-left: 8px">
              {{ scope.row.status === '1' ? '启用' : '禁用' }}
            </span>
          </template>
        </el-table-column>
        <el-table-column label="备注" prop="remark" width="200">
          <template #default="scope">
            <el-input v-model="scope.row.remark" type="textarea" placeholder="请输入" />
          </template>
        </el-table-column>
        <el-table-column label="最近一次操作人" prop="updaterName" width="120" />
        <el-table-column label="最近一次操作时间" prop="updateTime" width="160">
          <template #default="scope">
            <span>{{ scope.row.updateTime ? parseTime(scope.row.updateTime) : '--' }}</span>
          </template>
        </el-table-column>
        <el-table-column label="操作" width="120" align="center" fixed="right">
          <template #default="scope">
            <div class="btnCon">
              <el-button v-if="scope.$index == settingList.length - 1" @click="handleAddCommission(scope.row)" text
                size="small" type="primary">新增</el-button>

              <el-button text size="small" type="danger"
                @click="handleDeleteCommission(scope.row, scope.$index)">删除</el-button>
            </div>
          </template>
        </el-table-column>
      </el-table>

      <template #footer>
        <div class="dialog-footer">
          <el-button @click="closeSetting">关闭</el-button>
          <el-button type="primary" @click="submitSetting">提 交</el-button>
        </div>
      </template>
    </el-dialog>
    <el-dialog title="佣金设置错误提示" v-model="errorTip" width="500px" append-to-body>
      <div style="margin-bottom: 10px" v-for="item in settingErrorTip">{{ item }}</div>
      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="errorTip = false">去修改</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>
<script setup name="SendInfo">
import { cloneDeep } from 'lodash-es'
import {
  exportSpecies,
  sendSpecies,
  sendCommissionRatio,
  saveBatchSendCommission,
  deleteCommission,
  changeSendStatus
} from '@/api/product/index'
import { ref, watch } from 'vue'

const props = defineProps({
  // 类型，是新增还是编辑,
  activeName: {
    type: String,
    default: ''
  }
})
const route = useRoute()
const { proxy } = getCurrentInstance()
const loading = ref(true)
const settingLoading = ref(true)
const total = ref(0) //规格表格的总条数
const settingTotal = ref(0) //规格表格的总条数
const dateRange = ref([])
const showCommisionSetting = ref(false) //佣金设置弹窗开关
const errorTip = ref(false) //佣金设置弹窗开关
const settingList = ref([]) //佣金设置表格数据
const currentSettingRow = ref([]) //当前选中的佣金设置行
const settingErrorTip = ref([]) //提交佣金错误提示信息
const data = reactive({
  queryParams: {
    pageNo: 1,
    pageSize: 10,
    productLaunchBizId: route.query.productLaunchBizId
  },
  settingQueryParams: {
    pageNo: 1,
    pageSize: 9999
  }
})

const { queryParams, settingQueryParams } = toRefs(data)
const { bx_currency_type, commission_scope_type, commission_cost_type, sys_no_yes, sys_status } =
  proxy.useDict(
    'bx_currency_type',
    'commission_scope_type',
    'commission_cost_type',
    'sys_no_yes',
    'sys_status'
  )
const switchChange = row => {
  if (!row.announcementCommissionRatioBizId) {
    return
  }
  try {
    changeSendStatus({
      announcementCommissionRatioBizId: row.announcementCommissionRatioBizId,
      status: Number(row.status)
    }).then(response => {
      if (response.code === 200) {
        proxy.$modal.msgSuccess('状态修改成功')
      }
    })
  } catch (error) {
    row.status = row.status === '1' ? '0' : '1'
  }
}
const handleDeleteCommission = (row, index) => {
  if (settingList.value.length === 1) {
    proxy.$modal.msgError('至少保留一条佣金设置数据')
    return
  }
  proxy.$modal
    .confirm(`是否确认删除第${index + 1}行数据?`)
    .then(function () {
      if (row.announcementCommissionRatioBizId) {
        deleteCommission(row.announcementCommissionRatioBizId).then(response => {
          if (response.code === 200) {
            settingList.value.splice(index, 1)
          } else {
            proxy.$modal.msgError(response.msg)
          }
        })
      } else {
        settingList.value.splice(index, 1)
      }
      proxy.$modal.msgSuccess('删除成功')
    })
    .catch(() => { })
}
const handleNumberInput = (row, field, type = 'positive') => {
  const value = row[field]

  if (value === null || value === undefined || value === '') return

  let numValue = Number(value)

  if (isNaN(numValue)) {
    row[field] = null
    return
  }

  if (type === 'positive') {
    // 正整数：移除负号和小数部分
    if (numValue <= 0) {
      row[field] = null
      return
    }
    // 取整数部分
    row[field] = Math.floor(Math.abs(numValue))
  } else if (type === 'non-negative') {
    // 非负数：允许0及以上，不允许负数
    if (numValue < 0) {
      row[field] = 0
    }
  }
}
// 处理开始日期变化
const handleStartDateChange = (row, index) => {
  if (row.effectiveStart && row.effectiveEnd) {
    const start = new Date(row.effectiveStart)
    const end = new Date(row.effectiveEnd)

    if (start > end) {
      proxy.$modal.msgError(
        `第${index + 1}行：生效日期(起)不能晚于生效日期(止),请重新选择生效日期(起)`
      )
      // 清空结束日期，让用户重新选择
      setTimeout(() => {
        row.effectiveStart = ''
      }, 0)
    }
  }
}

// 处理结束日期变化
const handleEndDateChange = (row, index) => {
  console.log('时间', row)

  if (row.effectiveStart && row.effectiveEnd) {
    const start = new Date(row.effectiveStart)
    const end = new Date(row.effectiveEnd)

    if (end < start) {
      proxy.$modal.msgError(
        `第${index + 1}行：生效日期(止)不能早于生效日期(起),请重新选择生效日期(止)`
      )
      // 清空开始日期，让用户重新选择
      setTimeout(() => {
        row.effectiveEnd = ''
      }, 0)
    }
  }
}
const handlePeriodBlur = (row, index, key) => {
  if (row.startPeriod && row.endPeriod && row.startPeriod > row.endPeriod) {
    proxy.$modal.msgError(`第${index + 1}行：佣金开始年限不能大于佣金结束年限,请重新填写`)
    row[key] = ''
    row.unadd = true
  } else {
    row.unadd = false
  }
  console.log('年限', row)
}
const handleAddCommission = row => {
  let newRow = cloneDeep(row)
  let obj = {}
  // 复制当前条的数据
  for (const key in newRow) {
    if (key !== 'startPeriod' && key !== 'endPeriod' && key !== 'commissionRate') {
      obj[key] = newRow[key]
    } else {
      obj[key] = ''
    }
  }
  if (!row.unadd) {
    settingList.value.push(obj)
  }
}
const closeSetting = () => {
  showCommisionSetting.value = false
  settingQueryParams.value = {
    pageNo: 1,
    pageSize: 9999
  }
}
// 批量提交佣金设置
const submitSetting = async () => {
  // 校验表格数据
  const validationResult = validateTableData()
  if (!validationResult.valid) {
    proxy.$modal.msgError(validationResult.message)
    return
  }

  let saveTable = cloneDeep(settingList.value)
  saveTable.forEach(row => {
    if (row.scope.length > 0) {
      row.scope = row.scope.join(';')
    }
  })
  console.log('saveTable', saveTable)

  // return
  try {
    saveBatchSendCommission({
      announcementSpeciesBizId: currentSettingRow.value.announcementSpeciesBizId,
      ratioBatchSaveDtoList: saveTable
    }).then(response => {
      console.log('response', response)

      if (response.code === 200) {
        showCommisionSetting.value = false
        proxy.$modal.msgSuccess('提交成功')
      } else if (response.code === 1004) {
        if (response.msg) {
          settingErrorTip.value = response.msg.split('\n').filter(item => item !== '')
        }
        errorTip.value = true
      }
    })
  } catch (error) {
    console.log('错误了', error)
  }
}

// 表格数据校验函数
const validateTableData = () => {
  const errors = []
  const requiredFields = [
    { key: 'expenseName', label: '费用名称' },
    { key: 'startPeriod', label: '佣金年限(起)' },
    { key: 'endPeriod', label: '佣金年限(止)' },
    { key: 'commissionRate', label: '佣金率(%)' },
    { key: 'discountRatio', label: '折标系数(%)' },
    { key: 'effectiveStart', label: '生效日期(起)' },
    { key: 'effectiveEnd', label: '生效日期(止)' },
    { key: 'scope', label: '适用范围' },
    { key: 'isExchangeRate', label: '是否受汇率影响' },
    { key: 'currency', label: '结算币种' },
    { key: 'status', label: '状态' }
  ]

  settingList.value.forEach((row, index) => {
    requiredFields.forEach(field => {
      const value = row[field.key]
      let isValid = true

      if (Array.isArray(value)) {
        isValid = value.length > 0
      } else {
        isValid = value !== null && value !== undefined && value !== ''
      }

      if (!isValid) {
        errors.push({
          rowIndex: index,
          field: field.key,
          label: field.label,
          rowNumber: index + 1
        })
      }
    })
  })

  if (errors.length === 0) {
    return { valid: true }
  }

  // 生成友好的错误提示信息
  const errorMessages = errors
    .slice(0, 3)
    .map(error => `第${error.rowNumber}行【${error.label}】未填写`)

  let message = errorMessages.join('；')
  if (errors.length > 3) {
    message += `等，共${errors.length}处必填项未填写`
  }

  return {
    valid: false,
    errors,
    message
  }
}

/** 获得佣金设置数据 */
function getSettingList() {
  settingLoading.value = true
  let obj = {
    expenseName: '',
    startPeriod: '',
    endPeriod: '',
    commissionRate: '',
    discountRatio: '100',
    effectiveStart: '',
    effectiveEnd: '',
    scope: '',
    isExchangeRate: '1',
    currency: 'HKD',
    status: '1',
    remark: ''
  }
  settingList.value = []
  settingQueryParams.value.announcementSpeciesBizId =
    currentSettingRow.value.announcementSpeciesBizId
  sendCommissionRatio(settingQueryParams.value).then(response => {
    if (response.code === 200) {
      if (response.data.records.length > 0) {
        settingList.value = response.data.records
        settingList.value.forEach(row => {
          if (row.scope) {
            row.scope = row.scope.split(';')
          }
          row.status = row.status === 1 ? '1' : row.status === 0 ? '0' : ''
        })
      } else {
        settingList.value.push(obj)
      }
      settingTotal.value = response.data.total
      settingLoading.value = false
      showCommisionSetting.value = true
    } else {
      settingLoading.value = false
      proxy.$modal.msgError(response.msg)
    }
  })
}
// 原始数据
const originalData = ref([])

// 表格列配置
const tableColumns = ref([])

// 表格数据
const tableData = ref([])

// 合并行配置，存储每列需要合并的行数
const spanConfig = ref({})

// 从数据中提取所有可能的列
const extractColumnsFromData = data => {
  const columnSet = new Map()

  data.forEach(item => {
    try {
      if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
        item.apiSpeciesSettingDtoList.forEach(species => {
          if (!columnSet.has(species.typeCode)) {
            columnSet.set(species.typeCode, {
              prop: species.typeCode,
              label: species.typeName,
              width: species.typeName.length * 15 + 30,
              align: 'center',
              sortable: false
            })
          }
        })
      }
    } catch (e) {
      console.log('计算列失败', e)
    }
  })

  // 将 Map 转换为数组并按 typeCode 排序（可选）
  return Array.from(columnSet.values())
}

// 处理数据，生成表格需要的格式
const processTableData = () => {
  if (!originalData.value || originalData.value.length === 0) {
    tableData.value = []
    spanConfig.value = {}
    return
  }
  console.log('originalData.value', originalData.value)

  // 1. 提取所有列
  const columns = extractColumnsFromData(originalData.value)
  tableColumns.value = columns

  // 2. 转换数据格式
  const processedData = []

  originalData.value.forEach((item, index) => {
    const rowData = {
      rowKey: `${item.id}_${index}`, // 生成唯一 rowKey
      id: item.id, // 保留原始ID
      rawData: item // 保留原始数据
    }

    // 填充所有列的值
    columns.forEach(column => {
      try {
        if (item.apiSpeciesSettingDtoList && item.apiSpeciesSettingDtoList.length > 0) {
          const matchedSpecies = item.apiSpeciesSettingDtoList.find(s => s.typeCode === column.prop)
          rowData[column.prop] = matchedSpecies ? matchedSpecies.value : ''
        } else {
          rowData[column.prop] = ''
        }
      } catch (e) {
        console.log('填充所有列的值失败', e)
      }
    })

    processedData.push(rowData)
  })

  // 3. 计算合并配置
  calculateSpanConfig(processedData, columns)

  tableData.value = processedData
}

// 计算合并配置
const calculateSpanConfig = (data, columns) => {
  const config = {}

  // 为每一列计算合并配置
  columns.forEach((column, columnIndex) => {
    config[column.prop] = []

    let pos = 0
    while (pos < data.length) {
      const currentValue = data[pos][column.prop]
      let rowspan = 1

      // 向后查找相同值的行
      for (let i = pos + 1; i < data.length; i++) {
        // 只有当该列之前的所有列的值都相同时才合并
        let shouldMerge = true
        for (let j = 0; j < columnIndex; j++) {
          const prevColumn = columns[j]
          if (data[pos][prevColumn.prop] !== data[i][prevColumn.prop]) {
            shouldMerge = false
            break
          }
        }

        if (shouldMerge && data[i][column.prop] === currentValue) {
          rowspan++
        } else {
          break
        }
      }

      // 记录合并配置
      config[column.prop][pos] = rowspan

      // 跳过已经计算的行
      pos += rowspan
    }

    // 填充剩余的配置为0（不合并）
    for (let i = 0; i < data.length; i++) {
      if (!config[column.prop][i]) {
        config[column.prop][i] = 0
      }
    }
  })

  spanConfig.value = config
}

// 合并单元格的方法
const objectSpanMethod = ({ row, column, rowIndex, columnIndex }) => {
  // 最后一列是操作列，不合并
  if (columnIndex === tableColumns.value.length) {
    return {
      rowspan: 1,
      colspan: 1
    }
  }

  const columnProp = tableColumns.value[columnIndex].prop
  const rowspan = spanConfig.value[columnProp]?.[rowIndex] || 0

  if (rowspan > 0) {
    return {
      rowspan: rowspan,
      colspan: 1
    }
  } else {
    return {
      rowspan: 0,
      colspan: 0
    }
  }
}

// 佣金设置操作
const handleCommissionSetting = row => {
  currentSettingRow.value = row.rawData
  console.log('佣金设置', currentSettingRow.value)
  getSettingList()
}

/** 获得规格数据 */
function getSpeciesList() {
  loading.value = true
  sendSpecies(queryParams.value).then(response => {
    if (response.code === 200) {
      originalData.value = response.data.records
      total.value = response.data.total
      loading.value = false
      if (originalData.value.length == 0) {
        // 如果发佣表没有规格数据，那么同步产品规格数据
        updateSpecies()
        // proxy.$modal.msgError('该商品暂无规格数据，请先更新规格数据')
      } else {
        let codeArr = []
        // 自定义没有typeCode影响表格得展示
        originalData.value[0].apiSpeciesSettingDtoList.forEach((item, index) => {
          if (item.isCustomize == '1') {
            item.typeCode = `custom${Date.now() + Math.floor(Math.random() * 1000)}`
            codeArr.push({ index: index, code: item.typeCode })
          }
        })
        originalData.value.forEach((item, oIndex) => {
          item.apiSpeciesSettingDtoList.forEach((species, sIndex) => {
            if (codeArr.length > 0) {
              codeArr.forEach(codeItem => {
                if (codeItem.index == sIndex) {
                  species.typeCode = codeItem.code
                }
              })
            }
          })
        })
      }
      // 计算表格
      processTableData()
    } else {
      proxy.$modal.msgError(response.msg)
    }
  })
}
/** 更新规格数据 */
function updateSpecies(type) {
  loading.value = true
  if (type == 'update') {
    proxy.$modal.confirm('确认更新发佣管理-规格数据吗,此操作会重置佣金数据', '提示', {
      confirmButtonText: '确定',
      cancelButtonText: '取消',
      type: 'warning'
    }).then(() => {
      // 用户点击了确定按钮，执行更新操作
      updateSpecies()
    }).catch(() => {
      // 用户点击了取消按钮，不执行任何操作
    })
  } else {
    exportSpecies({ productLaunchBizId: route.query.productLaunchBizId }).then(response => {
      if (response.code === 200) {
         if (type == 'update') {
         proxy.$modal.msgSuccess('发佣管理-规格更新成功')
        } else {
          console.log('初始化规格数据')
        }
        getSpeciesList()
      } else {
        proxy.$modal.msgError(response.msg)
      }
    })
  }

}

//========多选下拉框悬停效果结束=========

watch(
  () => props.activeName,
  newVal => {
    if (newVal == 'sendCommission') {
      getSpeciesList()
    }
  }
)
</script>
<style lang="scss" scoped>
.required-label::before {
  content: '*';
  color: #f56c6c;
  margin-right: 4px;
}

.btnCon {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* 错误行样式 */
.error-row {
  background-color: #fff2f0 !important;
  animation: highlight 0.6s ease-in-out;
}

/* 错误字段高亮 */
.error-field :deep(.el-input__wrapper) {
  border-color: #f56c6c !important;
  box-shadow: 0 0 0 1px #f56c6c !important;
}

.error-field :deep(.el-input__inner) {
  color: #f56c6c;
}

.error-field :deep(.el-select__wrapper) {
  border-color: #f56c6c !important;
  box-shadow: 0 0 0 1px #f56c6c !important;
}

/* 闪烁动画吸引用户注意力 */
@keyframes highlight {

  0%,
  50% {
    background-color: #fff2f0;
  }

  25%,
  75% {
    background-color: #ffeaea;
  }

  100% {
    background-color: #fff2f0;
  }
}

/* 错误提示消息样式 */
.validation-message-box {
  :deep(.el-message-box__content) {
    max-height: 400px;
    overflow-y: auto;
  }
}
</style>
