<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="请选择" style="width: 220px" />
          </div>
        </el-form-item>
        <el-form-item>
          <el-text class="mx-1">时间:</el-text>
        </el-form-item>
        <el-form-item>
          <el-date-picker
            v-model="timeValue"
            type="datetimerange"
            start-placeholder="开始时间"
            end-placeholder="结束时间"
            format="YYYY-MM-DD HH:mm:ss"
            date-format="YYYY/MM/DD ddd"
            time-format="A hh:mm:ss"
          />
        </el-form-item>
        <el-form-item>
          <el-text class="mx-1">站点名称:</el-text>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入" style="width: 220px" />
        </el-form-item>
        <el-form-item>
          <el-text class="mx-1">Norad Cat ID:</el-text>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入" style="width: 220px" />
        </el-form-item>
        <el-form-item>
          <el-text class="mx-1">SNS Notice ID:</el-text>
        </el-form-item>
        <el-form-item>
          <el-input placeholder="请输入" style="width: 220px" />
        </el-form-item>
        <el-form-item>
          <el-space>
            <el-button type="primary" @click="handleExport">导出最近</el-button>
          </el-space>
        </el-form-item>
        <el-form-item>
          <el-space>
            <el-button type="primary" @click="handleExport">导出选中</el-button>
          </el-space>
        </el-form-item>
        <el-form-item>
          <el-space>
            <el-button type="primary">查询</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: '45px' }"
      :header-cell-style="{ textAlign: 'center' }"
      :cell-style="{ textAlign: 'center' }"
    >
      <!-- <el-table-column type="selection" width="40" /> -->
      <el-table-column property="number" label="序号" width="55" />
      <el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
      <el-table-column property="stationPosition" label="站点位置" show-overflow-tooltip />
      <el-table-column property="stationName" label="站点名称" show-overflow-tooltip />
      <el-table-column property="NoradCatId" label="Norad Cat ID" show-overflow-tooltip />
      <el-table-column property="SNSNoticeId" label="SNS Notice ID" show-overflow-tooltip />
      <el-table-column property="dataTime" label="数据时间" show-overflow-tooltip />
      <el-table-column property="recordTime" label="记录时间" show-overflow-tooltip />
      <el-table-column property="tle" label="TLE" show-overflow-tooltip />
      <el-table-column property="isSync" label="是否为同步" show-overflow-tooltip />
      <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-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="SNS Notice ID:" label-position="left">
                <el-input v-model="snsId" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="主管部门:" label-position="left">
                <el-input v-model="department" />
              </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="targetName" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="计划/非计划类型:" label-position="left">
                <el-select placeholder=" ">
                  <el-option label="计划" value="planned" />
                  <el-option label="非计划" value="unplanned" />
                </el-select>
              </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="syncType" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="同步位置:" label-position="left">
                <el-input v-model="syncPosition" />
              </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="perigee" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="远地点:" label-position="left">
                <el-input v-model="apogee" />
              </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="lowestAltitude" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="参考主体:" label-position="left">
                <el-input v-model="referenceSubject" />
              </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="lowestFrequency" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最高频率:" label-position="left">
                <el-input v-model="highestFrequency" />
              </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="status" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效期:" label-position="left">
                <el-input v-model="validityPeriod" />
              </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="earliestUsageDate" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="是否确认使用:" label-position="left">
                <el-input v-model="isUsed" />
              </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="isPauseUsed" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="记录时间:" label-position="left">
                <el-input v-model="recordTime" />
              </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="IsInTheInternationalFrequencyList" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="最早监管日期:" label-position="left">
                <el-input v-model="earliestRegulatoryDate" />
              </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="isRestoreUsed" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="有效期卫星网络旧名称:" label-position="left">
                <el-input v-model="BFIFICdate" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="最新相关 BR IFIC 发布日期:" label-position="left">
                <el-input v-model="roundTripTime" />
              </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="distance" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="距离(km):" label-position="left">
                <el-input v-model="targetAzimuth" />
              </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="targetElevation" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="目标俯仰:" label-position="left">
                <el-input v-model="upstreamSignalSource" />
              </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="upstreamSignalSource" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="上行发射功率:" label-position="left">
                <el-input v-model="upstreamLaunchPower" />
              </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="upstreamFrequencyBand" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="风速(km/kr):" label-position="left">
                <el-input v-model="windSpeed" />
              </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="downstreamSignalSource" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="下行信号频段:" label-position="left">
                <el-input v-model="downstreamFrequencyBand" />
              </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="downstreamReceptionPower" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="类型:" label-position="left">
                <el-input v-model="type" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="INTLDES:" label-position="left">
                <el-input v-model="intldes" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="失效时间:" label-position="left">
                <el-input v-model="expirationTime" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="周期(min):" label-position="left">
                <el-input v-model="period" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="INCL:" label-position="left">
                <el-input v-model="incl" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="12">
              <el-form-item label="RCS:" label-position="left">
                <el-input v-model="rcs" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item label="SITE:" label-position="left">
                <el-input v-model="site" />
              </el-form-item>
            </el-col>
          </el-row>
          <el-row :gutter="20">
            <el-col :span="24">
              <el-form-item label="TLE:" label-position="left">
                <el-input type="textarea" :rows="3" v-model="tle" />
              </el-form-item>
            </el-col>
          </el-row>
        </div>
      </el-form>
    </el-dialog>
  </div>
  <exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template>

