<template>
    <div class="container">
        <div class="detail-head flexacenter">
            <div class="detail-section" @click="toAllSection()">
                版块：<span class="section-name">{{ info.forum }}</span>
            </div>
            <div class="detail-data flexacenter">
                <div class="detail-data-item flexacenter"><img class="detail-data-eye" src="@/assets/img/detail/eye.png" />{{ info.views }}</div>
                <div class="detail-data-item flexacenter"><img class="detail-data-comment" src="@/assets/img/detail/comment.png" />{{ info.replies }}</div>
            </div>
        </div>
        <div></div>
        <div class="detail-title-box">
            <div class="detail-title-item detail-title-jinghua flexcenter" v-if="info.digest > 0">精华</div>
            <div class="detail-title-item detail-title-label flexcenter" v-if="info.typename">{{ info.typename }}</div>
            {{ info.subject }}
        </div>

        <!--  -->
        <div class="card flexcenter">
            <div class="card-item shadow">
                <div class="card-head flexacenter">
                    <img class="card-head-icon" :src="info.avatar" />
                    <div class="card-head-content flex1 flexflex">
                        <div class="card-head-name flexflex">{{ info.author || "匿名用户" }}</div>
                        <div class="card-head-time">{{ $formattedDate(info.dateline || "") }}</div>
                    </div>
                    <div class="card-head-fool">楼主</div>
                    <a class="edit-box flexcenter" v-if="info.isauthor == 1" :href="`https://www.gter.net/bbs/post/edit.html?tid=${tid}&pid=${info.pid}`">
                        <img class="edit-icom" src="@/assets/img/detail/edit.png" />
                    </a>
                </div>
                <template v-if="type == 5">
                    <div class="summary-content">
                        <div class="summary-content-item" v-for="(item, index) in collegelist" :key="index">
                            <div class="summary-offer-head flexacenter">
                                <span class="summary-offer-head-title">Offer {{ index + 1 }}</span>
                                <a class="flexacenter" :href="item.url">详情<svg-icon icon-class="arrowsBlackLeft" class-name="summary-offer-head-icon"></svg-icon></a>
                            </div>
                            <div class="summary-offer-box">
                                <template v-for="(it, i) in offerinfoKey">
                                    <div class="summary-offer-item flexacenter" :key="i" v-if="item[it.key]">
                                        <div class="summary-offer-key flexacenter">{{ it.name }}</div>
                                        <div class="summary-offer-value flexacenter">{{ item[it.key] }}</div>
                                    </div>
                                </template>
                            </div>
                        </div>
                        <div class="summary-content-item">
                            <div class="summary-offer-head flexacenter">
                                <span class="summary-offer-head-title">总结</span>
                                <a class="flexacenter" :href="info.url">详情<svg-icon icon-class="arrowsBlackLeft" class-name="summary-offer-head-icon"></svg-icon></a>
                            </div>
                            <div class="summary-wenzi" v-html="info.message"></div>
                        </div>

                        <a class="examine-btn flexcenter" :href="info.url">
                            查看当前总结详情
                            <div class="examine-btn-outside flexcenter">
                                <svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
                            </div>
                        </a>
                    </div>
                </template>

                <template v-else-if="type == 6">
                    <div class="offer-content">
                        <div class="offer-content-box">
                            <template v-for="(item, index) in offerinfoKey">
                                <div class="offer-content-item flexacenter" :key="index" v-if="offerinfo[item.key]">
                                    <div class="offer-content-key" v-if="offerinfo[item.key]">{{ item.name }}</div>
                                    <div class="offer-content-value">{{ offerinfo[item.key] }}</div>
                                </div>
                            </template>
                        </div>
                        <a class="examine-btn flexcenter" :href="offerinfo.url">
                            查看当前捷报详情
                            <div class="examine-btn-outside flexcenter">
                                <svg-icon icon-class="arrowsRoundBlackLeft" class-name="examine-btn-icon"></svg-icon>
                            </div>
                        </a>
                    </div>
                </template>

                <template v-else-if="type == 2">
                    <div class="offer-content">
                        <div class="offer-content-box">
                            <template v-for="(item, index) in interviewKey">
                                <div class="offer-content-item flexacenter" :key="index" v-if="info[item.key]">
                                    <div class="offer-content-key" v-if="info[item.key]">{{ item.name }}</div>
                                    <div class="offer-content-value" v-html="info[item.key]"></div>
                                </div>
                            </template>
                        </div>
                    </div>
                </template>

                <template v-else-if="type == 3">
                    <div class="offer-content">
                        <div class="offer-content-box">
                            <template v-for="(item, index) in tenementKey">
                                <div class="offer-content-item flexacenter" :key="index" v-if="info[item.key]">
                                    <div class="offer-content-key" v-if="info[item.key]">{{ item.name }}</div>
                                    <div class="offer-content-value" v-if="item.key != 'school'" v-html="info[item.key]"></div>
                                    <div class="offer-content-value" v-else>
                                        <template v-for="it in info[item.key]">{{ it.name }}</template>
                                    </div>
                                </div>
                            </template>
                        </div>

                        <div v-html="info.message" class="vHtmlMessage" style="margin: 0.52rem 0;"></div>

                        <img class="tenement-img" v-for="(item, index) in info.images" :key="index" :src="item" />
                    </div>
                </template>

                <template v-else>
                    <div class="offer-content">
                        <div style="line-height: normal;" ref="vHtmlMessage" class="vHtmlMessage"></div>
                    </div>
                </template>
            </div>

            <template v-if="postList.list.length != 0">
                <div class="card-item shadow" v-for="(item, index) in postList.list" :key="index">
                    <div class="card-head flexacenter">
                        <img class="card-head-icon" :src="item.avatar" />
                        <div class="card-head-content flex1 flexflex">
                            <div class="card-head-name flexflex">
                                {{ item.author || "匿名用户" }}
                                <div class="landlord flexcenter" v-if="item.isauthor == 1">楼主</div>
                            </div>
                            <div class="card-head-time">{{ $formattedDate(item.dateline) }}</div>
                        </div>
                        <div class="card-head-fool" v-if="postList.page == 1">{{ `${(postList.page - 1) * postList.limit + index + 2}楼` }}</div>
                        <div class="card-head-fool" v-else>{{ `${(postList.page - 1) * postList.limit + index + 1}楼` }}</div>
                        <div class="edit-box flexcenter" v-if="item.ismyself == 1" @click.stop="openEditPop(item)">
                            <img class="edit-icom" src="@/assets/img/detail/edit.png" />
                        </div>
                    </div>

                    <div class="card-content flex1" @click.stop="handleReplyPop(item)" v-html="item.message"></div>
                </div>
            </template>
        </div>

        <!-- 分页 -->
        <div class="paging flexcenter" v-if="postList.count > postList.limit">
            <el-pagination small background layout="prev, pager, next" @current-change="currentChange" :current-page.sync="postList.page" :page-size="postList.limit" :total="postList.count"> </el-pagination>
        </div>

        <!-- 底部 -->
        <div class="discuss-bottom flexflex flexacenter">
            <!-- 底部的轮播 -->
            <div class="swiper">
                <div class="bottom-item flexacenter">
                    <div class="bottom-comment flexacenter" @click="setValue('popState', 'discussionSingle')">
                        <svg-icon icon-class="pen" class-name="bottom-comment-icom"></svg-icon>
                        想问啥，大胆问
                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')"></div>
                    </div>
                </div>
            </div>

            <div class="bottom-item flex1 flexacenter">
                <div class="bottom-operation-box flex1 flexacenter">
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="info.islike == 0 ? tapOperate('like') : ''">
                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')"></div>
                        <img v-if="info.islike == 0" class="bottom-operation-icom" :class="{prepareLiskeAnimateState: prepareLiskeAnimateState}" src="@/assets/img/detail/like.png" />
                        <img v-else class="bottom-operation-icom" :class="{prepareLiskeAnimateState: prepareLiskeAnimateState}" src="@/assets/img/icon/like-o.png" />
                        <div class="bottom-operation-text">{{ info.recommend_add == 0 ? "" : info.recommend_add }}赞</div>
                    </div>
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter" @click="tapOperate(info.isfav == 0 ? 'collect' : 'uncollect')">
                        <div class="loginBtn" v-if="!islogin" @click.stop="setValue('isloginBtnState', true, 'boolean')"></div>
                        <img v-if="info.isfav == 0" class="bottom-operation-icom" src="@/assets/img/detail/collect.png" />
                        <img v-else class="bottom-operation-icom" src="@/assets/img/detail/collect-c.png" />
                        <div class="bottom-operation-text">收藏</div>
                    </div>
                    <div class="bottom-operation-item flex1 flexcolumn flexcenter transmit" data-clipboard-text="Text to copy" @click="transmit()">
                        <img class="bottom-operation-icom bottom-transmit-icom" src="@/assets/img/detail/share.png" />
                        <div class="bottom-operation-text">转发</div>
                    </div>
                </div>
            </div>
        </div>

        <detail-reply :two-comment-data="twoCommentData" :comment-content="commentContent" :pop-state="popState"></detail-reply>

        <coins :coin-config="coinConfig" :mybalance="mybalance" :pop-state="popState" :info="info"></coins>

        <div class="alert" v-show="alert.state" :class="{alertState: alert.state}">
            <el-alert :title="alert.message" type="info" center show-icon :closable="false"></el-alert>
        </div>
    </div>
