<script setup>
const router = useRouter();

function toInquire(name) {
  if (name === 'marriage') {
    router.push(`/inquire/toc_Marriage`);
  }
  else {
    router.push(`/list_${name}`,);
  }
}

// 页面加载时生成 30 条通知数据
onMounted(() => {
})
function toHistory() {
  router.push(`/historyQuery`);

}
</script>

<template>
  <div class="relative p-4">
    <img class="h-full w-full overflow-hidden rounded-xl" src="@/assets/images/banner.png" />
  </div>
  <div class="relative p-4 pb-4 pt-2">
    <div class="grid grid-cols-2 gap-3">
      <div
        class="relative flex flex-col cursor-pointer rounded-bl-[35px] rounded-br-lg rounded-tl-[35px] rounded-tr-lg bg-white px-4 py-6 shadow-lg"
        @click="toInquire('risk')">
        <div class="min-h-18 gap-2 bg-white px-1">
          <div class="mb-2 flex justify-around">
            <img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_3.png" />
            <div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
              风险评估
            </div>
          </div>
          <div class="max-w-max text-left text-xs text-gray-600">
            检测个人不良记录、人企关系等
          </div>
        </div>
      </div>
      <div
        class="relative flex flex-col cursor-pointer rounded-bl-lg rounded-br-[35px] rounded-tl-lg rounded-tr-[35px] bg-white px-4 py-6 shadow-lg"
        @click="toInquire('marriage')">
        <div class="min-h-18 gap-2 bg-white px-1">
          <div class="mb-2 flex justify-around">
            <div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
              婚姻报告
            </div>
            <img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_1.png" />
          </div>
          <div class="max-w-max text-left text-xs text-gray-600">
            核查个人不良，婚姻状态是否未婚、已婚、离婚、离婚冷静期
          </div>
        </div>
      </div>
      <div
        class="relative flex flex-col cursor-pointer rounded-bl-[35px] rounded-br-lg rounded-tl-[35px] rounded-tr-lg bg-white px-4 py-6 shadow-lg"
        @click="toInquire('lawsuit')">
        <div class="min-h-18 gap-2 bg-white px-1">
          <div class="mb-2 flex justify-around">
            <img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_2.png" />
            <div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
              司法涉诉
            </div>
          </div>
          <div class="max-w-max text-left text-xs text-gray-600">
            查询个人与企业的民事案件、刑事案件、行政案件、非诉保全审查、执行案件、强制清算与破产等司法涉诉记录
          </div>
        </div>
      </div>
      <div
        class="relative flex flex-col cursor-pointer rounded-bl-lg rounded-br-[35px] rounded-tl-lg rounded-tr-[35px] bg-white px-4 py-6 shadow-lg"
        @click="toInquire('verify')">
        <div class="min-h-18 gap-2 bg-white px-1">
          <div class="mb-2 flex justify-around">
            <div class="mt-1 max-w-max flex-shrink-0 text-left text-lg text-gray-600 font-bold">
              核验工具
            </div>
            <img class="h-12 w-12 flex-shrink-0" src="@/assets/images/icon_4.png" />
          </div>
          <div class="max-w-max text-left text-xs text-gray-600">
            核验身份证、手机、银行卡、自然人生存状态、学历、人车关系等的查询工具
          </div>
        </div>
      </div>
    </div>
    <div class="mt-4 font-bold">
      更多服务
    </div>
    <div class="mt-4 box-border h-14 w-full flex items-center rounded-xl bg-white px-4 text-gray-700 shadow-xl"
      @click="toHistory">
      <img class="mr-4 h-10 w-10" src="@/assets/images/bg_icon.png" mode="widthFix" />
      <div class="">
        <div class="font-bold">
          我的历史查询记录
        </div>
        <div class="text-xs">
          查询记录有效期为30天
        </div>
      </div>
    </div>
    <div class="shadow-3xl mt-8 w-full">
      <img class="shadow-3xl w-full overflow-hidden rounded-xl" src="@/assets/images/liu.png" mode="widthFix" />
    </div>
  </div>
</template>

<style scoped>
.clip-left {
  clip-path: polygon(0 0, 0 100%, 90% 100%, 0 100%);
}

.clip-right {
  clip-path: polygon(0 0, 0 0, 90% 100%, 0 0);
}
</style>
