<script lang="ts" setup>
import Navbar from '@/chart-sub/components/navbar/Navbar.vue'
import { getCustomScaleExplains } from '@/service'

definePage({
    style: {
        navigationStyle: 'custom',
        transparentTitle: 'always',
        navigationBarTitleText: '',
    },
})

const handleBack = () => {
    uni.switchTab({
        url: '/pages/evaluation/index'
    })
}

const detailData = ref<any>({});


const environmentCardStyles = [
    'bg-gradient-to-t from-[#D2F3FF] to-[#E8F9FE] outer-dot-1',
    'bg-gradient-to-t from-[#F6F3FE] to-[#F2EAFF] outer-dot-2',
    'bg-gradient-to-t from-[#E5FFF9] to-[#D2FEF7] outer-dot-3',
    'bg-gradient-to-t from-[#E7F9FF] to-[#D3F3FF] outer-dot-4',
]

const environmentCards = computed(() => {
    const cards = detailData.value?.reportView?.environmentCards ?? detailData.value?.environmentCards
    return Array.isArray(cards) ? cards : []
})

function getEnvironmentCardClass(index: number) {
    return environmentCardStyles[index % environmentCardStyles.length]
}

const redirectToTest = () => {
    uni.navigateTo({
      url: `/chart-sub/evaluate/doPage/assessmentPage?id=${detailData.value.scaleId}&name=${detailData.value.title}`,
    })
}

const navigateToSerer = () => {
    uni.navigateTo({
        url: '/pages-sub/about/onlineCustom',
    })
}

onLoad((options:any) => {

    getCustomScaleExplains({query:{ CustomScaleId: options?.id }}).then((resp) => {
        if (resp.code === 200) {
            detailData.value = resp.result;
        }
    })
})


</script>

<template>
    <view class="flex flex-col bg-[#1880FC] h-screen">
        <view class="flex-1 flex flex-col relative overflow-auto pb-[40rpx]">
            <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_BG.png" mode="scaleToFill"
                class="w-full h-[296rpx] shrink-0" />
            <Navbar safeAreaInsetTop :bordered="false" leftArrow @clickLeft="handleBack" bg-color="transparent"
                :fixed="true" class="h-0">
            </Navbar>
            <view
                class="rounded-[0_0_24rpx_24rpx] bg-white pb-[22rpx] mx-[30rpx] mt-[-24rpx] flex flex-col">
                <view class="flex items-center mx-[30rpx]">
                    <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_biaoqian.png" mode="scaleToFill"
                        class="w-[40rpx] h-[48rpx]" />
                    <view class="relative m-[4rpx]">
                        <view class="relative z-2 text-[32rpx] text-[#000]">
                            你的天赋类型为
                        </view>
                        <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_xiantiao.png" mode="scaleToFill"
                            class="absolute top-[22rpx] left-[66rpx] w-[124rpx] h-[28rpx]" />
                    </view>
                </view>
                <view class="text-[92rpx] font-[700] font-[AlimamaShuHeiTi] text-center my-[24rpx]">{{ detailData.reportView.mainTitle }}</view>
                <view class="mx-[30rpx] select-box bg-[#E7F2FF] border-[2rpx] border-[#1580FF] border-solid text-[26rpx] font-500 px-[48rpx] py-[20rpx] text-center">{{ detailData.reportView.keywords.join(' · ') }}</view>
                <view class="text-[28rpx] text-[#333] mt-[20rpx] mx-[30rpx]">
                    {{ detailData.reportView.portrait }}
                </view>
            </view>
            <view class="rounded-[24rpx] p-[30rpx] bg-white mx-[30rpx] mt-[20rpx]">
                <view class="text-[36rpx] font-600">{{ detailData.reportView.environmentTitle }}</view>
                <view class="grid grid-cols-2 gap-[6rpx] mt-[20rpx]">
                    <view v-for="(item, index) in environmentCards" :key="`${item.title}-${index}`"
                        class="h-[176rpx] px-[24rpx] py-[30rpx] box-border" :class="getEnvironmentCardClass(index)">
                        <view class="font-600 text-[32rpx]">{{ item.title }}</view>
                        <view class="text-[24rpx] text-[#3D3D3D]">{{ item.description }}</view>
                    </view>
                </view>
            </view>
        </view>


        <view class="pb-safe bg-white">
            <view class="py-[18rpx] px-[30rpx] flex items-center gap-[20rpx]">
                <view class="" @click="redirectToTest()">
                    <button class="flex items-center justify-center rounded-full text-[32rpx] text-[#9E9E9E] h-[88rpx]! w-[240rpx]! bg-white border-solid border-[2rpx] border-[#9E9E9E]" >
                        重新测评
                    </button>
                </view>
                <view class="z-2 relative" @click="navigateToSerer">
                    <button
                        class="flex flex-col items-center justify-center leading-none rounded-full text-[32rpx] text-[#fff] h-[88rpx]! w-[430rpx]! bg-[url('https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/anniubeijing.png'),linear-gradient(to_right,#FF9411,#FFB11B)] bg-left-top bg-no-repeat">
                        <view>免费领取</view>
                        <view class="text-[22rpx] mt-[8rpx]">(家庭成长规划建议)</view>
                    </button>
                    <image src="https://lw-zk.oss-cn-hangzhou.aliyuncs.com/img/CP/xq_anniulibao.png" mode="scaleToFill"
                        class="w-[106rpx] h-[106rpx] absolute right-0 top-[-18rpx]" style="pointer-events: none" />
                </view>
            </view>
        </view>
    </view>
