<template>
  <div class="text-left">
    <table-search>
      <div class="form-content">
        <div class="left">
          <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: 200px"
                value-format="YYYY-MM-DD HH:mm:ss"
              />
            </el-config-provider>
          </div>
          <div>
            <span style="color: white">Norad Cat ID：</span>
            <el-input placeholder="请输入ID" style="width: 170.5px" v-model="noradCatId" />
          </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"
      v-loading="tableLoading"
      element-loading-background="rgba(48, 65, 86, 0.3)"
      style="width: 100%"
      border
      :row-style="{ height: '45.5px' }"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <!-- <el-table-column type="selection" width="40" /> -->
      <el-table-column property="number" label="序号" width="55" type="index" />
      <el-table-column property="data[0].NORAD_CAT_ID" label="Norad Cat ID" show-overflow-tooltip />
      <el-table-column property="data[0].OBJECT_NAME" label="目标名称" show-overflow-tooltip />
      <!-- <el-table-column property="intleds" label="INTLDES" show-overflow-tooltip /> -->
      <el-table-column property="data[0].OBJECT_TYPE" label="类型" show-overflow-tooltip />
      <el-table-column property="data[0].COUNTRY_CODE" label="所属国家" width="82" show-overflow-tooltip />
      <!-- <el-table-column property="runningTime" label="运行时间" show-overflow-tooltip /> -->
      <el-table-column property="data[0].SITE" label="SITE" show-overflow-tooltip />
      <!-- <el-table-column property="failTime" label="失效时间" show-overflow-tooltip /> -->
      <el-table-column property="data[0].PERIOD" label="周期(min)" show-overflow-tooltip />
      <el-table-column property="data[0].PERIAPSIS" label="近地点" show-overflow-tooltip />
      <el-table-column property="data[0].APOAPSIS" label="远地点" show-overflow-tooltip />
      <!-- <el-table-column property="incl" label="INCL" show-overflow-tooltip /> -->
      <el-table-column property="data[0].RCS_SIZE" label="RCS" 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>

  <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">{{ argOfPericenter }}</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">{{ 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">{{ launchDate }}</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">{{ raOfAscNode }}</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>
              </el-col>
            </el-row>
            <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("");
// 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("");
//卫星站点

//半长轴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 });
  console.log(res);
  NoradCatID.value = res.data.data[0].NORAD_CAT_ID;
  rcsSize.value = res.data.data[0].RCS_SIZE;
  launchDate.value = res.data.data[0].LAUNCH_DATE;
  semimajorAxis.value = res.data.data[0].SEMIMAJOR_AXIS;
  targetName.value = res.data.data[0].OBJECT_NAME;
  tleLine0.value = res.data.data[0].TLE_LINE0;
  tleLine1.value = res.data.data[0].TLE_LINE1;
  tleLine2.value = res.data.data[0].TLE_LINE2;
  inclination.value = res.data.data[0].INCLINATION;
  meanAnomaly.value = res.data.data[0].MEAN_ANOMALY;
  eccentricity.value = res.data.data[0].ECCENTRICITY;
  raOfAscNode.value = res.data.data[0].RA_OF_ASC_NODE;
  comment.value = res.data.data[0].COMMENT;
  type.value = res.data.data[0].OBJECT_TYPE;
  argOfPericenter.value = res.data.data[0].ARG_OF_PERICENTER;
  bStar.value = res.data.data[0].BSTAR;
  period.value = res.data.data[0].PERIOD;
  intleds.value = res.data.data[0].INTLDES;
  recordTime.value = res.data.data[0].CREATION_DATE;
  belongCountry.value = res.data.data[0].COUNTRY_CODE;
  perigee.value = res.data.data[0].PERIAPSIS;
  apogee.value = res.data.data[0].APOAPSIS;
  rcs.value = res.data.data[0].RCS_SIZE;
  site.value = res.data.data[0].SITE;
  tle.value = `${res.data.data[0].TLE_LINE0}
${res.data.data[0].TLE_LINE1}
${res.data.data[0].TLE_LINE2}`;
  detailVisibleValue.value = true;
};
//表单loading标记
const tableLoading = ref(false);
//重置搜索条件
const resetForm = () => {
  noradCatId.value = "";
  searchTargetName.value = "";
  timeValue.value = "";
  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>
