<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>
                <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: 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">导出最近</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-item>
                    <el-space>
                        <el-button type="primary">查询</el-button>
                    </el-space>
                </el-form-item>
            </el-form>
        </div>
    </div>

    <div class="m-t-5">

    </div>
    <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="name" label="序号" width="55" />
            <el-table-column property="name" label="目标名称" show-overflow-tooltip />
            <el-table-column property="name" label="站点位置" show-overflow-tooltip />
            <el-table-column property="name" label="站点名称" show-overflow-tooltip />
            <el-table-column property="name" label="Norad Cat ID" show-overflow-tooltip />
            <el-table-column property="name" label="SNS Notice ID" show-overflow-tooltip />
            <el-table-column property="name" label="数据时间" show-overflow-tooltip />
            <el-table-column property="name" label="记录时间" show-overflow-tooltip />
            <el-table-column property="name" label="TLE" show-overflow-tooltip />
            <el-table-column property="name" 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" title="详情" center width="765px" align-center @close="handleClose" draggable>
            <el-form label-width="155px" size="small">
                <div class="form-group">
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="SNS Notice ID:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="主管部门:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="目标名称:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="计划/非计划类型:">
                                <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="是否为同步:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="同步位置:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="近地点:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="远地点:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="最低海拔:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="参考主体:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="最低频率:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="最高频率:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="状态:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="有效期:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="最早使用日期:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="是否确认使用:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="是否暂停使用:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="记录时间:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="是否纳入国际频率总表:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="最早监管日期:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="是否恢复使用:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="有效期卫星网络旧名称:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="最新相关 BR IFIC 发布日期:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="往返光时(s):">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="距离(km):">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="目标方位:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="目标俯仰:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="上行信号来源:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="上行发射功率:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="上行信号频段:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="风速(km/kr):">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="下行信号来源:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="下行信号频段:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="下行接收功率:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="类型:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="INTLDES:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="失效时间:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="周期(min):">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="INCL:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="RCS:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="SITE:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="12">
                            <el-form-item label="是否恢复使用:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                        <el-col :span="12">
                            <el-form-item label="有效期卫星网络旧名称:">
                                <el-input />
                            </el-form-item>
                        </el-col>
                    </el-row>
                    <el-row :gutter="20">
                        <el-col :span="24">
                            <el-form-item label="TLE:">
                                <el-input type="textarea" />
                            </el-form-item>
                        </el-col>
                    </el-row>


                </div>
            </el-form>
        </el-dialog>
    </div>


</template>

<script setup lang="ts">
import { ref } from 'vue'
import Pagination from '@/components/pagination/index.vue'
const timeValue = ref('')
const size = ref('综合数据')
const sizeOptions = ['综合数据', 'DSN数据', 'ITU数据', 'ST数据']
const detailVisibleValue = ref(false)
const tableData = ref([
    {
        name: '1',
    },
    {
        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
}
</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: 3px;
    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-image: url("@/assets/picture/dialog1.png");
    background-size: 100% 100%;
    background-repeat: no-repeat;
    color: #ffffff;

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