<template>
    <div>
        <!-- 弹窗-讨论-单行 -->
        <div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionSingle'"
            @click="openDiscussionSingleState ? handlePopCancel() : ''">
            <div class="discussion-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
                @click.stop="">
                <div class="discussion-header flexacenter" v-if="twoCommentData">
                    <img class="discussion-avatar" :src="twoCommentData && twoCommentData.avatar" />
                    <div class="discussion-text one-line">{{ twoCommentData && twoCommentData.content }}</div>
                </div>
                <div class="discussion-single-box flexflex flex1">
                    <div class="discussion-single-content flexacenter flex1">
                        <input class="discussion-single-input flex1" cursor-spacing="5" type="text"
                            :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'" maxlength="500" :value="commentContent"
                            @input="inputCommentContent($event)" v-focus />
                        <img class="discussion-single-input-icom" @click.stop="setValue()"
                            src="@/assets/img/detail/unfold.png" />
                    </div>
                    <div class="discussion-single-btn flexcenter" @click.stop="postComment()">发布</div>
                </div>
            </div>
        </div>

        <!-- 弹窗-讨论-多行 -->
        <div class="pop-box flexflex flexcolumn" v-if="popState == 'discussionMulti'" @click="handlePopCancel()">
            <div class="discussion-multi-box pop-box-box flexflex flexcolumn" style="border-radius: .4rem .4rem 0 0;"
                @click.stop="">
                <div class="discussion-header flexacenter" v-if="twoCommentData">
                    <img class="discussion-avatar" :src="twoCommentData.avatar" />
                    <div class="discussion-text one-line">{{ twoCommentData.content }}</div>
                </div>
                <div class="discussion-multi-content flexflex flex1">
                    <textarea class="discussion-multi-textarea flex1" v-focus type="text" maxlength="500"
                        :value="commentContent" :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"
                        @input="inputCommentContent($event)"></textarea>
                    <img class="discussion-multi-icom" @click.stop="openDiscussionSingle()"
                        src="@/assets/img/detail/pack.png" />
                    <div class="discussion-multi-sum">{{ 500 - commentContent.length }}</div>
                </div>
                <div class="discussion-multi-bottom flexflex flexacenter">
                    <div class="discussion-multi-btn flexcenter" @click.stop="postComment()">发布</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailReply',
    data() {
        return {
            openDiscussionSingleState: true, // 弹出键盘动画
        };
    },
    props: ["twoCommentData", "popState", "commentContent"],

    mounted() {
    },

    methods: {
        // 提交回复
        postComment() {
            this.$parent.postComment()
        },

        // 关闭弹窗
        handlePopCancel() {
            this.$parent.twoCommentData = null
            this.$parent.popState = ""
            this.$parent.commentContent = ""
        },

        // 清空
        clearTwoCommentData() {
            this.$parent.twoCommentData = null
        },

        // 切换简单的切换数据
        setValue(key, value) {
            this.$parent.popState = "discussionMulti"
        },

        openDiscussionSingle() {
            this.$parent.popState = "discussionSingle"
            this.openDiscussionSingleState = false

            setTimeout(() => {
                this.openDiscussionSingleState = true
            }, 500);
        },

        inputCommentContent(event) {
            let value = event.currentTarget.value
            this.$parent.commentContent = value
        }


    },
};
</script>

<style lang="scss" scoped>
.pop-box {
    height: 100%;
}

.pop-box-box {
    width: 100vw;
    background-color: #fff;
    border-radius: .64rem .64rem 0 0;
    position: fixed;
    bottom: 0;
    left: 0;
}

.discussion-single-box {
    height: .96rem;
    justify-content: space-between;
    padding: .3467rem 0;
}

.discussion-single-btn {
    width: 1.4rem;
    height: .96rem;
    font-size: .36rem;
    color: #000;
    border-radius: .16rem;
    margin-right: .32rem;
    background-color: rgba(80, 227, 194, 1);
}

.discussion-single-content {
    height: .96rem;
    font-size: .36rem;
    border-radius: .16rem;
    background-color: rgba(242, 242, 242, 1);
    margin-left: .32rem;
    margin-right: .32rem;
    padding-left: .24rem;
}

.discussion-single-input-icom {
    width: .56rem;
    height: .56rem;
    padding: .2rem;
}

.discussion-single-input {
    height: 100%;
    font-size: 0.4rem;
}

.discussion-header {
    padding-top: .32rem;
    padding-left: .32rem;
    position: relative;

    // .discussion-icom {
    //     width: .36rem;
    //     height: .36rem;
    //     padding: .32rem;
    //     position: absolute;
    //     top: 50%;
    //     right: 0;
    //     transform: translateY(-50%);
    //     z-index: 5;
    // }

    .discussion-text {
        font-size: .32rem;
        color: #7f7f7f;
        margin-left: .24rem;
        width: 8.2rem;
    }

    .discussion-avatar {
        width: .48rem;
        height: .48rem;
        border-radius: 50%;
    }

}

.discussion-multi-box {
    .discussion-header {
        padding-bottom: .32rem;
        border-bottom: .0133rem solid #dbdcdd;
    }

    .discussion-multi-content {
        position: relative;
        // height: 8.84rem;
        max-height: 40vh;
        box-sizing: border-box;

    }

    .discussion-multi-textarea {
        font-size: .4rem;
        padding: .32rem;
        box-sizing: border-box;
        // height: 50vh;
        height: 40vh;

        overflow: auto;

        word-break: break-word;
        line-height: .48rem;
    }

    .discussion-multi-icom {
        width: .48rem;
        height: .48rem;
        padding: .32rem;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 88;
    }

    .discussion-multi-sum {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: .32rem;
        font-size: .28rem;
        color: #aaaaaa;
    }

    .discussion-multi-bottom {
        height: 1.28rem;
        border-top: .0133rem solid #dbdcdd;
        justify-content: flex-end;
        padding-right: .32rem;
    }

    .discussion-multi-btn {
        background-color: rgba(80, 227, 194, 1);
        border-radius: .16rem;
        width: 1.4rem;
        height: .88rem;
        margin: .2rem 0;
        font-size: .36rem;
    }

}
</style>