<script lang="ts" setup>
import { safeAreaInsets } from '@/utils/systemInfo'

// #ifdef MP-WEIXIN
definePage({
  style: {
    navigationStyle: 'custom',
  },
  excludeLoginPath: false,
})
// #endif

// #ifndef MP-WEIXIN
definePage({
  style: {
    navigationStyle: 'custom',
    transparentTitle: 'always',
    navigationBarTitleText: ''
  },
  excludeLoginPath: false,
})
// #endif

const phoneNumber = '18724728603'

const makePhoneCall = () => {
    uni.makePhoneCall({
        phoneNumber: phoneNumber,
    }).catch((err) => {
        console.error(err)
    })
}

const handleBack = () => {
  uni.navigateBack({ delta: 1 })
}
</script>

<template>
    <view class="flex flex-col custom-background h-screen">
        <sar-navbar show-back @back="handleBack" :fixed="true" fixation-style="top:unset;"
            :root-style="{ '--sar-navbar-bg': `transparent`, '--sar-navbar-item-color': 'white','margin-top': `${safeAreaInsets?.top}px` }">
            <template #title>
                <view class="flex justify-center text-white">在线客服</view>
            </template>
        </sar-navbar>

        <view class="mt-[84rpx] rounded-[24rpx] bg-white mx-[32rpx]">
            <view class="flex">
                <view class="w-[220rpx] h-[302rpx] ml-[12rpx] mt-[-74rpx]">
                    <image src="https://lwzk.ycymedu.com/img/qt/wd_kefuren.png" mode="scaleToFill"
                        class="w-[220rpx] h-[302rpx]" />
                </view>
                <view class="pt-[30rpx]">
                    <view class="text-[#3287FF]">专属客服为您服务</view>
                    <view class="h-[8rpx] bg-linear-to-r from-[#e3efff] to-[#f2f9ff]"></view>
                    <view class="flex items-center">
                        <view class="mr-[24rpx] font-500 text-[44rpx]">{{ phoneNumber }}</view>
                        <view
                            class="rounded-[8rpx] px-[20rpx] py-[8rpx] border-[#1580FF] border-solid border-[2rpx] text-[24rpx] text-[#1580FF] flex items-center justify-center"
                            @click="makePhoneCall">拨打</view>
                    </view>
                </view>
            </view>
            <view class="mx-[6rpx] rounded-[24rpx] bg-[#eaf1ff] bg-opacity-59 backdrop-blur-[5px] mt-[-50rpx]">
                <view class="w-[432rpx] h-[432rpx] pt-[100rpx] mx-auto">
                    <image src="https://lwzk.ycymedu.com/img/qt/wd_erweima.png" mode="scaleToFill"
                        class="w-[432rpx] h-[432rpx]" :show-menu-by-longpress="true" />
                </view>
                <view class="mt-[32rpx] flex justify-center">
                    <view class="w-[28rpx] h-[34rpx flex items-center">
                        <image src="https://lwzk.ycymedu.com/img/qt/wd_zhiwen.png" mode="scaleToFill"
                            class="w-[28rpx] h-[34rpx]" />
                    </view>
                    <view class="text-[28rpx]">扫码添加客服企业微信</view>
                </view>
                <view class="text-[28rpx] text-[#333] ml-[42rpx] mr-[168rpx] mt-[40rpx] mb-[6rpx] pb-[30rpx]">
                    <view>领取中考专属资源包</view>
                    <view>领取全年学习规划，掌握备考节奏</view>
                    <view>优质学习交流群，考情同步，答疑互助</view>
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
.custom-background {
    background: linear-gradient(180deg, #3287FF 0%, #EDF7FF 100%);
    background-position: 50% 50%;
    background-origin: padding-box;
    background-clip: border-box;
    background-size: auto auto;
}

.not-last-child {
    border-bottom: 2rpx solid #f8f8f8;
}
</style>