<template>
  <div class="main">

    <header>
      <img src="../assets/images/head/mainhead.png" alt="" style="width: 100%;">
      <div class="search">
        <!-- 使用 el-autocomplete 组件替换原输入框 -->
        <input
          type="text"
          placeholder="请输入事件类别关键词"
          style="
            width:400px;
            height: 36px;
            margin-left: 36px;
            margin-top: 6px;
            border: none;
            background-image: none;
            background-color: transparent;
            outline: none;
            color: #FFFFFF;
            font-family: OPPOSans;
            font-weight: 300;
            font-size: 18px;
          "
          v-model="inputValue"
          @input="handleInput"
        >
        <ul v-if="suggestions.length > 0" class="suggestions">
          <li v-for="(item, index) in suggestions" :key="index" @click="selectSuggestion(item)">
            {{ item.value }}
          </li>
        </ul>
        <button 
          class="search-button" 
          @click="handleSearch"
        >
          <img src="../assets/images/logo/search.png" alt="" style="
            width: 36px; 
            display: block;
          ">
        </button>

      </div>
        <div class="realtime-clock" style="position: absolute; top: 20px; right: 20px; color: #1EA0FD; font-family: LCD2; font-size: 18px;">
        {{ currentTime }}
      </div>

    </header>

    <body>
      <div class="container">
        <div class="main1">
          <img src="../assets/images/head/zhengzhi.png" alt="" style="margin-top: -12px;">
          <img src="../assets/images/percent/1.png" alt="" style="width: 157px;margin-left:75px;margin-top: 15px;">
          <img src="../assets/images/percent/1-1.png" alt=""
            style=" width: 180px;margin-top: 30px;margin-right: 50px;float: right;">
          <img src="../assets/images/percent/1-2.png" alt=""
            style=" width: 180px;margin-top: -70px;margin-right: 50px;float: right;">
          <!-- 【修改点】点击时调用不带参数的 openModal -->
          <img 
            :src="image111" 
            alt="可点击图片" 
            style="margin-left: 45px; cursor: pointer;"
            @click="openModal()"
          >
          <button 
            class="mao-button"
            :class="{ active: route.path === '/Main' }"
            @click="goToPage('/Main')"
          >
            <img src="../assets/images/logo/mainmao.png" alt="" style="
              display: block;
              width: 100%;
              height: 100%;
              object-fit: cover;
            ">
          </button>
          <img src="../assets/images/percent/1-1-2.png" alt="" style="margin-top: 25px;margin-left: 45px;">
        </div>
        <div class="main2">
          <img src="../assets/images/head/jingji.png" alt="" style="margin-top: -12px;">
          <img src="../assets/images/percent/2.png" alt="" style="width: 157px;margin-left:75px;margin-top: 15px;">
          <img src="../assets/images/percent/2-1.png" alt=""
            style=" width: 180px;margin-top: 30px;margin-right: 50px;float: right;">
          <img src="../assets/images/percent/2-2.png" alt=""
            style=" width: 180px;margin-top: -70px;margin-right: 50px;float: right;">
            <!-- 【修改点】点击时调用不带参数的 openModal -->
            <img 
              :src="image211" 
              alt="可点击图片" 
              style="margin-left: 45px; cursor: pointer;"
              @click="openModal()"
            >
            <img src="../assets/images/percent/2-1-2.png" alt="" style="margin-top: 25px;margin-left: 45px;">
        </div>
        <div class="main3">
          <img src="../assets/images/head/shehui.png" alt="" style="margin-top: -12px;">
          <img src="../assets/images/percent/3.png" alt="" style="width: 157px;margin-left:75px;margin-top: 15px;">
          <img src="../assets/images/percent/3-1.png" alt=""
            style=" width: 180px;margin-top: 30px;margin-right: 50px;float: right;">
          <img src="../assets/images/percent/3-2.png" alt=""
            style=" width: 180px;margin-top: -70px;margin-right: 50px;float: right;">
            <!-- 【修改点】点击时调用不带参数的 openModal -->
            <img 
              :src="image311" 
              alt="可点击图片" 
              style="margin-left: 45px; cursor: pointer;"
              @click="openModal()"
            >
            <img src="../assets/images/percent/3-1-2.png" alt="" style="margin-top: 25px;margin-left: 45px;">
        </div>
      </div>
    </body>

    <!-- 图片弹窗/模态框 -->
    <div v-if="isModalVisible" class="modal-overlay" @click="closeModal">
      <div class="modal-content" @click.stop>
        <span class="modal-close-button" @click="closeModal">×</span>
        <img :src="modalImageSrc" alt="Modal Image" class="modal-image">
      </div>
    </div>
  </div>

