<template>
	<!-- <div class="text-left p-1 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: 190px" />
					</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" 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: 330px" value-format="YYYY-MM-DD 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: 180.5px" />
				</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="flex justify-left m-l-1%">
		<el-button :type="statusMode === false ? 'primary' : 'danger'" @click="handleRefresh" size="small">{{ statusMode === false ?
			'开始刷新' : '停止刷新' }}</el-button>
	</div>
	<div class="m-t-5" />
	<div>
		<el-table :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 property="dataTime" 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="800px" align-center @close="handleClose" draggable>
			<template #header>
				<div class="text-center font-size-8">
					详情
				</div>
			</template>
			<el-form label-width="94px" size="small" class="px-4">
				<div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="天线名称:" label-position="left">
								<el-input v-model="antennaName" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="风速(km/hr):" label-position="left">
								<el-input v-model="windSpeed" />
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="距离(km):" label-position="left">
								<el-input v-model="distance" />
							</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="antennaStatus" />
							</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="roundTripTime" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="站点名称:" label-position="left">
								<el-input v-model="stationName" />
							</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="targetAzimuth" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="目标俯仰:" label-position="left">
								<el-input v-model="targetElevation" />
							</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="targetDistance" />
							</el-form-item>
						</el-col> -->
					<!-- <el-col :span="12">
							<el-form-item label="风速(km/hr):" 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="upSignalStatus" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="上行信号来源:" label-position="left">
								<el-input v-model="upSignalSource" />
							</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="upSignalFrequencyBand" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="上行发射功率:" label-position="left">
								<el-input v-model="upSignalLaunchPower" />
							</el-form-item>
						</el-col>
						<!-- <el-col :span="12">
							<el-form-item label="下行信号来源:" label-position="left">
								<el-input v-model="downSignalSignalSource" />
							</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="downSignalStatus" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="下行信号来源:" label-position="left">
								<el-input v-model="downSignalSource" />
							</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="downSignalFrequencyBand" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="下行接收功率:" label-position="left">
								<el-input v-model="downSignalReceptionPower" />
							</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="roundTripTime" />
							</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="dataTime" />
							</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="isSuspended" />
							</el-form-item>
						</el-col>
					</el-row> -->
				</div>
			</el-form>
		</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('')
// 存放定时器的id
const timerId = ref<number | null>()
const tableData = ref([])
const pageObj = ref({
	total: 10,
	pageSize: 10,
	pageNo: 1
})
// 查看数据详情的方法
const handleDetails = (row: any) => {
	console.log(row);
	targetName.value = row.targets[0].name
	windSpeed.value = row.windSpeed === '' ? '无' : row.windSpeed
	antennaName.value = row.name
	antennaStatus.value = row.activity
	targetAzimuth.value = row.azimuthAngle
	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 })
	tableData.value = res.data.list[0].dishes
}
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 });
			tableData.value = res.data.list[0].dishes;
		}, 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;
}
</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>