<template>
    <div class="pop-mask flexcenter">
        <div class="content flexflex">
            <div class="header flexflex">
                <img class="header-icon" src="@/assets/img/user/inform-icon.png" />
                <img class="header-text" src="@/assets/img/user/inform-text.png" />
                <img class="circle" src="@/assets/img/user/big-circle.svg">
                <img class="circle" src="@/assets/img/user/small-circle.svg">
                <img class="white-cross" @click="emit('close')" src="@/assets/img/publicImage/white-cross.svg">
            </div>

            <div class="attention flexacenter" v-if="issubscribe == 0">
                <div class="attention-text">关注寄托服务号，第一时间收到消息通知</div>
                <el-popover placement="bottom" popper-class="flexcenter" :width="160" trigger="click"
                    popper-style="border-radius: 14px;padding: 20px;">
                    <template #reference>
                        <div class="attention-btn flexcenter">关注</div>
                    </template>
                    <img class="QR-code" :src="qrcode" alt="">
                </el-popover>
            </div>

            <div class="flex1 list scrollbar" @scroll="handleScroll">
                <div class="empty-box" v-if="false">
                    <empty-duck></empty-duck>
                </div>
                <template v-for="(item, index) in list" :key="index">
                    <!-- event: certapplication 群发  middlemanauth 中介 tenementcertified 个人  tenementreport 举报 -->
                    <div class="item flexflex" v-if="item['event'] == 'certapplication'">
                        <img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
                        <div class="time">{{ item['timestamp'] }}</div>
                        <div class="text">{{ item['message'] }}</div>
                        <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="footer flexcenter" v-if="item['data'] && item['data']['url']">
                                    去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
                                </div>
                            </template>

                            <img v-if="item['data']['url'].indexOf('middlemanAuth') != -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>
                    </div>
                    <div class="item flexflex" v-else-if="item['event'] == 'middlemanauth'">
                        <img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
                        <div class="time">{{ item['timestamp'] }}</div>
                        <div class="text">{{ item['message'] }}</div>
                        <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="footer flexcenter"
                                    v-if="item.data && item.data['middlemanauthstatus'] == 0 && item.data.url">
                                    去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
                                </div>
                            </template>
                            <img style="width: 360px;" src="@/assets/img/publicImage/mediation-authentication-code.svg">
                        </el-popover>
                    </div>

                    <div class="item flexflex" v-else-if="item['event'] == 'tenementcertified'">
                        <img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
                        <div class="time">{{ item['timestamp'] }}</div>
                        <div class="text">{{ item['message'] }}</div>
                        <div class="info flexacenter" v-if="item['data']">
                            <img class="soldOut" v-if="item['data']['status'] != 1" src="@/assets/img/user/u75.png" alt="">
                            <img class="img-icon" v-if="item['data']['isimage'] == 1"
                                src="@/assets/img/publicImage/img-icon.png">
                            <div class="title flex1 ellipsis">{{ item['data']['subject'] }}</div>
                            <div class="id">房源ID：{{ item['data']['id'] }}</div>
                        </div>
                        <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="footer flexcenter"
                                    v-if="item.data && item.data['tenementcertifiedstatus'] == 0 && item.data.url">
                                    去认证<img class="green-arrow" src="@/assets/img/publicImage/green-arrow.svg">
                                </div>
                            </template>
                            <img style="width: 360px;" src="@/assets/img/publicImage/housing-certification-code.svg">
                        </el-popover>
                    </div>

                    <div class="item flexflex" v-else>
                        <img class="new" v-if="item['isread'] == 0" src="@/assets/img/user/new.png">
                        <div class="time">{{ item['timestamp'] }}</div>
                        <div class="text">{{ item['message'] }}</div>
                        <div class="text" v-for="item in item['data']['reportnummessage']">- {{ item }}</div>
                        <div class="info flexacenter" v-if="item['data']">
                            <img class="soldOut" v-if="item['data']['status'] != 1" src="@/assets/img/user/u75.png" alt="">
                            <img class="img-icon" v-if="item['data']['isimage'] == 1"
                                src="@/assets/img/publicImage/img-icon.png">
                            <div class="title flex1 ellipsis"
                                @click="goDetail(item['data']['uniqid'], item['data']['status'])">{{
                                    item['data']['subject'] }}</div>
                            <div class="id">房源ID：{{ item['data']['id'] }}</div>
                        </div>
                    </div>
                </template>

            </div>
        </div>

    </div>
</template>

<script setup>
import emptyDuck from '@/components/public/empty-duck.vue'
import { onMounted, getCurrentInstance, ref, onUnmounted, defineEmits } from 'vue'
import { useRouter } from 'vue-router';
const emit = defineEmits(['close'])

const router = useRouter();

const { proxy } = getCurrentInstance()

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

