<template>
  <div class="text-left">
    <table-search>
      <div class="form-content">
        <div class="left">
          <div>
            <span style="color: white">目标名称：</span>
            <el-input placeholder="请输入目标名称" v-model="searchTargetName" style="width: 180px" />
          </div>
          <div>
            <span style="color: white">站点名称：</span>
            <el-input placeholder="请输入站点名称" v-model="searchStation" style="width: 170.5px" />
          </div>
          <div>
            <span style="color: white">采集时间：</span>
            <el-config-provider :locale="zhCn">
              <el-date-picker
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                v-model="searchTimeValue"
                start-placeholder="开始时间"
                style="width: 400px"
                end-placeholder="结束时间"
                date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-config-provider>
          </div>
        </div>
        <div class="btns">
          <el-button plain type="primary" @click="getData">查询</el-button>
          <el-button plain @click="resetForm">重置</el-button>
        </div>
      </div>
    </table-search>
  </div>

  <div class="m-t-5" />
  <div class="table-content">
    <el-table
      :data="tableData"
      style="width: 100%"
      border
      :row-style="{ height: '45.5px' }"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      v-loading="tableLoading"
      element-loading-background="rgba(48, 65, 86, 0.7)"
    >
      <el-table-column property="number" label="序号" width="55" type="index" />
      <el-table-column property="data.mission" label="目标名称" width="86" show-overflow-tooltip />
      <el-table-column property="data.station" label="站点名称" width="88" show-overflow-tooltip />
      <el-table-column property="data.distance" label="距离" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.data.distance === null ? '-' : scope.row.data.distance }}
        </template>
      </el-table-column>
      <el-table-column property="data.roundTripLightTime" label="往返光时" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.data.roundTripLightTime === null ? '-' : scope.row.data.roundTripLightTime }}
        </template>
      </el-table-column>
      <el-table-column property="data.boa" label="行动开始时间" show-overflow-tooltip>
        <template #default="scope">
          {{ formatTimestamp(scope.row.data.boa) }}
        </template>
      </el-table-column>
      <el-table-column property="data.plan_txt" label="行动结束时间" show-overflow-tooltip>
        <template #default="scope">
          {{ formatTimestamp(scope.row.data.bot) }}
        </template>
      </el-table-column>
      <el-table-column property="data.plan_txt" label="跟踪开始时间" show-overflow-tooltip>
        <template #default="scope">
          {{ formatTimestamp(scope.row.data.eot) }}
        </template>
      </el-table-column>
      <el-table-column property="data.plan_txt" label="跟踪结束时间" show-overflow-tooltip>
        <template #default="scope">
          {{ formatTimestamp(scope.row.data.eoa) }}
        </template>
      </el-table-column>
      <el-table-column label="目标在线状态" width="110" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.data.target?.[scope.row.data.mission] === 'true' ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column property="crawl_time" label="采集时间" />
      <el-table-column fixed="right" label="操作" min-width="85">
        <template #default="scope">
          <div class="btns">
            <el-button link type="primary" size="small" @click="handleMissionDetails(scope.row.data.mission)">
              目标信息
            </el-button>
            <el-button link type="primary" size="small" @click="handleStationDetails(scope.row.data.station)"
              >站点信息</el-button
            >
          </div>
        </template>
      </el-table-column>
    </el-table>
    <div class="pagination w-full flex flex-row-reverse pr-4 m-t-4">
      <Pagination
        :total="pageObj.total"
        v-model:page="pageObj.pageNo"
        v-model:limit="pageObj.pageSize"
        @pagination="getData"
      />
    </div>
  </div>

  <div class="detailForm">
    <el-dialog v-model="detailVisibleValue" center width="765px" align-center @close="handleClose" draggable>
      <template #header>
        <div class="text-center font-size-6">目标详情丨{{ targetName }}</div>
      </template>
      <el-row>
        <el-col>
          <el-card>
            <div class="title">目标信息：</div>
            <el-divider style="margin: 0"></el-divider>
            <el-row :gutter="50" style="display: flex; justify-content: space-between">
              <el-col :span="12">
                <div class="info-item">
                  <span class="item-title">目标名称：</span>
                  <span class="item">{{ targetName }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">任务类型：</span>
                  <span class="item">{{ targetMissionType }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">运行轨道：</span>
                  <span class="item">{{ targetOrbit }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">目标尺寸：</span>
                  <span class="item">{{ targetDimension ?? '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">发射质量：</span>
                  <span class="item">{{ targetLaunchMass ?? '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">干质量：</span>
                  <span class="item">{{ targetDryMass }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">近地点：</span>
                  <span class="item">{{ targetPerigee }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">远地点：</span>
                  <span class="item">{{ targetApogee }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">目标功率：</span>
                  <span class="item">{{ targetPower }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span class="item-title">发射日期:：</span>
                  <span class="item">{{ targetLaunchDate }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">发射站点：</span>
                  <span class="item">{{ targetLaunchLocation ?? '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">轨道周期：</span>
                  <span class="item">{{ targetPeriod }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">相关仪器：</span>
                  <span class="item">{{ targetInstruments ?? '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">服役日期：</span>
                  <span class="item">{{ targetServiceDate ?? '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">是否为核心任务：</span>
                  <span class="item">{{ targetIsCoreMission ?? '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">太阳风速：</span>
                  <span class="item">{{ targetSolarWindSpeed ?? '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">太阳通量密度：</span>
                  <span class="item">{{ targetSolarFluxDensity ?? '--' }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">轨道倾角：</span>
                  <span class="item">{{ targetInclination }}</span>
                </div>
              </el-col>
            </el-row>
            <div class="title">描述信息：</div>
            <el-divider style="margin: 0"></el-divider>
            <p class="target-desc">{{ targetDescription }}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>

  <div class="detailForm">
    <el-dialog v-model="stationVisibleValue" center width="880px" align-center @close="handleClose" draggable>
      <template #header>
        <div class="text-center font-size-6">站点详情丨{{ stationName }}</div>
      </template>
      <el-row>
        <el-col>
          <el-card>
            <div class="title">站点信息：</div>
            <el-divider style="margin: 0"></el-divider>
            <el-row :gutter="50" style="display: flex; justify-content: space-between">
              <el-col :span="12">
                <div class="info-item">
                  <span class="item-title">站点名称：</span>
                  <span class="item">{{ stationName }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">所在国家：</span>
                  <span class="item">{{ stationCountry }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点经度：</span>
                  <span class="item">{{ stationLongitude }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点纬度：</span>
                  <span class="item">{{ stationLatitude }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点海拔：</span>
                  <span class="item">{{ stationAltitude }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点直径：</span>
                  <span class="item">{{ stationDiameter }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">天线方位角速度：</span>
                  <span class="item">{{ stationAzimuthSpeed }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">天线俯仰角速度：</span>
                  <span class="item">{{ stationElevationSpeed }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">信号频段：</span>
                  <span class="item">{{ stationBand }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">TMTC标准：</span>
                  <span class="item">{{ stationTMTC }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">信号频率与定时：</span>
                  <span class="item">{{ stationFrequencyAndTiming }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点类型：</span>
                  <span class="item">{{ stationType }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点气压：</span>
                  <span class="item">{{ stationPressure === '' ? '--' : stationPressure }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点天气情况：</span>
                  <span class="item">{{ stationWeather }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span class="item-title">上行信号S频段极化：</span>
                  <span class="item">{{ stationUplinkSPolarization }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">上行信号S频段等效全向辐射功率：</span>
                  <span class="item">{{ stationUplinkSPolarization }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">上行信号X频段极化：</span>
                  <span class="item">{{ stationUplinkXPolarization }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">上行信号X频段等效全向辐射功率：</span>
                  <span class="item">{{ stationUplinkXEirp }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">上行信号Ka频段极化：</span>
                  <span class="item">{{ stationUplinkKaPolarization }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">上行信号Ka频段等效全向辐射功率：</span>
                  <span class="item">{{ stationUplinkKaEirp }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">下行信号S频段极化：</span>
                  <span class="item">{{ stationDownlinkSPolarization }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">下行信号S频段G/T比：</span>
                  <span class="item">{{ stationDownlinkSGt }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">下行信号X频段极化：</span>
                  <span class="item">{{ stationDownlinkXPolarization }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">下行信号X频段G/T比：</span>
                  <span class="item">{{ stationDownlinkXGt }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">下行信号Ka频段极化：</span>
                  <span class="item">{{ stationDownlinkKaPolarization }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">下行信号Ka频段G/T比：</span>
                  <span class="item">{{ stationDownlinkKaGt }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点温度：</span>
                  <span class="item">{{ stationTemperature === '' ? '--' : stationTemperature }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">站点湿度：</span>
                  <span class="item">{{ stationHumidity === '' ? '--' : stationHumidity }}</span>
                </div>
              </el-col>
            </el-row>
            <div class="title">描述信息：</div>
            <el-divider style="margin: 0"></el-divider>
            <p class="target-desc">{{ stationDescription }}</p>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
  <exportDialog v-model:dialogVisible="showDeleteDialog" />
</template>

<script setup lang="ts">
import { onMounted, ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
import exportDialog from '@/components/Export/index.vue'
import { getESAList, getESAMissionDetail, getESAStationDetail } from '@/api/spiderData'
import { ElMessage } from 'element-plus'
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
// 引入中文包
import zhCn from 'element-plus/es/locale/lang/zh-cn'
import TableSearch from '@/components/TableSearch.vue'
defineOptions({ name: 'Pagination' })
// 更改分页文字
zhCn.el.pagination.total = '共 `{total} 条`'
zhCn.el.pagination.goto = '跳至'
zhCn.el.pagination.pagesize = '条/页'
zhCn.el.pagination.pageClassifier = '页'
// 查找字段
const searchTargetName = ref('')
const searchTimeValue = ref('')
const searchStation = ref('')
const showDeleteDialog = ref(false)
const detailVisibleValue = ref(false)
const stationVisibleValue = ref(false)
// 目标详情信息
const targetName = ref('')
// 任务类型
const targetMissionType = ref('')

// 目标运行轨道
const targetOrbit = ref('')
// 目标尺寸
const targetDimension = ref('')
// 目标发射质量
const targetLaunchMass = ref('')
// 目标干质量
const targetDryMass = ref('')
// 近地点
const targetPerigee = ref('')
// 远地点
const targetApogee = ref('')
// 目标功率
const targetPower = ref('')
// 轨道倾角
const targetInclination = ref('')
// 轨道周期
const targetPeriod = ref('')
// 发射日期
const targetLaunchDate = ref('')
// 发射站点
const targetLaunchLocation = ref('')
// 相关仪器
const targetInstruments = ref('')
// 服役日期
const targetServiceDate = ref('')
// 是否为核心任务
const targetIsCoreMission = ref('')
// 太阳风速
const targetSolarWindSpeed = ref('')
// 太阳通量密度
const targetSolarFluxDensity = ref('')
// 是否在仪表盘中显示
// const targetIsShowInDashboard = ref('')
// 目标类型
const targetType = ref('')
// 描述
const targetDescription = ref('')

// 站点详情信息
// 站点名称
const stationName = ref('')
// 站点所在国家
const stationCountry = ref('')
// 站点经度
const stationLongitude = ref('')
// 站点纬度
const stationLatitude = ref('')
// 站点海拔高度
const stationAltitude = ref('')
// 站点直径
const stationDiameter = ref('')
// 天线方位角速度
const stationAzimuthSpeed = ref('')
// 天线俯仰角速度
const stationElevationSpeed = ref('')
// 天线信号频段
const stationBand = ref('')
// TMTC标准
const stationTMTC = ref('')
// 信号频率与定时
const stationFrequencyAndTiming = ref('')
// 天气
const stationWeather = ref('')
// 上行信号S频段极化
const stationUplinkSPolarization = ref('')
// 上行信号S频段等效全向辐射功率
const stationUplinkSEirp = ref('')
// 上行信号X频段极化
const stationUplinkXPolarization = ref('')
// 上行信号X频段等效全向辐射功率
const stationUplinkXEirp = ref('')
// 上行信号Ka频段极化
const stationUplinkKaPolarization = ref('')
// 上行信号Ka频段等效全向辐射功率
const stationUplinkKaEirp = ref('')
// 下行信号S频段极化
const stationDownlinkSPolarization = ref('')
// 下行信号S频段G/T比
const stationDownlinkSGt = ref('')
// 下行信号X频段极化
const stationDownlinkXPolarization = ref('')
// 下行信号X频段G/T比
const stationDownlinkXGt = ref('')
// 下行信号Ka频段极化
const stationDownlinkKaPolarization = ref('')
// 下行信号Ka频段G/T比
const stationDownlinkKaGt = ref('')
// 温度
const stationTemperature = ref('')
// 气压
const stationPressure = ref('')
// 湿度
const stationHumidity = ref('')
// 站点类型
const stationType = ref('')
// 描述
const stationDescription = ref('')

// 查看esa站点详情的方法
const handleStationDetails = async (id: any) => {
  try {
    const res = await getESAStationDetail({ name: id })
    // 1. 初始化清空数据
    stationName.value = ''
    stationCountry.value = ''
    stationLongitude.value = ''
    stationLatitude.value = ''
    stationAltitude.value = ''
    stationDiameter.value = ''
    stationAzimuthSpeed.value = ''
    stationElevationSpeed.value = ''
    stationBand.value = ''
    stationTMTC.value = ''
    stationFrequencyAndTiming.value = ''
    stationWeather.value = ''
    stationUplinkSPolarization.value = ''
    stationUplinkSEirp.value = ''
    stationUplinkXPolarization.value = ''
    stationUplinkXEirp.value = ''
    stationUplinkKaPolarization.value = ''
    stationUplinkKaEirp.value = ''
    stationDownlinkSPolarization.value = ''
    stationDownlinkSGt.value = ''
    stationDownlinkXPolarization.value = ''
    stationDownlinkXGt.value = ''
    stationDownlinkKaPolarization.value = ''
    stationDownlinkKaGt.value = ''
    stationTemperature.value = ''
    stationPressure.value = ''
    stationHumidity.value = ''
    stationType.value = ''
    stationDescription.value = ''

    // 2.判断 data 是否存在且非空
    if (!res?.data?.data || res.data.data.length === 0) {
      ElMessage.warning('未查询到该站点的详细信息')
      return
    }

    // 3. 安全赋值
    const stationData = res.data.data[0]
    stationName.value = stationData.name || ''
    stationCountry.value = stationData.country || ''
    stationLongitude.value = stationData.longitude || ''
    stationLatitude.value = stationData.latitude || ''
    stationAltitude.value = stationData.altitude || ''
    stationDiameter.value = stationData.diameter || ''
    stationAzimuthSpeed.value = stationData.antennaSpeedAzimuth || ''
    stationElevationSpeed.value = stationData.antennaSpeedElevation || ''
    stationBand.value = stationData.band || ''
    stationTMTC.value = stationData.tmtcStandards || ''
    stationFrequencyAndTiming.value = stationData.frequencyAndTiming || ''
    stationWeather.value = stationData.weather === null ? '--' : stationData.weather || '--'
    stationUplinkSPolarization.value =
      stationData.uplinkSBandPolarization === null ? '--' : stationData.uplinkSBandPolarization || '--'
    stationUplinkSEirp.value = stationData.uplinkSBandEirp === null ? '--' : stationData.uplinkSBandEirp || '--'
    stationUplinkXPolarization.value =
      stationData.uplinkXBandPolarization === null ? '--' : stationData.uplinkXBandPolarization || '--'
    stationUplinkXEirp.value = stationData.uplinkXBandEirp === null ? '--' : stationData.uplinkXBandEirp || '--'
    stationUplinkKaPolarization.value =
      stationData.uplinkKaBandPolarization === null ? '--' : stationData.uplinkKaBandPolarization || '--'
    stationUplinkKaEirp.value = stationData.uplinkKaBandEirp === null ? '--' : stationData.uplinkKaBandEirp || '--'
    stationDownlinkSPolarization.value =
      stationData.downlinkSBandPolarization === null ? '--' : stationData.downlinkSBandPolarization || '--'
    stationDownlinkSGt.value = stationData.downlinkSBandGT === null ? '--' : stationData.downlinkSBandGT || '--'
    stationDownlinkXPolarization.value =
      stationData.downlinkXBandPolarization === null ? '--' : stationData.downlinkXBandPolarization || '--'
    stationDownlinkXGt.value = stationData.downlinkXBandGT === null ? '--' : stationData.downlinkXBandGT || '--'
    stationDownlinkKaPolarization.value =
      stationData.downlinkKaBandPolarization === null ? '--' : stationData.downlinkKaBandPolarization || '--'
    stationDownlinkKaGt.value = stationData.downlinkKaBandGT === null ? '--' : stationData.downlinkKaBandGT || '--'
    stationTemperature.value = stationData.temperature || ''
    stationPressure.value = stationData.airPressure || ''
    stationHumidity.value = stationData.humidity || ''
    stationType.value = stationData.type || ''

    // 处理描述信息（避免 description 为 undefined 时报错）
    if (Array.isArray(stationData.description)) {
      stationDescription.value = stationData.description.join('')
    } else {
      stationDescription.value = stationData.description || '--'
    }

    stationVisibleValue.value = true
  } catch (error) {
    ElMessage.error('查询站点详情失败，请稍后重试')
    console.error('站点详情查询错误：', error)
  }
}

const tableData = ref([])
const pageObj = ref({
  total: 0,
  pageSize: 10,
  pageNo: 1
})
const formatTimestamp = (timestamp: any) => {
  if (!timestamp || typeof timestamp !== 'number' || timestamp <= 0) {
    return '--'
  }
  const msTimestamp = String(timestamp).length === 10 ? timestamp * 1000 : timestamp
  const date = new Date(msTimestamp)
  if (isNaN(date.getTime())) {
    return '--'
  }
  const year = date.getFullYear()
  const month = String(date.getMonth() + 1).padStart(2, '0')
  const day = String(date.getDate()).padStart(2, '0')
  const hour = String(date.getHours()).padStart(2, '0')
  const minute = String(date.getMinutes()).padStart(2, '0')
  const second = String(date.getSeconds()).padStart(2, '0')
  return `${year}-${month}-${day} ${hour}:${minute}:${second}`
}
// 查看esa任务详情的方法
const handleMissionDetails = async (id: any) => {
  const res = await getESAMissionDetail({ name: id })
  // 防止残留数据
  targetDescription.value = ''
  // 字段赋值
  targetName.value = res.data.data[0].name
  targetMissionType.value = res.data.data[0].type
  targetOrbit.value = res.data.data[0].orbitsAround
  targetDimension.value = res.data.data[0].dimensions
  targetLaunchMass.value = res.data.data[0].launchMass
  targetDryMass.value = res.data.data[0].dryMass
  targetPerigee.value = res.data.data[0].perigee
  targetApogee.value = res.data.data[0].apogee
  targetPower.value = res.data.data[0].power
  targetInclination.value = res.data.data[0].inclination
  targetLaunchDate.value = formatTimestamp(res.data.data[0].launchDate)
  targetLaunchLocation.value = res.data.data[0].launchSite
  targetPeriod.value = res.data.data[0].period
  targetInstruments.value = res.data.data[0].instruments
  targetServiceDate.value = formatTimestamp(res.data.data[0].enteredService)
  targetIsCoreMission.value = res.data.data[0].coreMission
  targetSolarWindSpeed.value = res.data.data[0].solarWindSpeed
  targetSolarFluxDensity.value = res.data.data[0].solarFluxDensity
  for (let i = 0; i < res.data.data[0].description.length; i++) {
    targetDescription.value += res.data.data[0].description[i]
  }
  detailVisibleValue.value = true
}
//表格loading标记
const tableLoading = ref(false)
//重置搜索条件
const resetForm = () => {
  searchStation.value = ''
  searchTargetName.value = ''
  searchTimeValue.value = ''
  pageObj.value.pageNo = 1
  getData()
}
// 获取esa数据列表的方法
const getData = async () => {
  tableLoading.value = true
  const res = await getESAList({
    spacecraft: searchTargetName.value,
    station: searchStation.value,
    times: searchTimeValue.value,
    page: pageObj.value.pageNo,
    size: pageObj.value.pageSize
  })
  pageObj.value.total = res.data.total
  tableData.value = res.data.list
  tableLoading.value = false
}
const handleClose = () => {
  detailVisibleValue.value = false
}

onMounted(() => {
  getData()
})
</script>

<style scoped lang="scss">
:deep(.el-form-item__label) {
  color: white;
}
// 调整表单项间距
.detailForm {
  .el-dialog-title {
    font-size: 180px;
  }

  .el-form-item {
    margin-bottom: 20px !important;
  }
}

/* 工具栏样式 */
.toolbarStyle {
  background-image: url('@/assets/picture/box3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

/* 表格样式 */
.formStyle {
  display: flex;
  justify-content: space-around;
  padding: 3px;
  margin-top: 1%;
}

.title {
  color: #4edaff;
  font-size: 18px;
  font-weight: 500;
}

.info-item {
  display: flex;
  align-items: center;
  margin: 10px 0;
  justify-content: space-between;
}

.item-title {
  color: #b0dfff;
}

.item {
  color: #eee;
}

/* 文字样式 */
.el-text {
  color: #ffffff;
}

.target-desc {
  color: #d0e8ff;
}

.btns {
  display: flex;
  justify-content: center;
}

.form-content {
  display: flex;
  height: 80px;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
}
.left {
  display: flex;
  gap: 10px;
}

.table-content {
  background: rgba(255, 255, 255, 0.03);
  backdrop-filter: blur(8px);
  border: 1px solid rgba(78, 237, 255, 0.2);
  box-shadow: 0 0 15px rgba(78, 237, 255, 0.1);
  border-radius: 8px;
  padding: 10px !important;
}
</style>

<style>
.el-input {
  --el-input-text-color: #ffffff;
}

/* 修改el选择器的样式 */
.el-select__wrapper {
  background-color: #1d5484;
  box-shadow: none;
}

/* 删除el选择器选中时的边框 */
.is-hovering {
  box-shadow: none !important;
}

/* 修改el输入框的样式 */
.el-input__wrapper {
  background-color: #1d5484;
  box-shadow: none;
}

/* 修改el下拉框的背景颜色 */
.el-select-dropdown {
  background-color: #1d5484;
}

/* 修改el下拉框选项的字体颜色 */
.el-select-dropdown__item {
  color: #ffffff;
}

/* 修改el下拉框选项选中时的文字颜色 */
.el-select-dropdown__item:hover {
  color: #409eff;
}

/* 修改el日期选择器的边框为none */
.el-date-editor {
  --el-input-border-color: none;
}

.el-button:focus {
  outline: none;
}

.table-content {
  padding: 0 10px;
}
</style>
