<!-- 代码已包含 CSS：使用 TailwindCSS , 安装 TailwindCSS 后方可看到布局样式效果 -->

<template>
  <div class="min-h-screen bg-gray-50">
    <div class="w-[1440px] mx-auto px-0 py-8">
      <!-- 面包屑导航 -->
      <div class="flex items-center text-sm text-gray-500 mb-5">
        <router-link to="/" class="text-gray-500 hover:text-blue-500">首页</router-link>
        <el-icon class="mx-2">
          <ArrowRight />
        </el-icon>
        <span class="text-gray-900">太原市互联网违法和不良信息举报平台</span>
      </div>

      <!-- 页面标题 -->
      <div class="mb-5">
        <h1 class="text-2xl font-bold mb-2 text-black">
          涉网络暴力有害信息举报专区
        </h1>
        <div class="flex items-center justify-between">
          <!-- <span class="text-gray-500 text-sm">2023年12月20日 14:43</span> -->
          <!-- <div class="flex gap-4">
            <el-button
              type="primary"
              class="!rounded-button whitespace-nowrap"
              size="small"
              >分享</el-button
            >
            <el-button
              type="success"
              class="!rounded-button whitespace-nowrap"
              size="small"
              >收藏</el-button
            >
          </div> -->
        </div>
      </div>

      <!-- 主要内容区域 -->
      <div class="bg-white rounded-lg p-8 shadow-[0_0_10px_rgba(5,157,254,0.32)]">

        <!-- 举报入口区域 -->
        <div class="mb-12">
          <!-- 举报入口标题，左右带翅膀图片，居中显示 -->
          <div class="flex items-center justify-center">
            <img src="@/assets/imgs/bg_wing_left.png" alt="左侧翅膀" class="w-54 h-auto mr-14" />
            <h2 class="text-2xl font-bold text-[#2f7ef6]">举报入口</h2>
            <img src="@/assets/imgs/bg_wing_right.png" alt="右侧翅膀" class="w-54 h-auto ml-14" />
          </div>
          <!-- 下方灰色提示文字 -->
          <div class="text-center text-gray-500 mb-6">您可选择相应入口进行举报</div>

          <div class="grid grid-cols-3 gap-5">
            <!-- 中央网信办举报入口 -->
            <div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
              bg-[url('@/assets/imgs/zywxb-bg.png')] bg-[length:100%_100%] bg-center" @click="goUrl(1)">
              <!-- <img src="https://ai-public.mastergo.com/ai/img_res/57ebde68f473e914c107e3a025660439.jpg" alt="中央网信办logo"
                class="w-24 h-24 mb-4 object-contain" /> -->
              <h3 class="text-xl font-medium text-white mb-1">中央网信办</h3>
              <p class="text-white text-sm text-center mb-4">
                互联网违法和不良信息举报入口
              </p>
            </div>
            <!-- 山西省举报入口 -->
            <div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
              bg-[url('@/assets/imgs/sxsjbzx-bg.png')] bg-[length:100%_100%] bg-center" @click="goUrl(2)">
              <!-- <img src="https://ai-public.mastergo.com/ai/img_res/7b97bd66edf931fe17054d9f3db69896.jpg" alt="山西省logo"
                class="w-24 h-24 mb-4 object-contain" /> -->
              <h3 class="text-xl font-medium text-white mb-1">
                山西省举报中心
              </h3>
              <p class="text-white text-sm text-center mb-4">
                山西省互联网违法和不良信息举报入口
              </p>
            </div>
            <!-- 太原市举报入口 -->
            <div class="border rounded-lg h-[180px] flex flex-col items-center justify-end hover:scale-90 transition-transform
              bg-[url('@/assets/imgs/tysjbpt-bg.png')] bg-[length:100%_100%] bg-center" @click="goUrl(3)">
              <!-- <img src="https://ai-public.mastergo.com/ai/img_res/7b5a4b53e643dc61aa084b4a45069db3.jpg" alt="太原市logo"
                class="w-24 h-24 mb-4 object-contain" /> -->
              <h3 class="text-xl font-medium text-white mb-1">
                太原市举报平台
              </h3>
              <p class="text-white text-sm text-center mb-4">
                太原市互联网违法和不良信息举报入口
              </p>
            </div>
          </div>
        </div>

        <!-- 举报须知与联系方式 -->
        <div class="grid grid-cols-2 gap-8">
          <!-- 左侧举报须知 -->
          <div class="space-y-6">
            <h2 class="text-xl font-bold mb-6 text-[#2f7ef6]">网上举报须知</h2>
            <div>
              <h3 class="font-medium mb-4 text-black">一、受理举报范围</h3>
              <ol class="list-decimal list-inside space-y-2 text-gray-700">
                <li>反对宪法所确定的基本原则的；</li>
                <li>
                  危害国家安全、泄露国家秘密、颠覆国家政权、破坏国家统一的；
                </li>
                <li>损害国家荣誉和利益的；</li>
                <li>煽动民族仇恨、民族歧视，破坏民族团结的；</li>
                <li>破坏国家宗教政策，宣扬邪教和封建迷信的；</li>
                <li>散布谣言，扰乱社会秩序，破坏社会稳定的；</li>
                <li>散布淫秽、色情、赌博、暴力、凶杀、恐怖或者教唆犯罪的；</li>
                <li>侮辱或者诽谤他人，侵害他人合法权益的；</li>
                <li>含有法律、行政法规禁止的其他内容的。</li>
              </ol>
            </div>
            <div>
              <h3 class="font-medium mb-4 text-black">二、注意事项</h3>
              <ol class="list-decimal list-inside space-y-2 text-gray-700">
                <li>请您自觉遵守中华人民共和国宪法和法律。</li>
                <li>举报应当实事求是，应对举报内容的真实性、客观性负责。</li>
                <li>请如实提供违法举报信息（附链接地址、截图等）。</li>
                <li>可以选择匿名举报，如实名举报，请留下有效联系方式。</li>
                <li>请不要重复举报。</li>
              </ol>
            </div>
          </div>

          <!-- 右侧联系方式 -->
          <div class="space-y-6 border-l pl-0">
            <h2 class="text-xl font-bold mb-0 text-[#2f7ef6]">联系方式</h2>
            <div class="space-y-8">
              <section>
                <h3 class="font-medium mb-4 text-black">
                  {{ inject("VITE_APP_TITLE") }}
                </h3>
                <ul class="space-y-2 text-gray-700">
                  <li class="flex items-center">
                    <el-icon class="mr-2" style="color: #2f7ef6;">
                      <Phone />
                    </el-icon>
                    举报电话：{{ inject("VITE_PHONE") }}
                  </li>
                  <li class="flex items-center">
                    <el-icon class="mr-2" style="color: #2f7ef6;">
                      <Message />
                    </el-icon>
                    举报传真：{{ inject("VITE_FAX") }}
                  </li>
                  <li class="flex items-center">
                    <el-icon class="mr-2" style="color: #2f7ef6;">
                      <Message />
                    </el-icon>
                    举报邮箱：{{ inject("VITE_EMAIL") }}
                  </li>
                </ul>
              </section>
              <!-- <section>
                <h3 class="font-medium mb-4 text-black">太原新闻网</h3>
                <ul class="space-y-2 text-gray-700">
                  <li class="flex items-center">举报电话：0351-8222094</li>
                  <li class="flex items-center">举报邮箱：news1950@126.com</li>
                </ul>
              </section> -->
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { ElButton, ElIcon } from "element-plus";
import { Phone, Message, ArrowRight } from "@element-plus/icons-vue";
import { useRouter } from "vue-router";
import { inject } from "vue";

const router = useRouter();

function goUrl(type: number) {
  switch (type) {
    case 1: //中央网信办
      window.open("https://www.12377.cn");
      break;
    case 2: //山西省举报中心
      window.open("https://www.sxgov.cn/node_280205.htm");
      break;
    case 3: //太原市举报平台
      // window.open(
      //   "http://oa.wangxinban.cn/jb/#/Home/Home?agencyID=52340bbb-f782-4886-02c4-08d9605acd8c&agencyName=太原市网信"
      // );
      const jbRouter = router.resolve({ name: "jb" }).href;
      window.open(jbRouter, "_blank");
      break;
  }
}
</script>

<style scoped>
.min-h-screen {
  min-height: 1024px;
}
</style>
