<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" format="YYYY-MM-DD HH:mm:ss" start-placeholder="开始时间"
						end-placeholder="结束时间" 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>
				<br></br>
				<el-form-item>
					<el-text class="mx-1">NORAD CAT ID:</el-text>
				</el-form-item>
				<el-form-item>
					<el-input placeholder="请输入" style="width: 188.5px" />
				</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: '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" />
			<el-table-column property="NoradCatID" label="Norad Cat ID" show-overflow-tooltip />
			<el-table-column property="targetName" label="目标名称" show-overflow-tooltip />
			<el-table-column property="intleds" label="INTLDES" show-overflow-tooltip />
			<el-table-column property="type" label="类型" show-overflow-tooltip />
			<el-table-column property="belongCountry" label="所属国家" width="82" show-overflow-tooltip />
			<el-table-column property="runningTime" label="运行时间" show-overflow-tooltip />
			<el-table-column property="site" label="SITE" show-overflow-tooltip />
			<el-table-column property="failTime" label="失效时间" show-overflow-tooltip />
			<el-table-column property="period" label="周期" show-overflow-tooltip />
			<el-table-column property="perigee" label="近地点" show-overflow-tooltip />
			<el-table-column property="apogee" label="远地点" show-overflow-tooltip />
			<el-table-column property="incl" label="INCL" show-overflow-tooltip />
			<el-table-column property="rcs" label="RCS" show-overflow-tooltip />
			<el-table-column property="tle" label="TLE" 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="70px" size="small" class="px-4">
				<div>
					<el-row :gutter="20">
						<el-col :span="12">
							<el-form-item label="NoradCatID:" label-position="left">
								<el-input v-model="NoradCatID" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="目标名称:" label-position="left">
								<el-input v-model="targetName" />
							</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="intleds" />
							</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="运行时间:" label-position="left">
								<el-input v-model="workTime" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="失效时间:" label-position="left">
								<el-input v-model="failTime" />
							</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="recordTime" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="所属国家:" label-position="left">
								<el-input v-model="belongCountry" />
							</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="周期(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 showDeleteDialog = ref(false)
const timeValue = ref('')
const detailVisibleValue = ref(false)
// NoradCatID
const NoradCatID = ref('')
// 目标名称
const targetName = ref('')
// INTLDES
const intleds = ref('')
// 类型
const type = ref('')
// 运行时间
const workTime = ref('')
// 失效时间
const failTime = ref('')
// 记录时间
const recordTime = ref('')
// 所属国家
const belongCountry = ref('')
// 近地点
const perigee = ref('')
// 远地点
const apogee = 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',
		NoradCatID: '1358',
		targetName: 'SL-1 R/B',
		intleds: '1957-001A',
		type: 'ROCKET BODY',
		belongCountry: 'RUS',
		runningTime: '1957-10-14',
		site: 'TTMTR',
		failTime: '1958-12-01',
		period: '96.19',
		perigee: '214',
		apogee: '938',
		incl: '65.14',
		rcs: 'LARGE',
		tle: '-',
	},
	{
		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-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>