<template>
    <pageTopBar></pageTopBar>
    <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'] || store.state.user['avatar'] || require('@/assets/img/publicImage/defaultAvatar.png')">
                </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; newmessagenum = 0">
                    <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>
                    <choosing-identity></choosing-identity>
                </div>
                <template v-if="user['uid'] && user.identity != 0">
                    <img class="" src="@/assets/img/publicImage/cut-off-rule.svg">
                    <el-popover placement="bottom-end" :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"> -->

                        <div v-if="user.identity == 1" class="btn-qrcode">
                            <img class="bj" src="@/assets/img/publicImage/mediation-authentication-bj.jpg">
                            <img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=middlemanAuth">
                        </div>

                        <div v-else class="btn-qrcode">
                            <img class="bj" src="@/assets/img/publicImage/housing-certification-bj.jpg">
                            <img class="QR-code" src="https://app.gter.net/tenement/pc/api/qrcode?type=propertyAuth">
                        </div>
                    </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 flexacenter" v-else>共 <b>{{ count['publish'] }}</b> 条房源（上架 {{ stat['listing'] }} <div
            class="longString">|</div> 草稿 {{ stat['draft']
            }} <div class="longString">|</div> 下架 {{ stat['offshelf'] }}）</div>

    <div class="list wid1200 flexflex" v-show="tabState == 'fav'" ref="gridContainer">
        <div class="item" v-for="(item, index) in favData['list']" :key="item.id">
            <public-list-item :item="item" :index="index" @cancelCollection="cancelCollection"></public-list-item>
        </div>
    </div>
    <div class="list wid1200 flexflex" v-show="tabState == 'publish'" ref="gridContainerpublish">
        <div class="item" v-for="(item, index) in publishData['list']" :key="item.id">
            <public-list-item :item="item" :index="index" @cancelCollection="cancelCollection" :ispublish="true"
                @goUp="goUp" @undercarriage="undercarriage" @handleDelete="handleDelete"></public-list-item>
        </div>
    </div>

    <div class="empty-box flexcenter wid1200"
        v-if="(tabState == 'fav' && favData['list'].length == 0) || (tabState == 'publish' && publishData['list'].length == 0)">
        <empty-duck></empty-duck>
    </div>

    <div class="bottom-tps"
        v-if="(tabState == 'fav' && favData['list'].length != 0 && favData['page'] == 0) || (tabState == 'publish' && publishData['list'].length != 0 && publishData['page'] == 0)">
        - 到底了 -</div>

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

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

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

<script setup>
import pageTopBar from '../components/pageTopBar/pageTopBar.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 publicListItem from '@/components/public/public-list-item.vue'
import emptyDuck from '@/components/public/empty-duck.vue'
import choosingIdentity from '@/components/edit/choosingIdentity.vue'
import backToTop from '@/components/public/backToTop.vue'

import { ref, reactive, onMounted, onUnmounted, getCurrentInstance, nextTick, pushScopeId } from 'vue'
import { useRoute, useRouter } from 'vue-router';

import { ElLoading, ElMessage } from 'element-plus'
import Masonry from 'masonry-layout';
import store from '@/store/index';

const { proxy } = getCurrentInstance()

const route = useRoute();

const gridContainer = ref(null);
const gridContainerpublish = ref(null);
let masonryInstance = null
let masonryInstancepublish = null

onMounted(() => {
    masonryInstance = new Masonry(gridContainer.value, {
        itemSelector: '.item',
        gutter: 20
    });
    masonryInstancepublish = new Masonry(gridContainerpublish.value, {
        itemSelector: '.item',
        gutter: 20
    });

    init()

    window.addEventListener('scroll', handleScroll);

})

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": "房源认证"
}

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

        if (!route.query['tab']) {
            if (data.count['publish'] > 0) tabState.value = 'publish'
            else if (data.count['fav'] == 0) tabState.value = 'publish'
            else tabState.value = 'fav'
        } else tabState.value = route.query['tab']

        if (tabState.value == 'publish') getPublishData()
        else getFavData()

        user.value = data.user
        count.value = data.count
        newmessagenum.value = data.newmessagenum
        store.state.user['messagenum'] = data.newmessagenum

        validityidentity.value = data.validityidentity
    }).finally(() => { })
}


let loading = ElLoading.service({
    lock: true,
    text: 'Loading',
    background: 'rgba(0, 0, 0, 0.7)',
    visible: false
});

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

