<template>
  <div class="text-left">
    <!-- 搜索工具栏 -->
    <TableSearch>
      <div class="form-content">
        <div class="left">
          <div>
            <span style="color: white">SNS Notice ID：</span>
            <el-input placeholder="请输入ID" v-model="searchTargetId" style="width: 170.5px" />
          </div>
          <div>
            <span style="color: white">目标名称：</span>
            <el-input placeholder="请输入目标名称" v-model="searchTargetName" style="width: 180px" />
          </div>
          <div>
            <span style="color: white">采集时间：</span>
            <el-config-provider :locale="zhCn">
              <el-date-picker type="datetimerange" format="YYYY-MM-DD HH:mm:ss" v-model="searchTimeValue"
                start-placeholder="开始时间" style="width: 400px" 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>
          </div>
        </div>
        <div class="btns">
          <el-button plain type="primary" @click="getData">查询</el-button>
          <el-button plain="" @click="resetForm">重置</el-button>
        </div>
      </div>
    </TableSearch>
  </div>

  <!-- ITU数据表格 -->
  <div class="m-t-5" />
  <div class="itu-table">
    <el-table :data="tableData" style="width: 100%" border :row-style="{ height: '45px' }"
      :header-cell-style="{ textAlign: 'center' }" :cell-style="{ textAlign: 'center' }" v-loading="tableLoading"
      element-loading-background="rgba(48, 65, 86, 0.7)">
      <!-- <el-table-column type="selection" width="40" /> -->
      <el-table-column property="number" label="序号" width="53" type="index" />
      <el-table-column property="item.ntc_id" label="SNS Notice ID" show-overflow-tooltip />
      <el-table-column min-width="100" property="identity.adm_name_e" label="主管部门" show-overflow-tooltip />
      <el-table-column property="identity.sat_name" label="目标名称" show-overflow-tooltip />
      <el-table-column property="item.plan_txt" label="计划/非计划类型" show-overflow-tooltip />
      <el-table-column property="identity.ntc_type" label="是否为同步" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.identity.ntc_type === 'G' ? '是' : '否' }}
        </template>
      </el-table-column>
      <el-table-column property="identity.long_nom" label="同步位置" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.identity.long_nom === null ? '-' : scope.row.identity.long_nom }}
        </template>
      </el-table-column>
      <el-table-column property="item.freq_min" label="最低频率" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.item.freq_min === null ? '-' : scope.row.item.freq_min }}
        </template>
      </el-table-column>
      <el-table-column property="item.freq_max" label="最高频率" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.item.freq_max === null ? '-' : scope.row.item.freq_max }}
        </template>
      </el-table-column>
      <el-table-column property="regulatory_status.active_status" label="状态" show-overflow-tooltip />
      <el-table-column property="regulatory_status.prd_valid" label="有效期" show-overflow-tooltip />
      <el-table-column property="regulatory_status.d_reg_limit" label="最早使用日期" show-overflow-tooltip>
        <template #default="scope">
          {{ scope.row.regulatory_status.d_reg_limit === null ? '-' : scope.row.regulatory_status.d_reg_limit }}
        </template>
      </el-table-column>
      <el-table-column min-width="100" property="regulatory_status.f_biu_grps" label="是否确认使用" show-overflow-tooltip />
      <!-- <el-table-column property="regulatory_status.resumption_list" width="140" label="是否暂停使用" show-overflow-tooltip /> -->
      <el-table-column width="160" property="crawl_time" 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>

  <!-- 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 :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">{{ department }}({{ departmentDetail }})</span>
            </div>
            <div class="info-item">
              <span class="item-title">网络组织：</span>
              <span class="item">{{ ntwkOrg ?? '--' }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">计划/非计划类型：</span>
              <span class="item">{{ planType }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">卫星网络类型：</span>
              <span class="item">{{ ntwkType }}</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">{{ status }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">是否纳入国际频率总表：</span>
              <span class="item">{{ IsInTheInternationalFrequencyList }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">有效期：</span>
              <span class="item">{{ validityPeriod }} 年</span>
            </div>
            <div class="info-item">
              <span class="item-title">是否确认使用：</span>
              <span class="item">{{ isUsed }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">是否暂停使用：</span>
              <span class="item">{{ isPauseUsed }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">最早监管日期：</span>
              <span class="item">{{ earliestRegulatoryDate }}</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">{{ perigee }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">远地点：</span>
              <span class="item">{{ apogee }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">最低频率：</span>
              <span class="item">{{ lowestFrequency }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">最高频率：</span>
              <span class="item">{{ highestFrequency }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">最低海拔：</span>
              <span class="item">{{ lowestAltitude }}</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">{{ isNtcType === 'G' ? '是' : '否' }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">同步位置：</span>
              <span class="item">{{ syncPosition }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">参考主体：</span>
              <span class="item">{{ referenceSubject }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">是否恢复使用：</span>
              <span class="item">{{ isRestoreUsed }}</span>
            </div>
            <div class="info-item">
              <span class="item-title">最新相关 BR IFIC 发布日期：</span>
              <span class="item">{{ BFIFICdate }}</span>
            </div>
          </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 { getItuList, getItuDetail } from '@/api/spiderData'
import { ElMessage } from 'element-plus'
import TableSearch from '@/components/TableSearch.vue'
// 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 searchTargetId = ref('')
// 删除对话框的显示状态
const showDeleteDialog = ref(false)
// 详情对话框的显示状态
const detailVisibleValue = ref(false)
// SNS Notice ID
const snsId = ref('')
// 主管部门
const department = ref('')
//详细主管部门
const departmentDetail = ref('')
//网络组织
const ntwkOrg = ref('')
//卫星网络类型
const ntwkType = 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 isNtcType = 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('')
// 有效期卫星网络旧名称
const validityPeriodSatelliteNetworkOldName = ref('')
// 最新相关 BR IFIC 发布日期
const BFIFICdate = ref('')
// 表格数据
const tableData = ref([])
// 分页参数
const pageObj = ref({
  total: 0,
  pageSize: 10,
  pageNo: 1
})
// 查看数据详情的方法
const handleDetails = async (id: any) => {
  // 获取数据并赋值
  const res = await getItuDetail({ id: id._id })
  snsId.value = res.data.item.ntc_id
  department.value = res.data.item.adm
  departmentDetail.value = res.data.item.notifying_adm_tooltip
  ntwkOrg.value = res.data.item.ntwk_org
  ntwkType.value = res.data.item.notice_type_tooltip
  targetName.value = res.data.identity.sat_name
  planType.value = res.data.identity.plan_type
  syncType.value = res.data.identity.ntc_type
  isNtcType.value = res.data.item.ntc_type
  syncPosition.value = res.data.identity.long_nom === null ? '--' : res.data.identity.long_nom
  perigee.value = res.data.item.minPerigee === null ? '--' : res.data.item.minPerigee
  apogee.value = res.data.item.maxApog === null ? '--' : res.data.item.maxApog
  lowestAltitude.value = res.data.item.minAltitude === null ? '--' : res.data.item.minAltitude
  referenceSubject.value = res.data.item.ref_body === null ? '--' : res.data.item.ref_body
  lowestFrequency.value = res.data.item.freq_min === null ? '--' : res.data.item.freq_min
  highestFrequency.value = res.data.item.freq_max === null ? '--' : res.data.item.freq_max
  status.value = res.data.regulatory_status.active_status
  validityPeriod.value = res.data.regulatory_status.prd_valid
  earliestUsageDate.value =
    res.data.regulatory_status.d_reg_limit === null ? '--' : res.data.regulatory_status.d_reg_limit
  isUsed.value = res.data.regulatory_status.f_biu_grps
  isPauseUsed.value = res.data.regulatory_status.resumption_list
  recordTime.value = res.data.crawl_time
  IsInTheInternationalFrequencyList.value = res.data.regulatory_status.mifr
  earliestRegulatoryDate.value = res.data.regulatory_status.d_inuse_list
  isRestoreUsed.value = res.data.regulatory_status.resumption_list
  validityPeriodSatelliteNetworkOldName.value = res.data.regulatory_status.old_satellite_network_name
  BFIFICdate.value = res.data.regulatory_status.d_wic === null ? '--' : res.data.regulatory_status.d_wic
  detailVisibleValue.value = true
}

//表单loading标记
const tableLoading = ref(false)
// 获取itu数据列表的方法
//重置搜索条件
const resetForm = () => {
  // 清空
  searchTargetName.value = ''
  searchTargetId.value = ''
  searchTimeValue.value = ''
  pageObj.value.pageNo = 1
  // 重新获取数据
  getData()
}
// 获取itu数据列表的方法
const getData = async () => {
  tableLoading.value = true
  // 发送请求获取数据并赋值
  const res = await await getItuList({
    sat_name: searchTargetName.value,
    ntc_id: searchTargetId.value,
    times: searchTimeValue.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: 20px !important;
  }
}

/* 工具栏样式 */
.toolbarStyle {
  background-image: url('@/assets/picture/box3.png');
  background-size: 100% 100%;
  background-repeat: no-repeat;
}

.itu-table {
  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;
}

/* 表格样式 */
.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;
}

.left {
  display: flex;
  gap: 10px;
}

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

.item-title {
  color: #b0dfff;
}

.item {
  color: #eee;
}

.form-content {
  display: flex;
  height: 80px;
  justify-content: space-between;
  align-items: center;
  padding: 0 30px;
}
</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>
