<script setup>

import indexIcon1 from '/static/image/index_icon_1.png'
import indexIcon2 from '/static/image/index_icon_2.png'
import indexIcon3 from '/static/image/index_icon_3.png'
import indexIcon4 from '/static/image/index_icon_4.png'
import indexIcon5 from '/static/image/index_icon_5.png'
import indexIcon6 from '/static/image/index_icon_6.png'
import indexIcon7 from '/static/image/index_icon_7.png'

// 引入 WebView 插件
// @ts-ignore
import { urlLaunch } from '@/uni_modules/lz-url_launch';


const services = ref(
  [
    {
      title: '个人风险',
      name: 'riskassessment',
      subtitle: '一查全知',
      bg: indexIcon2,
      bgColor: 'bg-indigo-400',
      position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg'
    },
    {
      title: '婚恋风险',
      name: 'marriage',
      subtitle: '查婚姻状态让爱无忧',
      bg: indexIcon1,
      bgColor: ' bg-pink-400 ',
      position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg'
    },
    {
      title: '家政服务',
      name: 'homeservice',
      subtitle: '用人有保障',
      bg: indexIcon3,
      bgColor: ' bg-teal-500 ',
      position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg'
    },
    {
      title: '租赁风险',
      name: 'rentalinfo',
      subtitle: '一查明了',
      bg: indexIcon4,
      bgColor: ' bg-sky-500  ',
      position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg'
    },
    {
      title: '企业报告',
      name: 'companyinfo',
      subtitle: '合作更安心',
      bg: indexIcon5,
      bgColor: ' bg-blue-400  ',
      position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg'
    },
    {
      title: '人事背调',
      name: 'backgroundcheck',
      subtitle: '招聘有保障，选人更放心',
      bg: indexIcon6,
      bgColor: ' bg-orange-400 ',
      position: 'rounded-tl-[35px] rounded-bl-[35px] rounded-tr-lg rounded-br-lg'
    },
    {
      title: '贷前背调',
      name: 'preloanbackgroundcheck',
      subtitle: '招聘有保障，选人更放心',
      bg: indexIcon7,
      bgColor: ' bg-orange-400 ',
      position: 'rounded-tr-[35px] rounded-br-[35px] rounded-tl-lg rounded-bl-lg'
    },
  ]
)

function toInquire(name) {
  // 使用服务名称构建URL
  console.log('使用服务:', name);

  // 判断环境，在 App 环境中使用 UTS 插件打开，非 App 环境使用普通导航
  try {
    // 构建服务的URL
    urlLaunch(`https://www.quannengcha.com/inquire/${name}`)
  } catch (error) {
    console.error('打开URL失败:', error);
  }
}

function toHistory() {
  uni.navigateTo({
    url: '/pages/queryHistory',
  })
}
function toInvitation() {
  uni.navigateTo({
    url: '/pages/invitation',
  })
}
function toPromote() {
  uni.navigateTo({
    url: '/pages/promote',
  })
}
function toHelp() {
  uni.navigateTo({
    url: '/pages/help',
  })
}
</script>

<template>
  <view class="box-border">
    <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="mt-4">
      <view class="flex items-center justify-around gap-2 px-4 pb-1">
        <view class="" @click="toPromote">
          <view
            class="h-12 w-12 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center">
            <image src="/static/image/icon_tg.svg" alt="直推报告" class="w-12 h-12" mode="aspectFit" />
          </view>
          <view class="text-center mt-1 font-bold">直推报告</view>
        </view>
        <view class="" @click="toInvitation">
          <view
            class="h-12 w-12 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center">
            <image src="/static/image/icon_xj.svg" alt="邀请下级" class="w-12 h-12" mode="aspectFit" />
          </view>
          <view class="text-center mt-1 font-bold">邀请下级</view>
        </view>
        <view class="" @click="toHelp">
          <view
            class="h-12 w-12 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center">
            <image src="/static/image/icon_bz.svg" alt="帮助中心" class="w-12 h-12" mode="aspectFit" />
          </view>
          <view class="text-center mt-1 font-bold">帮助中心</view>
        </view>
        <view class="" @click="toHistory">
          <view
            class="h-12 w-12 p-2 bg-gradient-to-b from-white to-blue-100/10 rounded-full shadow-lg flex items-center justify-center">
            <image src="/static/image/icon_bg.svg" alt="我的报告" class="w-12 h-12" mode="aspectFit" />
          </view>
          <view class="text-center mt-1 font-bold">我的报告</view>
        </view>
      </view>
    </view>
    <view class="relative p-4 pb-4 pt-2">
      <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="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",
  "style": {
    "navigationBarTextStyle": "white",
    "transparentTitle": "always"
  }
}</route>