</template>

<script>
import DetailReply from "@/components/DetailReply"
import Coins from "@/components/unlock/Coins"
import {coinNo} from "@/utils/bizarreUrl"
import emojiList from "@/assets/emojiList.json"
export default {
    name: "detailIndex",
    data() {
        return {
            twoCommentData: null,
            editCommentPid: null, // 编辑回复的 id
            popState: "", // discussionSingle    discussionMulti
            coinConfig: {
                strategy: {
                    button: "攒币指南",
                    tips: "你的寄托币不够，快去发帖挣币吧",
                    url: coinNo,
                },
            },

            islogin: true,
            // prepareLiskeState: false,
            prepareLiskeAnimateState: false,
            stat: {
                like: 0,
            },
            iscollect: 0,

            ispostOfferLike: null, // 点击点赞提交状态
            offerLikesumTimer: 0, // offer点赞累加定时器
            offerLikesumAnimateTimer: 0, // offer点赞动画定时器
            listlist: [],

            tid: 0, // 帖子id
            info: {},
            type: 0, // 定位帖 1  面经 2   租房帖 3  总结 5  捷报 6
            token: "",
            offerinfo: {}, // offer捷报详情
            offerinfoKey: [
                {
                    // offer 字段汇总
                    key: "schoolname",
                    name: "申请学校",
                },
                {
                    key: "degree",
                    name: "学位",
                },
                {
                    key: "professional",
                    name: "专业",
                },
                {
                    key: "project",
                    name: "项目",
                },
                {
                    key: "apply_results",
                    name: "申请结果",
                },
                {
                    key: "semester",
                    name: "入学学期",
                },
                {
                    key: "noticedate",
                    name: "通知时间",
                },
                {
                    key: "useperformanceStr",
                    name: "使用成绩",
                },
            ],
            shareurl: "", // 分享链接
            collegelist: [], // 总结里的 offer 列表数据
            tenementKey: [
                {
                    // 租房 字段汇总
                    key: "typeText",
                    name: "出租方式",
                },
                {
                    key: "rent",
                    name: "月租/",
                },
                {
                    key: "property",
                    name: "房屋类型",
                },
                {
                    key: "floor",
                    name: "所在楼层",
                },
                {
                    key: "acreage",
                    name: "面积（平方呎）",
                },
                {
                    key: "locationText",
                    name: "所在区域",
                },
                {
                    key: "addressText",
                    name: "地段/地址",
                },
                {
                    key: "school",
                    name: "附近学校",
                },
                {
                    key: "gender",
                    name: "性别要求",
                },
                {
                    key: "rentaldurationText",
                    name: "出租时长",
                },
                {
                    key: "introduction",
                    name: "房东或合租人介绍",
                },
                {
                    key: "intermediary_text",
                    name: "发布者身份",
                },
                {
                    key: "telText",
                    name: "电话",
                },
                {
                    key: "wechatText",
                    name: "微信",
                },
            ],

            interviewKey: [
                {
                    //  面经 字段汇总
                    name: "学校",
                    key: "school",
                },
                {
                    name: "专业",
                    key: "profession",
                },
                {
                    name: "项目",
                    key: "project",
                },
                {
                    name: "毕业时间",
                    key: "interviewtime",
                },
                {
                    name: "面试过程及内容",
                    key: "message",
                },
            ],

            postList: {
                // 回复列表数据
                list: [],
                page: 1,
                limit: 20,
                count: 0,
            },

            loading: null, // 加载中

            commentContent: "", // 评论的文本
            operateState: false, // 操作请求的状态

            mybalance: 0, // 一共有多个寄托币

            islogin: false, // 登录状态

            alert: {
                state: false,
                message: "",
            },

            isloginBtnState: false,
        }
    },

    watch: {
        popState(newV, oldV) {
            if (newV) this.$pageStop()
            else this.$pageMove()
        },
        "$store.state.user": {
            handler(newV, oldV) {
                if (JSON.stringify(newV) != "{}") {
                    this.islogin = newV.uid > 0 ? true : false
                    this.tid = this.$route.query["tid"]
                    this.postList.page = this.$route.query["page"] || 1

                    this.getDetail()
                }
            },
            immediate: true,
        },
        isloginBtnState(newV, oldV) {
            if (newV) this.$goTologin()
        },
    },
    mounted() {
        window.scrollTo(0, 0)
    },

    methods: {
        // 获取详细信息
        getDetail() {
            this.$startupUnderLoading(this)
            this.$http
                .post("/api/thread", {
                    tid: this.tid,
                })
                .then(res => {
                    if (res.code != 200) return

                    let data = res.data
                    let info = data.info

                    info["message"] = info["message"].trim()

                    const reg = new RegExp("\r\n", "g")
                    info["message"] = info["message"].replaceAll(reg, "<br/>")
                    info["message"] = info["message"].replace(/<img[^>]*>/g, match => {
                        return match.replace(/width="[^"]*"/g, "").replace(/height="[^"]*"/g, "")
                    })

                    // 回复和投币可见解锁前的html
                    // let replyVisibleHtml = `<div class="flexcenter content-unlock content-unlock-no replyVisible" @click="setValue('popState', 'discussionSingle')"><img class="unlock-icom" src="./img/unlock.png"/>作者设置了${this.islogin ? '回复' : '登录'}可见</div>`
                    let replyVisibleHtml = `<div class="flexcenter content-unlock content-unlock-no ${this.islogin ? "replyVisible" : "registerVisible"} " @click="setValue('popState', ${this.islogin ? "discussionSingle" : "isloginBtnState"})"><img class="unlock-icom" src="${this.$baseURL}/img/unlock.png"/>作者设置了${this.islogin ? "回复" : "登录"}可见</div>`
                    let coinVisibleHtml = `<div class="flexcenter content-unlock content-unlock-no coinVisible"><img class="unlock-icom" src="${this.$baseURL}/img/unlock.png"/>作者设置了投币可见</div>`

                    // 回复和投币可见解锁后的html
                    let replyVisibleHtmlAlready = `<div class="content-unlock content-already"><div class="content-already-header flexflex">- 本内容投币可见 -</div><div class="content-unlock-wenzi">标记</div></div>`

                    let ispost = data.info.ispost // 是否已经回复
                    let price = data.info.price // 是否需要投币
                    let isbuy = data.info.isbuy // 是否已经投币
                    let isauthor = data.info.isauthor // 是否是作者

                    if (price > 0 && isbuy == 0 && isauthor != 1) {
                        let message = info["message"]
                        // if (message.indexOf("[free]") != -1) {
                        info["message"] = ""
                        const regex = /\[(free|hide)\]([^[]+)\[\/(free|hide)\]/g
                        let result = message.match(regex) || []
                        for (let i = 0; i < result.length; i++) {
                            result[i] = result[i].replace("[free]", "")
                            result[i] = result[i].replace("[/free]", "")
                            info["message"] += result[i]
                        }
                        info["message"] += coinVisibleHtml
                        // }
                    }

                    if (isbuy == 1 || isauthor == 1) {
                        let message = info["message"]
                        let mubiao = "" // 目标 message

                        // const regex = /\[(free|hide|\/free|\/hide)\]/g;
                        // const regex = /\[(free|hide|\/free|\/hide)\]/g;

                        // const regex = /\[(free|hide(?:=[0-9]+)?|\/free|\/hide)\]/g;
                        // const regex = /\[(free|hide(?:=[0-9]+)?|\/free|\/hide)\]/g;
                        // const regex = /\[(free|hide=\d+\|\/free|\/hide)\]/g;
                        // (?:=[0-9]+)?\
                        // const regex = /\[(free|hide(?:=[0-9]+)?|\/free|\/hide)\]/g;

                        const regex = /\[free\]|\[\/free\]|\[hide\]|\[\/hide\]|\[hide=[^\]]+\]/g

                        const numericIndices = Array.from(message.matchAll(regex), match => match.index)
                        const result2D = []
                        for (let i = 0; i < numericIndices.length; i += 2) {
                            const pair = [numericIndices[i], numericIndices[i + 1]]
                            result2D.push(pair)
                        }

                        result2D.forEach((element, index) => {
                            if (index != 0) {
                                let temporary = message.slice(result2D[index - 1][1] + 7, element[0])
                                temporary = this.goEmpty(temporary)
                                if (temporary) mubiao += replyVisibleHtmlAlready.replace("标记", message.slice(result2D[index - 1][1] + 7, element[0]))
                            }

                            // 第一个
                            if (index == 0) {
                                let temporary = message.slice(0, element[0])
                                temporary = this.goEmpty(temporary)
                                // if (temporary) mubiao += replyVisibleHtmlAlready.replace('标记', message.slice(0, element[0]))
                                if (temporary) mubiao += message.slice(0, element[0])
                            }

                            // 最后一个
                            if (index == result2D.length - 1) {
                                let temporary = message.slice(element[1] + 7, message.length - 1)
                                temporary = this.goEmpty(temporary)
                                if (temporary) mubiao += replyVisibleHtmlAlready.replace("标记", message.slice(element[1] + 7, message.length - 1))
                            }
                            mubiao += message.slice(element[0], element[1] + 7)
                        })

                        mubiao = mubiao.replaceAll("[free]", "")
                        mubiao = mubiao.replaceAll("[/free]", "")

                        info["message"] = mubiao
                    }

                    const regex1 = /\[hide(?:=[0-9]+)?\]/
                    if (regex1.test(info["message"])) {
                        // if (info['message'].indexOf("[hide]") != -1) {
                        const regex = /\[hide\].*?\[\/hide\]/g // 获取所有[hide] 中间内容的正则
                        if (ispost == 0 && isauthor != 1) info["message"] = info["message"].replace(regex, replyVisibleHtml)
                        if (ispost == 1 || isauthor == 1) {
                            // info['message'] = info['message'].replaceAll("[hide]", `<div class="content-unlock content-already"><div class="content-already-header flexflex">- 本内容回复可见 -</div><div class="content-unlock-wenzi">`)
                            var pattern = /\[hide(=\d+)?\]/g
                            info["message"] = info["message"].replaceAll(pattern, `<div class="content-unlock content-already"><div class="content-already-header flexflex">- 本内容回复可见 -</div><div class="content-unlock-wenzi">`)
                            info["message"] = info["message"].replaceAll("[/hide]", `</div></div>`)
                        }
                    }

                    if (!this.islogin && isbuy == 0) {
                        info["message"] = info["message"].replaceAll("[free]", "")
                        info["message"] = info["message"].replaceAll("[/free]", "")
                    }

                    data.type == 0 ? (this.$refs["vHtmlMessage"] ? (this.$refs.vHtmlMessage.innerHTML = info["message"]) : "") : ""

                    let replyVisibleList = document.getElementsByClassName("replyVisible")
                    if (!Array.isArray(replyVisibleList)) {
                        for (let i = 0; i < replyVisibleList.length; i++) {
                            replyVisibleList[i].addEventListener("click", () => {
                                this.$emit("replyVisibleClick")
                            })
                        }
                        this.$on("replyVisibleClick", () => {
                            this.popState = "discussionSingle"
                        })
                    }

                    let coinVisibleList = document.getElementsByClassName("coinVisible")
                    if (!Array.isArray(coinVisibleList)) {
                        for (let i = 0; i < coinVisibleList.length; i++) {
                            coinVisibleList[i].addEventListener("click", () => {
                                this.$emit("coinVisibleClick")
                            })
                        }
                        this.$on("coinVisibleClick", () => {
                            this.popState = data.mybalance > price ? "coindisplayuser" : "coinNo"
                        })
                    }
                    let registerVisibleList = document.getElementsByClassName("registerVisible")
                    if (!Array.isArray(registerVisibleList)) {
                        for (let i = 0; i < registerVisibleList.length; i++) {
                            registerVisibleList[i].addEventListener("click", () => {
                                this.$emit("registerVisibleClick")
                            })
                        }
                        this.$on("registerVisibleClick", () => {
                            this.isloginBtnState = true
                        })
                    }

                    this.info = info
                    this.type = data.type
                    this.token = data.token
                    this.mybalance = data.mybalance

                    if (this.type == 6) this.getOfferDetail()
                    else if (this.type == 5) this.getsummaryDetails()
                    else if (this.type == 3) this.getTenementDetails()
                    else if (this.type == 2) this.getInterviewDetails()

                    info["replies"] != 0 ? this.getPostList() : ""
                    // this.getPostList()
                })
                .finally(() => {
                    this.$closeUnderLoading(this)
                })
        },

        // 去 回车和去前后的空格
        goEmpty(temporary) {
            temporary = temporary.trim()
            while (temporary.indexOf("<br/>") != -1) {
                temporary = temporary.replace("<br/>", "")
            }

            return temporary
        },

        // 获取offer详情
        getOfferDetail() {
            this.$http
                .get(
                    "/api/forum/details",
                    {
                        id: this.token,
                    },
                    "offer"
                )
                .then(res => {
                    let data = res.data
                    let offerinfo = data.collegelist[0]
                    let useperformanceStr = ""
                    offerinfo.useperformance &&
                        offerinfo.useperformance.forEach((el, index) => {
                            useperformanceStr += el + (offerinfo.useperformance.length - 1 == index ? "" : "、")
                        })

                    offerinfo["useperformanceStr"] = useperformanceStr
                    this.offerinfo = offerinfo
                })
        },

        // 获取总结详情
        getsummaryDetails() {
            this.$http
                .get(
                    `/api/forum/details`,
                    {
                        id: this.token,
                    },
                    "offer"
                )
                .then(res => {
                    let data = res.data
                    let collegelist = data.collegelist

                    collegelist.forEach((el, index) => {
                        let useperformanceStr = ""
                        el.useperformance &&
                            el.useperformance.forEach((element, i) => {
                                useperformanceStr += element + (el.useperformance.length - 1 == i ? "" : "、")
                            })
                        el["useperformanceStr"] = useperformanceStr
                    })

                    this.info = {...this.info, ...data.info}
                    this.collegelist = collegelist
                    this.shareurl = data.shareurl
                })
        },

        // 租房
        getTenementDetails() {
            this.$http
                .post(
                    "/tenement/forum/show",
                    {
                        token: this.token,
                    },
                    "tenement"
                )
                .then(res => {
                    if (res.code == 201) this.tenementInfoState = true

                    let tenementKey = this.tenementKey
                    let info = {...this.info, ...res.info}

                    info["typeText"] = info.gptype + ">>" + info.type

                    tenementKey[1].name += info["currency"] ? info["currency"] : "港元"

                    if (info.cityid == 1) info["locationText"] = info.location
                    else info["locationText"] = info.country + ">>" + info.city

                    info["addressText"] = info["address"] || "-"

                    info["rentaldurationText"] = info.rentalduration || "不限"

                    info["telText"] = info.tel || "-"

                    info["wechatText"] = info.wechat || "-"

                    const reg = new RegExp("\r\n", "g")
                    info["message"] = info["message"].replaceAll(reg, "<br/>")
                    info["message"] = info["message"].replace(/<img[^>]*>/g, match => {
                        return match.replace(/width="[^"]*"/g, "").replace(/height="[^"]*"/g, "")
                    })

                    this.info = info
                })
        },

        // 获取面经详情
        getInterviewDetails() {
            this.$http
                .post(
                    "/InterviewExperience/thread",
                    {
                        tid: this.tid,
                        token: this.token,
                    },
                    "tenement"
                )
                .then(res => {
                    if (res.code != 200) return
                    let data = res.data
                    this.info = {...this.info, ...data}
                })
        },

        // 获取回复列表
        getPostList() {
            this.$startupUnderLoading(this)

            let {page, limit} = this.postList
            this.$http
                .post("/api/thread/postList", {
                    token: this.token,
                    page,
                    limit,
                })
                .then(res => {
                    if (res.code != 200) return
                    let data = res.data

                    data.data.forEach(el => {
                        for (const key in emojiList) {
                            el.message = el.message.replaceAll(key, `<img class="gif" src="${emojiList[key]}" />`)
                        }
                    })

                    this.postList.list = data.data
                    this.postList.page = data.page
                    this.postList.limit = data.limit
                    this.postList.count = data.count
                })
                .finally(() => {
                    this.$closeUnderLoading(this)
                })
        },

        // 打开编辑评论
        openEditPop(item) {
            let message = item.message
            message = message.replace(/<div[^>]*>[\s\S]*?<\/div>/gi, "") //  清除掉引有的结构
            // message = message.replace(/<[^>]*>/g, '');   //  清除掉引有的结构

            message = message.trim()

            this.commentContent = message
            this.editCommentPid = item.pid

            this.popState = "discussionMulti"
        },

        // 处理回复点击弹出弹窗
        handleReplyPop(item) {
            let message = item.message
            // message = message.replace(/<(*?)[^>]*>[\s\S]*?<\/(*?)>/gi, '');   //  清除掉引有的结构
            message = message.replace(/<[^>]*>/g, "") //  清除掉引有的结构
            message = message.trim()

            this.twoCommentData = {
                avatar: item.avatar,
                content: message,
                pid: item.pid,
            }
            this.popState = "discussionSingle"
        },

        // 集中处理回复帖子
        postComment(message) {
            let url = ""

            if (this.editCommentPid) url = "/api/operation/redactPost"
            // 回复评论或者评论
            else url = "/api/operation/reply" // 编辑评论

            this.$http
                .post(url, {
                    token: this.token,
                    message: this.commentContent,
                    pid: this.editCommentPid || (this.twoCommentData && this.twoCommentData.pid),
                })
                .then(res => {
                    if (res.code != 200) return

                    this.$Message.success("发布成功")

                    this.popState = ""
                    this.twoCommentData = null
                    if (this.editCommentPid) {
                        // 编辑 状态
                        setTimeout(() => {
                            this.$router.go(0)
                        }, 800)
                        return
                    }

                    this.editCommentPid = null

                    let {count, limit} = this.postList

                    let page = Math.ceil((count + 1) / limit)

                    setTimeout(() => {
                        if (page == this.postList.page) {
                            this.$router.go(0)
                            clearTimeout(timer)
                            return
                        }

                        let query = {
                            page,
                            tid: this.tid,
                        }

                        this.$router.push({path: `/detailIndex`, query})
                    }, 800)
                })
        },

        // 点击改变页数
        currentChange() {
            let query = {
                page: this.postList.page,
                tid: this.tid,
            }

            this.getPostList()

            this.$updateURLSearchParams(query)
        },

        // 点击点赞和收藏操作
        tapOperate(key) {
            // like collect uncollect
            // this.openHintBox("dfl;kgjdfkljgklioj")

            if (this.operateState) return
            this.operateState = true

            let url = ""
            if (key == "like") url = "/api/operation/threadLike"
            else if (key == "collect") url = "/api/operation/threadFav"
            else if (key == "uncollect") url = "/api/operation/threadunFav"

            this.$http
                .post(url, {tid: this.tid})
                .then(res => {
                    if (res.code != 200) return
                    if (key == "like") (this.info.islike = 1), this.info.recommends + 1
                    if (key == "collect") this.info.isfav = 1
                    if (key == "uncollect") this.info.isfav = 0
                    // this.$message(res.message)
                    this.openHintBox(res.message)
                })
                .finally(() => {
                    this.operateState = false
                })
        },

        // 点击转发
        transmit() {
            let value = location.href
            this.$copy(value, "已经复制链接，欢迎分享！")
        },

        setValue(key, value) {
            this[key] = value
        },

        // 跳转全部板块的列表
        toAllSection() {
            this.$router.push({path: `/allSections`, query: {fid: this.info.fid}})
        },

        // 处理点击编辑自己的回复
        handleIsmyself(item) {
            this.popState = "discussionMulti"
            this.commentContent = item.message
        },

        // 投币
        postCoin() {
            this.$http
                .post("/api/operation/coinPurchase", {
                    token: this.token,
                })
                .then(res => {
                    if (res.code != 200) return
                    this.openHintBox(res.message)
                    this.popState = ""
                    this.$router.go(0)
                })
        },

        // 提示框 自定义
        openHintBox(message) {
            this.alert.state = true
            this.alert.message = message
            setTimeout(() => {
                this.alert.state = false
            }, 1500)
        },
    },

    components: {
        DetailReply,
        Coins,
    },
}
</script>

