<template>
    <view class="invite-wrap">
        <myPopup v-model="modelValue" mode="bottom" bgColor="none"
            customStyle="max-height: 70vh; border-radius: 15px 15px 0 0;" :closeOnClickOverlay="true">
            <view class="inner-wrap">
                <view class="title">{{ $t("referrerInfo.inviteRecord") }}</view>
                <view class="close-icon" @click="closeShow">
                    <uv-icon name="close" size="10" :color="themeInfo.activeColor"></uv-icon>
                </view>
                <view class="top-nav">
                    <view class="label">{{ $t("referrerInfo.inviteUserName") }}</view>
                    <view class="label">{{ $t("referrerInfo.invitePhone") }}</view>
                    <view class="label">{{ $t("referrerInfo.registrationTime") }}</view>
                </view>
                <view class="content-wrap">
                    <view class="list-wrap" v-if="state.list.length">
                        <view class="item-wrap" v-for="(item, index) in state.list" :key="index">
                            <view class="label">{{ item.customerName }}</view>
                            <view class="label">{{ item.phone }}</view>
                            <view class="label">{{ item.createTime }}</view>
                        </view>
                    </view>
                    <view class="empty-wrap" v-else>
                        <view>{{ $t("referrerInfo.inviteEmpty") }}</view>
                    </view>
                </view>
            </view>
        </myPopup>
    </view>
</template>

<script setup>
import myPopup from './myPopup.vue';
import { reactive, watch, computed } from 'vue';

import { useMainStore } from "@/store/index.js";
const { themeInfo } = useMainStore();

import { getClientCustomerApi } from "@/Apis/clientCustomer.js";
const clientCustomerApi = getClientCustomerApi();

// 接收 v-model
const props = defineProps({
    modelValue: {
        type: Boolean,
        default: false
    },
});
const emit = defineEmits(['update:modelValue']);

const state = reactive({
    list: []
});

const modelValue = computed({
    get() {
        return props.modelValue;
    },
    set(value) {
        emit('update:modelValue', value);
    }
});

watch(() => modelValue.value, (value) => {
    value && getRecommend()
});

const closeShow = () => {
    modelValue.value = false;
}

const getRecommend = () => {
    clientCustomerApi.GetMediatorUpUserList().then((res) => {
        if (res.code === 200) {
            state.list = res.data;
        }
    });
}
</script>

<style lang="scss" scoped>
.invite-wrap {
    .inner-wrap {
        position: relative;

        .title {
            padding: 40rpx 0;
            font-size: 28rpx;
            color: #FFFFFF;
            text-align: center;
            background: var(--main-color);
        }

        .close-icon {
            position: absolute;
            right: 30rpx;
            top: 30rpx;
            padding: 6rpx;
            border-radius: 50%;
            background: rgba($color: #FFFFFF, $alpha: 0.6);
        }

        .top-nav {
            display: flex;
            padding: 16rpx 0;
            background: var(--right-linear);

            .label {
                width: 33%;
                font-weight: bold;
                font-size: 28rpx;
                text-align: center;
                color: var(--text-color);
            }
        }

        .content-wrap {
            padding: 20rpx 0 40rpx;
            background: #F5F5EF;
            min-height: 400rpx;
            max-height: 600rpx;
            overflow: auto;

            .list-wrap {
                .item-wrap {
                    display: flex;
                    align-items: center;
                    justify-content: space-between;
                    padding: 20rpx;

                    .label {
                        width: 33%;
                        font-weight: bold;
                        font-size: 30rpx;
                        text-align: center;
                        color: var(--main-color);
                    }

                    &:nth-child(odd) {
                        background: rgba(216, 216, 216, 0.4);
                    }
                }
            }

            .empty-wrap {
                padding: 30rpx 0;
                margin: 20rpx 30rpx 0;
                text-align: center;
                font-size: 24rpx;
                font-weight: bold;
                border-radius: 16rpx;
                color: var(--text-color);
                background: var(--main-color);
            }
        }
    }
}
</style>