<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->
<template>
  <div class="min-h-screen bg-gray-100">
    <div class="mx-auto">
      <!-- Hero区域 -->
      <div class="relative h-[350px] mb-8 overflow-hidden">
        <div class="absolute inset-0">
          <!-- <img
            src="https://ai-public.mastergo.com/ai/img_res/b69747ed7038cf3b7a5da874d0fed0ab.jpg"
            class="w-full h-full object-cover object-top"
            alt="banner"
          /> -->
          <img :src="wmyhsHeaderBg" class="w-full h-full object-cover object-top" />

          <div class="absolute inset-0 bg-gradient-to-r from-blue-900/80 via-blue-900/30 to-transparent"></div>
        </div>

        <div class="backdrop-blur-sm rounded-lg cursor-pointer flex justify-end items-end w-auto top-0 right-0"
          @click="goToHome()">
          <p class="text-white font-bold pt-5 pr-5 text-[20px]">
            主办：{{ inject("VITE_APP_TITLE") }}
          </p>
        </div>

        <div class="relative flex-col justify-center h-full px-12 ms-24 mt-8">
          <!-- 顶部区域 -->
          <div class="mb-5">
            <h2 @click="goToHome()" class="text-6xl font-bold text-white cursor-pointer">
              网民
              <span class="text-7xl" style="font-family: 'STXingkai', 'KaiTi', cursive">有话说</span>
            </h2>
          </div>
          <p class="text-xl text-gray-200 mb-6">
            用真诚的态度和专业的服务，构建政民互动的新平台
          </p>
          <div class="flex items-center gap-4">
            <el-input v-model="searchQuery" placeholder="搜索您关注的问题..." class="!w-[360px] custom-input"
              @keyup.enter="handleSearch">
              <template #prefix>
                <el-icon>
                  <Search />
                </el-icon>
              </template>
            </el-input>

            <button
              class="flex items-center px-4 py-[9px] bg-blue-500 text-white rounded-[10px] hover:bg-blue-600 transition-colors whitespace-nowrap"
              style="border: none" @click="handleSearch">
              <el-icon class="mr-1">
                <Search />
              </el-icon>
              <span>搜索</span>
            </button>
            <button @click="iMessageClick"
              class="flex items-center px-6 py-[9px] bg-white text-blue-800 rounded-[10px] hover:bg-blue-50 transition-colors !rounded-button whitespace-nowrap"
              style="border: none">
              <span>我要留言</span>
              <el-icon class="ml-1">
                <ArrowRight />
              </el-icon>
            </button>
          </div>
        </div>
      </div>

      <router-view></router-view>
      <Footer></Footer>

      <!-- 页脚 -->
      <!-- <footer class="footer-footer py-12 mt-8">
        <div class="w-[1440px] mx-auto px-6">
          <div class="grid grid-cols-3 gap-8 mb-8">
            <div>
              <h4 class="font-bold text-lg mb-4 text-white">联系我们</h4>
              <p class="text-gray-500">
                地址：山西省太原市迎泽区迎泽大街 369 号
              </p>
              <p class="text-gray-500">电话：0755-12345678</p>
              <p class="text-gray-500">邮箱：suggestions@gov.cn</p>
            </div>

            <div>
              <h4 class="font-bold text-lg mb-4 text-white">主办单位</h4>
              <p class="text-gray-500 mb-2">太原市互联网应急指挥和举报中心</p>
            </div>

            <div v-if="0">
              <h4 class="font-bold text-lg mb-4 text-white">关注我们</h4>
              <div class="flex space-x-4">
                <a href="#" class="text-gray-500 hover:text-blue-600"
                  ><el-icon><Position /></el-icon
                ></a>
                <a href="#" class="text-gray-500 hover:text-blue-600"
                  ><el-icon><Iphone /></el-icon
                ></a>
                <a href="#" class="text-gray-600 hover:text-blue-600"
                  ><el-icon><Message /></el-icon
                ></a>
              </div>
            </div>
          </div>
          <div class="border-t pt-8 text-center text-gray-500">
            <p class="mb-2">
              Copyright © 2024 太原市互联网应急指挥和举报中心 版权所有
            </p>
            <p>晋ICP备12345678号-1 | 晋公网安备 14010002000001号</p>
          </div>
        </div>
      </footer> -->
    </div>
  </div>
</template>
<script lang="ts" setup>
import { ref, inject } from "vue";
import {
  ChatDotRound,
  Comment,
  ArrowRight,
  Search,
  Tickets,
  StarFilled,
  Position,
  Iphone,
  Message,
} from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { ElMessage } from "element-plus";
import Footer from "@/components/footer.vue";
// 引入背景图片
import wmyhsHeaderBg from "@/assets/imgs/wmyhs-header-bg.jpg";

const router = useRouter();

function goToHome() {
  if (window.opener && !window.opener.closed) {
    window.opener.focus(); // 将焦点返回到原始窗口
    window.close(); // 关闭当前新窗口
  }
}
router.push({
  path: "/wm/wmhome",
});

const searchQuery = ref("");

function iMessageClick() {
  router.push({
    path: "/wm/imessage",
  });
}

function handleSearch() {
  router.push({
    path: "/wm/messagelist",
    query: { keywords: searchQuery.value },
  });
  // if (searchQuery.value) {
  //   router.push({
  //     path: "/wm/search",
  //     query: { searchQuery: searchQuery.value },
  //   });
  // } else {
  //   ElMessage({
  //     message: "请输入搜索内容",
  //     type: "warning",
  //   });
  // }
}
</script>
<style scoped>
.footer-footer {
  background-color: #1f2937;
}

.custom-input :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  border: none;
}

.custom-select :deep(.el-input__wrapper) {
  background-color: rgba(255, 255, 255, 0.9);
  box-shadow: none;
  border: none;
}

.custom-input :deep(.el-input__inner) {
  height: 42px;
}

.custom-select :deep(.el-input__inner) {
  height: 42px;
}
</style>
