<template>
    <div class="notice-content">
        <aside>
            <a-list item-layout="horizontal" :data-source="noticeList">
                <template #renderItem="{ item }">
                    <a-list-item @click="choose(item)">
                        <a-list-item-meta :description="formatTime(item.createtime)">
                            <template #title>
                                <a
                                    :style="{ color: item.readed ? '@m-grey2' : '@m-white1' }"
                                    href="javascript:;"
                                >{{ item.title }}</a>
                            </template>
                            <template #avatar>
                                <a-badge :color="item.readed ? '@m-grey2' : 'orange'" />
                            </template>
                        </a-list-item-meta>
                    </a-list-item>
                </template>
            </a-list>
        </aside>
        <main>
            <h4>{{ chooseItemNotice.title }}</h4>
            <p>{{ formatTime(chooseItemNotice.createtime) }}</p>
            <div>{{ chooseItemNotice.content }}</div>
        </main>
    </div>
</template>

<script lang="ts">
import { defineComponent, PropType, reactive, computed } from 'vue';
import { QueryNoticeRsp } from '@/services/go/commonService/interface';
import { mergeObj } from '@/utils/objHandle';
import { handleNotice } from '../setup';
import { formatTime } from '@/common/methods/format';

function chooseNotice(fn: Function) {
    interface ItemNotice {
        title: string;
        content: string; //内容
        createtime: string; //创建时间
    }
    const chooseItemNotice = reactive<ItemNotice>({
        title: '',
        content: '',
        createtime: '',
    });
    function choose(item: QueryNoticeRsp) {
        fn(item);
        mergeObj(chooseItemNotice, item);
    }
    return { chooseItemNotice, choose };
}

export default defineComponent({
    name: 'notice',
    props: {
        noticeList: {
            type: Object as PropType<QueryNoticeRsp[]>,
            default: [],
        },
    },
    setup(props) {
        // 公告消息
        const { readNotice } = handleNotice();
        const { chooseItemNotice, choose } = chooseNotice(readNotice);
        computed(() => {
            props.noticeList.length && mergeObj(chooseItemNotice, props.noticeList[0]);
        });
        return {
            choose,
            formatTime,
            chooseItemNotice,
        };
    },
});
</script>

<style lang="less">
.notice-content {
    .flex;
    aside {
        cursor: pointer;
        padding: 10px;
        width: 202px;
        height: 619px;
        .ant-list-split {
            .ant-list-item-meta-description {
                text-align: right;
                font-size: 13px;
                color: @m-grey25;
            }
            .ant-list-item-meta-avatar {
                margin-right: 0;
            }
            .ant-list-item {
                padding: 5px 0;
                border-bottom: none;
                a {
                    width: 160px;
                    font-size: 15px;
                    display: inline-block;
                    .ellipse;
                }
            }
        }
    }
    main {
        flex: 1;
        background: @m-grey18;
        padding: 20px;
        h4 {
            font-size: 17px;
            color: @m-white1;
        }
        p {
            font-size: 13px;
            color: @m-grey25;
        }
        div {
            font-size: 15px;
            color: @m-grey2;
            text-indent: 2em;
        }
    }
}
</style
>;
