<template>
  <div>
    <!-- 页面标题 -->
    <MenuTitle title="数据展示" subtitle="Data Display" />
    <div class="backStyle" v-if="route.query.jump === 'yes'" @click="goToStatus" />
    <!-- 导出按钮 -->
    <div class="segment-content">
      <div class="custom-style flex justify-between">
        <div class="flex gap-4">
          <el-segmented v-model="mode" :options="sizeOptions" style="margin-bottom: 1rem" size="default" />
          <el-button type="primary" @click="handleExport">导出</el-button>
        </div>
        <el-button plain @click="handleExportRecord">导出记录</el-button>
      </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>
    <!-- ESA数据页面组件 -->
    <esDataTab v-if="mode === 'ESA数据'"></esDataTab>
    <!-- 导出弹窗组件 -->
    <exportDialog v-model:dialogVisible="showDeleteDialog" @confirm="handleExportConfirm" />
    <!-- 导出记录弹窗组件 -->
    <exportRecord ref="expRec" />
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted, watch, h, onUnmounted } from 'vue'
import { useRoute } from 'vue-router'
import { useRouter } from 'vue-router'
import ituDataTab from './components/ituDataTab.vue'
import stDataTab from './components/stDataTab.vue'
import dsnDataTab from './components/dsnData/dsnTab.vue'
import esDataTab from './components/esDataTab.vue'
import exportDialog from '@/components/Export/index.vue'
import MenuTitle from '@/components/MenuTitle.vue'
import exportRecord from './components/exportRecord.vue'
import { ElNotification } from 'element-plus'

// 数据展示模式
const mode = ref(sessionStorage.getItem('dataDisplayMode') || 'DSN数据')
// 删除弹窗显示状态
const showDeleteDialog = ref(false)
// 数据源选择器选项配置
const sizeOptions = ['DSN数据', 'ITU数据', 'ST数据', 'ESA数据']
// 路由对象
const route = useRoute()
const router = useRouter()
// 路由参数中的mode值，用于设置初始数据展示模式
const modeValue = ref<any>('数据展示')
//导出记录组件引用
const expRec = ref<any>(null)
// 跳转到状态页面
const goToStatus = () => {
  router.push({
    path: '/osStatus/list'
  })
}
// 打开导出弹窗的方法
const handleExport = () => {
  showDeleteDialog.value = true
}
// 消息通知
const noticeImpl = ref()
const handleExportConfirm = () => {}
// 组件挂载时显示消息通知
onMounted(() => {
  if (route.query.mode) {
    modeValue.value = route.query.mode
    mode.value = modeValue.value
  }
  // 显示消息通知
  noticeImpl.value = ElNotification({
    title: '温馨提示',
    message: h('i', { style: 'color: teal' }, '爬虫数据可导出至本地，请点击【导出】按钮执行数据导出'),
    duration: 0
  })
})

//导出记录
const handleExportRecord = () => {
  expRec.value.openDialog()
}

// 监听mode变化，更新sessionStorage中的数据展示模式
watch(
  mode,
  (newVal) => {
    sessionStorage.setItem('dataDisplayMode', newVal)
    modeValue.value = sessionStorage.getItem('dataDisplayMode') || 'DSN数据'
  },
  {
    immediate: true
  }
)
// 组件卸载时关闭消息通知
onUnmounted(() => {
  if (noticeImpl.value) {
    noticeImpl.value.close()
  }
})
</script>

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

.title {
  text-align: left;
  font-size: 18px;
  font-weight: 500;
  color: white;
}

.low-titme {
  color: #ccc;
  text-align: left;
  margin-left: 20px;
}
.divider {
  margin-top: 15px;
}

/* 文字样式 */
.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%;
}

.segment-content {
  padding: 10px 10px 0 10px;
}
</style>
