<template>
    <view>
        <view class="card-list">
            <view
                class="item"
                v-for="(item, index) in list"
                :key="index"
                @click="clickItem(item)"
            >
                <view class="text">
                    <IconFont :name="item.icon" color="red" size="30" />
                    <view>{{ item.label }}</view>
                </view>
            </view>
            <view style="width: 45%;"></view>
        </view>
        <!-- 二维码弹窗 -->
        <nut-popup :style="{ padding: '30px 50px' }" v-model:visible="show">
            <view class="popup">
                <view>推荐人二维码绑定</view>
                <image :src="urlCode" />
            </view>
        </nut-popup>
    </view>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { IconFont } from "@nutui/icons-vue-taro";
import Taro from "@tarojs/taro";

const show = ref(false);

const urlCode = ref("");

const list = ref([
    {
        id: 1,
        icon: "scan",
        label: "推广名片",
    },
    {
        id: 2,
        icon: "date",
        label: "积分明细",
    },
    {
        id: 3,
        icon: "my2",
        label: "推广用户",
    },
]);

const clickItem = (item: any) => {
    if (item.id === 1) {
        urlCode.value = `https://api.pwmqr.com/qrcode/create?url=${Taro.getStorageSync(
            "token"
        )}`;
        show.value = true;
    } else if (item.id === 2) {
        Taro.navigateTo({
            url: "/pages/users/distribution/integral/index",
        });
    } else {
        Taro.navigateTo({
            url: "/pages/users/distribution/userlist/index",
        });
    }
};
</script>

<style lang="scss">
.card-list {
    display: flex;
    justify-content: space-evenly;
    flex-wrap: wrap;

    .item {
        width: 45%;
        height: 200px;
        background-color: #fff;
        border-radius: 20px;
        margin-top: 10px;
        text-align: center;
        padding: 10px;
        position: relative;

        .text {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    }
}

.popup {
    text-align: center;

    image {
        width: 300px;
        height: 300px;
    }
}
</style>
