<template>
    <div style="background: #eee; padding: 20px; height: 100%" class="discuss1">
        <Card>
            <div style="width: 90%; margin: 0% 5%; height: 100%">
                <topicPublish></topicPublish>
                <div style="height: 100%">
                    <vuescroll>
                        <div
                            style="
                                width: 83%;
                                margin: 0% 9%;
                                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>
        </Card>
        <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 topicPublish from "./topicPublish.vue"
import { formatDate } from "../../utils/time.js"
export default {
    components: { topicPublish },
    data() {
        return {
            activeIn: -1, //-1：没有点击回复
            replyDis: "",
            discuss: [],
            replyDis: "",
            replyStatus: false,
            replyOpen: "展开回复",
            replyData: [],
            topicId: "",
            replyId: "",
            replyIndex: 0,
            reportList: [
                "违法信息",
                "涉黄信息",
                "泄露隐私",
                "人身攻击",
                "垃圾营销",
            ],
            isReport: false,
            checkReport: [],
        }
    },
    created() {
       
        },
        mounted() {
            this.totaltopic()
        },
    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) => {
                        var traitData = JSON.parse(localStorage.getItem('trait'))
                        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 name = ''
                            if (traitData) {
                                var signame = traitData.filter(function (x) {
                                    return x.comid === comidNmae
                                })
                                if (signame.length != 0) {
                                    name = signame[0].no + signame[0].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) {
            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: userme.TEAMModelId,
                        tmdname: userme.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) {
                                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.totaltopic()
                            } else {
                                this.$Message.warning(this.$t("jyzx.common.error"))
                            }
                        })
                    }
                },
            })
        },
    },
    //时间处理
    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;
    }
}
</style>