<template>
    <div class="bulletin_detail">
        <div class="left">
            <div class="left-content">
                <p class="title">{{ bulletinData?.title }}</p>
                <div class="flex gap-8 color-#595959 mt-10 mb-10">
                    <p>发布人员：{{ bulletinData?.publisher }}</p>
                    <p>发布时间：{{ bulletinData?.createTime }}</p>
                </div>
                <div class="email-content" v-html="bulletinData?.content"></div>
            </div>
            <template v-if="bulletinData?.files && bulletinData?.files.length > 0">
                <p style="margin: 15px 0;" class="file_title">附件</p>
                <div class="email_file flex">
                    <div class="file" v-for="item in bulletinData.files" @click="download(item.resourceUrl, item.resourceName)">
                        {{ item.resourceName }}({{ item.resourceSize }})
                    </div>
                </div>
            </template>
            <div class="user-notice">
                <span class='notice'>接收人员：</span>
                <span class="photo" v-if="userShowMore">
                    <span class="user_img" v-for="(user,odx) in bulletinData?.readVOsLes" :key="odx">
                        <img :src="user.staffPhoto" :class="{'img-light':user.hasRead}"/>
                        <i v-if="user.hasRead" class="el-icon-success" style="color:rgb(27,190,107)"></i>
                    </span>
                    <span class="more" v-if="bulletinData?.readVOs.length > 10" @click="userShowMore=false">展开</span>
                </span>
                <span class="photo" v-else>
                    <span class="user_img" v-for="(user,odx) in bulletinData?.readVOs" :key="odx">
                        <img :src="user.staffPhoto" :class="{'img-light':user.hasRead}"/>
                        <i v-if="user.hasRead" class="el-icon-success" style="color:rgb(27,190,107)"></i>
                    </span>
                    <span class="more" v-if="bulletinData?.readVOs.length>10" @click="userShowMore=true">收起</span>
                </span>
            </div>
        </div>
        <div class="right">
            <el-tabs class="flex flex-col h-100%" v-model="activeName">
                <el-tab-pane label="评论" name="comment" v-if="bulletinData?.isTalk == '1'">
                    <template v-if="commentList.length > 0">
                        <div class="flex-1 overflow-y-auto">
                            <div class="follow_item flex" v-for="item in commentList">
                                <img :src="item.staffPhoto">
                                <div class="follow_content">
                                    <div class="flex-center">
                                        <span class="text_black bold">{{ item.staffName }}</span>
                                        <span>{{ item.createTime }}</span>
                                        <el-icon class="del_icon" @click="delComment(item.id)">
                                            <Delete />
                                        </el-icon>
                                    </div>
                                    <div class="follow_desc">{{ item.content }}</div>
                                </div>
                            </div>
                        </div>
                    </template>
                    <div v-else>暂无评论</div>
                    <div class="comment-input">
                        <el-input v-model="commentText" style="width: 100%" placeholder="请输入评论内容">
                            <template #append>
                                <el-button type="primary" @click="comment()">评论</el-button>
                            </template>
                        </el-input>
                    </div>
                </el-tab-pane>
                <el-tab-pane label="浏览记录" name="record" v-hasPermi="['system:bulletin:lljl']">
                    <div>
                        <el-radio-group v-model="activeRecord" style="margin-bottom: 10px">
                            <el-radio-button value="yes" label="浏览名单"></el-radio-button>
                            <el-radio-button value="no" label="未浏览名单"></el-radio-button>
                        </el-radio-group>
                        <template v-if="activeRecord == 'yes'">
                            <el-table :height="500" :data="readList" style="width: 100%">
                                <el-table-column prop="deptName" label="部门" />
                                <el-table-column prop="staffName" label="人员" />
                                <el-table-column prop="times" label="浏览时间" />
                            </el-table>
                        </template>
                        <template v-else>
                            <el-table :height="500" :data="noReadList" style="width: 100%">
                                <el-table-column prop="deptName" label="部门" />
                                <el-table-column prop="staffName" label="人员" />
                            </el-table>
                        </template>
                    </div>
                </el-tab-pane>
            </el-tabs>
        </div>
    </div>
</template>

