<template>
    <div class="container">
        <van-list finished-text="没有更多了" v-model="loading" :finished="finished" @load="querystaffmessage">
            <div class="message flex flex-y" v-for="item in MessageList" :key="item.id" @click="toDetail(item)">
                <div class="flex flex-x flex-end m-bottom10">
                    <div class="flex flex-x  flex-center2 ">
                        <div v-if="item.messageType !== 'ic_event'"><img class="img_23 m-right7"
                                src="../../assets/images/Mess/suqiu.png">
                        </div>
                        <div v-if="item.messageType == 'ic_event'"><img class="img_23 m-right7"
                                src="../../assets/images/Mess/manyidu.png"></div>
                        <div class="font-size15 m-right7">{{ item.messageType == 'ic_event' ? '诉求办理' : '满意度调查' }}</div>
                        <div class="font-size13 C1">{{ item.createdTime }}</div>
                    </div>
                    <div class="font-size13 C1 flex flex-center2"><span>{{ item.readFlag == 'unread' ? '未读' : '已读'
                            }}</span>
                    </div>
                </div>


                <div class="m-bottom10"><span>{{ item.messageContent }}</span></div>
                <div v-if="item.messageType == 'ic_event'" class="label m-bottom10">
                    <div class="font-size15 lable-span gray">{{ item.eventContent || '--' }}</div>
                </div>
                <div v-if="item.messageType !== 'ic_event'" class="label m-bottom10">
                    <div class="font-size15 lable-span gray">{{ item.eventContent }}</div>
                </div>
            </div>

        </van-list>
    </div>
</template>

<script>
import { querystaffmessage } from '@/api/message'
import { eventDetail } from '@/api/event'


export default {
    name: 'message',
    data() {
        return {
            MessageList: [
                {
                    id: "1580112951706976257",
                    title: "您有一条事件消息！",
                    messageContent: "您上报的事件已完成，请查看。",
                    readFlag: "unread",
                    createdTime: "1665563259",
                    messageType: "ic_event",
                    targetId: "1580089831937847297"
                },

            ],
            loading: true,
            userId: "",
            pageNo: 1,
            finished: false,
            pageSize: 10
        }
    },
    mounted() {
        this.userId = this.$store.state.app.userInfo.id;
        this.querystaffmessage()
    },
    methods: {
        async toDetail(item) {
            if (item.messageType === 'ic_event') {
                let res = await eventDetail({ icEventId: item.id })
                if (res.code === 0) {
                    res.data.pageType = 'event'
                    this.$router.push({ path: '/appealDetail', query: res.data })
                }
            }
        },
        async querystaffmessage() {
            let parm = {
                agencyId: this.$store.state.app.agencyId,
                app: 'resi',
                userId: this.userId,//'f838614e67cf8ae0edaefe562b6660e5'
                pageSize: this.pageSize,
                customerId: this.$store.state.app.userInfo.customerId,
                pageNo: this.pageNo++
            }
            let res = await querystaffmessage(parm)
            this.loading = false
            if (res.code === 0) {
                if (!res.data || res.data.length < this.pageSize) {
                    this.finished = true;
                }
                this.MessageList = res.data
            }
        },
    }
}
</script>

<style scoped lang="less">
@import './index';
</style>