<template>
	<div>
		<div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
		<div class="text-left p-4 ">
			<div class="custom-style flex gap-4">
				<el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
				<el-button type="primary" @click="handleExport">导出</el-button>
				<!-- <el-button type="primary" @click="handleExport">导入</el-button> -->
				<!-- <el-upload ref="upload" class="upload-demo"
					action="https://run.mocky.io/v3/9d059bf9-4660-45f2-925d-ce80ad6c4d15" :limit="1"
					:on-exceed="handleExceed" :auto-upload="false">
					<template #trigger>
						<el-button type="primary">select file</el-button>
					</template>
					<el-button class="ml-3" type="success" @click="submitUpload">
						upload to server
					</el-button>
					<template #tip>
						<div class="el-upload__tip text-red">
							limit 1 file, new file will cover the old file
						</div>
					</template>
				</el-upload> -->
			</div>
		</div>
		<!-- 综合数据页面组件 -->
		<!-- <allDataTab v-if="mode === '综合数据'">
		</allDataTab> -->
		<!-- DSN数据页面组件 -->
		<dsnDataTab v-if="mode === 'DSN数据'">
		</dsnDataTab>
		<!-- ITU数据页面组件 -->
		<ituDataTab v-if="mode === 'ITU数据'">
		</ituDataTab>
		<!-- ST数据页面组件 -->
		<stDataTab v-if="mode === 'ST数据'">
		</stDataTab>
	</div>

	<exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import allDataTab from './components/allDataTab.vue'
import ituDataTab from './components/ituDataTab.vue'
import stDataTab from './components/stDataTab.vue'
import dsnDataTab from './components/dsnData/dsnTab.vue'
import exportDialog from '@/components/Export/index.vue'
import { genFileId } from 'element-plus'
import type { UploadInstance, UploadProps, UploadRawFile } from 'element-plus'
// const 
const mode = ref('DSN数据')
const showDeleteDialog = ref(false)
const sizeOptions = ['DSN数据', 'ITU数据', 'ST数据']
const route = useRoute()
const router = useRouter()
const modeValue = ref<any>('数据展示')
const upload = ref<UploadInstance>()

const handleExceed: UploadProps['onExceed'] = (files) => {
  upload.value!.clearFiles()
  const file = files[0] as UploadRawFile
  file.uid = genFileId()
  upload.value!.handleStart(file)
}

const submitUpload = () => {
  upload.value!.submit()
}
const goToStatus = () => {
	router.push({
		path: '/osStatus/list',
	})
}
const handleExport = () => {
	showDeleteDialog.value = true
}
const handleExportConfirm = () => {

}
onMounted(() => {
	if (route.query.mode) {
		modeValue.value = route.query.mode
		mode.value = modeValue.value
	}
})
</script>

<style scoped lang="scss">
.el-button:focus {
	outline: none;
}

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

.backStyle {
	background-image: url("@/assets/picture/back.png");
	background-size: 100% 100%;
	background-repeat: no-repeat;
	height: 5vh;
	width: 5%;
	display: flex;
	margin-left: 0.8%;
}
</style>
