<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">
                    <image class="discussion-avatar" :src="twoCommentData.avatar"></image>
                    <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 v-if="discussionMultiState" class="discussion-multi-textarea flex1" type="text"
                        maxlength="500" v-model="commentContent" @blur="setValue('discussionMultiState', false, 'boolean')"
                        :placeholder="twoCommentData ? '写回复…' : '想问啥，大胆问…'"></textarea>
                    <div v-else @click="setValue('discussionMultiState', true, 'boolean')"
                        class="discussion-multi-textarea flex1"
                        :style="{ color: !commentContent ? 'rgba(118,118,118,1)' : '' }">{{ commentContent ?
                            commentContent : (twoCommentData ? '写回复…' : '想问啥，大胆问…') }}</div>
                    <image class="discussion-multi-icom" catchtap="openDiscussionSingle" mode="widthFix"
                        src="@/assets/img/detail/u1431.png"></image>
                    <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: ""
        };
    },

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

    methods: {

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

    },
};
</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%;
    background: transparent;
    border: none;
    outline: none;
}

.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: 24rpx;
        border-bottom: 1rpx solid #dbdcdd;
    }

    .discussion-multi-content {
        position: relative;
        height: 663rpx;
        box-sizing: border-box;

    }

    .discussion-multi-textarea {
        font-size: 30rpx;
        padding: 24rpx;
        /* height: 663rpx; */
        box-sizing: border-box;
        height: 50vh;

        overflow: auto;

        word-break: break-word;
        line-height: 36rpx;
    }

    .discussion-multi-icom {
        width: 36rpx;
        height: 36rpx;
        padding: 24rpx;
        position: absolute;
        top: 0;
        right: 0;
        z-index: 88;
    }

    .discussion-multi-sum {
        position: absolute;
        bottom: 0;
        right: 0;
        padding: 24rpx;
        font-size: 21rpx;
        color: #aaaaaa;
    }

    .discussion-multi-bottom {
        height: 96rpx;
        border-top: 1rpx solid #dbdcdd;
        justify-content: flex-end;
        padding-right: 24rpx;
    }

    .discussion-multi-btn {
        background-color: rgba(80, 227, 194, 1);
        border-radius: 12rpx;
        width: 105rpx;
        height: 66rpx;
        margin: 15rpx 0;
        font-size: 27rpx;
    }

}
</style>