<template>
    <view>
        <view class="tip">我是孩子的？</view>
        <view class="explain">请选择您与孩子的关系</view>
        <view class="selectContent">
            <view
                v-for="(item, index) in useRelation"
                :key="index"
                class="item"
                @click="selectFun(item)"
            >
                <image class="toux" :src="item.icon" mode="scaleToFill" />
                <text class="name">{{ item.name }}</text>
                <image
                    class="select"
                    :src="
                        checkItem?.id === item.id
                            ? `${OSS_URL}/urm/bindDevice/dx.png`
                            : `${OSS_URL}/urm/bindDevice/nodx.png`
                    "
                    mode="scaleToFill"
                />
            </view>
        </view>
        <view class="sub" @click="subFun"> 确定 </view>
    </view>
</template>

<script setup lang="ts">
import { onLoad } from '@dcloudio/uni-app';
import { reactive, ref } from 'vue';
import { useRelation } from '@/hooks';
const OSS_URL = import.meta.env.VITE_OSS_HOST;
const checkItem = ref<any>();

function selectFun(i: any) {
    checkItem.value = i;
}

async function subFun() {
    let relation = encodeURIComponent(JSON.stringify(checkItem.value));
    uni.$emit('updateChooseRelation', {
        relation: relation,
    });
    uni.navigateBack();
}
</script>

<style lang="scss" scoped>
.tip {
    margin-top: 50upx;
    font-size: 34upx;
    color: rgba(51, 51, 51, 1);
    width: 100%;
    text-align: center;
}
.explain {
    font-size: 30upx;
    color: rgba(102, 102, 102, 1);
    margin-top: 20upx;
    width: 100%;
    text-align: center;
}

.selectContent {
    width: 100%;
    padding: 30upx;
    box-sizing: border-box;
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 30upx;
    .item {
        width: 330upx;
        height: 160upx;
        display: flex;
        align-items: center;
        padding: 30upx;
        box-sizing: border-box;
        border-radius: 20upx;
        background-color: #fff;
        position: relative;

        .toux {
            width: 100upx;
            height: 100upx;
        }
        .name {
            font-size: 30upx;
            margin-left: 20upx;
        }

        .select {
            width: 30upx;
            height: 30upx;
            position: absolute;
            right: 30upx;
            top: 65upx;
        }
    }
}

.sub {
    width: 690upx;
    height: 90upx;
    border-radius: 20upx;
    color: #fff;
    font-size: 30upx;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-top: 120upx;
    background-color: rgba(97, 93, 255, 1);
    margin-left: 30upx;
}
</style>
