<template>
    <el-drawer
        v-model="show"
        direction="rtl"
        @close="close"
        lock-scroll
    >
    <template #header>
        <span style="font-size: 22px;color: #000;font-weight: 700;">{{ t('notice.pageTitle') }}</span>
    </template>
        <div class="notice-item" :class="{'unread': item.status == 0}" v-for="(item,index) in data" @click="showDetail(index)">
            <el-text class="title" truncated>{{ item.subject }}</el-text>
            <el-link class="read-btn" type="primary" :underline="false" @click.stop="setRead(index)" >{{ t('notice.read') }}</el-link>
            <span class="time" >{{ item.sendTime }}</span>
        </div>
    </el-drawer>
    <el-dialog v-if="notice != null"
        v-model="dialogVisible"
        :title="notice.subject"
        width="840px"
        top="10vh"
        center
    >
    <div style="max-height: 60vh;overflow-y: auto;">
        <span v-html="notice.content"></span>
    </div>
      <template #footer>
        <div class="dialog-footer">
            <el-button type="primary" @click="setRead(curIndex)" size="large">
            {{ t('notice.setRead') }}
            </el-button>
        </div>
      </template>
    </el-dialog>
</template>

<script setup>
import { useLocale } from 'element-plus'
import { getNoticeByUserId, setNoticeReadStatus } from '@/api/notice'

const { t } = useLocale()
const show = ref(false)
const countUnread = ref(0)
const data = ref([])
const dialogVisible = ref(false)
const curIndex = ref(null)
const notice = ref(null)
const firstLoad = ref(true)

const emit = defineEmits(['close'])

function close() {
    emit('close', countUnread.value)
}

getNoticeByUserId().then(resp => {
    if (resp.data) {
        data.value = resp.data
        let count = 0;
        for (let index = 0; index < resp.data.length; index++) {
            const element = resp.data[index];
            if (element.status == 0) {
                count++
                if (firstLoad.value) {
                    firstLoad.value = false
                    showDetail(index)
                }
            }
        }
        countUnread.value = count
        emit('close', countUnread.value)
    }
    firstLoad.value = false
})

function showDetail(index) {
    curIndex.value = index
    notice.value = data.value[index]
    dialogVisible.value = true
}

function setRead(index) {
    setNoticeReadStatus({id: data.value[index].id}).then(resp => {
        data.value[index].status = 1
        countUnread.value--
        dialogVisible.value = false
        emit('close', countUnread.value)
    })
}

function switchShow() {
    show.value = !show.value
}

defineExpose({
    switchShow
})

</script>

<style lang="scss" scoped>
.notice-item {
    padding: 10px 20px;
    cursor: pointer;
    display: flex;
    flex-direction: column;
    position: relative;

    .read-btn {
        display: none;
        position: absolute;
        bottom: 10px;
        left: 20px;
    }

    .title {
        align-self: flex-start;
        font-weight: 600;
        font-size: 18px;
        color: #949494;
        margin-bottom: 5px;
    }

    .time {
        align-self: flex-end;
        color: #949494;
    }
}

.unread .title {
    color: #000000;
}

.unread:hover .read-btn {
    display: block;
}

.notice-item:hover {
    background-color: var(--el-color-primary-light-9);
}

.dialog-footer {
    .el-button {
        font-size: 18px;
        height: 40px;
        padding: 0 20px;
    }
}
</style>