<template>
    <div class="commit-content mt-10">
        <div class="commit-item"
            v-for="(commit, oidx) in pageData"
            :key="oidx"
        >
            <div class="commit-uinfo">
                <el-avatar :src="commit.staffPhoto" style="margin-right: 5px"></el-avatar>
                <span class="uname">{{ commit.staffName }}</span>
                <el-icon class="ml-10 pointer" v-if="commit.canDelete" color="#666" @click="delDraft(commit)">
                    <Delete />
                </el-icon>
            </div>
            <div class="commit-info mb-5">
                <span class="info detail-editor" v-html="commit.content"></span>
            </div>
            <div class="commit-info">
                <span class="time">{{ commit.createTime }}</span>
                <el-tag type="primary" style="cursor: pointer;margin-left:10px" @click="submitCommitW(oidx,commit.staffName)">回复</el-tag>
            </div>
            <div v-if="commit.commentList && commit.commentList.length > 0" class='second_reply'>
                <div class="commit-item"
                    v-for="(commitChirden, cidx) in commit.commentList"
                    :key="cidx"
                >
                    <div class="commit-uinfo">
                        <el-avatar :src="commitChirden.staffPhoto" style="margin-right: 5px"></el-avatar>
                        <span class="uname">{{commitChirden.staffName}}</span>
                        <span class="middle">回复了</span>
                        <span class="uname">{{commitChirden.staffParentName}}</span>
                        <el-icon class="ml-10 pointer" v-if="commitChirden.canDelete" color="#666" @click="delDraft(commitChirden)">
                            <Delete />
                        </el-icon>
                    </div>
                    <div class="commit-info">
                        <span class="info detail-editor" v-html="commitChirden.content"></span>
                    </div>
                    <div class="commit-info">
                        <span class="time">{{ commitChirden.createTime }}</span>
                        <el-tag type="primary" style="cursor: pointer;margin-left:10px" @click="submitCommitS(oidx,cidx,commitChirden.staffName)">回复</el-tag>
                    </div>
                </div>
            </div>
        </div>
    </div>

    <el-dialog :title="dialogTitle" v-model="visible" width="850px" destroy-on-close>
        <ckeditor type="mini" class="mt-10" :content="commentText" @sendContnet="getContent"></ckeditor>
        <template #footer>
            <div class="dialog-footer">
                <el-button @click="cancel">取消</el-button>
                <el-button :loading="buttonLoading" type="primary" @click="submitForm">提交</el-button>
            </div>
        </template>
    </el-dialog>
</template>

<script lang="ts" setup>
    import { addComment, deleteComment } from '@/api/public'
    import ckeditor from '@/components/ckeditor/index.vue'

    const props = defineProps({
        pageData: {
            type: Array<any>,
            default: () => []
        },
        commitList: {
            type: Object,
            default: () => {}
        }
    })
    const emits = defineEmits(['refresh'])

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

    const visible = ref(false)
    const commentText = ref('')
    const getContent = (val) => {
        commentText.value = val
    }
    const paramsData = ref()
    const dialogTitle = ref('')
    const submitCommitW = (oidx, name) => {
        let data = props.commitList.commentls[oidx]
        let formData= {
            parentId:data.id,
            topId:data.id,
            tagIdls:[],
            type: '120',
            recordId: props.commitList.id,
            isFollow: 0
        }
        paramsData.value = formData
        commentText.value = '';
        dialogTitle.value = '回复 @' + name
        visible.value = true
    }

    const submitCommitS = (oidx, cidx, name) => {
        let data = props.commitList['commentls'][oidx].commentList[cidx]
        let formData = {
            parentId: data.id,
            topId: props.commitList['commentls'][oidx].id,
            tagIdls:[],
            type: '120',
            recordId: props.commitList.id,
            isFollow: 0
        }
        paramsData.value = formData
        commentText.value = '';
        dialogTitle.value = '回复 @' + name
        visible.value = true
    }

    const cancel = () => {
        visible.value = false
    }
    const buttonLoading = ref(false)
    const submitForm = () => {
        if(!commentText.value) {
            ElMessage.error(`请填写评论内容`)
            return false
        }
        let formData = paramsData.value
        formData.content = commentText.value
        buttonLoading.value = true
        addComment(formData).then(res => {
            if(res.success) {
                ElMessage.success('回复成功')
                emits('refresh', props.commitList.id)
                visible.value = false
            }else{
                ElMessage.error('回复失败')
            }
        }).finally(() => {
            buttonLoading.value = false
        })
    }
