<template>
    <div class="w-100% h-100% announcement">
		<div class="frame-card h-100% flex flex-col" v-loading="loading">
			<div class="search">
                <el-form :model="queryParams" ref="queryFormRef" :inline="true">
                    <el-form-item prop="title">
                        <el-input
                            v-model="queryParams.title"
                            placeholder="搜索公告标题"
                            clearable
                            @keyup.enter="handleQuery"
                            prefix-icon="Search"
                        />
                    </el-form-item>
                    <el-form-item prop="startDate">
                        <el-date-picker
                            v-model="rangeTime"
                            type="daterange"
                            value-format="YYYY-MM-DD"
                            start-placeholder="发布时间"
                            end-placeholder="发布时间"
                            @change="changeTime"
                        />
                    </el-form-item>
                    <el-form-item prop="columnValue">
                        <SelectDict v-model="queryParams.columnValue" placeholder="选择栏目" dictCode="bulletin_column"></SelectDict>
                    </el-form-item>
                    <el-form-item prop="createUserId">
                        <SelectUser multiple v-model="queryParams.createByIds" placeholder="发布人员"></SelectUser>
                    </el-form-item>
                    <el-form-item>
                        <el-button type="primary" icon="Search" @click="handleQuery">搜索</el-button>
                        <el-button icon="Refresh" @click="resetQuery">重置</el-button>
                    </el-form-item>
                </el-form>
            </div>
			<div class="frame-card-content mt-16px flex-1 overflow-auto">
                <template v-if="pageData.length > 0">
                    <div v-for="(item,idx) in pageData" :key="idx" class="share_user_list bg-#FFF" id="top">
                        <div class="share_user_msg" style="justify-content: space-between;">
                            <span class="share_top_h gap-2">
                                <div class="flex items-center">
                                    <el-avatar :src="item.staffPhoto" style="margin-right: 8px"></el-avatar>
                                    <span class="name">{{ item.staffName }}</span>
                                </div>
                                <div>{{ item.columnName }}</div>
                                <span class="time">{{ item.createTime }}</span>
                            </span>
                        </div>
                        <div class="mt-10 bold color-#333 text-center">
                            <span class="title">{{item.title}}</span>
                        </div>
                        <div class="email-content" v-html="item.content"></div>
                        <div class="files-div flex items-start" v-if="item?.files && item?.files.length > 0">
                            <p class="file_title">附件：</p>
                            <div class="email_file flex-1 flex flex-wrap">
                                <div class="file" v-for="file in item.files" @click="download(file.resourceUrl, file.resourceName)">
                                    {{ file.resourceName }}({{ file.resourceSize }})
                                </div>
                            </div>
                        </div>
                        <div class="user-notice">
                            <span class='notice'>接收人员：</span>
                            <span class="photo" v-if="item.userShowMore">
                                <span class="user_img" v-for="(user,odx) in item.readVOsLes" :key="odx">
                                    <img :src="user.staffPhoto" :class="{'img-light':user.hasRead}"/>
                                    <el-icon v-if="user.hasRead" color="rgb(27,190,107)"><CircleCheckFilled /></el-icon>
                                </span>
                                <span class="more blue" v-if="item.readVOs.length>10" @click="item.userShowMore=false">展开</span>
                            </span>
                            <span class="photo" v-else>
                                <span class="user_img" v-for="(user,odx) in item.readVOs" :key="odx">
                                    <img :src="user.staffPhoto" :class="{'img-light':user.hasRead}"/>
                                    <el-icon v-if="user.hasRead" color="rgb(27,190,107)"><CircleCheckFilled /></el-icon>
                                </span>
                                <span class="more blue" v-if="item.readVOs.length>10" @click="item.userShowMore=true">收起</span>
                            </span>
                        </div>
                        <!--评论区-->
                        <div class="item-commit">
                            <div style="text-align: right" v-if="item.isTalk == '1'">
                                <el-button type="primary" @click="showCommit(idx)">评论</el-button>
                            </div>
                            <div class="commit-header" v-if="item.commentls.length > 0">
                                <span class="color-#1874FF flex items-center">
                                    <el-icon class="mr-1"><ChatLineRound /></el-icon>评论
                                </span>
                            </div>
                            <Comment
                                :pageData='item.commentls'
                                :commitList='item'
                                @refresh="refreshCommit"
                            />
                            <template v-if="item.showCommit">
                                <ckeditor type="mini" class="mt-10" :content="commentText" @sendContnet="getContent"></ckeditor>
                                <div class="text-right">
                                    <el-button type="primary" @click="handleCommit(item)" class="mt-10">发送</el-button>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>
                <div v-if="pageData.length == 0 && !loading">
                    <p class="text-center">暂无数据</p>
                </div>
				<div
                    v-if="showLoading"
                    class="share-more"
                    @click="handleLoadMore"
                >点击加载更多>></div>

			</div>
			<a href="#top"><div class="back_top" v-if="pageData.length > 1"><i class="el-icon-upload2"></i></div></a>
		</div>
	</div>
</template>

