<template>
     <div>
        <div class="" id="answer-app">

            <div class="main flexflex" :class="{'mode-list': type == 'list'}">
                <div class="list-box" @scroll="handleListScroll">
                    <div class="main-header" :style="{paddingLeft: type == 'list' ? 0 : 'calc((100vw - 1200px) / 2)'}">
                        <template v-if="isSearchMode">
                            <div class="search-keyword flexacenter" @click="handleClickClear()">
                                <div class="ellipsis">{{ keywordText }}</div>
                                <img class="search-keyword-cross" src="./img/cross-circle-icon.png" />
                            </div>
                            <div class="total grid-item" @click="cut">共 {{ total }} 条搜索结果</div>
                        </template>

                        <div v-else class="total grid-item" @click="cut">共 {{ total }} 条问答</div>
                    </div>
                    <div class="list" id="list" :style="[listStyle(), {height: listHeight + 'px'}]">
                        <a class="item grid-item flexflex" v-for="(item, index) in list" :key="index" :style="itemStyle(index, item['content'])" :class="{pitch: index === pitchIndex, upLevel: index === pitchIndex - 1}" :href="setItemUrl(item['uniqid'])" @click.stop.prevent="getDetails(item['uniqid'], index)">
                            <img class="dot" src="./img/dot.svg" />
                            <div class="content" :style="{width: type == 'list' ? '531px' : '430px'}">
                                <div class="issue-title flexcenter">
                                    <img class="hot-icon" v-if="item['ishot'] == 1" src="./img/hot-icon.png" />
                                    <div class="issue ellipsis flex1" v-html="item['title']"></div>
                                </div>
                                <div class="answer ellipsis" v-if="item['content']" v-html="item['content']"></div>
                                <div class="bottom flexacenter">
                                    <div class="typename flexcenter" v-if="item['typename']">{{ item["typename"] }}</div>
                                    <div v-else></div>
                                    <div class="flexacenter">
                                        <div class="quantity">{{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}</div>
                                        <template v-if="type == 'list'">
                                            <div class="longString"></div>
                                            <div class="answer-btn" @click.stop.prevent="openListIAnswer(index)">我来回答</div>
                                            <!-- <div class="answer-btn" @click.stop="getDetails(item['uniqid'], index, true)">我来回答</div> -->
                                        </template>
                                    </div>
                                </div>
                            </div>
                        </a>
                    </div>

                    <div class="bottom-tps" :style="bottomTpsStyle()" v-if="inTheEndState">- 到底了 -</div>

                    <div class="empty-box flexcenter" v-if="isListEmptyState && list.length == 0">
                        <div class="dot-list flexacenter"><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-yellow.svg" /><img class="item" src="./img/dot-gray.svg" /><img class="item" src="./img/dot-gray.svg" /><img class="item" src="./img/dot-gray.svg" /></div>
                        <img class="empty-icon" src="./img/empty-icon.svg" />
                        <div class="empty-hint" v-if="isSearchMode">没有找到相关结果，请更换搜索关键词</div>
                        <div class="empty-hint" v-else>暂无数据</div>
                    </div>
                </div>
            </div>

            <!-- 我的弹窗 -->
            <div class="popover-mask my-popover flexcenter" v-if="myType">
                <div class="popover-box flexflex">
                    <img class="cross-icon" src="./img/cross-icon.png" @click="myType = ''" />
                    <div class="tab-list flexcenter">
                        <div class="tab-item flexacenter" :class="{pitch: myType == 'collect'}" @click="handleMy('collect')">
                            我的收藏
                            <div class="quantity">{{ myCollectionCount || myCount["collect"] || 0 }}</div>
                        </div>
                        <div class="long-string"></div>
                        <div class="tab-item flexacenter" :class="{pitch: myType == 'questions'}" @click="handleMy('questions')">
                            我的提问
                            <div class="quantity">{{ myQuestionsCount || myCount["questions"] || 0 }}</div>
                        </div>
                        <div class="long-string"></div>
                        <div class="tab-item flexacenter" :class="{pitch: myType == 'answers'}" @click="handleMy('answers')">
                            我的回答
                            <div class="quantity">{{ myAnswerCount || myCount["answer"] || 0 }}</div>
                        </div>
                    </div>
                    <div class="empty-box flexcenter" v-if="(myType == 'collect' && myCollectionList.length == 0) || (myType == 'answers' && myAnswerList.length == 0) || (myType == 'questions' && myQuestionsList.length == 0)">
                        <div class="dot-list flexacenter">
                            <img class="item" src="./img/dot-yellow.svg" />
                            <img class="item" src="./img/dot-yellow.svg" />
                            <img class="item" src="./img/dot-yellow.svg" />
                            <img class="item" src="./img/dot-gray.svg" />
                            <img class="item" src="./img/dot-gray.svg" />
                            <img class="item" src="./img/dot-gray.svg" />
                        </div>
                        <img class="empty-icon" src="./img/empty-icon.svg" />
                        <div class="empty-hint">暂无内容</div>
                    </div>
                    <div class="content-box collect-list" v-if="myType == 'collect' && myCollectionList.length != 0" @scroll="handleCollectionScroll">
                        <div class="item flexflex" v-for="(item, index) in myCollectionList" :key="item" @click.stop="myOpenDetails(item.data['uniqid'])">
                            <template v-if="item.type == 'askanswercollection'">
                                <div class="icon a flexcenter">A</div>
                                <div class="centre flexflex flex1">
                                    <div class="titletitle ellipsis" v-html="item['data']['content']"></div>
                                    <div class="text ellipsis">提问：{{ item["data"]["title"] }}</div>
                                </div>
                                <div class="delete-box flexacenter">
                                    <img class="delete-icon" @click.stop="cancelCollection(item['token'], index)" src="./img/delete-icon.svg" />
                                </div>
                            </template>
                            <template v-else>
                                <div class="icon q flexcenter">Q</div>
                                <div class="centre flexflex flex1">
                                    <div class="titletitle ellipsis">{{ item["data"]["title"] }}</div>
                                    <div class="text ellipsis">{{ item["data"]["answers"] > 0 ? "共" + item["data"]["answers"] + "个回答" : "暂无回答" }}</div>
                                </div>
                                <div class="delete-box flexacenter">
                                    <img class="delete-icon" @click.stop="cancelCollection(item['token'], index)" src="./img/delete-icon.svg" />
                                </div>
                            </template>
                        </div>
                    </div>
                    <div class="content-box answers-list" v-if="myType == 'answers' && myAnswerList.length != 0" @scroll="handleAnswersScroll">
                        <div class="item flexflex" v-for="(item, index) in myAnswerList" :key="item" @click.stop="myOpenDetails(item['uniqid'])">
                            <div class="icon a flexcenter">A</div>
                            <div class="centre flexflex flex1">
                                <div class="info flexacenter">
                                    <div class="name">{{ item["nickname"] }}</div>
                                    <div class="time">{{ handleDate(item["publicationdate"]) }}</div>
                                </div>
                                <div class="titletitle ellipsis" v-html="item['content']"></div>
                                <div class="text ellipsis">提问：{{ item["title"] }}</div>
                            </div>
                            <div class="operate-box flexacenter">
                                <div class="state-box flexacenter" @click.stop="cutAnswerPopupState(index)">
                                    <div class="text">{{ item["anonymous"] == 0 ? "公开" : "匿名" }}</div>
                                    <img class="arrows" src="./img/arrows-icon.svg" />
                                    <div class="state-popup flexflex" v-if="item['popupState']">
                                        <!-- <div class="state-popup-mask" @click.stop="cutAnswerPopupState(index)"></div> -->
                                        <div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 0}" @click.stop="changeAnonymous(item['token'], 0, index)">
                                            <div class="">公开发表</div>
                                            <img class="state-popup-icon" src="./img/tick-orange.svg" />
                                        </div>
                                        <div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 1}" @click.stop="changeAnonymous(item['token'], 1, index)">
                                            <div class="">匿名发表</div>
                                            <img class="state-popup-icon" src="./img/tick-orange.svg" />
                                        </div>
                                    </div>
                                </div>
                                <img class="edit-icon" @click.stop="openIAnswer(index, 'my')" src="./img/edit-icon.png" />
                            </div>
                        </div>
                    </div>
                    <div class="content-box questions-list" v-if="myType == 'questions' && myQuestionsList.length != 0" @scroll="handleQuestionsScroll">
                        <div class="item flexflex" v-for="(item, index) in myQuestionsList" :key="item" @click.stop="myOpenDetails(item['uniqid'])">
                            <div class="icon q flexcenter">Q</div>
                            <div class="centre flexflex flex1">
                                <div class="info flexacenter">
                                    <div class="name">{{ item["nickname"] }}</div>
                                    <div class="time">{{ handleDate(item["publicationdate"]) }}</div>
                                </div>
                                <div class="titletitle ellipsis">{{ item["title"] }}</div>
                                <div class="text flexacenter">
                                    <div class="new-answer flexacenter" v-if="item['authornewnum'] > 0">
                                        有{{ item["authornewnum"] }}个新回答
                                        <div class="long-string"></div>
                                    </div>
                                    {{ item["answers"] == 0 ? "暂无回答" : "共" + item["answers"] + "个回答" }}
                                </div>
                            </div>
                            <div class="operate-box flexacenter">
                                <div class="state-box flexacenter" @click.stop="cutQuestionsPopupState(index)">
                                    <div class="text">{{ item["anonymous"] == 0 ? "公开" : "匿名" }}</div>
                                    <img class="arrows" src="./img/arrows-icon.svg" />
                                    <div class="state-popup flexflex" v-if="item['popupState']">
                                        <div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 0}" @click.stop="changeAnonymousQuestions(item['token'], 0, index)">
                                            <div class="">公开发表</div>
                                            <img class="state-popup-icon" src="./img/tick-orange.svg" />
                                        </div>
                                        <div class="state-popup-item flexacenter flex1" :class="{pitch: item['anonymous'] == 1}" @click.stop="changeAnonymousQuestions(item['token'], 1, index)">
                                            <div class="">匿名发表</div>
                                            <img class="state-popup-icon" src="./img/tick-orange.svg" />
                                        </div>
                                    </div>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>

            <!-- 我要提问 -->
            <div class="popover-mask flexcenter issue-box" v-if="questionsSetp" @click="cutQuestionsSetp(0)">
                <!-- 第一步 -->
                <div class="choosing-theme" v-if="questionsSetp == 1" @click.stop="">
                    <div class="titletitle">
                        选择提问所属主题
                    </div>
                    <div class="theme-list flexflex">
                        <div class="theme-stair-box flexflex" v-for="(item, index) in questionsTypeList" :key="index">
                            <div class="theme-item flexcenter" v-for="item in item" :key="item.id" @click="choosingTheme(item.id)">{{ item.name }}</div>
                        </div>
                    </div>
                </div>

                <!-- 第二步 -->
                <div class="issue-form" v-else @click.stop="">
                    <img class="issue-bj" src="./img/issue-bj.svg" />
                    <div class="flexcenter q">Q</div>
                    <img class="cross-icon" @click="cutQuestionsSetp(0)" src="./img/cross-icon.png" />
                    <div class="issue-input">
                        <textarea v-model="questionsObj.title" placeholder="一句话描述问题，以问号结尾"></textarea>
                    </div>
                    <textarea class="issue-replenish" v-model="questionsObj.content" placeholder="欢迎补充，清晰表达问题的关键点，可获得更有效的解答（非必填）"></textarea>
                    <div class="issue-bottom flexacenter">
                        <div class="option-box flexacenter" @click="cutAnonymous" style="color: #333;">
                            <img class="option-icon" v-if="questionsObj.anonymous == 0" src="./img/tick-no.svg" />
                            <img class="option-icon" v-else src="./img/tick-option.svg" />
                            匿名发表
                            <div class="" style="color: #aaa;">（发布后只能修改是否匿名）</div>
                        </div>

                        <div class="issue-btn flexcenter" @click="postingIssue">发布问题</div>
                    </div>
                </div>
            </div>

            <!-- 编辑回答 -->
            <div class="popover-mask flexcenter" v-if="IAnswerEditState">
                <div class="edit-answers">
                    <img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer" />
                    <div class="titletitle">编辑回答</div>
                    <div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste($event)" v-html="IAnswerInfo['text']" @input="handleInput"></div>
                    <div class="issue-bottom flexacenter">
                        <div class="option-box flexacenter" @click="amendIAnswer">
                            <img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg" />
                            <img class="option-icon" v-else src="./img/tick-option.svg" />
                            匿名发表
                        </div>
                        <div class="issue-btn flexcenter" @click="submitAnswer">提交回答</div>
                    </div>
                </div>
            </div>

            <!-- 我来回答 -->
            <div class="popover-mask flexcenter" v-if="IAnswerState">
                <div class="i-answer-box flexflex">
                    <img class="close-icon" src="./img/cross-icon.png" @click="closeIAnswer" />
                    <div class="question-header">
                        <div class="question-title flexflex">
                            <div class="question-icon flexcenter">Q</div>
                            <div class="flex1" v-html="IAnswerInfo['title']"></div>
                        </div>
                        <div class="question-replenish" v-if="IAnswerInfo['content']" v-html="IAnswerInfo['content']"></div>
                    </div>
                    <div class="question-middle flexflex">
                        <div class="question-icon flexcenter">A</div>
                        <div class="question-textarea" :class="{placeholder: questionPlaceholderState}" contenteditable="true" @paste="handlePaste($event)" v-html="IAnswerInfo['text']" @input="handleInput"></div>
                    </div>

                    <div class="issue-bottom flexacenter">
                        <div class="option-box flexacenter" @click="amendIAnswer">
                            <img class="option-icon" v-if="IAnswerInfo['anonymous'] == 0" src="./img/tick-no.svg" />
                            <img class="option-icon" v-else src="./img/tick-option.svg" />
                            匿名发表
                        </div>
                        <div class="issue-btn flexcenter" @click="submitAnswer">提交回答</div>
                    </div>
                </div>
            </div>

            <!-- 提示框 -->
            <transition name="msg" appear v-show="msg['state']">
                <div class="box-item" :class="boxClass()" :style="{top: 20 + 'px'}">
                    <div class="msg-container">{{ msg["text"] }}</div>
                </div>
            </transition>

        </div>
    </div>
</template>