<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;"
                catchtap="return false">
                <div class="discussion-header flexacenter" v-if="twoCommentData">
                    <img class="discussion-avatar" :src="twoCommentData.avatar" />
                    <div class="discussion-text one-line">{{ twoCommentData.content }}</div>
                    <img class="discussion-icom" catchtap="clearTwoCommentData"
                        style="height:13px;transform: translate(0);top:0;" src="@/assets/img/detail/u1428.png">
                </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 ? '写回复…' : '想问啥，大胆问…'" v-model="commentContent" />
                        <img class="discussion-single-input-icom" @click="setValue('popState', 'discussionMulti')"
                            src="@/assets/img/detail/u1448.png" />
                    </div>
                    <div class="discussion-single-btn flexcenter" @click="postComment(commentContent)">
                        发布
                    </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>
                    <img class="discussion-icom" @click.stop="clearTwoCommentData()" src="@/assets/img/detail/u1428.png">
                </div>
                <div class="discussion-multi-content flexflex flex1">
                    <textarea class="discussion-multi-textarea flex1" type="text"
                        maxlength="500" v-model="commentContent" :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
                    <img class="discussion-multi-icom" @click.stop="openDiscussionSingle()" 
                        src="@/assets/img/detail/u1431.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="postComment(commentContent)">
                        发布</div>
                </div>
            </div>
        </div>
    </div>
</template>

<script>
export default {
    name: 'DetailReply',
    data() {
        return {
            commentContent: "",
            twoCommentData: {
                avatar: "https://oss.gter.net/avatar/97KwEWANd_4DHWiY6VbnSUFSCKroYWFjYQ~~/middle",
                content: "评论回复",

            },
            popState: "discussionSingle",

            openDiscussionSingleState: false, // 弹出键盘动画

        };
    },

    props: ["twoCommentData"],

    mounted() {
        console.log("gjklgjklg");
    },

    methods: {

        // 提交回复
        postComment() {
            console.log("dffgkgfk");
        },

        // 关闭弹窗
        handlePopCancel(){
            this.twoCommentData = null
        },
        
        // 切换简单的切换数据
        setValue(key, value) {
            this[key] = value
        },

    },
};
</script>

<style lang="scss" scoped>
.pop-box-box {
    width: 100vw;
    background-color: #fff;
    border-radius: .64rem .64rem 0 0;
    position: relative;
}

.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%;
}

.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;
        box-sizing: border-box;

    }

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

        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>