<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('inviteDetail.title') }}</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('inviteDetail.Username') }}</view>
                    <view class="label">{{ $t('inviteDetail.Registration Date') }}</view>
                    <view class="label">{{ $t('inviteDetail.Status') }}</view>
                </view>
                <view class="content-wrap">
                    <view class="list-wrap" v-if="state.list.length">
                        <view class="item-wrap" v-for="item in state.list">
                            <view class="label">{{ item.name }}</view>
                            <view class="label">{{ item.createTime }}</view>
                            <view class="label">{{ item.status }}</view>
                        </view>
                    </view>
                    <view class="empty-wrap" v-else>
                        <view>{{ $t('inviteDetail.No invitation') }}</view>
                    </view>
                    <button open-type="share" class="share-btn">{{ $t('inviteDetail.Share Invitation') }}</button>
                </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 { useRecommend } from "@/Apis/recommend.js";
const getApi = useRecommend();
// 接收 v-model
const props = defineProps({
    modelValue:{
		type:Boolean,
		default:false
	},
});
const emit = defineEmits(['update:modelValue']);

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 = () => {
    getApi.GetRecommend().then((res) => {
        if(res.code === 200){
            state.list = res.data;
        }
    });
}

const state = reactive({
    list: []
});
</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(--main-color);
            
            .label {
                width: 33.33%;
                font-weight: bold;
                font-size: 28rpx;
                text-align: center;
                color: var(--text-color);
            }
        }

        .content-wrap {
            padding: 20rpx 0 40rpx;
            background: #FFFFFF;

            .list-wrap {
                max-height: 460rpx;
                overflow: auto;

                .item-wrap {
                    display: flex;
                    padding: 16rpx 0;

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

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

                .en {
                    margin-top: 20rpx;
                    font-size: 16rpx;
                }
            }

            .share-btn {
                margin: 40rpx 40rpx 0;
                text-align: center;
                font-weight: bold;
                font-size: 28rpx;
                border-radius: 40rpx;
                color: var(--text-color);
                background: var(--main-color);
            }
        }
    }
}
</style>