<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="请输入" v-model="searchTargetName" style="width: 180px" />
					</div>
				</el-form-item>
				<el-form-item>
					<el-text class="mx-1" >获取时间:</el-text>
				</el-form-item>
				<el-form-item>
					<el-date-picker type="datetimerange" format="YYYY-MM-DD HH:mm:ss" v-model="searchTimeValue"
						start-placeholder="开始时间" style="width: 330px" end-placeholder="结束时间"
						date-format="YYYY/MM/DD ddd" time-format="A hh:mm:ss" value-format="YYYY-MM-DD HH:mm:ss" />
				</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="请输入" v-model="searchTargetId" style="width: 170.5px" />
				</el-form-item>
				<el-form-item>
					<el-space>
						<el-button type="primary" @click="handleSearch">查询</el-button>
						<el-button type="primary" @click="getData">重置表格</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: '42.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="item.ntc_id" label="SNS Notice ID" show-overflow-tooltip />
			<el-table-column 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.minPerigee" label="近地点" show-overflow-tooltip>
				<template #default="scope">
					{{ scope.row.item.minPerigee === null ? '-' : scope.row.item.minPerigee }}
				</template>
			</el-table-column>
			<el-table-column property="item.maxApog" label="远地点" show-overflow-tooltip>
				<template #default="scope">
					{{ scope.row.item.maxApog === null ? '-' : scope.row.identity.maxApog }}
				</template>
			</el-table-column>
			<el-table-column property="item.minAltitude" label="最低海拔" show-overflow-tooltip>
				<template #default="scope">
					{{ scope.row.item.minAltitude === null ? '-' : scope.row.item.minAltitude }}
				</template>
			</el-table-column>
			<el-table-column property="item.ref_body" label="参考主体" show-overflow-tooltip>
				<template #default="scope">
					{{ scope.row.item.ref_body === null ? '-' : scope.row.item.ref_body }}
				</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 property="regulatory_status.f_biu_grps" label="是否确认使用" show-overflow-tooltip />
			<el-table-column property="regulatory_status.resumption_list" 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-input v-model="planType" />
							</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="最新相关 BR IFIC 发布日期:" 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="top">
								<el-input v-model="BRIFICdate" />
							</el-form-item>
						</el-col>
					</el-row> -->
				</div>
			</el-form>
		</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, deleteItuData } from '@/api/spiderData'
import { ElMessage } from 'element-plus'

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 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('')
// 有效期卫星网络旧名称
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 })
	console.log(res);
	snsId.value = res.data.item.ntc_id
	department.value = res.data.item.adm
	targetName.value = res.data.identity.sat_name
	planType.value = res.data.identity.plan_type
	syncType.value = res.data.identity.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

}
// 获取itu数据列表的方法
const getData = async () => {
	const res = await getItuList({ page: pageObj.value.pageNo, size: pageObj.value.pageSize })
	searchTargetName.value = ''
	searchTargetId.value = ''
	searchTimeValue.value = ''
	pageObj.value.total = res.data.total
	tableData.value = res.data.list
}
const handleClose = () => {
	detailVisibleValue.value = false
}
const handleSearch = async () => {
	if(searchTargetName.value === '' && searchTargetId.value === '' && searchTimeValue.value === ''){
		ElMessage.warning('请输入搜索内容')
		return
	}
	const res = 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
}
onMounted(() => {
	getData()
})
</script>

<style scoped lang="scss">
// 调整表单项间距
.detailForm {
	// background-image: url("@/assets/picture/dialog1.png");
	// background-size: 100% 100%;
	// background-repeat: no-repeat;
	.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;
}

/* 表格样式 */
.formStyle {
	display: flex;
	justify-content: space-around;
	padding: 3px;
	margin-top: 1%;
}

/* 文字样式 */
.el-text {
	color: #FFFFFF;
}

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