<template>
    <div style="height: 100%" class="discuss1">
        <div style="width: 90%; margin: 0% 5%; height: 100%">
            <div>
                <Input v-model="topicname" :placeholder="$t('jyzx.online.placeholder1')" style="width:100%;padding:1% 0%" @on-focus="topstatus = true" />
            </div>
            <div class="topicboxinfo" v-show="topstatus">
                <div id="divtop"></div>
                <div class="btnicon">
                    <div class="submit" @click="submitTopic"><Button type="primary">{{ $t('jyzx.online.release') }}</Button></div>
                    <div class="canle" @click="topstatus = false"><Button>{{ $t('jyzx.common.cancel') }}</Button></div>
                </div>
            </div>
            <div style="height: 75vh">
                <vuescroll>
                    <div style="margin-bottom: 130px;">
                        <div
                            v-for="(item, index) in discuss"
                            :key="index"
                            class="discuss"
                        >
                            <div>
                                <div class="disContent">
                                    <p class="inClass" v-if="item.relevance">{{item.relevance}}</p>
                                    <p class="disName"
                                        :style="{
                                            color:
                                                item.tmdid ==
                                                $store.state.userInfo
                                                    .TEAMModelId
                                                    ? '#2d8cf0'
                                                    : '',
                                        }">
                                        {{ item.tmdname }}
                                    </p>
                                </div>
                                <p>
                                    <span style="color: #2d8cf0"
                                        >{{ $t('jyzx.common.theme') }}：</span
                                    >{{ item.title }}
                                </p>
                                <div>
                                    <span style="color: #2d8cf0"
                                        >{{ $t('jyzx.common.content') }}：</span
                                    >
                                    <p v-html="item.comment"></p>
                                </div>
                                <div class="disAction">
                                    <div>
                                        <span
                                            style="
                                                margin-right: 20px;
                                                color: #2d8cf0;
                                            "
                                            @click="openReply(item.id, 0)"
                                            v-show="item.replyCount != 0"
                                            >{{ $t('jyzx.common.comment') }}({{
                                                item.replyCount
                                            }})</span
                                        >
                                        <span
                                            style="
                                                margin-right: 20px;
                                                color: #2d8cf0;
                                            "
                                            @click="replyOther(item, index)"
                                            >{{ $t('jyzx.common.reply') }}</span
                                        ><span
                                            @click="delect(item.id, index)"
                                            v-if="
                                                item.tmdid ==
                                                $store.state.userInfo
                                                    .TEAMModelId
                                            "
                                            style="margin-right: 20px"
                                            >{{ $t('jyzx.common.delete') }}</span
                                        >
                                        <span @click="report(item.tmdname)"
                                            >{{ $t('jyzx.common.report') }}</span
                                        >
                                    </div>
                                    <p>{{ item.time | formatDate }}</p>
                                </div>
                            </div>
                            <!-- 回复框 -->
                            <div class="replyDisc" v-if="activeIn == index">
                                <Input
                                    v-model="replyDis"
                                    type="textarea"
                                    :autosize="{ minRows: 2, maxRows: 5 }"
                                ></Input>
                                <div>
                                    <Button
                                        type="primary"
                                        size="small"
                                        @click="
                                            reply(
                                                item.id,
                                                item.tmdname,
                                                item.tmdid
                                            )
                                        "
                                        >{{ $t('jyzx.common.sure') }}</Button
                                    >
                                    <Button
                                        style="margin-left: 8px"
                                        @click="cancelReply"
                                        size="small"
                                        >{{ $t('jyzx.common.cancel') }}</Button
                                    >
                                </div>
                            </div>
                            <!-- 别人的留言 -->
                            <div
                                v-if="replyStatus && item.id === replyId && replyData.length"
                                class="disChild"
                            >
                                <div
                                    v-for="(child, no) in replyData"
                                    :key="no"
                                >
                                    <div class="disContent">
                                        <p
                                            class="disName"
                                            :style="{
                                                color:
                                                    child.tmdid ==
                                                    $store.state.userInfo
                                                        .TEAMModelId
                                                        ? '#2d8cf0'
                                                        : '',
                                            }"
                                        >
                                            {{ child.tmdname }}
                                        </p>
                                    </div>
                                    <p v-html="child.comment"></p>
                                    <div class="disAction">
                                        <div>
                                            <span
                                                @click="
                                                    delect(
                                                        child.pid,
                                                        index,
                                                        child.id
                                                    )
                                                "
                                                v-if="
                                                    child.tmdid ==
                                                        $store.state
                                                            .userInfo
                                                            .TEAMModelId ||
                                                    item.tmdid ==
                                                        $store.state
                                                            .userInfo
                                                            .TEAMModelId
                                                "
                                                style="margin-right: 20px"
                                                >{{ $t('jyzx.common.delete') }}</span
                                            >
                                            <span
                                                @click="
                                                    report(child.tmdname)
                                                "
                                                >{{ $t('jyzx.common.report') }}</span
                                            >
                                        </div>
                                        <p>{{ child.time | formatDate }}</p>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </vuescroll>
            </div>
        </div>
        <Modal v-model="isReport" :title="$t('jyzx.common.report')" @on-ok="ok">
            <p>{{ $t('jyzx.common.message') }}</p>
            <CheckboxGroup v-model="checkReport">
                <Checkbox
                    :label="index"
                    v-for="(item, index) in reportList"
                    :key="index"
                >
                    <span>{{ item }}</span>
                </Checkbox>
            </CheckboxGroup>
        </Modal>
    </div>
