<script setup>
import { aesEncrypt } from '@/utils/crypto'
import { getCode, getProduct, queryMarriage, querybackgroundCheck, querycompanyInfo, queryhomeService, querypreLoanBackgroundCheck, queryrentalInfo, queryriskAssessment } from '@/api/apis'

const name = ref('')
const idCard = ref('')
const phoneNumber = ref('')
const verificationCode = ref('')
const agreeToTerms = ref(false)
const isCountingDown = ref(false)
const countdown = ref(60)
const feature = ref('')
const timer = null
const featureData = ref({})
const services = reactive([
  { title: '个人风险报告', name: 'riskassessment', subtitle: '一查全知', bg: '/static/image/index_icon_2.png', bgColor: 'bg-indigo-400', api: queryriskAssessment },
  { title: '婚恋报告', name: 'marriage', subtitle: '查婚姻状态让爱无忧', bg: '/static/image/index_icon_1.png', bgColor: ' bg-pink-400 ', api: queryMarriage },
  { title: '家政服务报告', name: 'homeservice', subtitle: '用人有保障', bg: '/static/image/index_icon_3.png', bgColor: ' bg-teal-500 ', api: queryhomeService },
  { title: '租赁服务报告', name: 'rentalinfo', subtitle: '一查明了', bg: '/static/image/index_icon_4.png', bgColor: ' bg-sky-500  ', api: queryrentalInfo },
  { title: '贷前调查报告', name: 'preloanbackgroundcheck', subtitle: '放心借贷', bg: '/static/image/index_icon_7.png', bgColor: ' bg-red-400 ', api: querypreLoanBackgroundCheck },
  { title: '人事背调报告', name: 'backgroundcheck', subtitle: '选人更放心', bg: '/static/image/index_icon_6.png', bgColor: ' bg-orange-400 ', api: querybackgroundCheck },
  { title: '企业报告', name: 'companyinfo', subtitle: '合作更安心', bg: '/static/image/index_icon_5.png', bgColor: ' bg-blue-400  ', api: querycompanyInfo },
])
const service = ref({})
onLoad((options) => {
  console.log('options', options)
  if (options.feature) {
    feature.value = options.feature
  }
  else {
    feature.value = 'marrige'
  }
  getService()
  getProduct(feature.value).then((res) => {
    if (res.code === 200) {
      featureData.value = res.data
    }
  })
})

const isPhoneNumberValid = computed(() => {
  return /^1[3-9]\d{9}$/.test(phoneNumber.value)
})
const isIdCardValid = computed(() => /^\d{17}[\dX]$/i.test(idCard.value))

function handleSubmit() {
  if (!agreeToTerms.value) {
    uni.showToast({ title: '请阅读并同意用户协议和隐私政策', icon: 'none' })
    return
  }
  if (!name.value) {
    uni.showToast({ title: '请输入姓名', icon: 'none' })
    return
  }
  if (!isPhoneNumberValid.value) {
    uni.showToast({ title: '请输入有效的手机号', icon: 'none' })
    return
  }
  if (!isIdCardValid.value) {
    uni.showToast({ title: '请输入有效的身份证号码', icon: 'none' })
    return
  }
  if (!verificationCode.value) {
    uni.showToast({ title: '请输入验证码', icon: 'none' })
    return
  }
  submit()
}
function getService() {
  for (const i of services) {
    if (i.name === feature.value) {
      service.value = i
    }
  }
}
function sendVerificationCode() {
  if (isCountingDown.value || !isPhoneNumberValid.value)
    return
  if (!isPhoneNumberValid.value) {
    uni.showToast({ title: '请输入有效的手机号', icon: 'none' })
    return
  }
  getCode({
    mobile: phoneNumber.value,
    actionType: 'query',
  }).then((res) => {
    if (res.code === 200) {
      uni.showToast({ title: '获取成功', icon: 'none' })

      startCountdown()
    }
  })
}
function startCountdown() {
  isCountingDown.value = true
  countdown.value = 60
  timer = setInterval(() => {
    if (countdown.value > 0) {
      countdown.value--
    }
    else {
      clearInterval(timer)
      isCountingDown.value = false
    }
  }, 1000)
}

function toExample() {
  uni.navigateTo({
    url: `/pages/example?feature=${feature.value}`,
  })
}

function submit() {
  const req = {
    name: name.value,
    id_card: idCard.value,
    mobile: phoneNumber.value,
    code: verificationCode.value,
  }
  const data = JSON.stringify(req)
  const encodeData = aesEncrypt(data, 'ff83609b2b24fc73196aac3d3dfb874f')
  service.value.api({ data: encodeData }).then((res) => {
    if (res.code === 200) {
      uni.navigateTo({
        url: `/pages/authorization?id=${res.data.id}`,
      })
    }
  })
}
function toUserAgreement() {
  uni.navigateTo({
    url: '/pages/userAgreement',
  })
}
function toPrivacyPolicy() {
  uni.navigateTo({
    url: '/pages/privacyPolicy',
  })
}
onUnmounted(() => {
  if (timer) {
    clearInterval(timer)
  }
})
</script>

