<script setup>
function toInquire(name) {
  if (name === 'marriage') {
    uni.navigateTo({
      url: `/pages/inquire?p=toc_marriage`,
    })
  }
  else {
    uni.navigateTo({
      url: `/pages/list_${name}`,
    })
  }
}

// 页面加载时生成 30 条通知数据
onMounted(() => {
})
function toHistory() {
  uni.navigateTo({
    url: '/pages/history_query',
  })
}
</script>

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

<route type="home" lang="json">
{
  "layout": "home",
  "style": {
    "navigationStyle": "custom"
  }
}
</route>