</template>
<script>
import E from "wangeditor"
import topicPublish from "./topicPublish.vue"
import { formatDate } from "../../utils/time.js"
export default {
    components: { topicPublish },
    props: {
        pointInfo: {
            type: Object,
			default: () => {}
        }
    },
    data() {
        return {
            activeIn: -1, //-1：没有点击回复
            replyDis: "",
            discuss: [],
            replyDis: "",
            replyStatus: false,
            replyOpen: "展开回复",
            replyData: [],
            topicId: "",
            replyId: "",
            replyIndex: 0,
            reportList: [
                "违法信息",
                "涉黄信息",
                "泄露隐私",
                "人身攻击",
                "垃圾营销",
            ],
            isReport: false,
            checkReport: [],
            topstatus:false, //话题显示状态
            topicname: '', //话题名称
            nowtopicData: {}, //当前话题数据保留
            stemContent:'',//文字内容
        }
    },
    created() {
    },
    mounted() {
        console.log(this.pointInfo);
        let stemEditor = new E("#divtop")
        stemEditor.config.onchange = (html) => {
            this.stemContent = html
        }
        stemEditor.config.uploadImgShowBase64 = true
        stemEditor.config.zIndex = 500
        stemEditor.create()
        /* this.totaltopic()*/
        this.nowtopicData.comid = '792bacf7-5ced-4546-83ad-1bc055414683'
        this.nowtopic('792bacf7-5ced-4546-83ad-1bc055414683')
    },
    methods: {
        replyOther(data, i) {
            if (this.activeIn == -1 || this.activeIn != i) {
                this.activeIn = i
                this.replyDis = ""
            }
        },
        // 取消回复
        cancelReply() {
            this.activeIn = -1
        },
        //获取所有话题
        totaltopic() {
            let user = this.$store.state.userInfo
            this.$api.jyzx
                .totalTopic({
                    code: this.$store.state.userInfo.schoolCode,
                    source: "",
                    comid: "",
                    tmdid: "",
                })
                .then(
                    (res) => {
                        console.log(res)
                        for (var i = 0; i < res.length; i++) {
                            let comment = res[i].comment
                            var commenfrt = comment.replace("<p>", "")
                            var commenlast = commenfrt.replace("</p>", "")
                            res[i].comment = commenlast
                            var comidNmae = res[i].comid
                            var traitData = JSON.parse(localStorage.getItem('trait'))
                            if (traitData) {
                                for (var e = 0; e < traitData.length; e++) {
                                    if (comidNmae === traitData[e].comid) {
                                        var name = traitData[e].no + traitData[e].name
                                    }
                                }
                            }
                            res[i].relevance = name
                        }
                        res.reverse()
                        this.discuss = res
                        localStorage.setItem("allTopic", JSON.stringify(res))
                    },
                    (error) => {
                        this.$Message.error("API异常，数据获取失败！")
                        console.log(error, "获取失败")
                    }
                )
        },
        // 回复话题
        reply(topicId, replyName, replyId) {
            console.log(topicId, replyName, replyId,'回复话题的信息')
            let userme = this.$store.state.userInfo
            console.log(userme, this.replyDis, "用户信息")
            this.$api.jyzx
                .replyTopic({
                    opt: "add",
                    debateId: topicId,
                    debateCode: "Debate-" + this.$store.state.userInfo.schoolCode,
                    reply: {
                        id: "",
                        pid: topicId,
                        tmdid: this.$store.state.userInfo.TEAMModelId,
                        tmdname: this.$store.state.userInfo.name,
                        comment: this.replyDis,
                        atTmdid: replyId,
                        atTmdname: replyName,
                    },
                })
                .then(
                    (res) => {
                        console.log(res)
                        this.$Message.success(this.$t('jyzx.common.success1'))
                        this.discuss[this.activeIn].replyCount += 1
                        this.activeIn = -1
                        this.openReply(res.reply.pid, 1)
                    },
                    (error) => {
                        console.log(error)
                    }
                )
        },
        //展开回复
        openReply(topicId, status) {
            this.topicId = topicId
            if (!this.replyStatus) {
                this.replyStatus = true
                this.activeIn = -1
            } else {
                // status：1 回复
                if (!status) {
                    if (this.replyId == topicId) {
                        this.replyStatus = false
                    }
                }
            }
            this.getReplyArr(topicId)
        },
        getReplyArr(topicId) {
            this.$api.jyzx
                .replyDetail({
                    debateId: topicId,
                    debateCode: "Debate-" + this.$store.state.userInfo.schoolCode,
                })
                .then(
                    (res) => {
                        this.replyData = res.debate.replies
                        this.replyId = res.debate.id
                    },
                    (error) => {}
                )
        },
        // 举报
        report(name) {
            this.isReport = true
            this.checkReport = []
        },
        ok() {
            if (this.checkReport.length) {
                this.$Message.success(this.$t('jyzx.common.success2'))
            }
        },
        // 删除
        delect(topicId, index, replyId) {
            let cont = ""
            if (replyId) {
                cont = this.$t('jyzx.common.reply')
            } else {
                cont = this.$t('jyzx.common.theme')
            }
            this.$Modal.confirm({
                title: this.$t('jyzx.common.delete'),
                content: `您确定要删除该${cont}吗？`,
                onOk: () => {
                    // 回复的
                    if (replyId) {
                        let req = {
                            opt: "del",
                            debateId: topicId,
                            debateCode: "Debate-" + this.$store.state.userInfo.schoolCode,
                            reply: {
                                id: replyId,
                            },
                        }
                        this.$api.jyzx.replyTopic(req).then((res) => {
                            if (res.status == 0) {
                                console.log(topicId,'删除的')
                                this.$Message.success(this.$t('jyzx.common.success3'))
                                this.getReplyArr(topicId)
                                this.discuss[index].replyCount --
                            } else {
                                this.$Message.warning(this.$t('jyzx.common.error'))
                            }
                        })
                    }
                    // 自己的话题
                    else {
                        let req = {
                            debateId: topicId,
                            debateCode: "Debate-" + this.$store.state.userInfo.schoolCode,
                        }
                        // 调另一个api
                        this.$api.jyzx.delReply(req).then((res) => {
                            if (res.status == 200) {
                                this.$Message.success(this.$t('jyzx.common.success3'))
                                this.nowtopic(this.nowtopicData.comid)
                            } else {
                                this.$Message.warning(this.$t('jyzx.common.error'))
                            }
                        })
                    }
                },
            })
        },
        //当前能力点话题
        nowtopic(id) {
            console.log(id,'调用了接口')
            this.$api.jyzx.totalTopic(
                {
                    code: this.$store.state.userInfo.schoolCode,
                    source: "ability",
                    comid: id,
                    tmdid: "",
                }
            ).then(
                res => {
                    res.reverse()
                    this.discuss=[]
                    this.discuss = res
                    console.log(this.discuss, '当前话题返回')
                },
                error => {
                    this.$Message.error('当前话题获取数据异常')
                }
            )
        },
        //当前能力点发布话题
        submitTopic() {
            console.log(this.topicname, this.stemContent, '当前话题名')
            var myDate = new Date().getTime()
            var extime = new Date().getTime() + 1000 * 60 * 60 * 24 * 7
            this.$api.jyzx.topicInitiate(
                {
                    comid: this.nowtopicData.comid,
                    source: "ability",
                    debate: {
                        id: "",
                        code: this.$store.state.userInfo.schoolCode,
                        tmdid: this.$store.state.userInfo.TEAMModelId,
                        tmdname: this.$store.state.userInfo.name,
                        title: this.topicname,
                        comment: this.stemContent,
                        time: myDate,
                        school: this.$store.state.userInfo.schoolCode,
                        wordCount: 500,
                        timeoutReply: false,
                        comid: this.nowtopicData.comid,
                        expire: extime,
                    },
                }
            ).then(
                res => {
                    console.log(res, '发布成功的返回')
                    this.nowtopic(res.debate.comid)
                    this.$Message.success(this.$t('jyzx.online.relSucess'))
                    this.topstatus = false
                    this.topicname = ''
                    this.stemContent = ''

                },
                error => {
                    console.log(res, '发布失败的返回')
                }
                )
            },
        },
    watch: {
        pointInfo: {
            handler(value) {
                console.log(value,'传递过来的值')
                if (value) {
                    this.nowtopic(value.comid)
                    this.nowtopicData=value
                    }
                }
            }
        },
    //时间处理
    filters: {
        formatDate(time) {
            time = time
            let date = new Date(time)
            return formatDate(date, "yyyy-MM-dd hh:mm")
        },
    },
}
</script>

