<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>
    </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;">
          <img src="../assets/images/percent/1-1-1.png" alt="" style="margin-left: 45px;">
          <button 
        class="mao-button" 
        @click="goToPage('/Main')"
      >
        <img src="../assets/images/logo/mao.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;">
            <img src="../assets/images/percent/2-1-1.png" alt="" style="margin-left: 45px;">
            <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;">
            <img src="../assets/images/percent/3-1-1.png" alt="" style="margin-left: 45px;">
            <img src="../assets/images/percent/3-1-2.png" alt="" style="margin-top: 25px;margin-left: 45px;">
        </div>
      </div>
    </body>
    <div>

    </div>
  </div>

</template>

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

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(() => {
  showLoading();
  setTimeout(() => {
    hideLoading();
  }, 1000);
});

// 监听路由变化，跳转页面时显示 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);
};

</script>

<style scoped>
.main {
  width: 1920px;
  height: 1080px;
  background-image: url("../assets/images/bci.png");
  background-size: cover;
  background-repeat: no-repeat;
  background-position: center;
  background-color: #02131F;
}

.search {
  width: 530px;
  height: 48px;
  margin-left: 695px;
  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: 50px;
}

.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; 
}
</style>