</script>

<style lang="scss" scoped>
.item-commit .commit-content .second_reply{
	border-top: 1px solid #ededed;
	padding: 10px 0 10px 24px;
	margin-top: 10px;
}
.item-commit .commit-content .commit-item{
	margin-bottom: 10px;
}
.item-commit .commit-content .commit-item .commit-uinfo{
	height: 30px;
	line-height: 30px;
    display: flex;
    align-items: center;
}
.item-commit .commit-content .commit-item .commit-uinfo .middle{
	font-size: 12px;
	margin:0 8px;
}
.score_num{
	border:1px solid #1874FF;
	color:#1874FF;
	border-radius: 4px;
	padding:0 3px;
	margin-left: 20px;
	font-size: 12px;
}
.item-commit .commit-content .commit-item .commit-uinfo .photo{
	display: inline-block;
	width: 20px;
	height: 20px;
	border-radius: 10px;
	background-color: var(--grey);
	vertical-align: middle;
	margin-right: 5px;
}
.item-commit .commit-content .commit-item .commit-uinfo .uname{
	font-size: 12px;
	color: var(--normal);
}
.item-commit .commit-content .commit-item .commit-uinfo .time{
	font-size: 12px;
	color: var(--normal);
	margin-left: 10px;
}
.item-commit .commit-content .commit-item .commit-info{
	padding: 0px 26px;
}
.item-commit .commit-content .commit-item .commit-info .atuname{
	background-color: var(--grey);
	padding: 2px 5px;
	border-radius: 2px;
	font-size: 12px;
	margin-right: 10px;
}
.item-commit .commit-content .commit-item .commit-info .info{
	font-size: 13px;
	color: var(--main);
}
.item-commit .commit-content .commit-item .commit-info .info img{
	max-width: 100%;
	cursor:pointer;
}
.item-commit .commit-content .commit-item .commit-info .time{
	color:#666;
	font-size: 12px;
}
.item-commit .commit-content .commit-item .commit-info .like{
	float: right;
    line-height: 24px;
}
.item-commit .commit-content .commit-item .commit-info .like img{
	width: 24px;
	vertical-align: bottom;
	margin-right:4px;
	cursor: pointer;
}
.item-commit .submit_btn{
	border:1px solid #c2c2c2;
	float:right;margin-top:10px;
	width:75px;
	text-align:center;
	height: 30px;
	line-height: 30px;
}
.item-commit .submit_cancel{
	margin-right: 20px;
}
.wang_content{
	padding-top: 10px;
}
.item-commit .draft_submit_content{
	display:flex;
	justify-content: right;
}
.score_list{
	display: flex;
}
.item-commit .score_list>div{
	padding:2px 20px;
	margin-right: 10px;
	border:1px solid #ededed;
	border-radius: 25px;
	cursor: pointer;
	margin:5px 10px 10px 0;
	white-space: nowrap;
}
.commit-form .item-commit .score_list>div{
	padding:2px 11px;
}
.item-commit .score_content p{
	color: #666;
	font-size: 12px;
}
.item-commit .score_list>div:hover,.item-commit .score_list>div.on{
	background-color: #1874FF;
	color: #fff;
}
.el-avatar{
    width: 22px;
    height: 22px;
}
</style>