<template>
    <div class="text-left p-4 toolbarStyle">
        <div class="formStyle">
            <el-form inline>
                <el-form-item>
                    <el-text class="mx-1">目标名称:</el-text>
                </el-form-item>
                <el-form-item>
                    <div>
                        <el-input placeholder="请输入" v-model="searchTargetName" style="width: 180px" />
                    </div>
                </el-form-item>
                <el-form-item>
                    <el-text class="mx-1">获取时间:</el-text>
                </el-form-item>
                <el-form-item>
                    <el-config-provider :locale="zhCn">
                        <el-date-picker type="datetimerange" format="YYYY-MM-DD HH:mm:ss" v-model="searchTimeValue"
                            start-placeholder="开始时间" style="width: 330px" 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>
                </el-form-item>
                <el-form-item>
                    <el-text class="mx-1">站点名称:</el-text>
                </el-form-item>
                <el-form-item>
                    <el-input placeholder="请输入" v-model="searchStation" style="width: 170.5px" />
                </el-form-item>
                <el-form-item>
                    <el-space>
                        <el-button type="primary" @click="handleSearch">查询</el-button>
                        <el-button type="primary" @click="getData">重置表格</el-button>
                    </el-space>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div class="m-t-5" />
    <div>
        <el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45.5px' }"
            :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }">
            <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.eoa) }}
                </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 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 fixed="right" label="操作" min-width="85">
                <template #default="scope">
                    <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>
                </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-8">
                    详情
                </div>
            </template>
            <el-form label-width="155px" size="small" class="px-4">
                <div>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="目标名称:" label-position="left">
                                <el-input v-model="targetName" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="任务类型:" label-position="left">
                                <el-input v-model="targetMissionType" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="目标运行轨道:" label-position="left">
                                <el-input v-model="targetOrbit" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="目标尺寸:" label-position="left">
                                <el-input v-model="targetDimension" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="目标发射质量:" label-position="left">
                                <el-input v-model="targetLaunchMass" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="目标干质量:" label-position="left">
                                <el-input v-model="targetDryMass" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="近地点:" label-position="left">
                                <el-input v-model="targetPerigee" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="远地点:" label-position="left">
                                <el-input v-model="targetApogee" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="目标功率:" label-position="left">
                                <el-input v-model="targetPower" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="轨道倾角:" label-position="left">
                                <el-input v-model="targetInclination" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="发射日期:" label-position="left">
                                <el-input v-model="targetLaunchDate" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="发射站点:" label-position="left">
                                <el-input v-model="targetLaunchLocation" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="轨道周期:" label-position="left">
                                <el-input v-model="targetPeriod" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="相关仪器:" label-position="left">
                                <el-input v-model="targetInstruments" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="服役日期:" label-position="left">
                                <el-input v-model="targetServiceDate" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否为核心任务:" label-position="left">
                                <el-input v-model="targetIsCoreMission" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="太阳风速:" label-position="left">
                                <el-input v-model="targetSolarWindSpeed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="太阳通量密度:" label-position="left">
                                <el-input v-model="targetSolarFluxDensity" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <!-- <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="是否在仪表盘中显示:" label-position="left">
                                <el-input v-model="targetIsShowInDashboard" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类型:" label-position="left">
                                <el-input v-model="targetType" />
                            </el-form-item>
                        </el-col>
                    </el-row> -->
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="描述:" label-position="left">
                                <el-input v-model="targetDescription" type="textarea" :rows="3" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </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-8">
                    详情
                </div>
            </template>
            <el-form label-width="196px" size="small" class="px-4">
                <div>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="站点名称:" label-position="left">
                                <el-input v-model="stationName" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="所在国家:" label-position="left">
                                <el-input v-model="stationCountry" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="站点经度:" label-position="left">
                                <el-input v-model="stationLongitude" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="站点纬度:" label-position="left">
                                <el-input v-model="stationLatitude" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="站点海拔:" label-position="left">
                                <el-input v-model="stationAltitude" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="站点直径:" label-position="left">
                                <el-input v-model="stationDiameter" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="天线方位角速度:" label-position="left">
                                <el-input v-model="stationAzimuthSpeed" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="天线俯仰角速度:" label-position="left">
                                <el-input v-model="stationElevationSpeed" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="信号频段:" label-position="left">
                                <el-input v-model="stationBand" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="TMTC标准:" label-position="left">
                                <el-input v-model="stationTMTC" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="信号频率与定时:" label-position="left">
                                <el-input v-model="stationFrequencyAndTiming" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="站点天气情况:" label-position="left">
                                <el-input v-model="stationWeather" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="上行信号S频段极化:" label-position="left">
                                <el-input v-model="stationUplinkSPolarization" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="上行信号S频段等效全向辐射功率:" label-position="left">
                                <el-input v-model="stationUplinkSEirp" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="上行信号X频段极化:" label-position="left">
                                <el-input v-model="stationUplinkXPolarization" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="上行信号X频段等效全向辐射功率:" label-position="left">
                                <el-input v-model="stationUplinkXEirp" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="上行信号Ka频段极化:" label-position="left">
                                <el-input v-model="stationUplinkKaPolarization" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="上行信号Ka频段等效全向辐射功率:" label-position="left">
                                <el-input v-model="stationUplinkKaEirp" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="下行信号S频段极化:" label-position="left">
                                <el-input v-model="stationDownlinkSPolarization" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="下行信号S频段G/T比:" label-position="left">
                                <el-input v-model="stationDownlinkSGt" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="下行信号X频段极化:" label-position="left">
                                <el-input v-model="stationDownlinkXPolarization" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="下行信号X频段G/T比:" label-position="left">
                                <el-input v-model="stationDownlinkXGt" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="下行信号Ka频段极化:" label-position="left">
                                <el-input v-model="stationDownlinkKaPolarization" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="下行信号Ka频段G/T比:" label-position="left">
                                <el-input v-model="stationDownlinkKaGt" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="站点温度:" label-position="left">
                                <el-input v-model="stationTemperature" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="站点气压:" label-position="left">
                                <el-input v-model="stationPressure" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="站点湿度:" label-position="left">
                                <el-input v-model="stationHumidity" />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="站点类型:" label-position="left">
                                <el-input v-model="stationType" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="描述:" label-position="left">
                                <el-input v-model="stationDescription" type="textarea" :rows="3" />
                            </el-form-item>
                        </el-col>
                    </el-row>
                </div>
            </el-form>
        </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';
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) => {
    const res = await getESAStationDetail({ name: id })
    // 防止残留数据
    stationDescription.value = ''
    // 字段赋值
    stationName.value = res.data.data[0].name
    stationCountry.value = res.data.data[0].country
    stationLongitude.value = res.data.data[0].longitude
    stationLatitude.value = res.data.data[0].latitude
    stationAltitude.value = res.data.data[0].altitude
    stationDiameter.value = res.data.data[0].diameter
    stationAzimuthSpeed.value = res.data.data[0].antennaSpeedAzimuth
    stationElevationSpeed.value = res.data.data[0].antennaSpeedElevation
    stationBand.value = res.data.data[0].band
    stationTMTC.value = res.data.data[0].tmtcStandards
    stationFrequencyAndTiming.value = res.data.data[0].frequencyAndTiming
    stationWeather.value = res.data.data[0].weather === null ? '无' : res.data.data[0].weather
    stationUplinkSPolarization.value = res.data.data[0].uplinkSBandPolarization === null ? '无' : res.data.data[0].uplinkSBandPolarization
    stationUplinkSEirp.value = res.data.data[0].uplinkSBandEirp === null ? '无' : res.data.data[0].uplinkSBandEirp
    stationUplinkXPolarization.value = res.data.data[0].uplinkXBandPolarization === null ? '无' : res.data.data[0].uplinkXBandPolarization
    stationUplinkXEirp.value = res.data.data[0].uplinkXBandEirp === null ? '无' : res.data.data[0].uplinkXBandEirp
    stationUplinkKaPolarization.value = res.data.data[0].uplinkKaBandPolarization === null ? '无' : res.data.data[0].uplinkKaBandPolarization
    stationUplinkKaEirp.value = res.data.data[0].uplinkKaBandEirp === null ? '无' : res.data.data[0].uplinkKaBandEirp
    stationDownlinkSPolarization.value = res.data.data[0].downlinkSBandPolarization === null ? '无' : res.data.data[0].downlinkSBandPolarization
    stationDownlinkSGt.value = res.data.data[0].downlinkSBandGT === null ? '无' : res.data.data[0].downlinkSBandGT
    stationDownlinkXPolarization.value = res.data.data[0].downlinkXBandPolarization === null ? '无' : res.data.data[0].downlinkXBandPolarization
    stationDownlinkXGt.value = res.data.data[0].downlinkXBandGT === null ? '无' : res.data.data[0].downlinkXBandGT
    stationDownlinkKaPolarization.value = res.data.data[0].downlinkKaBandPolarization === null ? '无' : res.data.data[0].downlinkKaBandPolarization
    stationDownlinkKaGt.value = res.data.data[0].downlinkKaBandGT === null ? '无' : res.data.data[0].downlinkKaBandGT
    stationTemperature.value = res.data.data[0].temperature
    stationPressure.value = res.data.data[0].airPressure
    stationHumidity.value = res.data.data[0].humidity
    stationType.value = res.data.data[0].type
    for (let i = 0; i < res.data.data[0].description.length; i++) {
        stationDescription.value += res.data.data[0].description[i]
    }
    stationVisibleValue.value = true
}

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
}

// 获取esa数据列表的方法
const getData = async () => {
    searchStation.value = ''
    searchTargetName.value = ''
    searchTimeValue.value = ''
    const res = await getESAList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize })
    pageObj.value.total = res.data.total
    tableData.value = res.data.list
}
const handleClose = () => {
    detailVisibleValue.value = false
}
const handleSearch = async () => {
    if (searchTargetName.value === '' && searchStation.value === '' && searchTimeValue.value === '') {
        ElMessage.warning('请输入搜索内容')
        return
    }
    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
}
onMounted(() => {
    getData()
})
</script>

<style scoped lang="scss">
// 调整表单项间距
.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%;
}

/* 文字样式 */
.el-text {
    color: #FFFFFF;
}
</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;
}
</style>