<template>
    <header-nav></header-nav>

    <div class="user-box">
        <div class="info-box flexacenter">
            <div class="info-left flexacenter flex1">
                <a href="https://bbs.gter.net/account.php?a=avatar" target="_blank">
                    <img class="info-user-icon" :src="user['avatar']">
                </a>

                <div class="info-user-box">
                    <div class="info-user-top flexacenter">
                        <a href="https://bbs.gter.net/account.php?a=info" target="_blank" class="info-user-username">{{
                            user['nickname'] }}</a>
                        <a href="https://bbs.gter.net/account.php?a=info" target="_blank">
                            <img class="info-user-edit" src="@/assets/img/publicImage/edit-pen.png">
                        </a>
                        <img class="info-user-certifying" v-if="user.intermediary == 1"
                            src="@/assets/img/publicImage/certifying-agent.png">
                        <div class="info-user-validity" v-if="validityidentity">（有效期至{{ validityidentity }}）</div>
                    </div>
                    <div class="info-user-bottom flexacenter">UID：{{ user['uid'] }}</div>
                </div>
            </div>
            <div class="info-right flexacenter">
                <div class="operate-item message flexcenter" @click="systematicState = true">
                    <div class="operate-item-shell flexcenter">
                        <div class="newmessagenum flexcenter" v-if="newmessagenum > 0">{{ newmessagenum }}</div>
                        <img class="operate-icon" src="@/assets/img/publicImage/message-icon.svg">
                    </div>
                    <div class="operate-text">消息提醒</div>
                </div>
                <img class="" src="@/assets/img/publicImage/cut-off-rule.svg">
                <div class="operate-item flexcenter add">
                    <div class="operate-item-shell flexcenter">
                        <img class="operate-icon" src="@/assets/img/publicImage/add-icon.svg">
                    </div>
                    <div class="operate-text">发布房源</div>
                </div>
                <template v-if="user.identity != 0">
                    <img class="" src="@/assets/img/publicImage/cut-off-rule.svg">
                    <el-popover placement="bottom" :width="360" trigger="hover" :show-arrow="false"
                        popper-style="background: transparent;padding:0;box-shadow: none;border: none;">
                        <template #reference>
                            <div class="operate-item flexcenter identity">
                                <div class="operate-item-shell flexcenter"
                                    :class="{ 'intermediary': user.identity == 1, 'personage': user.identity == -1 }">
                                    <img class="operate-icon" src="@/assets/img/publicImage/intermediary-icon.png">
                                </div>
                                <div class="operate-text">{{ identityObj[user.identity || -1] }}</div>
                            </div>
                        </template>
                        <img v-if="user.identity == 1" style="width: 360px;"
                            src="@/assets/img/publicImage/mediation-authentication-code.svg">
                        <img v-else style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg">
                    </el-popover>
                </template>
            </div>
        </div>

        <div class="tab-box flexacenter">
            <div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'fav' }" @click="cutTab('fav')">我的收藏</div>
            <div class="tab-item flexcenter" :class="{ 'pitch': tabState == 'publish' }" @click="cutTab('publish')">我的发布
            </div>
        </div>
    </div>

    <div class="quantity wid1200" v-if="tabState == 'fav'">共收藏 <b>{{ count['fav'] }}</b> 个房源</div>
    <div class="quantity wid1200" v-else>共 <b>{{ count['publish'] }}</b> 条房源（上架 {{ stat['listing'] }} | 草稿 {{ stat['draft']
    }} | 下架 {{ stat['offshelf'] }}）</div>

    <div class="list wid1200 flexflex">
        <div class="item" v-for="item in 10">
            <biserial-list-item></biserial-list-item>
        </div>
    </div>

    <!-- 有疑问 -->
    <have-questions></have-questions>

    <!-- 页底 -->
    <page-footer></page-footer>

    <!-- 系统通知弹窗 -->
    <systematic-notification-pop v-if="systematicState" @close="systematicState = false"></systematic-notification-pop>
</template>

<script setup>
import headerNav from '@/components/public/head.vue'
import systematicNotificationPop from '@/components/user/systematic-notification-pop.vue'
import haveQuestions from '@/components/public/have-questions.vue'
import pageFooter from '@/components/footer/footer.vue'
import biserialListItem from '@/components/biserialListItem/biserialListItem.vue'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()
import { ElLoading } from 'element-plus'


onMounted(() => {
    init()
})

let systematicState = ref(false) // 系统通知
let user = ref({})
let count = ref({}) // 发布和收藏的数量
let newmessagenum = ref(0)
let validityidentity = ref('')
let tabState = ref('publish') // fav  publish

const identityObj = {
    1: "中介认证",
    "-1": "房源认证"
}

async function init() {
    proxy.$post("/tenement/v2/api/user").then(res => {
        if (res.code != 200) return
        let data = res.data

        if (data.count['publish'] > 0) {
            tabState.value = 'publish'
            getPublishData()
        } else {
            tabState.value = 'fav'
            getFavData()
        }

        user.value = data.user
        count.value = data.count
        newmessagenum.value = data.newmessagenum
        validityidentity.value = data.validityidentity
    });
}

let loading = null

let publishData = ref({
    page: 1,
    list: []
})

let stat = ref({}) // 我的发布的详细数量
// 获取发布数据
const getPublishData = () => {
    if (publishData.value['page'] == 0 || loading) return
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    proxy.$post("/tenement/pc/api/user/publishList", {
        page: publishData['page']
    }).then(res => {
        if (res.code != 200) return
        let data = res.data
        stat.value = data['stat']
        publishData.value['page'] = data['page'] * data['limit'] >= data['count'] ? 0 : data['page'] + 1
        publishData.value['list'] = publishData.value['list'].concat(data['data'])
    }).finally(() => {
        loading.close()
    })
}

