<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">
                    <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="click" :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 pitch">我的收藏</div>
            <div class="tab-item flexcenter">我的发布</div>
        </div>
    </div>

    <!-- 有疑问 -->
    <div class="flexcenter" style="padding: 78px 0;">
        <el-popover placement="bottom" popper-class="have-questions flexcenter" :width="160" trigger="hover"
            popper-style="border-radius: 14px;padding: 20px;">
            <template #reference>
                <div class="have-questions flexcenter">
                    <div class="have-questions-text flexacenter">有疑问？来找<img class="smiling"
                            src="@/assets/img/publicImage/smiling.png">寄托方同学！</div>
                    <div class="have-questions-btn flexcenter">
                        <img class="have-questions-icon" src="@/assets/img/publicImage/QR-code.svg" />扫码加微信
                    </div>
                </div>
            </template>
            <img class="QR-code"
                src="https://oss.gter.net/Zvt57TuJSUvkyhw-xG7Y2l-S_J8rcn3qqsgFptxhXa6RWi26P-BuTQQWELrL49kb8MVYZjQ0Mjk~"
                alt="">
        </el-popover>
    </div>

    <!-- 系统通知弹窗 -->
    <systematic-notification-pop></systematic-notification-pop>
</template>

<script setup>
import headerNav from '@/components/public/head.vue'
import systematicNotificationPop from '@/components/user/systematic-notification-pop.vue'
import { ref, reactive, onMounted, getCurrentInstance } from 'vue'
const { proxy } = getCurrentInstance()

console.log("proxy", proxy);

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

let user = ref({})
let count = ref({})
let newmessagenum = ref(0)
let validityidentity = ref('')

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

async function init() {
    proxy.$post("/tenement/v2/api/user").then(res => {
        if (res.code != 200) return
        let data = res.data
        data.user['identity'] = -1
        user.value = data.user
        count.value = data.count
        newmessagenum.value = data.newmessagenum
        validityidentity.value = data.validityidentity

    });
}

</script>

<style lang="less">
.user-box {
    width: 1200px;
    height: 238px;
    margin: 30px auto 0;
    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;
            }
        }
    }
}



.have-questions {
    display: inline-flex;
    flex-direction: column;

    .QR-code {
        width: 100%;
    }

    .have-questions-text {
        color: #7F7F7F;
        font-size: 14px;
        margin-bottom: 14px;

        .smiling {
            width: 16px;
            height: 16px;
            margin: 0 5px;
        }
    }

    .have-questions-btn {
        width: 166px;
        height: 40px;
        border-radius: 40px;
        font-size: 18px;
        font-weight: 650;
        color: #333;
        border: 1px solid #7f7f7f;
        cursor: pointer;

        .have-questions-icon {
            width: 16px;
            height: 16px;
            margin-right: 10px;
        }
    }
}
</style>