</template>

<script setup>
import { useRouter } from 'vue-router';
import { ref, onMounted,onUnmounted } from 'vue';
import { useRoute } from 'vue-router';
import { ElLoading } from 'element-plus';

// 【新增点】导入统一的弹窗图片
import tanchuangImage from '../assets/images/tanchuang.png'; 

// 导入页面上显示的图片
import image111 from '../assets/images/percent/1-1-1.png';
import image211 from '../assets/images/percent/2-1-1.png';
import image311 from '../assets/images/percent/3-1-1.png';

const route = useRoute();

// 弹窗相关状态
const isModalVisible = ref(false);
const modalImageSrc = ref('');

// 【修改点】打开弹窗的函数，固定显示 tanchuang.png
const openModal = () => {
  modalImageSrc.value = tanchuangImage; // 总是使用 tanchuang.png
  isModalVisible.value = true;
};

// 关闭弹窗的函数
const closeModal = () => {
  isModalVisible.value = false;
};


// 实时时钟实现
const currentTime = ref('');

// 格式化时间为 HH:MM:SS 格式
const formatTime = () => {
  const now = new Date();
  return now.toLocaleTimeString('zh-CN', {
    hour: '2-digit',
    minute: '2-digit',
    second: '2-digit',
    hour12: false
  });
};

// 定时器存储
const timers = [];


const router = useRouter();
let loadingInstance = null;

// 显示 Loading 组件
const showLoading = () => {
  loadingInstance = ElLoading.service({
    lock: true,
    text: '加载中...',
    background: 'rgba(0, 0, 0, 0.7)'
  });
};

// 隐藏 Loading 组件
const hideLoading = () => {
  if (loadingInstance) {
    loadingInstance.close();
  }
};

// 页面加载完成后，显示 Loading 组件，一秒后隐藏
onMounted(() => {
      // 初始化时钟并每秒更新
  currentTime.value = formatTime();
  const clockTimer = setInterval(() => {
    currentTime.value = formatTime();
  }, 1000);
  timers.push(clockTimer);
});

// 监听路由变化，跳转页面时显示 Loading 组件，一秒后隐藏
router.afterEach(() => {
  showLoading();
  setTimeout(() => {
    hideLoading();
  }, 1000);
});

const handleSearch = () => {
  if (inputValue.value === '南海争端系列舆情事件') {
    router.push('/Main');
  } else {
   alert('请输入正确的事件类别关键词');
  }
};

const goToPage = (pagePath) => {
  router.push(pagePath); 
};

const inputValue = ref('');
const suggestions = ref([]);

const allOptions = [
  { value: '南海争端系列舆情事件', link: './Main' },
  { value: '美国大选系列舆情事件', link: '' },
  { value: '涉台系列舆情事件', link: '' },
  { value: '俄乌冲突系列舆情事件', link: '' },
  { value: '中美贸易战系列舆情事件', link: '' },

  { value: '全球供应链系列舆情事件', link: ''  },
  { value: '虚拟货币系列舆情事件', link: '' },
  { value: '企业信用危机系列舆情事件', link: '' },
  { value: '金融市场动荡系列舆情事件', link: '' },
  { value: '校园暴力系列舆情事件', link: '' },

  { value: '食品安全系列舆情事件', link: '' },
  { value: '公共卫生系列舆情事件', link: '' },
  { value: '教育公平系列舆情事件', link: '' },
  { value: '劳资纠纷系列舆情事件', link: '' },
  { value: '科技进步系列舆情事件', link: '' },
];

const handleInput = () => {
  if (inputValue.value) {
    suggestions.value = allOptions.filter((item) =>
      item.value.toLowerCase().includes(inputValue.value.toLowerCase())
    );
    console.log('过滤后的建议项:', suggestions.value); 
  } else {
    suggestions.value = [];
  }
};

const selectSuggestion = (item) => {
  inputValue.value = item.value;
  suggestions.value = [];
  console.log('选中项:', item);
};
onUnmounted(() => {
  // 清理定时器
  timers.forEach(timer => {
    if (timer) {
      clearInterval(timer);
      clearTimeout(timer);
    }
  });
});
</script>

