<template>
  <div class="flex justify-left" style="padding-left: 10px">
    <el-button :type="statusMode === false ? 'primary' : 'danger'" @click="handleRefresh" size="small">{{
      statusMode === false ? "开始刷新" : "停止刷新"
    }}</el-button>
  </div>
  <div class="m-t-5" />
  <!-- DSN数据表格 -->
  <div class="table-content">
    <el-table v-loading="!tableData" element-loading-background="rgba(48, 65, 86, 0.7)" :data="tableData"
      style="width: 100%" border :row-style="{ height: '46px' }" :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="name" label="天线名称" show-overflow-tooltip />
      <el-table-column property="targets[0].name" label="目标名称" show-overflow-tooltip />
      <!-- <el-table-column property="distance" label="距离(km)" show-overflow-tooltip />
			<el-table-column property="roundTripTime" label="往返光时(s)" show-overflow-tooltip />
			<el-table-column property="stationName" label="站点名称" show-overflow-tooltip /> -->
      <el-table-column property="azimuthAngle" label="目标方位" show-overflow-tooltip />
      <el-table-column property="elevationAngle" label="目标俯仰" show-overflow-tooltip />
      <!-- <el-table-column property="targetDistance" label="目标距离" show-overflow-tooltip /> -->
      <el-table-column property="windSpeed" label="风速(km/hr)" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.windSpeed === "" ? "-" : scope.row.windSpeed }}
        </template>
      </el-table-column>
      <el-table-column property="targets[0].name" label="上行信号来源" show-overflow-tooltip />
      <el-table-column property="signals[0].band" label="上行信号频段" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.signals.length === 0 ? "-" : scope.row.signals[0].band }}
        </template>
      </el-table-column>
      <el-table-column property="signals[0].power" label="上行发射功率" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.signals.length === 0 ? "-" : scope.row.signals[0].power }}
        </template>
      </el-table-column>
      <el-table-column property="targets[0].name" label="下行信号来源" show-overflow-tooltip />
      <el-table-column property="signals[1].band" label="下行信号频段" show-overflow-tooltip>
        <template #default="scope"> {{ scope.row.signals.length < 2 ? "-" : scope.row.signals[1].band }} </template>
      </el-table-column>
      <el-table-column property="signals[1].power" label="下行接收功率" show-overflow-tooltip>
        <template #default="scope"> {{ scope.row.signals.length < 2 ? "-" : scope.row.signals[1].power }} </template>
      </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>

  <!-- DSN数据详情对话框 -->
  <div class="detailForm">
    <el-dialog v-model="detailVisibleValue" center width="800px" align-center @close="handleClose" draggable>
      <template #header>
        <div class="text-center font-size-6">详情丨{{ antennaName }}</div>
      </template>
      <el-row>
        <el-col :span="12">
          <el-card>
            <div class="title">航天器信息：</div>
            <el-divider style="margin: 0"></el-divider>
            <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">{{ targetDistance }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">往返光时：</span>
              <span class="item">{{ roundTripTime }}</span>
            </div>
          </el-card>

          <el-card>
            <div class="title">天线信息：</div>
            <el-divider style="margin: 0"></el-divider>
            <div class="info-item">
              <span class="item-title">天线名称：</span>
              <span class="item">{{ antennaName }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">状态：</span>
              <span class="item">{{ antennaStatus }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">方位：</span>
              <span class="item">{{ targetAzimuth }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">仰俯：</span>
              <span class="item">{{ targetElevation }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">风速(km/hr)：</span>
              <span class="item">{{ windSpeed }}</span>
            </div>
          </el-card>
        </el-col>
        <el-col :span="12">
          <el-card>
            <div class="title">上行信号信息：</div>
            <el-divider style="margin: 0"></el-divider>
            <div class="info-item">
              <span class="item-title">信号来源：</span>
              <span class="item">{{ upSignalSource }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">信号频段：</span>
              <span class="item">{{ upSignalFrequencyBand }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">发射功率：</span>
              <span class="item">{{ upSignalLaunchPower }}</span>
            </div>
          </el-card>
          <el-card>
            <div class="title">下行信号信息：</div>
            <el-divider style="margin: 0"></el-divider>
            <div class="info-item">
              <span class="item-title">信号来源：</span>
              <span class="item">{{ downSignalSource }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">信号频段：</span>
              <span class="item">{{ downSignalFrequencyBand }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">接收功率：</span>
              <span class="item">{{ downSignalReceptionPower }}</span>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </el-dialog>
  </div>
</template>

<script setup lang="ts">
import { onMounted, ref } from "vue";
import Pagination from "@/components/pagination/index.vue";
import { getDsnList } from "@/api/spiderData";
import { ElMessage } from "element-plus";

const timeValue = ref("");
const statusMode = ref(false);
const detailVisibleValue = ref(false);
// 目标名称
const targetName = ref("");
// 距离(km)
const distance = ref("");
// 往返光时
const roundTripTime = ref("");
// 站点名称
const stationName = ref("");
// 天线名称
const antennaName = ref("");
// 天线状态
const antennaStatus = ref("");
// 目标方位
const targetAzimuth = ref("");
// 目标俯仰
const targetElevation = ref("");
// 目标距离
const targetDistance = ref("");
// 风速(km/hr)
const windSpeed = ref("");
// 上行信号状态
const upSignalStatus = ref("");
// 上行信号来源
const upSignalSource = ref("");
// 上行信号频段
const upSignalFrequencyBand = ref("");
// 上行发射功率
const upSignalLaunchPower = ref("");
// 下行信号状态
const downSignalStatus = ref("");
// 下行信号来源
const downSignalSource = ref("");
// 下行信号频段
const downSignalFrequencyBand = ref("");
// 下行接收功率
const downSignalReceptionPower = ref("");
// 数据时间
const dataTime = ref("");
// 记录时间
const recordTime = ref("");
// 是否暂停使用
const isSuspended = ref("");
// dsn数据
interface dsnInfo {
  targetName: string;
  targetNam: string;
}
const dsnInfoDialog = ref<dsnInfo>();
// 存放定时器的id
const timerId = ref<number | null>();
// 表格数据
const tableData = ref();
// 分页数据
const pageObj = ref({
  total: 10,
  pageSize: 1,
  pageNo: 1,
});
// 查看数据详情的方法
const handleDetails = (row: any) => {
  // 将表格中对应行的数据赋值给上面定义的变量
  targetName.value = row.targets[0].name;
  windSpeed.value = row.windSpeed === "" ? "--" : row.windSpeed;
  antennaName.value = row.name;
  antennaStatus.value = row.activity;
  targetAzimuth.value = row.azimuthAngle;
  targetDistance.value = row.targets[0].uplegRange;
  targetElevation.value = row.elevationAngle;
  upSignalStatus.value = row.signals.length < 1 ? "--" : row.signals[0].active;
  upSignalSource.value = row.signals.length < 1 ? "--" : row.targets[0].name;
  upSignalFrequencyBand.value = row.signals.length < 1 ? "--" : row.signals[0].band;
  upSignalLaunchPower.value = row.signals.length < 1 ? "--" : row.signals[0].power;
  downSignalStatus.value = row.signals.length < 2 ? "--" : row.signals[1].active;
  downSignalSource.value = row.signals.length < 2 ? "--" : row.targets[0].name;
  downSignalFrequencyBand.value = row.signals.length < 2 ? "--" : row.signals[1].band;
  downSignalReceptionPower.value = row.signals.length < 2 ? "--" : row.signals[1].power;
  roundTripTime.value = row.targets[0].rtlt;
  detailVisibleValue.value = true;
};
// 获取dsn数据列表的方法
const getData = async () => {
  const res = await getDsnList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
  let dishesData = [];
  // 构造表格数据，dsn数据的结构比较特殊，需要遍历两层才能得到每一行的数据
  for (let i = 0; i < res.data.list[0].stations.length; i++) {
    for (let j = 0; j < res.data.list[0].stations[i].dishes.length; j++) {
      dishesData.push(res.data.list[0].stations[i].dishes[j]);
    }
  }
  pageObj.value.total = dishesData.length;
  tableData.value = dishesData;
  console.log(tableData.value);
};
// 关闭详情对话框的方法
const handleClose = () => {
  detailVisibleValue.value = false;
};
// 刷新数据的方法
const handleRefresh = () => {
  // 切换是否开始刷新的状态
  statusMode.value = !statusMode.value;
  // 删除定时器
  if (timerId.value !== null) {
    clearInterval(timerId.value);
    timerId.value = null;
  }
  // 开始刷新时重新设置一个定时器
  if (statusMode.value) {
    ElMessage.success("开始刷新");
    // 保存id删除的时候用
    timerId.value = setInterval(async () => {
      const res = await getDsnList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize });
      let dishesData = [];
      // 构造表格数据，dsn数据的结构比较特殊，需要遍历两层才能得到每一行的数据
      for (let i = 0; i < res.data.list[0].stations.length; i++) {
        for (let j = 0; j < res.data.list[0].stations[i].dishes.length; j++) {
          dishesData.push(res.data.list[0].stations[i].dishes[j]);
        }
      }
      pageObj.value.total = dishesData.length;
      tableData.value = dishesData;
    }, 5000);
  } else {
    ElMessage.success("停止刷新");
    getData();
  }
};
onMounted(async () => {
  // 进入页面时先删除定时器
  if (timerId.value !== null) {
    clearInterval(timerId.value);
  }
  statusMode.value = false;
  // 先获取一次
  getData();
});
</script>

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

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