<style lang="scss" scoped>
.alert {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    background: #f4f4f5;
    border: 1px solid #ebeef5;
    border-radius: 0.2rem;
    width: 50%;
    opacity: 0;
    transition: opacity 0.3s;

    &.alertState {
        opacity: 1;
    }
}

.container {
    margin-top: 1.3rem;
    padding-bottom: 2.8rem;

    .detail-head {
        color: #7f7f7f;
        padding: 0.191rem 0.2933rem 0;
        justify-content: space-between;

        .detail-section {
            justify-content: space-between;
            font-size: 0.32rem;

            .section-name {
                color: #333;
            }
        }

        .detail-data {
            color: rgb(127, 127, 127);

            .detail-data-item {
                color: rgb(127, 127, 127);
                font-size: 0.28rem;

                img {
                    margin-right: 0.12rem;
                }

                .detail-data-eye {
                    width: 0.36rem;
                    height: 0.36rem;
                }

                .detail-data-comment {
                    width: 0.32rem;
                    height: 0.32rem;
                }

                &:last-of-type {
                    margin-left: 0.32rem;
                }
            }
        }
    }

    .detail-title-box {
        padding: 0.72rem 0.2933rem 0;
        color: #000;
        font-size: 0.56rem;
        font-weight: 650;
        line-height: 0.86rem;

        .detail-title-item {
            font-size: 0.32rem;
            color: #fff;
            height: 0.64rem;
            display: inline-flex;
            margin-right: 0.16rem;
            font-weight: 400;

            line-height: 0.56rem;

            &.detail-title-jinghua {
                width: 1rem;
                border-radius: 0.5rem 0.5rem 0;
                background: linear-gradient(-57.3808deg, rgb(178, 152, 232) 0%, rgb(88, 70, 195) 100%);
                vertical-align: middle;
            }

            &.detail-title-label {
                background: rgb(51, 51, 51);
                padding: 0 0.16rem;
                display: inline-flex;
                border-radius: 0.16rem;
                vertical-align: middle;
                // vertical-align: top;
            }
        }
    }

    .card {
        margin-top: 0.48rem;
        flex-direction: column;

        .card-item {
            width: 9.4rem;
            border-radius: 0.4rem;
            background: #fff;
            margin-bottom: 0.4rem;

            .card-head {
                padding: 0.48rem 0.32rem;
                border-bottom: 0.0133rem solid #ebebeb;

                .card-head-icon {
                    width: 0.96rem;
                    height: 0.96rem;
                    border-radius: 50%;
                    margin-right: 0.28rem;
                }

                .card-head-content {
                    flex-direction: column;

                    .card-head-name {
                        color: #333;
                        font-size: 0.32rem;
                        margin-bottom: 0.08rem;
                        word-break: break-word;
                        margin-right: 0.2667rem;

                        .landlord {
                            color: rgb(127, 127, 127);
                            font-size: 0.26rem;
                            width: 0.64rem;
                            height: 0.44rem;
                            border: rgb(215, 215, 215) 0.0133rem solid;
                            background: rgb(240, 242, 245);
                            border-radius: 0.1rem;
                            margin-left: 0.16rem;
                        }
                    }

                    .card-head-time {
                        color: rgb(127, 127, 127);
                        font-size: 0.28rem;
                    }
                }

                .card-head-fool {
                    color: rgb(127, 127, 127);
                    font-size: 0.32rem;
                }

                .edit-box {
                    width: 0.64rem;
                    height: 0.64rem;
                    border-radius: 50%;
                    background: #f6f6f6;
                    margin-left: 0.32rem;

                    .edit-icom {
                        width: 0.4rem;
                    }
                }
            }

            .card-content {
                color: #333;
                font-size: 0.36rem;
                line-height: 0.6rem;
                padding: 0.5rem 0.32rem;
                word-break: break-word;

                /deep/ {
                    img {
                        width: 100% !important;
                        height: auto !important;

                        &.gif {
                            width: auto !important;
                        }
                    }

                    .quote {
                        width: 100%;
                        color: #333;
                        font-size: 0.32rem;
                        border-radius: 0.16rem;
                        background: rgb(246, 246, 246) url(@/assets/img/detail/quotation-left.png) no-repeat 0.32rem 0.2666rem;
                        padding: 0.1333rem 0.1333rem 0.1333rem 1rem;

                        box-sizing: border-box;
                        margin-bottom: 0.48rem;

                        blockquote {
                            margin: 0;
                            padding: 0 0.8667rem 0.0667rem 0;
                            background: url(@/assets/img/detail/quotation-right.png) no-repeat 100% 100%;
                            line-height: 1.6;
                            zoom: 1;
                            display: inline;
                        }

                        .quotation-wenzi {
                            line-height: 0.52rem;
                        }

                        .quotation-icon {
                            width: 0.32rem;
                            height: 0.26rem;
                        }

                        .quotation-right {
                            flex-direction: column;
                            margin-left: 0.28rem;

                            .quotation-bottom {
                                color: #7f7f7f;
                                font-size: 0.28rem;
                                margin-top: 0.258rem;

                                .quotation-icon {
                                    margin-left: 0.2rem;
                                }
                            }
                        }
                    }

                    .content-unlock {
                        &.content-unlock-no {
                            height: 3.2rem;

                            .unlock-icom {
                                width: 0.64rem;
                                height: 0.64rem;
                                margin-right: 0.2rem;
                                vertical-align: middle;
                            }
                        }

                        background: rgba(242, 242, 242, 0.7);
                        margin: 0.48rem 0;
                        color: #555555;
                        font-size: 0.32rem;
                        border-radius: 0.16rem;

                        &.content-already {
                            background: rgba(242, 242, 242, 0.7);
                            margin: 0.48rem 0;
                            padding: 0.32rem;
                            color: #555555;
                            font-size: 0.32rem;
                            border-radius: 0.16rem;

                            .content-already-header {
                                color: #7f7f7f;
                                font-size: 0.28rem;
                                justify-content: center;
                            }

                            .content-unlock-wenzi {
                                color: #333;
                                font-size: 0.36rem;
                                line-height: 0.6rem;
                                margin-top: 0.3rem;
                            }
                        }
                    }
                }
            }

            .offer-content {
                padding: 0.56rem 0.32rem;

                .vHtmlMessage {
                    font-size: 0.36rem;
                    line-height: 0.6rem;
                    word-break: break-word;

                    /deep/ {
                        strong {
                            font-weight: bold;
                        }

                        img {
                            max-width: 100%;
                        }

                        .content-unlock {
                            &.content-unlock-no {
                                height: 3.2rem;

                                .unlock-icom {
                                    width: 0.64rem;
                                    height: 0.64rem;
                                    margin-right: 0.2rem;
                                    vertical-align: middle;
                                }
                            }

                            background: rgba(242, 242, 242, 0.7);
                            margin: 0.48rem 0;
                            color: #555555;
                            font-size: 0.32rem;
                            border-radius: 0.16rem;

                            &.content-already {
                                background: rgba(242, 242, 242, 0.7);
                                margin: 0.48rem 0;
                                padding: 0.32rem;
                                color: #555555;
                                font-size: 0.32rem;
                                border-radius: 0.16rem;

                                .content-already-header {
                                    color: #7f7f7f;
                                    font-size: 0.28rem;
                                    justify-content: center;
                                }

                                .content-unlock-wenzi {
                                    color: #333;
                                    font-size: 0.36rem;
                                    line-height: 0.6rem;
                                    margin-top: 0.3rem;
                                }
                            }
                        }
                    }
                }

                .tenement-img {
                    width: 100%;
                }

                .offer-content-box {
                    .offer-content-item {
                        line-height: 0.6rem;

                        align-items: flex-start;

                        &:not(:last-of-type) {
                            margin-bottom: 0.52rem;
                        }

                        .offer-content-key {
                            font-size: 0.32rem;
                            color: #7f7f7f;
                            width: 2.04rem;
                        }

                        .offer-content-value {
                            font-size: 0.36rem;
                            color: #333;
                            width: 7.32rem;
                            white-space: break-spaces;
                        }
                    }
                }
            }

            .examine-btn {
                color: #333;
                font-size: 0.3rem;
                background: rgba(242, 242, 242, 1);
                height: 0.96rem;
                border-radius: 4.1rem;
                margin-top: 0.52rem;

                .examine-btn-outside {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-left: 0.24rem;
                    background: #fddf6d;
                    border-radius: 50%;

                    .examine-btn-icon {
                        width: 0.22rem;
                        height: 0.24rem;
                    }
                }
            }

            .summary-content {
                padding: 0.56rem 0.32rem;

                .summary-content-item {
                    border-radius: 0.16rem;
                    border: 0.0133rem solid rgba(235, 235, 235, 1);
                    margin-bottom: 0.32rem;

                    .summary-offer-head {
                        justify-content: space-between;
                        height: 0.8rem;
                        background: rgba(246, 246, 246, 1);
                        color: #333;
                        padding: 0 0.24rem;

                        span,
                        a {
                            font-size: 0.32rem;
                            color: #333;
                        }

                        .summary-offer-head-title {
                            color: #000;
                            font-size: 0.4rem;
                            font-weight: 650;
                        }

                        .summary-offer-head-icon {
                            width: 0.14rem;
                            height: 0.36rem;
                            margin-left: 0.16rem;
                        }
                    }

                    .summary-offer-box {
                        padding-top: 0.28rem;
                        flex-direction: column;
                        justify-items: center;

                        .summary-offer-item {
                            line-height: 0.6rem;
                            padding: 0 0.24rem;
                            box-sizing: border-box;
                            margin-bottom: 0.2rem;

                            .summary-offer-key {
                                width: 1.3rem;
                                color: #7f7f7f;
                                font-size: 0.32rem;
                                margin-right: 0.74rem;
                            }

                            .summary-offer-value {
                                font-size: 0.36rem;
                                color: #333;
                            }
                        }
                    }

                    .summary-wenzi {
                        color: #333;
                        font-size: 0.32rem;
                        line-height: 0.6rem;
                        padding: 0.28rem 0.24rem;
                    }
                }
            }
        }
    }

    .paging {
        margin-top: 0.48rem;

        ::v-deep {
            .el-pagination.is-background .el-pager li:not(.disabled).active {
                background: rgba(98, 177, 255, 1);
                border-radius: 50%;
            }

            .el-pagination .btn-next .el-icon,
            .el-pagination .btn-prev .el-icon {
                font-size: 0.4rem;
            }
        }
    }

    .discuss-bottom {
        position: fixed;
        bottom: 0;
        left: 50%;
        transform: translateX(-50%);
        width: 100vw;
        background-color: #fff;
        padding: 0 0.4rem;
        box-sizing: border-box;
        z-index: 99;
        border-top: 0.0133rem solid #dbdcdd;
        padding-right: 0;
        height: 2rem;
        width: 10rem;
        justify-content: space-between;

        .swiper {
            height: 2rem;
        }

        .bottom-item {
            justify-content: space-between;
            height: 100%;

            .bottom-comment {
                width: 4.6rem;
                height: 0.8rem;
                border-radius: 1rem;
                padding: 0 0.28rem;
                font-size: 0.32rem;
                color: #aaaaaa;
                background-color: #f2f2f2;
                border: 0.0133rem solid #ebebeb;
                box-sizing: border-box;
                position: relative;

                .bottom-comment-icom {
                    width: 0.4rem;
                    height: 0.4rem;
                    margin-right: 0.16rem;
                }
            }

            .bottom-operation-box {
                width: 3.8667rem;
                justify-content: space-between;
            }

            .bottom-operation-icom {
                width: 0.48rem;
                height: 0.48rem;
                margin-bottom: 0.1333rem;
            }

            .bottom-operation-item {
                position: relative;
                padding: 0 0.4rem;
                -webkit-tap-highlight-color: rgba(0, 0, 0, 0);
            }

            .bottom-transmit-icom {
                width: 0.4rem;
                height: 0.4rem;
            }

            .bottom-operation-text {
                font-size: 0.32rem;
                color: #555555;
            }

            .bottom-information {
                position: relative;
                min-width: 4.6667rem;
                max-width: 53.3333rem;
                height: 0.8rem;
                border-radius: 1rem;
                background: linear-gradient(to right, #fff, #50e3c2, #50e3c2, #50e3c2);
            }

            .bottom-information-avatar {
                width: 0.8rem;
                height: 0.8rem;
                border-radius: 50%;
            }

            .bottom-information-content {
                color: #fff;
                font-size: 0.2933rem;
                display: flex;
                align-items: center;
                justify-content: space-around;
                padding: 0 0.1333rem;

                .vertical {
                    height: 0.2933rem;
                    background-color: #fff;
                    width: 0.0133rem;
                }
            }

            .bottom-information-item:not(:last-of-type) {
                justify-content: center;
            }
        }
    }

    .loginBtn {
        position: absolute;
        top: 0;
        left: 0;
        height: 100%;
        width: 100%;
        // background: #50e3c2;
    }
}
</style>