let qrcode = ref("") // 关注二维码
let issubscribe = ref(0) // 是否已经关注公众号
let list = ref([]) // 列表数据
let state = false // 请求状态
let page = 1 // 页数
const init = () => {
    // proxy.$post("/tenement/message/lists").then((res) => {
    if (page == 0 || state) return
    state = true
    proxy.$post("/tenement/pc/api/user/messageList", {
        page
    }).then((res) => {
        if (res.code != 200) return
        let data = res.data
        qrcode.value = data['qrcode']
        issubscribe.value = data['issubscribe']
        list.value = list.value.concat(data['data'])
        page = data['page'] * data['limit'] < data['count'] ? page + 1 : 0
    }).catch((err) => {
    }).finally(() => {
        state = false
    })
}

const handleScroll = (event) => {
    if (page == 0 || state) return
    const scrollContainer = event.target; // 获取滚动容器元素
    const scrollHeight = scrollContainer.scrollHeight; // 元素内容的总高度
    const scrollTop = scrollContainer.scrollTop; // 滚动条距离滚动容器顶部的距离
    const clientHeight = scrollContainer.clientHeight; // 可见区域的高度

    if (scrollHeight - scrollTop === clientHeight) init()
};

// 点击跳转详情页
const goDetail = (uniqid, status) => {
    if (status != 1) return
    router.push(`/detail?uniqid=${uniqid}`);
}

</script>

<style lang="less" scoped>
.pop-mask {
    position: fixed;
    top: 0;
    left: 0;
    width: 100vw;
    height: 100vh;
    background: rgba(0, 0, 0, 0.698039215686274);
    z-index: 1;
}

.content {
    width: 700px;
    height: 750px;
    background-color: rgba(255, 255, 255, 1);
    border-radius: 16px;
    -moz-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
    -webkit-box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
    box-shadow: 0px 0px 10px rgba(0, 0, 0, 0.349019607843137);
    flex-direction: column;
    position: relative;

    .header {
        width: 100%;
        height: 160px;
        background: -webkit-linear-gradient(157.579749142889deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
        background: -moz-linear-gradient(-67.5797491428887deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
        background: linear-gradient(-67.5797491428887deg, rgba(82, 217, 219, 1) 0%, rgba(44, 100, 235, 1) 59%);
        border-radius: 16px 16px 0 0;
        justify-content: center;

        .circle {
            position: absolute;
            top: 0;
            right: 0;
        }

        .white-cross {
            position: absolute;
            top: 20px;
            right: 20px;
            cursor: pointer;
        }

        .header-icon {
            width: 52px;
            height: 57px;
            margin-top: 43px;
            margin-right: 21px;
        }

        .header-text {
            width: 145px;
            height: 47px;
            margin-top: 48px;
        }
    }

    .attention {
        margin: -26px auto 0;
        width: 660px;
        height: 50px;
        background-color: rgba(255, 255, 255, 1);
        border-radius: 230px;
        -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);
        font-size: 14px;
        color: #7F7F7F;
        justify-content: space-between;
        padding-left: 16px;
        padding-right: 8px;

        .attention-btn {
            width: 80px;
            height: 36px;
            background-color: rgba(253, 218, 85, 1);
            border-radius: 54px;
            font-family: 'PingFangSC-Regular', 'PingFang SC', sans-serif;
            font-weight: 400;
            font-size: 14px;
            color: #000000;
            cursor: pointer;
        }
    }

    .list {
        overflow: auto;
        margin: 10px 6px 30px;

        /*滚动条样式*/
        &::-webkit-scrollbar {
            width: 6px;
        }

        .empty-box {
            margin-top: 170px;
        }

        .item {
            flex-direction: column;
            width: 660px;
            background-color: rgba(255, 255, 255, 1);
            border: 1px solid rgba(235, 235, 235, 1);
            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);
            margin: 0 auto 10px;
            position: relative;

            .new {
                position: absolute;
                top: 7px;
                right: 17px;
                width: 40px;
                height: 40px;
            }

            .time {
                color: #aaaaaa;
                font-size: 13px;
                padding: 18px 16px 14px;

            }

            .text {
                color: #7F7F7F;
                line-height: 24px;
                font-size: 14px;
                padding: 0 16px;
                margin-bottom: 10px;
                word-wrap: break-word;
            }

            .info {
                width: 630px;
                height: 56px;
                background-color: rgba(246, 246, 246, 1);
                border-radius: 10px;
                font-size: 15px;
                color: #333;
                margin: 0 auto 16px;
                padding: 0 16px;
                position: relative;

                .soldOut {
                    position: absolute;
                    top: 0;
                    right: 0;
                    width: 40px;
                    height: 40px;
                }

                .title {
                    padding-right: 60px;
                    cursor: pointer;
                }

                .img-icon {
                    width: 22px;
                    height: 16px;
                    margin-right: 10px;
                }

                .id {
                    color: #AAAAAA;
                    font-size: 13px;
                }
            }

            .footer {
                border-top: 1px solid #ebebeb;
                font-size: 14px;
                color: #50E3C2;
                height: 45px;
                cursor: pointer;

                .green-arrow {
                    margin-left: 10px;
                    width: 14px;
                    height: 14px;
                }
            }
        }
    }
}

.QR-code {
    width: 100%;
}
</style>