<style lang="less" scoped>
.discuss {
    border-bottom: 1px solid #ccc;
    padding: 10px;

    .disContent {
        .disName {
            font-size: 20px;
            // color: #2d8cf0;
        }

        & > p:nth-of-type(2) {
            margin: 5px 0;
        }
    }
    .disAction {
        margin-top: 5px;
        & > p:last-child {
            color: #878787;
        }
        div {
            float: right;
            span {
                cursor: pointer;
            }
        }
    }
    .inClass {
        background: #2d8cf0;
        color: white;
        border-radius: 10px;
        padding: 2px 10px;
        margin: 2px 0;
        float: right;
    }
    .disChild {
        border: 1px solid #ccc;
        border-radius: 10px;
        margin: 15px 40px;
        padding: 5px 10px;

        & > div {
            padding: 2px 10px 5px;
            &:not(:last-child) {
                border-bottom: 1px solid #ccc;
            }
        }

        .disName {
            font-size: 16px;
            // color: #515a6e;
        }
    }

    .replyDisc {
        margin: 15px 40px;
        margin-top: 10px;
        text-align: right;

        & > div:last-child {
            margin-top: 10px;
        }
    }
}
</style>

<style lang="less">
.discuss1 {
    .ivu-card-bordered,
    .ivu-card-body {
        height: 100%;
    }
    .ivu-card-body {
        overflow: hidden;
    }
}
    .btnicon {
        margin-top: 2%;
        .submit, .canle{
        margin-right: 2%;
        display: inline-block;
            }
    }
</style>