<script setup lang="ts">
    import { getBulletin } from '@/api/system/bulletin';
    import useUserStore from '@/store/modules/user';
    import { listComment, addComment, deleteComment } from '@/api/public'
    import moment from 'moment';

    const visible = ref(false)
    const bulletinData = ref()
    const { userInfo } = useUserStore();
    const bulletinId = ref()
    const route = useRoute()
    const userShowMore = ref(false)
    const getData = () => {
        bulletinId.value = route.query.id
        getBulletin(bulletinId.value, userInfo.id).then(res => {
            if(res.success) {
                bulletinData.value = res.result
                if(bulletinData.value.readVOs.length>10){
                    userShowMore.value = true
                    bulletinData.value.readVOsLes = bulletinData.value.readVOs.slice(0,10)
                }else{
                    userShowMore.value = false
                }
                readList.value = bulletinData.value?.readVOs.filter(item => item.hasRead).map(item => {
                    item.times = moment(item.times).format('MM-DD HH:mm')
                    return item
                })
                noReadList.value = bulletinData.value?.readVOs.filter(item => !item.hasRead)
            }
        })
        getComment()
        visible.value = true
    }

    const activeName = ref('comment')

    // 获取评论
    const commentList = ref([])
    const getComment = ()=>{
        let params = {
            pageIndex: 1,
            pageSize: 999999,
            type: '120',
            recordIds: bulletinId.value
        }
        listComment(params).then(res => {
            if(res.success) {
                commentList.value = res.result.records
            }
        })
    }

    const download = (url: string, fileName: string) => {
        const a = document.createElement('a');
        a.style.display = 'none';
        a.href = url;
        a.download = fileName;
        a.target = '_blank'
        document.body.appendChild(a);
        a.click();
        document.body.removeChild(a);
    }

    const commentText = ref('')
    // 评论
    const comment = () => {
        if(!commentText.value) {
            ElMessage.error(`请填写评论内容`)
            return false
        }
        let params = {
            type: '120',
            content: commentText.value,
            recordId: bulletinId.value,
            isFollow: 0
        }
        addComment(params).then(res => {
            if(res.success) {
                ElMessage.success('评论成功')
                commentText.value = ''
                getComment()
            }
        })
    }

    const delComment = (id) => {
        ElMessageBox.confirm(
            '是否确认删除当前评论？',
            '确认提示',
            { type: 'warning', confirmButtonText: '提交' }
        ).then(() => {
            deleteComment(id).then(res => {
                if(res.success) {
                    ElMessage.success('删除成功')
                    getComment()
                }else{
                    ElMessage.error('删除失败')
                }
            })
        }).catch(() => {})
    }

    const activeRecord = ref('yes')
    const readList = ref([])
    const noReadList = ref([])

    onMounted(() => {
        getData()
    })
</script>

<style lang="scss" scoped>
    .bulletin_detail{
        width: 100%;
        background: #FFF;
        display: flex;
        .left{
            flex: 1;
            padding: 20px 60px;
            overflow: auto;
            .left-content{
                display: flex;
                flex-direction: column;
                align-items: center;
            }
            .title{
                color: #333333;
                font-size: 18px;
                font-weight: bold;
            }
            .file_title{
                border-left: 3px solid var(--el-color-primary);
                font-size: 16px;
                padding-left: 10px;
                line-height: 1;
            }
        }
        .right{
            width: 460px;
            border-left: 1px solid #DCDEE2;
            padding: 10px 25px;
            :deep(.el-tabs__nav-wrap:after){
                display: none;
            }
            .comment-input{
                margin-top: 15px;
            }
            :deep(.el-table__inner-wrapper:before){
                display: none;
            }
            :deep(.el-tabs__content){
                height: 100%;
            }
            .el-tab-pane{
                height: 100%;
                display: flex;
                flex-direction: column;
                justify-content: space-between;
            }
        }
    }
    .user-notice{
        display: flex;
        margin-top: 20px;
        align-items: baseline;
    }
    .user-notice .notice{
        margin-right:10px;
    }
    .user-notice .photo{
        flex:1
    }
    .user-notice .user_img{
        display: inline-block;
        position: relative;
        margin-bottom: 10px;
    }
    .user-notice .user_img img{
        width: 32px;
        height:32px;
        border-radius: 100%;
        margin-right: 8px;
        vertical-align: middle;
    }
    .user-notice .user_img i{
        position: absolute;
        top: -2px;
        right: 2px;
    }
    .user-notice .more{
        margin-left: 10px;
        cursor: pointer;
        color: #1874FF;
    }
    .email_file{
        margin-top: 15px;
        flex-wrap: wrap;
        .file{
            border-radius: 2px;
            border: 1px solid #1874FF;
            padding: 4px 17px;
            color: #1874FF;
            margin: 0 15px 10px 0;
            cursor: pointer;
        }
    }
    .email-content{
        :deep(p){
            line-height: 32px;
        }
        :deep(ul){
            padding-inline-start: 20px;
            margin-block-end: 0;
            margin-block-start: 0;
            li{
                list-style: disc !important;
            }

        }
        :deep(ol){
            padding-inline-start: 20px;
            margin-block-end: 0;
            margin-block-start: 0;
            li{
                list-style: decimal !important;
            }

        }
        :deep(ol, li){
            padding-inline-start: 20px;
            margin-block-end: 0;
            margin-block-start: 0;
        }
        :deep(ul, li){
            padding-inline-start: 20px;
            margin-block-end: 0;
            margin-block-start: 0;
        }
        :deep(a){
            text-decoration: underline;
            color: #1874FF;
        }
        :deep(img){
            max-width: 100%;
        }
    }
    .follow_item{
        margin: 10px 0 0;
    }
    .follow_content{
        .follow_desc{
            margin:8px 0 0;
        }
    }
    .el-input-group__append button.el-button{
        background-color: #1874FF;
        color: #fff;
    }
    .del_icon{
        cursor: pointer;
        margin-left: 10px;
    }
</style>