<script setup lang="ts">
import { ref } from "vue";
import Pagination from "@/components/pagination/index.vue";
import exportDialog from "@/components/Export/index.vue";
const timeValue = ref("");
const detailVisibleValue = ref(false);
const showDeleteDialog = ref(false);
// SNS Notice ID
const snsId = ref("");
// 主管部门
const department = ref("");
// 目标名称
const targetName = ref("");
// 计划类型
const planType = ref("");
// 是否为同步
const syncType = ref("");
// 同步位置
const syncPosition = ref("");
// 近地点
const perigee = ref("");
// 远地点
const apogee = ref("");
// 最低海拔
const lowestAltitude = ref("");
// 参考主体
const referenceSubject = ref("");
// 最低频率
const lowestFrequency = ref("");
// 最高频率
const highestFrequency = ref("");
// 状态
const status = ref("");
// 有效期
const validityPeriod = ref("");
// 最早使用日期
const earliestUsageDate = ref("");
// 是否确认使用
const isUsed = ref("");
// 是否暂停使用
const isPauseUsed = ref("");
// 记录时间
const recordTime = ref("");
// 是否在国际频率列表中
const IsInTheInternationalFrequencyList = ref("");
// 最早监管日期
const earliestRegulatoryDate = ref("");
// 是否恢复使用
const isRestoreUsed = ref("");
// 最新相关BF IFIC发布日期
const BFIFICdate = ref("");
// 往返光时
const roundTripTime = ref("");
// 距离
const distance = ref("");
// 目标方位
const targetAzimuth = ref("");
// 目标俯仰
const targetElevation = ref("");
// 上行信号来源
const upstreamSignalSource = ref("");
// 上行发射功率
const upstreamLaunchPower = ref("");
// 上行信号频段
const upstreamFrequencyBand = ref("");
// 风速
const windSpeed = ref("");
// 下行信号来源
const downstreamSignalSource = ref("");
// 下行信号频段
const downstreamFrequencyBand = ref("");
// 下行接收功率
const downstreamReceptionPower = ref("");
// 类型
const type = ref("");
// INTLDES
const intldes = ref("");
// 失效时间
const expirationTime = ref("");
// 周期
const period = ref("");
// INCL
const incl = ref("");
// RCS
const rcs = ref("");
// SITE
const site = ref("");
// TLE
const tle = ref("");
const tableData = ref([
  {
    number: "1",
    targetName: "VOYAGER-2",
    stationPosition: "[148.98,-35.22]",
    stationName: "CANBERRA",
    NoradCatId: "2134",
    SNSNoticeId: "90504649",
    dataTime: "2025-06-24 14:35:23",
    recordTime: "2025-06-25 14:35:23",
    tle: "-",
    isSync: "是",
  },
  {
    name: "1",
  },
  {
    name: "1",
  },
  {
    name: "1",
  },
  {
    name: "1",
  },
  {
    name: "1",
  },
  {
    name: "1",
  },
  {
    name: "1",
  },
  {
    name: "1",
  },
  {
    name: "1",
  },
]);
const pageObj = ref({
  total: 10,
  pageSize: 10,
  pageNo: 1,
});
const handleDetails = (row: any) => {
  console.log(row);
  detailVisibleValue.value = true;
};

const getData = () => {
  console.log("getData");
};

const handleClose = () => {
  detailVisibleValue.value = false;
};

const handleExportConfirm = () => {};

const handleExport = () => {
  showDeleteDialog.value = true;
};
</script>

<style scoped lang="scss">
// 调整表单项间距
.detailForm {
  .el-form-item {
    margin-bottom: 7px !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: 1px;
  margin-top: 1%;
}

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

<style>
/* 修改el文本域的背景颜色与边框 */
.el-textarea__inner {
  background-color: #1d5484;
  --el-input-border-color: none;
}

/* 修改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>

<style>
/* 修改弹窗样式 */
.el-dialog {
  background: transparent;
  background-size: 100% 100%;
  background-repeat: no-repeat;
  color: #ffffff;

  .el-dialog__title {
    color: #ffffff;
  }
}

/* 修改表单样式 */
.el-form {
  .el-form-item__label {
    color: #ffffff;
  }
}
</style>