<script setup lang="ts">
    import { listBulletin, readAll } from '@/api/system/bulletin';
    import { addComment } from '@/api/public'
    import ckeditor from '@/components/ckeditor/index.vue'
    import Comment from './comment.vue';
    import { useNoticeStore } from '@/store/modules/notice'
    import { useDictCache } from '@/hooks/web/useDict'

    const { queryDictDetailByCodes } = useDictCache(['bulletin_column'])
    queryDictDetailByCodes()

    const rangeTime = ref()
    const changeTime = (value: string[] | null) => {
        queryParams.value.startDate = value ? value[0] : undefined
        queryParams.value.endDate = value ? value[1] : undefined
    }
    const queryParams = ref({
        pageIndex: 1,
        pageSize: 20,
        title: undefined,
        startDate: undefined,
        endDate: undefined,
        columnValue: undefined,
        createByIds: undefined,
        id: undefined
    })

    const changeRead = () => {
        readAll().then(res => {
            if(res.success) {
                useNoticeStore().clearBulletinCount()
            }
        })
    }

    const showLoading = ref(false)
    const pageData = ref([])
    const summaryIds = ref([])
    const loading = ref(false)
    const getData = () => {
        loading.value = true
        if(queryParams.value.pageIndex == 1) {
            pageData.value = []
            showLoading.value = false
        } 
        listBulletin(queryParams.value).then(res => {
            if(res.success) {
                showLoading.value = res.result.pages > queryParams.value.pageIndex;
                res.result.records.forEach(function(item){
                    summaryIds.value.push(item.id);
                    item.score = 0
                    item.commitTxt = '';
                    item.commentls = item.commentls || [];
                    item.showCommit=false
                    item.readVOs = item.readVOs || []
                    if(item.readVOs.length>10){
                        item.userShowMore=true
                        item.readVOsLes = item.readVOs.slice(0,10)
                    }else{
                        item.userShowMore=false
                    }
                    pageData.value.push(item);
                })
            }
        }).finally(() => {
            loading.value = false
        })
    }

    const handleLoadMore = () => {
        queryParams.value.pageIndex++
        getData()
    }

    const handleQuery = () => {
        queryParams.value.pageIndex = 1
        queryParams.value.id = undefined
        getData()
    }

    const queryFormRef = ref()
    const resetQuery = () => {
        rangeTime.value = []
        queryParams.value.startDate = undefined
        queryParams.value.endDate = undefined
        queryFormRef.value?.resetFields();
        handleQuery()
    }

    const commentText = ref('')
    const getContent = (val) => {
        commentText.value = val
    }
    const showCommit = (index) => {
        pageData.value[index].showCommit = !pageData.value[index].showCommit
    }
    const handleCommit = (item) => {
        if(!commentText.value) {
            ElMessage.error(`请填写评论内容`)
            return false
        }
        let params = {
            type: '120',
            content: commentText.value,
            recordId: item.id,
            isFollow: 0
        }
        addComment(params).then(res => {
            if(res.success) {
                ElMessage.success('评论成功')
                commentText.value = ''
                refreshCommit(item.id)
            }
        })
    }

    const refreshCommit = (data) => {
        let params = JSON.parse(JSON.stringify(queryParams.value))
        params.id = data
        listBulletin(params).then(res => {
            if(res.success) {
                let datas = res.result.records[0]
                pageData.value.forEach(function(item){
                    if(item.id == data) {
                        item.commentls = datas.commentls
                    }
                })
            }
        })
    }

    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 route = useRoute()
    onMounted(() => {
        if(route.query.id) {
            queryParams.value.id = route.query.id
        }
        getData()
        changeRead()
    })
</script>

<style lang="scss" scoped>
    .search{
        padding: 16px 20px 0px;
        .el-select{
            width: 200px;
        }
        :deep(.sle-user-el-input){
            min-width: 200px;
        }
    }
    .share_user_msg{
        display: flex;
        align-items: center;
        padding: 10px 12px;
        border-bottom: 1px solid rgb(237, 237, 237);
    }
    .share_top_h{
        display: flex;
        align-items: center;
        margin-right: 30px;
        .el-avatar{
            width: 22px;
            height: 22px;
        }
    }
    .title{
        font-size: 32px;
    }
    .customer-date-picker .el-input--prefix .el-input__inner{
        padding:0px;
    }
    .effect-header .target-select-element{
        padding:0 19px
    }
    .effect-header .all-status{
        padding: 6px 19px;
    }
    .customer-date-picker-blue .el-input--prefix .el-input__inner {
        color: #666;
        height:30px;
    }
    .files-div{
        padding: 10px 20px 10px 48px;
        .file{
            padding: 5px;
            color: #1874FF;
            margin: 0 15px 10px 0;
            cursor: pointer;
        }
    }
    .user-notice{
        display: flex;
        padding: 10px 20px 10px 48px;
        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;
    }
    .img-light{
        border: 2px solid rgb(27,190,107);
    }
    .share_user_list{
        margin-bottom: 16px;
        .item-commit{
            padding: 10px 20px;
            border-top: 1px solid rgb(237, 237, 237);
        }
    }


    .announcement .share_user_list .email-content{
        padding: 50px 260px 13px 260px;
        color: #666;
        font-size: 15px;
    }
    .announcement .share_user_list p{
        line-height: 30px;
    }
    .blue{
        color: #1874FF;
        cursor: pointer;
        margin-left: 10px;
    }
    .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%;
        }
    }
    .share-more{
        text-align: center;
        cursor: pointer;
        color: #1874FF;
    }
</style>