</template>

<style lang="scss" scoped>
:deep(.icon-class) {
    color: #fff !important;
}

.select-box {
    --blue: #1e86ff;
    --dot-size: 10rpx;

    position: relative;

}

/* 左右两边的 3 个方点 */
.select-box::before,
.select-box::after {
    content: "";
    position: absolute;
    top: calc(var(--dot-size) / -2);
    width: var(--dot-size);
    height: calc(100% + var(--dot-size));

    background:
        linear-gradient(var(--blue), var(--blue)) center top / var(--dot-size) var(--dot-size) no-repeat,
        linear-gradient(var(--blue), var(--blue)) center center / var(--dot-size) var(--dot-size) no-repeat,
        linear-gradient(var(--blue), var(--blue)) center bottom / var(--dot-size) var(--dot-size) no-repeat;
}

/* 左侧 3 个点 */
.select-box::before {
    left: calc(var(--dot-size) / -2 - 2rpx);
}

/* 右侧 3 个点 */
.select-box::after {
    right: calc(var(--dot-size) / -2);
}


.outer-dot-1,
.outer-dot-2,
.outer-dot-3,
.outer-dot-4 {
    position: relative;
    border-radius: 20rpx;
}



.outer-dot-1::before,
.outer-dot-2::before,
.outer-dot-3::before,
.outer-dot-4::before {
    content: "";
    position: absolute;
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
}

.outer-dot-1::after,
.outer-dot-2::after,
.outer-dot-3::after,
.outer-dot-4::after {
    content: "";
    position: absolute;
    width: 24rpx;
    height: 24rpx;
    border-radius: 50%;
    background-color: #fff;
}

.outer-dot-1::before {
    bottom: -12rpx;
    left: 24rpx;
    background-color: #D2F3FF;
    z-index: 4;
}



.outer-dot-1::after {
    right: -12rpx;
    top: 24rpx;
}

.outer-dot-2::before {
    top: 24rpx;
    left: -12rpx;
    background-color: #F2EBFF;
}

.outer-dot-2::after {
    bottom: -12rpx;
    right: 24rpx;
    z-index: 1;
}

.outer-dot-3::before {
    right: -12rpx;
    bottom: 24rpx;
    background-color: #D2FEF7;
    z-index: 3;
}

.outer-dot-3::after {
    top: -12rpx;
    left: 24rpx;

}

.outer-dot-4::before {
    top: -12rpx;
    right: 24rpx;
    background-color: #D3F3FF;
    z-index: 2;
}

.outer-dot-4::after {
    left: -12rpx;
    bottom: 24rpx;
}

button::after {
    border: none;
}
</style>