let favData = ref({
    page: 1,
    list: []
})

// 获取收藏数据
const getFavData = () => {
    if (favData.value['page'] == 0 || loading) return
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    proxy.$post("/tenement/pc/api/user/favList", {
        page: favData['page']
    }).then(res => {
        if (res.code != 200) return
        let data = res.data
        favData.value['page'] = data['page'] * data['limit'] >= data['count'] ? 0 : data['page'] + 1
        favData.value['list'] = favData.value['list'].concat(data['data'])
    }).finally(() => {
        loading.close()
    })
}

// 切换 tab 
const cutTab = (value) => {
    tabState.value = value
    if (tabState.value == 'publish' && publishData.value['list'].length == 0) getPublishData()
    else if (tabState.value == 'fav' && favData.value['list'].length == 0) getFavData()
}

</script>

<style lang="less">
.user-box {
    width: 1200px;
    height: 238px;
    margin: 30px auto 26px;
    font-size: 14px;
    background: linear-gradient(0deg, rgba(214, 236, 255, 1) -4%, rgba(232, 244, 255, 1) 34%, rgba(176, 216, 255, 1) 131%);
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    -webkit-box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);
    box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.0784313725490196);

    .info-box {
        height: 160px;
        border-bottom: 2px solid #ddeeff;

        .info-left {
            padding-left: 40px;

            .info-user-icon {
                width: 80px;
                height: 80px;
                border-radius: 50%;
            }

            .info-user-box {
                margin-left: 20px;

                .info-user-top {
                    height: 28px;

                    .info-user-username {
                        font-size: 16px;
                        color: #333;
                    }

                    .info-user-edit {
                        width: 16px;
                        height: 16px;
                        margin-left: 5px;
                        cursor: pointer;
                        margin-right: 29px;
                    }

                    .info-user-certifying {
                        width: 85px;
                        height: 20px;
                    }

                    .info-user-validity {
                        color: #aaa;
                        font-size: 13px;
                    }

                }

                .info-user-bottom {
                    height: 24px;
                    color: #7F7F7F;
                }
            }
        }

        .info-right {

            .operate-item {
                flex-direction: column;
                margin: 0 52px;
                position: relative;
                cursor: pointer;

                .operate-item-shell {
                    width: 40px;
                    height: 40px;
                    border-radius: 20px;
                    margin-bottom: 7px;
                }

                &.message {

                    .operate-item-shell {
                        position: relative;
                        background-color: rgba(80, 227, 194, 1);
                        border-radius: 8px;
                        -moz-box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);
                        -webkit-box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);
                        box-shadow: 0px 0px 5px rgba(80, 227, 194, 1);

                        .operate-icon {
                            width: 32px;
                            height: 28px;
                        }

                        .newmessagenum {
                            position: absolute;
                            top: 0;
                            right: 0;
                            transform: translate(50%, -50%);
                            width: 16px;
                            height: 16px;
                            font-size: 13px;
                            background: #f95d5d;
                            color: #FFFFFF;
                            border-radius: 50%;
                        }
                    }
                }

                &.add {
                    .operate-item-shell {
                        background-color: rgba(253, 223, 109, 1);
                        -moz-box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);
                        -webkit-box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);
                        box-shadow: 0px 0px 5px rgba(253, 223, 109, 1);

                        .operate-icon {
                            width: 16px;
                            height: 16px;
                        }
                    }
                }

                &.identity {
                    .operate-item-shell {
                        &.intermediary {
                            background-color: rgba(46, 207, 226, 1);
                            -moz-box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
                            -webkit-box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
                            box-shadow: 0px 0px 5px rgba(46, 207, 226, 1);
                        }

                        &.personage {
                            background-color: rgba(171, 169, 255, 1);
                            -moz-box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
                            -webkit-box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
                            box-shadow: 0px 0px 5px rgba(123, 121, 255, 1);
                        }
                    }

                    .operate-icon {
                        width: 22px;
                        height: 22px;
                    }
                }

                .operate-text {
                    color: #555;
                    font-size: 14px;
                    height: 24px;
                }
            }

        }
    }

    .tab-box {
        height: 78px;
        padding-left: 20px;

        .tab-item {
            width: 160px;
            height: 48px;
            background-color: rgba(205, 227, 247, 1);
            border-radius: 8px;
            font-size: 18px;
            color: #555555;
            margin-right: 10px;
            cursor: pointer;

            &.pitch {
                background-color: rgba(98, 177, 255, 1);
                border-radius: 8px;
                font-family: 'PingFangSC-Semibold', 'PingFang SC Semibold', 'PingFang SC', sans-serif;
                font-weight: 650;
                font-style: normal;
                font-size: 18px;
                color: #FFFFFF;
                position: relative;

                &::after {
                    content: "";
                    position: absolute;
                    bottom: -5px;
                    width: 14px;
                    height: 8px;
                    background-image: url('@/assets/img/publicImage/green-arrow-below.svg');
                }

            }
        }
    }
}

.quantity {
    margin: 0 auto;
    font-size: 14px;
    color: #555;
    margin-bottom: 24px;

    b {
        color: #000;
    }
}

.list {
    margin: 0 auto;
    flex-wrap: wrap;
    justify-content: space-between;

    .item {
        margin-bottom: 20px;
    }
}


</style>
