<template>
  <div class="text-left">
    <!-- 搜索工具栏 -->
    <table-search>
      <div class="form-content">
        <div class="left">
          <div>
            <span style="color: white">Norad：</span>
            <el-input placeholder="请输入ID" style="width: 170.5px" v-model="noradCatId" />
          </div>
          <div>
            <span style="color: white">目标名称：</span>
            <el-input placeholder="请输入目标名称" style="width: 180px" v-model="searchTargetName" />
          </div>
          <div>
            <span style="color: white">采集时间：</span>
            <el-config-provider :locale="zhCn">
              <el-date-picker
                v-model="timeValue"
                type="datetimerange"
                format="YYYY-MM-DD HH:mm:ss"
                start-placeholder="开始时间"
                end-placeholder="结束时间"
                date-format="YYYY/MM/DD ddd"
                time-format="A hh:mm:ss"
                style="width: 400px"
                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>

  <!-- ST数据表格 -->
  <div class="m-t-5" />
  <div class="table-content">
    <el-table
      :data="tableData"
      v-loading="tableLoading"
      style="width: 100%"
      border
      :row-style="{ height: '45.5px' }"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
      element-loading-background="rgba(48, 65, 86, 0.7)"
    >
      <!-- <el-table-column type="selection" width="40" /> -->
      <el-table-column property="number" label="序号" width="55" type="index" />
      <el-table-column property="NORAD_CAT_ID" label="Norad" show-overflow-tooltip />
      <el-table-column property="OBJECT_NAME" label="目标名称" show-overflow-tooltip />
      <!-- <el-table-column property="intleds" label="INTLDES" show-overflow-tooltip /> -->
      <el-table-column property="OBJECT_TYPE" label="目标类型" show-overflow-tooltip />
      <el-table-column property="COUNTRY_CODE" label="国家" width="82" show-overflow-tooltip />
      <!-- <el-table-column property="runningTime" label="运行时间" show-overflow-tooltip /> -->
      <el-table-column property="SITE" label="目标站点" show-overflow-tooltip />
      <!-- <el-table-column property="failTime" label="失效时间" show-overflow-tooltip /> -->
      <el-table-column property="PERIOD" width="118" label="周期(min)" show-overflow-tooltip />
      <el-table-column property="PERIAPSIS" label="近地点" show-overflow-tooltip />
      <el-table-column property="APOAPSIS" label="远地点" show-overflow-tooltip />
      <!-- <el-table-column property="incl" label="INCL" show-overflow-tooltip /> -->
      <el-table-column property="RCS_SIZE" label="雷达截面积" show-overflow-tooltip />
      <el-table-column property="crawl_time" label="采集时间"></el-table-column>
      <el-table-column label="操作" width="60">
        <template #default="scope">
          <el-button type="primary" plain link @click="handleDetails(scope.row)"> 详情 </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>

  <!-- ITU目标详情弹窗 -->
  <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">{{ objectType }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">Norad:</span>
                  <span class="item">{{ NoradCatID }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">国家:</span>
                  <span class="item">{{ countryCode }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">轨道圈数计数器：</span>
                  <span class="item">{{ revAtEpoch }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">带星号的弹道系数：</span>
                  <span class="item">{{ bStar }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">轨道速度微调器：</span>
                  <span class="item">{{ meanMotionDot }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">轨道加速度变化率：</span>
                  <span class="item">{{ meanMotionDdot }}</span>
                </div>

                <div class="info-item">
                  <span class="item-title">目标站点：</span>
                  <span class="item">{{ site }}</span>
                </div>
              </el-col>
              <el-col :span="12">
                <div class="info-item">
                  <span class="item-title">偏心率：</span>
                  <span class="item">{{ eccentricity }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">倾斜角：</span>
                  <span class="item">{{ inclination }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">升交点赤经：</span>
                  <span class="item">{{ raOfAscNode }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">近地点幅角：</span>
                  <span class="item">{{ argOfPericenter }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">平近点角：</span>
                  <span class="item">{{ meanAnomaly }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">轨道半长轴：</span>
                  <span class="item">{{ semimajorAxis }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">雷达截面积：</span>
                  <span class="item">{{ rcsSize }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">周期(min):</span>
                  <span class="item">{{ period }}</span>
                </div>
                <div class="info-item">
                  <span class="item-title">发射日期：</span>
                  <span class="item">{{ launchDate }}</span>
                </div>
              </el-col>
            </el-row>
            <!-- TLE数据 -->
            <div class="title">TLE数据：</div>
            <el-divider style="margin: 0"></el-divider>
            <el-row>
              <el-col>
                <div class="info-item-tle">
                  <el-row>
                    <el-col :span="4">
                      <span class="item-title">TLE第一行数据：</span>
                    </el-col>
                    <el-col :span="20">
                      <span class="item">{{ tleLine0 }}</span>
                    </el-col>
                  </el-row>
                </div>
                <div class="info-item-tle">
                  <el-row>
                    <el-col :span="4">
                      <span class="item-title">TLE第二行数据：</span>
                    </el-col>
                    <el-col :span="20">
                      <span class="item">{{ tleLine1 }}</span>
                    </el-col>
                  </el-row>
                </div>
                <div class="info-item-tle">
                  <el-row>
                    <el-col :span="4">
                      <span class="item-title">TLE第三行数据：</span>
                    </el-col>
                    <el-col :span="20">
                      <span class="item">{{ tleLine2 }}</span>
                    </el-col>
                  </el-row>
                </div>
              </el-col>
            </el-row>
          </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 { getStList, getStDetail } from '@/api/spiderData'
import { ElMessage } from 'element-plus'
// ElConfigProvider 组件
import { ElConfigProvider } from 'element-plus'
import TableSearch from '@/components/TableSearch.vue'
// 引入中文包
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 noradCatId = ref('')
// 删除弹窗显示状态
const showDeleteDialog = ref(false)
// 时间参数
const timeValue = ref('')
// 详情弹窗显示状态
const detailVisibleValue = ref(false)
// NoradCatID
const NoradCatID = ref('')
// 目标名称
const targetName = ref('')
// 目标类型
const objectType = ref('')
// INTLDES
const intleds = ref('')
// 类型
const type = ref('')
// 记录时间
const recordTime = ref('')
// 所属国家
const belongCountry = ref('')
// 近地点
const perigee = ref('')
// 远地点
const apogee = ref('')
// 周期
const period = ref('')
// RCS
const rcs = ref('')
// SITE
const site = ref('')
// TLE
const tle = ref('')
//近地点幅角
const argOfPericenter = ref('')
//弹道系数
const bStar = ref('')
//备注
const comment = ref('')
//偏心率 ECCENTRICITY
const eccentricity = ref('')
//倾斜角 INCLINATION
const inclination = ref('')
//升交点赤经 RA_OF_ASC_NODE
const raOfAscNode = ref('')
//平近点角 MEAN_ANOMALY
const meanAnomaly = ref('')
//RCS_SIZE
const rcsSize = ref('')
//LAUNCH_DATE
const launchDate = ref('')
// 国家代码
const countryCode = ref('')
// 轨道速度微调器
const meanMotionDot = ref('')
// 轨道加速度变化率
const meanMotionDdot = ref('')
// 轨道圈数计数器
const revAtEpoch = ref('')
//半长轴SEMIMAJOR_AXIS
const semimajorAxis = ref('')
//第一行数据 TLE_LINE0
const tleLine0 = ref('')
//第二行数据 TLE_LINE0
const tleLine1 = ref('')
//第三行数据 TLE_LINE0
const tleLine2 = ref('')
// 表格数据
const tableData = ref([])
// 分页数据
const pageObj = ref({
  total: 10,
  pageSize: 10,
  pageNo: 1
})
// 查看数据详情的方法
const handleDetails = async (row: any) => {
  // 发送请求获取数据
  const res = await getStDetail({ id: row._id })
  // 将数据赋值给对应的变量
  NoradCatID.value = res.data.NORAD_CAT_ID
  rcsSize.value = res.data.RCS_SIZE
  launchDate.value = res.data.LAUNCH_DATE
  semimajorAxis.value = res.data.SEMIMAJOR_AXIS
  targetName.value = res.data.OBJECT_NAME
  tleLine0.value = res.data.TLE_LINE0
  tleLine1.value = res.data.TLE_LINE1
  tleLine2.value = res.data.TLE_LINE2
  inclination.value = res.data.INCLINATION
  meanAnomaly.value = res.data.MEAN_ANOMALY
  eccentricity.value = res.data.ECCENTRICITY
  raOfAscNode.value = res.data.RA_OF_ASC_NODE
  comment.value = res.data.COMMENT
  type.value = res.data.OBJECT_TYPE
  argOfPericenter.value = res.data.ARG_OF_PERICENTER
  bStar.value = res.data.BSTAR
  period.value = res.data.PERIOD
  intleds.value = res.data.INTLDES
  recordTime.value = res.data.CREATION_DATE
  belongCountry.value = res.data.COUNTRY_CODE
  perigee.value = res.data.PERIAPSIS
  apogee.value = res.data.APOAPSIS
  rcs.value = res.data.RCS_SIZE
  site.value = res.data.SITE
  // 将TLE数据拼接成一行显示
  tle.value = `${res.data.TLE_LINE0}
${res.data.TLE_LINE1}
${res.data.TLE_LINE2}`
  detailVisibleValue.value = true
  countryCode.value = res.data.COUNTRY_CODE
  meanMotionDot.value = res.data.MEAN_MOTION_DOT
  meanMotionDdot.value = res.data.MEAN_MOTION_DDOT
  revAtEpoch.value = res.data.REV_AT_EPOCH
  objectType.value = res.data.OBJECT_TYPE
}
//表单loading标记
const tableLoading = ref(false)
//重置搜索条件
const resetForm = () => {
  // 清空
  noradCatId.value = ''
  searchTargetName.value = ''
  timeValue.value = ''
  pageObj.value.pageNo = 1
  // 重新获取数据
  getData()
}
// 获取st数据列表的方法
const getData = async () => {
  tableLoading.value = true
  // 发送请求获取数据并赋值
  const res = await getStList({
    norad_cat_id: noradCatId.value,
    object_name: searchTargetName.value,
    times: timeValue.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: 30px !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;
}

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

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

.info-item-tle {
  margin: 10px 0;
}

.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;
}

.item-title {
  color: #b0dfff;
}

.item {
  color: #eee;
}
.form-content {
  display: flex;
  height: 80px;
  align-items: center;
  padding: 0 30px;
  justify-content: space-between;
}
.left {
  display: flex;
  gap: 10px;
}
</style>

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

.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: #1d252c;
}

/* 修改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-contet {
  padding: 0 10px;
}
</style>