<style scoped>
/* 弹窗样式 */
.modal-overlay {
  position: fixed;
  top: 0;
  left: 0;
  width: 100vw;
  height: 100vh;
  background-color: rgba(0, 0, 0, 0.8);
  display: flex;
  justify-content: center;
  align-items: center;
  z-index: 9999;
  cursor: pointer;
}

.modal-content {
  position: relative;
  /* 【修改点】移除了白色背景和内边距，让弹窗图片本身作为背景 */
  background-color: transparent; 
  border-radius: 5px;
  cursor: default;
  box-shadow: 0 4px 15px rgba(0,0,0,0.2);
}
    
.modal-image {
  max-width: 80vw;
  max-height: 80vh;
  display: block;
}

/* 关闭按钮样式 */
.modal-close-button {
  position: absolute;
  top: 10px; /* 根据tanchuang.png的设计调整位置 */
  right: 15px; /* 根据tanchuang.png的设计调整位置 */
  font-size: 2.5rem;
  color: #ccc; /* 调整颜色使其在弹窗图片上更清晰 */
  cursor: pointer;
  line-height: 1;
  font-weight: bold;
  transition: color 0.2s;
  text-shadow: 0 0 5px black; /* 添加文字阴影使其更突出 */
}
.modal-close-button:hover {
  color: #fff;
}


/* 原有样式 */
.mao-button {
  /* 保留原有样式 */
  transition: all 0.3s ease;
  border-color: red;
}

.mao-button.active {
  background-color: #409eff; /* 蓝色高亮 */
  color: rgb(252, 5, 5);
  box-shadow: 0 0 8px rgba(64, 158, 255, 0.6);
  border-color: #f80202;
}

.mao-button:hover:not(.active) {
  border-color: #409eff;
  color: #409eff;
}
</style>

<style scoped>
html, body {
  margin: 0;
  padding: 0;
  overflow-x: hidden; /* 防止出现水平滚动条 */
}
.main {
  height: 1080px;
  background-image: url("../assets/images/bci.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #02131F;
}

.time span{
font-family: LCD2;
font-weight: 400;
font-size: 18px;
line-height: 100%;
letter-spacing: 9.5%;
color: #1EA0FD;
float: right;
margin-right: 90px;
margin-top: -148px;
}
.search {
  width: 530px;
  height: 48px;
  margin-left: 680px;
  margin-top: -50px;
  border-radius: 58px;
  border-width: 1px;
  background-image: linear-gradient(to top, #051634, #081D40, #04285C);
  border: 1px solid;
  border-image: linear-gradient(to right, #214A8E, #214A8E00);
  position: relative; 
}
.search-button {
  float: right;
  border: none;
  padding: 0;
  background: transparent;
  width: auto;
  height: auto;
  margin-top: 6px;
  margin-right: 6px;
  cursor: pointer;
}
.suggestions {
  position: absolute;
  width: 400px;
  margin-left: 36px;
  padding: 0;
  list-style-type: none;
  color: rgb(49, 52, 54);
  background-color: rgba(222, 241, 250, 0.9);
  border: 1px solid ;
  border-radius: 10px;
  max-height: 200px;
  overflow-y: auto;
  z-index: 1000;
}

.suggestions li {
  padding: 8px;
  cursor: pointer;
}

.suggestions li:hover {
  background-color:rgba(186, 230, 250, 0.9);
}
.container {
  display: flex;
  gap: 100px;
  /* 增加 div 之间的间距 */
  margin-top: 50px;
  margin-left: 25px;
  margin-right: 25px;
}

.main1,
.main2,
.main3 {
  width: 540px;
  height: 810px;
  background-color: #04142166;
  border-style: solid;
  border-width: 1px;
  border-image: linear-gradient(to bottom, #214A8E00, #214A8E) 1;
  background-image: linear-gradient(to bottom, #0A1A344D, #0A1A34);
  border-radius: 2px;
  box-shadow: 0px 0px 18px 0px #0A2E55 inset;
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
}
.mao-button {
  float: right;
  border: none;
  padding: 0;
  background: transparent;
  width: auto;
  height: auto;
  margin-top: -136.4px;
  margin-right: 55.3px;
  cursor: pointer;
  /* 添加 z-index 属性 */
  position: relative; 
  z-index: 1001; 
  
}
/* 定义呼吸效果关键帧 */
@keyframes breathe {
  0% {
    opacity: 0.4;
    transform: scale(0.9);
  }
  50% {
    opacity: 1;
    transform: scale(1.15);
  }
  100% {
    opacity: 0.4;
    transform: scale(0.9);
  }
}
</style>