let stat = ref({}) // 我的发布的详细数量
// 获取发布数据
const getPublishData = () => {
    if (publishData.value['page'] == 0 || loading['visible'].value) return
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    proxy.$post("/tenement/pc/api/user/publishList", {
        page: publishData.value['page']
    }).then(res => {
        if (res.code != 200) return
        let data = res.data
        // data.data[0]['verifiedstatus'] = 1
        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'] || [])
        nextTick(() => {
            masonryInstancepublish.reloadItems();
            masonryInstancepublish.layout();
            loading.close()
        })
    }).finally(() => {
        loading.close()
    })
}

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

// 获取收藏数据
const getFavData = () => {
    if (favData.value['page'] == 0 || loading['visible'].value) return
    loading = ElLoading.service({
        lock: true,
        text: 'Loading',
        background: 'rgba(0, 0, 0, 0.7)',
    })
    proxy.$post("/tenement/pc/api/user/favList", {
        page: favData.value['page'],
        limit:5
    }).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'] || [])
        favData.value['limit'] = data['limit']
        nextTick(() => {
            masonryInstance.reloadItems();
            masonryInstance.layout();
            loading.close()
        })
    }).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()
}

// 取消收藏
let cancelCollection = data => {
    proxy.$post("/tenement/pc/api/user/operation", {
        token: data['token']
    }).then(res => {
        if (res.code != 200) return
        favData.value.list.splice(data['index'], 1)
        count.value['fav']--

        if (favData.value.list.length == 0 && favData.value['page'] != 0) {
            favData.value['page'] = 1
            getFavData()
        } else refillData(data['index'])

        nextTick(() => {
            masonryInstance.reloadItems();
            masonryInstance.layout();
            loading.close()
        })
    })
}

// 取消输出后重新补充一条数据
const refillData = index => {
    if (favData.value['page'] == 0 || loading['visible'].value) return
    const page = favData.value['page'] - 1
    proxy.$post("/tenement/pc/api/user/favList", {
        page,
        limit: favData.value['limit']
    }).then(res => {
        if (res.code != 200) return
        let data = res.data['data'] || []
        favData.value['list'].push(data[data.length - 1])
        nextTick(() => {
            masonryInstance.reloadItems();
            masonryInstance.layout();
        })
    })
}

// 点击下架都修改状态
const undercarriage = (index, status) => {
    stat.value['listing']--
    stat.value['offshelf']++
    publishData.value['list'][index].status = status
}


// 点击顶上去后改 数据 状态
const goUp = index => publishData.value['list'][index].isding = 1

// 点击删除
const handleDelete = (index, status) => {
    if (status == 0) stat.value['draft']--
    else if (status == 1) stat.value['listing']--
    else stat.value['offshelf']--
    count.value['publish']--
    publishData.value['list'].splice(index, 1)
    nextTick(() => {
        masonryInstancepublish.reloadItems();
        masonryInstancepublish.layout();
        loading.close()
    })
}

// 监听滚动到底部
const handleScroll = () => {
    if (!user.value['uid']) return
    const scrollHeight = document.documentElement.scrollHeight;
    const clientHeight = document.documentElement.clientHeight;
    const scrollTop = document.documentElement.scrollTop || document.body.scrollTop;
    if (scrollTop + clientHeight >= scrollHeight - 350) {
        if (tabState.value == 'publish') getPublishData()
        else getFavData()
    }
};

onUnmounted(() => {
    window.removeEventListener('scroll', handleScroll);
});

</script>

<style lang="less" scoped>
* {
    font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
}

.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: 1px 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;
        margin: 0 4px;
    }

    .longString {
        font-weight: 400;
        color: #D7D7D7;
        margin: 0 4px;
    }
}

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

    .item {
        cursor: pointer;
    }
}

.empty-box {
    background-color: #FFFFFF;
    height: 500px;
    margin: 0 auto;
    justify-content: center;
    align-items: center;
    border-radius: 16px;
}

.bottom-tps {
    font-weight: 400;
    font-size: 14px;
    color: #555555;
    text-align: center;
    padding: 30px 0;
}

.btn-qrcode {
    width: 360px;
    margin: 0 auto;

    .bj {
        width: 100%;
        box-shadow: 0px 0px 8px rgba(0, 0, 0, 0.2784313725490196);
        border-radius: 10px;
    }

    .QR-code {
        position: absolute;
        width: 110px;
        height: 110px;
        border-radius: 50%;
        bottom: 86px;
        left: 50%;
        transform: translateX(-50%);
    }
}
</style>
