PC-questions-answers/js/index.js

// 提交问题
// 切换头部分类
// 转发的链接和title
// 图片上传有一些错误

Object.assign(window, Vue)
const forumApp = Vue.createApp({
    setup() {
        const baseURL = "https://ask.gter.net"

        let type = ref('list') // list details

        onMounted(() => {
            getUrlParams()
            getUserData()
            getList()
            getListClass()
            window.addEventListener('scroll', handleScroll);

            getHistoricalSearchList()


        })

        onUnmounted(() => {
            window.removeEventListener('scroll', handleScroll);
        });

        let initParams = {}
        // 获取url的参数
        const getUrlParams = () => {
            const params = {};
            const regex = /[?&]([^=#]+)=([^&#]*)/g;
            let match;

            while ((match = regex.exec(window.location.href))) {
                params[match[1]] = decodeURIComponent(match[2]);
            }

            initParams = params

            if (params['uniqid']) getDetails(params['uniqid'])

        }

        // 获取当前url
        const getCurrentUrl = () => {
            return window.location.href;
        }


        // 我的 数据 数量
        let myCount = ref({}) // 

        // 获取用户数据
        const getUserData = () => {
            $ajax("/api/user").then(res => {
                if (res.code != 200) return
                let data = res.data
                myCount.value = data.count
            })
        }

        // 是否是搜索模式
        let isSearchMode = ref(false)

        // 获取历史记录方法
        const getHistoricalSearchList = () => {
            const list = localStorage.getItem('historical-Search');

            if (list) historicalSearchList.value = JSON.parse(list) || []
            else historicalSearchList.value = []
        }

        // 存入历史记录 随便去重 和 限制长度 方法
        const setHistoricalSearchList = () => {
            historicalSearchList.value.unshift(keyword.value)
            historicalSearchList.value = [...new Set(historicalSearchList.value)]
            historicalSearchList.value = historicalSearchList.value.slice(0, 10)

            localStorage.setItem('historical-Search', JSON.stringify(historicalSearchList.value));
        }

        // 搜索点击事件
        const searchClick = () => {
            if (keyword.value == "") return
            setHistoricalSearchList()
            page = 1
            list.value = []
            type.value = 'list'
            pitchIndex.value = null
            replaceState({ keyword: keyword.value })
            searchBlur()
            getList()
        }


        // 搜索获取焦点
        const searchFocus = () => {
            if (historicalSearchList.value.length == 0) return
            historicalSearchState.value = true
        }

        // 搜索失去焦点
        const searchBlur = () => {
            setTimeout(() => historicalSearchState.value = false, 300)
        }

        // 点击历史记录 item
        const handleClickHistoricalItem = (value) => {
            keyword.value = value
            searchClick()
        }

        // 点击清除搜索
        const handleClickClear = () => {
            keyword.value = ""
            page = 1
            list.value = []
            type.value = 'list'
            pitchIndex.value = null

            getList()

            replaceState()
        }

        let historicalSearchState = ref(false) // 历史记录弹窗状态
        let historicalSearchList = ref([]) // 历史记录数据

        let tabListFixeState = ref(false) // 顶部 类型的 固定状态
        const handleScroll = () => {
            const scrollTop = document.documentElement.scrollTop || document.body.scrollTop

            const scrollHeight = document.documentElement.scrollHeight;
            const clientHeight = document.documentElement.clientHeight;

            // 列表下 滑动到底部 获取新数据
            if (scrollTop + clientHeight >= scrollHeight) getList()

            // 列表下 滚动到顶部 触发类型的固定状态
            if (scrollTop > 115 && type.value == 'list') tabListFixeState.value = true
            else tabListFixeState.value = false
        }

        let keyword = ref('') // 搜索的值
        let keywordText = ref('') // 搜索的文本

        let list = ref([]) // 列表数据
        let page = 1
        let total = ref(0) // 回答总数
        let loading = false

        // 获取列表数据
        const getList = () => {
            if (page == 0 || loading) return
            loading = true

            $ajax("/api/lists", {
                page,
                limit: 20,
                keyword: keyword.value,
                type: typePitch.value,
            }
            ).then(res => {
                if (res.code != 200) return

                let data = res.data

                list.value = list.value.concat(data.data || [])
                total.value = data.count || 0

                keywordText.value = keyword.value || ''

                page++

                if (keyword.value) isSearchMode.value = true
                else isSearchMode.value = false


            }).finally(() => loading = false)
        }

        let typeList = ref([])
        let typePitch = ref(null)

        // 获取分类数据 列表分类
        const getListClass = () => {
            $ajax("/api/common/typeList").then(res => {
                if (res.code != 200) return
                let data = res.data
                typeList.value = data

                console.log("data", data);

                getPageHeight()
            })
        }

        let pageHeaderHeight = ref(0) // 头部的高度
        let pageListHeight = ref(0) // 底部列表的高度

        const getPageHeight = () => {
            let pageHeader = document.querySelector("#pageHeader")
            // let pageHeader = document.querySelector("#pageHeader")
            pageHeaderHeight.value = pageHeader.clientHeight + 10
            pageListHeight.value = window.innerHeight - pageHeaderHeight.value
        }

        let detailsInfo = ref({}) // 详情信息
        let detailsIsanswered = ref(0) // 详情信息
        let detailsIscollection = ref(0) // 详情信息
        let detailsIsmyself = ref(0) // 详情信息
        let detailsToken = '' // 详情信息
        let detailShare = ref({}) // 详情信息

        // 获取详情
        const getDetails = (uniqid, index, isOpenAnswer) => {
            // uniqid = "fubm5CnD05qj"  // 标记一下
            $ajax("/api/details", { uniqid }).then(res => {
                if (res.code != 200) return
                let data = res.data

                detailsInfo.value = data['info'] || {}
                detailsIsanswered.value = data['isanswered'] || 0
                detailsIscollection.value = data['iscollection'] || 0
                detailsIsmyself.value = data['ismyself'] || 0
                detailsToken = data['token'] || ''
                detailShare.value = data['share'] || {}

                type.value = 'details'

                if (index !== null && index !== undefined) cut(index)
                else {
                    let targetList = [...list.value]
                    let valve = false
                    targetList.forEach((element, index) => {

                        if (element['uniqid'] == uniqid) {
                            cut(index)
                            valve = true
                        }
                    })

                    if (!valve) {
                        list.value.unshift({
                            answers: data.info['answers'],
                            content: data.info['content'],
                            publicationdate: data.info['publicationdate'],
                            title: data.info['title'],
                            uniqid,
                        })
                        cut(0)
                    }

                }

                answerList.value = []
                answerPage.value = 1
                getAnswerList()

                closeAllTransmitState()

                if (isOpenAnswer) openIAnswer()

                replaceState({ uniqid })
            })
        }

        let answerList = ref([]) // 回答列表数据
        let answerPage = ref(1) // 回答列表页数
        let answerLoading = false // 回答列表加载

        // 获取详情的回答数据
        const getAnswerList = () => {
            if (answerLoading || answerPage.value == 0) return
            answerLoading = true

            $ajax("/api/details/answerList", { token: detailsToken, limit: 20, page: answerPage.value }).then(res => {
                if (res.code != 200) return
                let data = res.data

                data.data.forEach(element => {
                    element['commentList'] = []
                })

                answerList.value = answerList.value.concat(data.data)

                if (answerList.value.length == data['count']) answerPage.value = 0
                else answerPage.value++



            }).finally(() => answerLoading = false)
        }

        // 操作 - 点赞
        const operateLike = (token, index) => {
            $ajax("/api/operate/like", { token }).then(res => {
                if (res.code != 200) return
                let data = res.data
                answerList.value[index]['islike'] = data['status']
                answerList.value[index]['likenum'] = data['count']
                handleMsg('success', res['message'] || '操作成功')
            })
        }

        let isNeedNewColletData = false  // 是否需要获取新的收藏数据 ，顶部的我的弹窗需要

        // 操作 - 收藏
        const operateCollect = (token = detailsToken, index) => {
            $ajax("/api/operate/collect", { token }).then(res => {
                if (res.code != 200) return
                let data = res.data
                isNeedNewColletData = true
                myCollectionPage = 1
                myCollectionList.value = []
                if (data['type'] == 'askquestioncollection') detailsIscollection.value = data['status']
                else {
                    answerList.value[index]['iscollection'] = data['status']
                    answerList.value[index]['collectionnum'] = data['count']
                }

                handleMsg('success', res['message'] || '操作成功')

                if (data['status']) myCount.value['collect']++
                else myCount.value['collect']--

            })
        }

        // 操作 - 回答
        const operateIAnswer = (token = detailsToken, index) => {
            $ajax("/api/publish/answerSubmit", { token }).then(res => {
                console.log("res", res);
            })
        }

        let IAnswerState = ref(false) // 我来回答-弹窗的状态
        let IAnswerEditState = ref(false) // 编辑回答-弹窗的状态

        let IAnswerInfo = ref({}) // 我来回答-弹窗的信息
        // 开启我来回答
        const openIAnswer = (index, type) => {
            if (index == null) {
                IAnswerInfo.value = {
                    title: detailsInfo.value['title'],
                    content: detailsInfo.value['content'],
                    anonymous: 0,
                }
                IAnswerState.value = true

                nextTick(() => {
                    handleInput()
                })

            } else {
                // IAnswerInfo.value = answerList.value[index]
                if (type == 'my') {
                    IAnswerInfo.value = {
                        title: detailsInfo.value['title'],
                        ...myAnswerList.value[index],
                        text: myAnswerList.value[index]['content'],
                        content: detailsInfo.value['content'],
                    }
                    myType.value = ""
                } else {
                    IAnswerInfo.value = {
                        title: detailsInfo.value['title'],
                        ...answerList.value[index],
                        text: answerList.value[index]['content'],
                        content: detailsInfo.value['content'],
                    }
                }

                IAnswerEditState.value = true

                nextTick(() => {
                    handleInput()
                })
            }

        }

        // 关闭我来回答
        const closeIAnswer = () => {
            IAnswerState.value = false
            IAnswerEditState.value = false
        }

        // 修改我来回答的匿名状态
        const amendIAnswer = () => {
            IAnswerInfo.value['anonymous'] = IAnswerInfo.value['anonymous'] == 0 ? 1 : 0
        }

        let isNeedNewAnswersData = false  // 是否需要获取新的我的回答数据

        // 提交回答
        const submitAnswer = () => {
            const questionTextarea = document.querySelector(".question-textarea")
            IAnswerInfo.value['text'] = questionTextarea.innerHTML

            $ajax("/api/publish/answerSubmit", {
                token: IAnswerInfo.value['token'] || detailsToken,
                anonymous: IAnswerInfo.value['anonymous'] || 0,
                content: IAnswerInfo.value['text'],
            }).then(res => {
                if (res.code == 200) {
                    getAnswerList()
                    closeIAnswer()
                    isNeedNewAnswersData = true
                    handleMsg('success', res['message'] || '操作成功')

                    if (!IAnswerInfo.value['token']) myCount.value['answer']++
                } else {

                }

            })
        }

        // 打开回答的评论
        const openCommentState = index => {

            if (answerList.value[index]['commentState']) answerList.value[index]['commentState'] = false
            else answerList.value[index]['commentState'] = true


            if (answerList.value[index]['commentList'].length == 0 && answerList.value[index]['commentnum'] != 0) getAnswerCommentList(index)

            // answerList.value[index]['commentState'] = true
        }

        let answerCommentLimit = 3
        // 获取回答评论的数据
        const getAnswerCommentList = (index) => {
            getAnswerCommentPublic(index).then(res => {
                let data = res.data
                answerList.value[index]['commentList'] = answerList.value[index]['commentList'].concat(data.data)
                answerList.value[index]['commentCount'] = data['count']
            })
        }



        // 获取全部评论
        const handleAllComment = index => {
            answerCommentLimit = 1000
            getAnswerCommentPublic(index).then(res => {
                if (res.code != 200) return
                let data = res.data
                answerList.value[index]['commentList'] = answerList.value[index]['commentList'].concat(data.data.slice(3))
                handleMsg('success', res['message'] || '操作成功')
            })
        }

        // 获取评论数据的公共接口
        const getAnswerCommentPublic = (index) => {
            return new Promise((resolve, reject) => {
                $ajax("/api/comment/lists", {
                    token: answerList.value[index]['token'],
                    limit: answerCommentLimit,
                    childlimit: 1,
                }).then(res => {
                    if (res.code != 200) return
                    resolve(res)
                })
            })
        }

        // 提交回答-评论
        const submitAnswerComments = (index, ind, i) => {
            // answerList.value[index]['commentState'] = true
            const targetAnswerList = [...answerList.value]

            let content = ""
            let parentid = null
            let token = targetAnswerList[index]['token']

            if (i != null) {
                content = targetAnswerList[index]['commentList'][ind]['child'][i]['commentInput']
                parentid = targetAnswerList[index]['commentList'][ind]['child'][i]['id']
            } else if (ind != null) {
                content = targetAnswerList[index]['commentList'][ind]['commentInput']
                parentid = targetAnswerList[index]['commentList'][ind]['id']
            } else content = targetAnswerList[index]['commentInput']


            $ajax("/api/comment/submit", {
                content,
                token,
                parentid,
            }).then(res => {
                if (res.code != 200) return
                let data = res.data

                if (i != null) {
                    let targetData = {
                        content,
                        isauthor: 1,
                        islike: 0,
                        likenum: 0,
                        reply: {
                            nickname: targetAnswerList[index]['commentList'][ind]['child'][i]['nickname']
                        },
                        ...data,
                    }

                    targetAnswerList[index]['commentList'][ind]['child'].unshift(targetData)

                } else if (ind != null) {
                    let targetData = {
                        content,
                        isauthor: 1,
                        islike: 0,
                        likenum: 0,
                        reply: [],
                        ...data,
                    }
                    targetAnswerList[index]['commentList'][ind]['child'].unshift(targetData)

                } else {
                    let targetData = {
                        content,
                        isauthor: 1,
                        islike: 0,
                        likenum: 0,
                        ...data,
                        child: []
                    }
                    targetAnswerList[index]['commentList'].unshift(targetData)

                }

                closeAnswerCommentsChild()

                console.log("targetAnswerList", targetAnswerList);
                handleMsg('success', res['message'] || '操作成功')
            })
        }

        // 回答-评论 点赞  operateIAnswer
        const operateAnswerCommentsLike = (token, index, ind, i) => {
            $ajax("/api/comment/like", {
                token,
            }).then(res => {
                if (res.code != 200) return

                let data = res.data
                const targetAnswerList = [...answerList.value]

                if (i == null) {
                    targetAnswerList[index]['commentList'][ind]['islike'] = data['status']
                    targetAnswerList[index]['commentList'][ind]['likenum'] = data['likenum']
                } else {
                    targetAnswerList[index]['commentList'][ind]['child'][i]['islike'] = data['status']
                    targetAnswerList[index]['commentList'][ind]['child'][i]['likenum'] = data['likenum']
                }
                answerList.value = targetAnswerList

                handleMsg('success', res['message'] || '操作成功')

            })
        }

        // 打开 回答-评论 的子评论
        const openAnswerCommentsChild = (index, ind, i) => {
            console.log("");
            closeAnswerCommentsChild()

            if (i == null) {
                answerList.value[index].commentList[ind]['childState'] = true
            } else {
                answerList.value[index].commentList[ind]['child'][i]['childState'] = true
            }

        }

        // 关闭 回答-评论 的子评论
        const closeAnswerCommentsChild = (index, ind, i) => {
            const targetAnswerList = [...answerList.value]

            targetAnswerList.forEach(element => {

                if (element['commentList'] && element['commentList'].length != 0) {
                    element['commentList'].forEach(ele => {
                        ele['childState'] = false
                        if (ele['child'] && ele['child'].length != 0) {
                            ele['child'].forEach(el => {
                                el['childState'] = false
                            })
                        }
                    })
                }
            })

            answerList.value = targetAnswerList
        }

        // 获取剩下的子评论
        const alsoCommentsData = (index, ind) => {
            const targetAnswerList = [...answerList.value]
            const parentid = targetAnswerList[index]['commentList'][ind]['id']
            const token = targetAnswerList[index]['commentList'][ind]['token']

            $ajax("/api/comment/childrenList", {
                token,
                parentid,
                limit: 20,
                page: 1,
                childlimit: 1,
            }).then(res => {
                console.log("res", res);
                if (res.code != 200) return
                let data = res.data

                targetAnswerList[index]['commentList'][ind]['child'] = targetAnswerList[index]['commentList'][ind]['child'].concat(data.data)

                answerList.value = targetAnswerList
            })
        }

        let myType = ref('') // collect  answers  questions 
        // 专门处理 我的 弹窗数据
        const handleMy = (key) => {
            // if ((key == 'collect' && isNeedNewColletData) || (key == 'collect' && myCollectionList.value.length == 0)) {
            if (key == 'collect') {
                myCollectionList.value = []
                myCollectionPage = 1
                getMyCollection()
                return
            } else if (key == 'answers') {
                myAnswerList.value = []
                myAnswerPage = 1
                getMyAnswer()
                return
            } else if (key == 'questions') {
                myQuestionsList.value = []
                myQuestionsPage = 1
                getMyQuestions()
                return
            }
            // myType.value = key
        }

        let myCollectionList = ref([])  // 我的收藏列表
        let myCollectionCount = ref(0)  // 我的收藏数量
        let myCollectionPage = 1  // 我的收藏页数
        // 获取我的收藏
        const getMyCollection = () => {
            if (myCollectionPage == 0) return
            $ajax("/api/user/collect", {
                limit: 20,
                page: myCollectionPage,
            }).then(res => {
                if (res.code != 200) return
                let data = res.data
                myType.value = 'collect'
                isNeedNewColletData = false

                myCollectionList.value = myCollectionList.value.concat(data.data)
                myCollectionCount.value = data.count

                if (myCollectionList.value.length != data['count']) myCollectionPage++
                else myCollectionPage = 0
            })
        }

        // 取消收藏
        const cancelCollection = (token, index) => {
            $ajax("/api/user/deleteCollect", { token }).then(res => {
                if (res.code == 200) {
                    myCollectionList.value.splice(index, 1)
                    myCollectionCount.value--
                    myCount.value['collect']--
                    handleMsg('success', res['message'] || '操作成功')
                }
            })
        }

        // 监听 我的收藏滚动到底部
        const handleCollectionScroll = (e) => {
            const el = e.target;
            // 判断滚动到底部
            if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
            getMyCollection()
        }

        let myAnswerList = ref([]) // 我的回答数据
        let myAnswerCount = ref(0)  // 我的回答数量
        let myAnswerPage = 1

        // 获取我的回答
        const getMyAnswer = () => {
            if (myAnswerPage == 0) return

            $ajax("/api/user/answer", {
                limit: 20,
                page: myAnswerPage,
            }).then(res => {

                if (res.code != 200) return
                let data = res.data
                data.data.forEach(element => {
                    element['popupState'] = false
                })
                myAnswerList.value = myAnswerList.value.concat(data.data)
                myAnswerCount.value = data.count

                if (myAnswerList.value.length != data['count']) myAnswerPage++
                else myAnswerPage = 0

                myType.value = 'answers'
                isNeedNewAnswersData = false

            })
        }

        // 我的回答 的滚动到底部事件
        const handleAnswersScroll = e => {
            const el = e.target;
            // 判断滚动到底部
            if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
            getMyAnswer()
        }

        let answerIndexOld = null
        // 切换 我的提问的公开匿名 弹窗状态
        const cutAnswerPopupState = index => {
            myAnswerList.value[index]['popupState'] = true

            if (answerIndexOld == index) {
                myAnswerList.value[index]['popupState'] = false
                answerIndexOld = null
            } else {
                myAnswerList.value[index]['popupState'] = true
                if (answerIndexOld != null) myAnswerList.value[answerIndexOld]['popupState'] = false
                answerIndexOld = index
            }
        }

        // 更改匿名状态
        const changeAnonymous = (token, anonymous, index) => {
            $ajax("/api/publish/changeAnonymous", { token, anonymous }).then(res => {
                if (res.code != 200) return
                let data = res.data
                myAnswerList.value[index]['anonymous'] = anonymous
                cutAnswerPopupState(index)
                handleMsg('success', res['message'] || '操作成功')
            })
        }

        let myQuestionsList = ref([]) // 我的提问数据
        let myQuestionsCount = ref(0) // 我的提问数量
        let myQuestionsPage = 0 // 我的提问页数
        // 获取我的提问
        const getMyQuestions = () => {
            if (myQuestionsPage == 0) return
            $ajax("/api/user/questions", {
                limit: 20,
                page: myQuestionsPage,
            }).then(res => {
                if (res.code != 200) return
                let data = res.data
                myQuestionsList.value = myQuestionsList.value.concat(data.data)
                myQuestionsCount.value = data.count
                myType.value = 'questions'

                if (myQuestionsList.value.length != data['count']) myQuestionsPage++
                else myQuestionsPage = 0

            })
        }

        // 我的提问 的滚动到底部 事件
        const handleQuestionsScroll = e => {
            const el = e.target;
            // 判断滚动到底部
            if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
            getMyQuestions()
        }

        let questionsIndexOld = null
        // 切换 我的提问的公开匿名 弹窗状态
        const cutQuestionsPopupState = index => {
            myQuestionsList.value[index]['popupState'] = true

            if (questionsIndexOld == index) {
                myQuestionsList.value[index]['popupState'] = false
                questionsIndexOld = null
            } else {
                myQuestionsList.value[index]['popupState'] = true
                if (questionsIndexOld != null) myQuestionsList.value[questionsIndexOld]['popupState'] = false
                questionsIndexOld = index
            }
        }

        // 更改匿名状态
        const changeAnonymousQuestions = (token, anonymous, index) => {
            $ajax("/api/publish/changeAnonymous", { token, anonymous }).then(res => {
                if (res.code != 200) return
                let data = res.data
                myQuestionsList.value[index]['anonymous'] = anonymous
                cutQuestionsPopupState(index)
                handleMsg('success', res['message'] || '操作成功')
            })
        }


        let questionsSetp = ref(0) // 提问的步骤

        // 切换提问步骤
        const cutQuestionsSetp = (value) => {
            questionsSetp.value = value
        }

        let questionsTypeList = ref([]) // 提问的类型主题
        let questionsObj = ref({  // 提问的内容 
            token: "",
            title: "",
            content: "",
            tags: "",
            tid: "",
            anonymous: 0,
        })

        // 报 提问的初始化
        const questionsInit = () => {
            $ajax("/api/publish/questions").then(res => {
                if (res.code != 200) return
                let data = res.data
                questionsObj.value['token'] = data['token']

                questionsTypeList.value = data['typeList'] || []
                console.log("data['typeList']", data['typeList']);
                cutQuestionsSetp(1)
            })
        }

        // 选择提问主题
        const choosingTheme = (id) => {
            questionsObj.value.tid = id
            cutQuestionsSetp(2)
        }

        // 切换匿名状态
        const cutAnonymous = () => {
            questionsObj.value.anonymous = questionsObj.value.anonymous == 0 ? 1 : 0
        }

        // 发布问题
        const postingIssue = () => {
            // 还没有分类
            console.log("发布问题", questionsObj.value);

            $ajax("/api/publish/questionsSubmit", questionsObj.value).then(res => {
                console.log("res", res);

                myCount.value['questions']++
                if (res.code == 200) {
                    handleMsg('success', res['message'] || '操作成功')
                }
                handleMsg('error', res['message'] || '刷新重试！！！')
            })
        }


        let pitchIndex = ref(null) // 选中的下标
        // 切换 滚动列表
        const cut = index => {
            // if (pitchIndex.value == null) type.value = type.value == 'list' ? 'details' : 'list'

            pitchIndex.value = index

            setTimeout(() => {
                scrollLeftInMiddle()
            }, 350)
        }

        // 滚动左边在中间
        const scrollLeftInMiddle = () => {
            let list = document.querySelector(".list-box")
            list.scrollTo({
                // top: 128 * pitchIndex.value -  pageListHeight.value / 2 - 385,
                top: 128 * pitchIndex.value + 68 - pageListHeight.value / 2,
                behavior: 'smooth'
            })
        }

        const listStyle = () => {
            const newtype = type.value
            let width = ""
            let margin = ""
            if (newtype == 'list') {
                width = '1200px'
                margin = '0 auto'
            } else {
                width = 'calc((100vw - 1200px) / 2 + 512px)'
                margin = 'initial'
            }
            return {
                width,
                margin
            }
        }

        const itemStyle = (index, content) => {
            const newtype = type.value
            // let itemHeight = content == "" ? 106 : 128
            let obj = {}
            if (newtype == 'list') {
                let top = Math.floor(index / 2) * 128 + 'px'
                obj['top'] = top
                if (index % 2 == 0) obj['left'] = 0
                else obj['left'] = 649 + 'px'
            } else {
                obj['top'] = index * 128 + 'px'
                obj['left'] = 0
                obj['width'] = '100%'
                // obj['backgroundColor'] = '#fbfbfb'
                obj['paddingLeft'] = 'calc((100vw - 1200px) / 2)'
            }

            return obj

        };

        // list-box
        const listBoxStyle = () => {
            const newtype = type.value
            let obj = {}
            if (newtype == 'list') {
                obj['overflow'] = 'visible'
            } else {
                // obj['height'] = 'calc(100vh - ' + pageHeaderHeight.value + 'px)'
                obj['height'] = pageListHeight.value + 'px'
            }
            return obj
        }


        const $ajax = (url, data) => {
            url = url.indexOf('//') > -1 ? url : baseURL + url;
            return new Promise(function (resolve, reject) {
                axios.post(url, data, {
                    emulateJSON: true,
                    withCredentials: true,
                    headers: {
                        // authorization: "9l3vfdx6h5xhu2hbw4fv5ygbog1dhtly"
                        // authorization: "194cdc367ed40c938f2eaaf1c6dfa5ff"
                        authorization: "63c9bef150557f9c90e93f98d2e2497e"
                    }
                }).then(function (res) {
                    var data = null
                    try {
                        data = typeof res.data == 'string' ? JSON.parse(res.data) : res.data;

                        if (data['code'] != 200) handleMsg('error', data['message'] || '报错了，请重试！！！')
                    } catch (error) { }
                    resolve(data)
                }).catch(err => {
                    if (err.response.status == 401) window.location.href = 'https://passport.gter.net';
                })
            });
        }

        // 处理时间
        const handleDate = (dateTimeStamp) => {
            dateTimeStamp = dateTimeStamp ? dateTimeStamp : null;
            var timestamp = new Date(dateTimeStamp)
            timestamp = timestamp.getTime()
            var minute = 1000 * 60;
            var hour = minute * 60;
            var day = hour * 24;
            var now = new Date().getTime();
            var diffValue = now - timestamp;
            var result;
            if (diffValue < 0) return;

            var dayC = diffValue / day;
            var hourC = diffValue / (hour + 1);
            var minC = diffValue / minute;
            if (dayC >= 7) {
                let date = new Date(timestamp);
                let Y = date.getFullYear() + '-';
                let M = (date.getMonth() + 1 < 10 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1) + '-';
                let D = (date.getDate() < 10 ? '0' + date.getDate() : date.getDate()) + ' ';
                let h = (date.getHours() < 10 ? '0' + date.getHours() : date.getHours()) + ':';
                let m = (date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes());
                result = "" + Y + M + D + h + m;
            } else if (dayC >= 1) result = "" + Math.round(dayC) + "天前";
            else if (hourC >= 1) result = "" + Math.round(hourC) + "小时前";
            else if (minC >= 1) result = "" + Math.round(minC) + "分钟前";
            else result = "刚刚";

            return result;
        }

        let questionsTransmitState = ref(false)  // 问题的转发 弹窗状态
        let questionsTransmitMaskState = ref(false) // 问题的转发 弹窗蒙版状态状态

        // 关闭转发状态
        const closeTransmitState = () => {
            questionsTransmitState.value = true
            questionsTransmitMaskState.value = true
            countForwardingTimes(detailsToken)
        }

        // 关闭全部转发状态
        const closeAllTransmitState = () => {
            answerList.value.forEach(element => {
                element['transmitState'] = false
            })
            questionsTransmitState.value = false
            questionsTransmitMaskState.value = false
        }

        // 开启和关闭回答的转发状态  type open close
        const handleAnswerTransmitList = (Iindex, type) => {
            answerList.value[Iindex]['transmitState'] = true
            questionsTransmitMaskState.value = true
            countForwardingTimes(answerList.value[Iindex]['token'])
        }

        // 统计转发次数
        const countForwardingTimes = (token) => {
            console.log("token", token);

            // return
            $ajax("/api/operate/share", { token }).then(res => {
                console.log("res", res);
            })
        }

        // 关闭详情模式
        const closeDetailMode = () => {
            type.value = 'list'
            pitchIndex.value = null
            replaceState()
        }

        // 全部的启动到底部
        const handleListScroll = (e) => {
            const el = e.target;
            // 判断滚动到底部
            if (el.scrollHeight - el.scrollTop !== el.clientHeight) return

            getList()
        }

        // 处理 回答弹窗的复制图片
        const handlePaste = (event) => {
            const items = (event.clipboardData || event.originalEvent.clipboardData).items;
            for (const item of items) {
                console.log(item);
                if (item.type.indexOf('image') === 0) {
                    const file = item.getAsFile();
                    const reader = new FileReader();
                    reader.onload = (e) => {
                        const base64 = e.target.result
                        // console.log("base64", base64);
                        uploadImg(base64).then(res => {
                            const questionTextarea = document.querySelector(".question-textarea")
                            const imgElements = questionTextarea.querySelectorAll("img");
                            // console.log("imgElements1111", imgElements);
                            if (imgElements.length == 0) {
                                questionTextarea.innerHTML += `<img 1 src="${res.url}" data-aid="${res.aid}" />`
                                handleInput()
                            } else {
                                imgElements.forEach(img => {
                                    // console.log("src", img.getAttribute("src"));
                                    // if (img.getAttribute("src") == base64) {
                                    if (img.getAttribute("data-aid") == null && img.getAttribute('data-custom') == null) {
                                        img.setAttribute("src", res.url);
                                        img.setAttribute("data-aid", res.aid);
                                    }
                                });
                            }

                        })
                    };
                    reader.readAsDataURL(file);
                }
            }
        }
        // 上传图片 获取图片url
        const uploadImg = (base64) => {
            return new Promise((resolve, reject) => {
                $ajax("/api/common/upload", { data: base64 }).then(res => {
                    if (res.code != 200) return
                    let data = res.data
                    resolve(data)
                })
            })

        }

        // 回答 的 placeholder 状态
        let questionPlaceholderState = ref(false)

        // 回答的输入事件 判断是否显示 placeholder 用
        const handleInput = (event) => {
            // IAnswerInfo.value['text'] = event.target.innerHTML;
            const questionTextarea = document.querySelector(".question-textarea")
            const html = questionTextarea.innerHTML
            if (html) questionPlaceholderState.value = false
            else questionPlaceholderState.value = true
        }


        let msg = ref({}) // 提示文本的对象 state 类型 type  success warning error 显示状态 text 内容

        // 调用 提示框方法
        const handleMsg = (type, text) => {
            msg.value['state'] = true
            msg.value['type'] = type
            msg.value['text'] = text
        }

        // 修改提示框类型
        const boxClass = () => {
            msgShowTimer()
            return type ? `box-item-${msg.value['type']}` : ''
        }

        let msgTimer = null
        const msgShowTimer = () => {
            clearTimeout(msgTimer)
            msgTimer = setTimeout(() => {
                msg.value['state'] = false
            }, 1000)
        }

        // 复制
        let copyText = text => {
            if (navigator.clipboard) {
                copyText = () => {
                    navigator.clipboard.writeText(text)
                    handleMsg('success', '复制成功')
                }
            } else {
                copyText = () => {
                    var tempInput = document.createElement("input")
                    tempInput.value = text
                    document.body.appendChild(tempInput)
                    tempInput.select()
                    document.execCommand("copy")
                    document.body.removeChild(tempInput)
                    handleMsg('success', '复制成功')

                }
            }
            copyText()
        }

        // 修改 url
        const replaceState = (obj = {}) => {
            // 获取当前URL参数
            let params = new URLSearchParams(window.location.search);

            // 循环删除所有参数
            for (let key of params.keys()) {
                params.delete(key);
            }
            // 修改URL参数
            // params.set('paramName', 'paramValue');
            for (const key in obj) {
                params.set(key, obj[key]);
            }

            // 替换当前URL，但不刷新页面
            window.history.replaceState({}, '', `${window.location.pathname}?${params}`);
        }

        // 我的打开 详情
        const myOpenDetails = (value) => {
            getDetails(value['uniqid'])
            myType.value = ""
        }


        // 详情页滚动事件
        const handleDetailsScroll = e => {
            // console.log("e", e);
            const el = e.target;
            // 判断滚动到底部
            if (el.scrollHeight - el.scrollTop !== el.clientHeight) return
            // console.log("底部");
            getAnswerList()
        }

        let dialogSrc = ref("")   // 大图的src

        // 处理点击答案图片 展开大图
        const handleAnswerText = e => {
            if (e.target.tagName === 'IMG') {
                var src = e.target.getAttribute('src');
                dialogSrc.value = src
            }
        }


        // 切换顶部的 type 
        const cutType = (id) => {
            typePitch.value = id
            page = 1
            list.value = []
            type.value = 'list'
            getList()
        }



        return {
            cutType,
            dialogSrc,
            answerPage,
            handleDetailsScroll,
            replaceState,
            copyText,
            boxClass,
            questionPlaceholderState,
            handleInput,
            handlePaste,
            itemStyle,
            listStyle,
            listBoxStyle,
            myType,
            type,
            pitchIndex,
            cut,
            list,
            keyword,
            keywordText,
            getList,
            total,
            typeList,
            typePitch,
            getDetails,
            detailsInfo,
            detailsIsanswered,
            detailsIscollection,
            detailsIsmyself,
            detailShare,
            answerList,
            operateLike,
            operateCollect,
            IAnswerState,
            IAnswerEditState,
            IAnswerInfo,
            amendIAnswer,
            openIAnswer,
            closeIAnswer,
            operateIAnswer,
            submitAnswer,
            openCommentState,
            submitAnswerComments,
            operateAnswerCommentsLike,
            openAnswerCommentsChild,
            closeAnswerCommentsChild,
            alsoCommentsData,
            handleAllComment,
            myCollectionList,
            myCollectionCount,
            myQuestionsList,
            myQuestionsCount,
            myAnswerList,
            myAnswerCount,
            cutAnswerPopupState,
            handleDate,
            handleCollectionScroll,
            handleAnswersScroll,
            handleQuestionsScroll,
            cancelCollection,
            getMyCollection,
            questionsSetp,
            questionsObj,
            cutAnonymous,
            cutQuestionsSetp,
            cutQuestionsPopupState,
            questionsTypeList,
            postingIssue,
            choosingTheme,
            handleMy,
            changeAnonymous,
            changeAnonymousQuestions,
            pageHeaderHeight,
            pageListHeight,
            questionsTransmitState,
            questionsTransmitMaskState,
            closeAllTransmitState,
            closeTransmitState,
            handleAnswerTransmitList,
            closeDetailMode,
            tabListFixeState,
            handleListScroll,
            historicalSearchState,
            historicalSearchList,
            searchFocus,
            searchBlur,
            searchClick,
            handleClickHistoricalItem,
            handleClickClear,
            isSearchMode,
            questionsInit,
            myCount,
            msg,
            myOpenDetails,
            handleAnswerText,
            getCurrentUrl
        };

    }
})


forumApp.mount("#answer-app"); //初始化