<script setup>
function toInquire(name) {
  uni.navigateTo({
    url: `/pages/inquire?feature=${name}`,
  })
}

const services = ref([
  { title: '个人风险', name: 'riskassessment', subtitle: '一查全知', bg: '/static/image/index_icon_2.png', bgColor: 'bg-indigo-400', position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg' },
  { title: '婚恋风险', name: 'marriage', subtitle: '查婚姻状态让爱无忧', bg: '/static/image/index_icon_1.png', bgColor: ' bg-pink-400 ', position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg' },
  { title: '家政服务', name: 'homeservice', subtitle: '用人有保障', bg: '/static/image/index_icon_3.png', bgColor: ' bg-teal-500 ', position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg' },
  { title: '租赁风险', name: 'rentalinfo', subtitle: '一查明了', bg: '/static/image/index_icon_4.png', bgColor: ' bg-sky-500  ', position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg' },
  { title: '企业报告', name: 'companyinfo', subtitle: '合作更安心', bg: '/static/image/index_icon_5.png', bgColor: ' bg-blue-400  ', position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg' },
  { title: '人事背调', name: 'backgroundcheck', subtitle: '选人更放心', bg: '/static/image/index_icon_6.png', bgColor: ' bg-orange-400 ', position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg' },
  { title: '贷前背调', name: 'preloanbackgroundcheck', subtitle: '放心借贷', bg: '/static/image/index_icon_7.png', bgColor: ' bg-red-400 ', position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg' },
])

// const noticeText = ref([])

function toHistory() {
  uni.navigateTo({
    url: '/pages/queryHistory',
  })
}
</script>

<template>
  <view class="box-border min-h-screen from-blue-100 to-white bg-gradient-to-b">
    <view class="relative h-[190px]">
      <image class="h-full w-full" src="/static/image/banner2.png" />
      <image
        class="absolute bottom-[-70px] right-0 w-38"
        src="/static/image/banner_a.png"
        mode="aspectFit"
      />
    </view>
    <view class="relative p-4 pb-4 pt-8">
      <!-- <view class="mb-1 flex items-center">
        <view class="flex-shrink-0 pl-2 font-bold">
          在线信息
        </view>
        <wd-notice-bar
          :text="noticeText" direction="vertical" :delay="5" color="#4c4c4c"
          background-color="#00000000"
        />
      </view> -->
      <view class="grid grid-cols-2 gap-3">
        <template v-for="(service, index) in services" :key="index">
          <view
            class="relative flex flex-col px-4 py-2 shadow-lg" :class="[
              service.position,
              service.bgColor,
              service.title === '婚恋风险' ? 'row-span-2' : '',
            ]" :style="`background: url(${service.bg}) no-repeat; background-size: cover; background-position: center;`"
            @click="toInquire(service.name)"
          >
            <view class="min-h-18 flex flex-col items-start px-1">
              <view class="mt-1 max-w-max text-left text-gray-600 font-bold">
                {{ service.title }}
              </view>
              <view class="max-w-max text-left text-xs text-gray-600">
                <rich-text :nodes="service.subtitle" />
              </view>
              <view class="mt-2 rounded-2xl px-2 text-xs text-white" :class="[service.bgColor]">
                GO >
              </view>
            </view>
          </view>
        </template>
      </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="mb-16 mt-6 h-12 w-full flex items-center justify-center rounded-3xl from-blue-500 to-sky-400 bg-gradient-to-b text-center text-lg text-white line-height-12 shadow-xl"
      >
        <view>全能查邀您共赢，共享数据新价值！</view>
      </view>
    </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"
}
</route>
