<template>
    <Drawer
        v-model="isShowDialog"
        size="500px"
        @open="open"
        @close="close"
        :title="title"
        :showClose="false"
        :noPadding="true"
    >
        <template #title-end>
            <span class="more-message" @click="handleMoreMessage">更多消息</span>
        </template>
        <div
            class="message-drawer-content width-100 height-100"
            v-loading="loading"
            element-loading-background="rgba(10 ,38 ,61, 0.9)"
        >
            <div
                class="empty-container width-100 height-100 flex-center"
                v-if="!messageList.length && !loading"
            >
                <el-empty
                    :image="emptyImage"
                    description="无新消息通知，点击“更多消息”查看历史消息"
                />
            </div>
            <div
                class="message-item flex-start flex-col-start flex-gap-10"
                :class="{ read: readList.includes(item.id) }"
                v-for="(item, index) in messageList"
                key="item.id"
                @click="handleDetail(item)"
            >
                <div class="width-px-26 message-index">{{ index + 1 }}.</div>
                <div class="flex-1">
                    <div class="message-title">
                        <el-icon
                            class="title-icon"
                            :color="readList.includes(item.id) ? '#909399' : '#409efc'"
                            ><Memo
                        /></el-icon>
                        <span>{{ item.subject }}</span>
                    </div>
                    <div class="message-info">
                        {{ item.owner }} · {{ item.createTime.slice(5) }}
                    </div>
                </div>
            </div>
        </div>
        <MessageDetail v-model:is-show="showDetail" :messageId="messageId" @read="handleRead" />
    </Drawer>
</template>
<script lang="ts" setup name="MessageDrawer">
import { ref, watch, computed } from 'vue'
import Drawer from '@/components/Drawer/index.vue'
import { messageReceiver } from '@/api/system/message'
import MessageDetail from './MessageDetail.vue'
import { useRouter } from 'vue-router'
import emptyImage from '@/assets/img/common/empty.png'
const router = useRouter()
const messageList = ref<MessageItem[]>([])
const msgNum = ref(0)
const loading = ref(false)
const showDetail = ref(false)
const messageId = ref('')
const readList = ref<string[]>([])

interface MessageItem {
    id: string
    subject: string
    owner: string
    createTime: string
}

const props = defineProps({
    isShow: {
        type: Boolean,
        default: false
    }
})

const emit = defineEmits(['update:isShow', 'refresh'])

const isShowDialog = computed({
    get() {
        return props.isShow
    },
    set(val) {
        emit('update:isShow', val)
    }
})

const open = async () => {
    try {
        loading.value = true
        readList.value = []
        messageList.value = []
        msgNum.value = 0
        const { rows = [] } = (await messageReceiver(query)) as any
        messageList.value = rows || []
        msgNum.value = messageList.value.length
        loading.value = false
    } catch (error) {
        console.log(error)
    }
}

const close = () => {
    if (msgNum.value > 0 && readList.value.length > 0) {
        emit('refresh')
    }
}

const title = computed(() => {
    return `消息中心${msgNum.value > 0 ? ` (${msgNum.value})` : ''}`
})

const query = {
    pageBean: { pageSize: -1, page: 1 },
    querys: [
        {
            operation: 'EQUAL',
            property: 'receiveTime',
            relation: 'AND',
            group: 'filterTime',
            value: '1'
        }
    ]
}

const handleDetail = (item: MessageItem) => {
    messageId.value = item.id || ''
    showDetail.value = true
}

const handleRead = (id: string) => {
    // 阅读消息后重新获取列表
    readList.value = [...readList.value, id]
}

const handleMoreMessage = () => {
    isShowDialog.value = false
    close()
    router.push('/platLayout/message')
}
</script>

<style lang="scss" scoped>
.more-message {
    cursor: pointer;
    color: var(--theme-more-message-color);
    &:hover {
        color: $color-primary;
    }
}
.message-item {
    color: $color-white;
    border-bottom: 1px solid $system-border-color3;
    padding: 16px;
    cursor: pointer;
    &:hover {
        background-color: $system-module-color2;
        .message-info {
            text-decoration: underline;
        }
    }
}
.message-index {
    text-align: left;
    font-size: 16px;
    margin-top: 6px;
    color: $system-table-text-color;
}
.message-title {
    font-size: 16px;
    .title-icon {
        margin-right: 6px;
        font-size: 14px;
    }
}
.message-item.read {
    .message-info,
    .message-title,
    .message-index {
        color: $color-text-secondary;
    }
}
.message-info {
    color: $system-table-text-color;
    font-size: 14px;
    margin-top: 10px;
}
</style>