<template>
  <view class="inquire-bg min-h-screen rounded-lg p-6 shadow-lg">
    <view class="mb-6 text-center text-blue-800 font-extrabold">
      <view class="text-blue-600">
        <text class="text-2xl font-bold">
          {{ service.title }}
        </text>
      </view>
    </view>

    <view class="card-p-0 px-4 py-6">
      <view class="mb-4 text-xl text-gray-800 font-semibold">
        基本信息
      </view>
      <wd-input
        v-model="name" label="姓名" type="text" label-width="60px" placeholder="请输入正确的姓名"
        class="mb-6 border-b border-gray-200 border-b-solid"
      />
      <wd-input
        v-model="idCard" label="身份证号" label-width="60px" placeholder="请输入准确的身份证号码"
        class="mb-6 border-b border-gray-200 border-b-solid"
      />
      <wd-input
        v-model="phoneNumber" label="手机号" type="tel" label-width="60px" placeholder="输入手机号"
        class="mb-6 border-b border-gray-200 border-b-solid"
      />
      <view class="mb-6 flex items-center">
        <wd-input
          v-model="verificationCode" label="验证码" type="number" label-width="60px" placeholder="输入验证码"
          class="flex-1 border-b border-gray-200 border-b-solid"
        />
        <view
          class="ml-2 flex-shrink-0 rounded-lg border-none px-2 py-2 text-sm font-bold outline-none ring-none transition duration-300"
          :class="isCountingDown || !isPhoneNumberValid ? 'cursor-not-allowed bg-gray-300 text-gray-500' : 'bg-blue-500 text-white hover:bg-blue-600'"
          @click="sendVerificationCode"
        >
          {{ isCountingDown ? `${countdown}s重新获取` : '获取验证码' }}
        </view>
      </view>
      <view class="mb-6 flex items-center">
        <wd-checkbox v-model="agreeToTerms" />
        <view class="ml-1 text-xs text-gray-400">
          我已阅读并同意<text class="text-blue-500 hover:underline" @click="toUserAgreement">
            《用户协议》
          </text><text class="text-blue-500 hover:underline" @click="toPrivacyPolicy">
            《隐私政策》
          </text>
        </view>
      </view>
      <view class="flex">
        <wd-button
          custom-style="border-top-right-radius: 0;
  border-bottom-right-radius: 0;" plain class="w-10 py-3 text-lg font-bold" @click="toExample"
        >
          示例报告
        </wd-button>
        <wd-button
          custom-style="border-top-left-radius: 0;
        border-bottom-left-radius: 0;" type="primary" class="flex-1 py-3 text-lg font-bold" @click="handleSubmit"
        >
          立即查询 ￥ {{ featureData.sell_price }}
        </wd-button>
      </view>
    </view>

    <wd-divider class="my-4" />
    <view class="card">
      <!-- 报告标题 -->
      <view class="mb-6 text-xl text-gray-800 font-bold">
        {{ featureData.product_name }}
      </view>

      <!-- 报告介绍 -->
      <view class="mb-4 text-gray-600 leading-relaxed">
        {{ featureData.description }}
      </view>

      <!-- 报价信息 -->
      <view class="mb-6 flex items-center justify-between">
        <view class="text-lg text-gray-500">
          价格：
        </view>
        <view class="text-lg text-blue-600 font-semibold">
          ¥{{ featureData.sell_price }}
        </view>
      </view>

      <!-- 报告主要内容 -->
      <view class="mb-4 text-lg text-gray-800 font-semibold">
        报告主要内容
      </view>
      <view class="grid grid-cols-2 gap-4">
        <view
          v-for="(feature, index) in featureData.features"
          :key="feature.id"
          class="rounded-lg py-2 text-center text-sm text-gray-700 font-medium"
          :class="[
            (Math.floor(index / 2) + (index % 2)) % 2 === 0
              ? 'bg-gradient-to-r from-blue-200 via-blue-200 to-blue-100'
              : 'bg-gradient-to-r from-sky-200 via-sky-200 to-sky-100',
          ]"
        >
          {{ feature.name }}
        </view>
      </view>
    </view>
  </view>
</template>

<style scoped>
.icon-company,
.icon-transaction,
.icon-judicial,
.icon-penalty {
  font-size: 2rem;
}

.inquire-bg {
  background: url("/static/image/bg_2.png") no-repeat;
  position: relative;
}

.inquire-bg::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: rgba(255, 255, 255, 0.4);
  /* 使用白色的半透明覆盖层，0.5 可调整为其他透明度值 */
  z-index: 1;
}

.inquire-bg>* {
  position: relative;
  z-index: 2;
  /* 确保子元素在覆盖层之上 */
}
</style>

<route lang="json">
{
  "layout": "page",
  "title": "报告查询"
}
</route>
