<template>
    <div class="talkbox " v-show="showReply">
        <div class="textbox">
            <van-field :autosize="{ minHeight: 120 }" v-model="content" rows="2" autosize type="textarea"
                maxlength="200" placeholder="请输入评论内容" show-word-limit />

        </div>
        <div class="toolbox">
            <div class="cancel" @click="showReply = false">取消</div>
            <div class="ok" @click="handleSubmit">提交</div>
        </div>
    </div>
</template>

<script setup>
import { ref } from 'vue'
const showReply=ref(false);
const content=ref('')
const props = defineProps({
    root_id: {
        type: String,
        default: ''
    },
    project_id:{
        type: String,
        default: ''
    },
    case_id:{
        type: String,
        default: ''
    },
    parent_id: {
        type: String,
        default: ''
    },

});
const handleSubmit=()=>{
    showReply.value=false;
};
const openReply=()=>{
    showReply.value=true;
};
const closeReply=()=>{
    showReply.value=false;
};
defineExpose({
    openReply,
    closeReply
})
</script>

<style lang='scss' scoped>
.talkbox {
    margin: 12px 30px 0px 0;
}
.textbox {
    border-radius: 5px;
    border: .5px solid #43C9C3;

    :deep() .van-cell {
        background: none;
    }

    :deep() .van-field__word-limit {
        color: #999999;
    }
}
.toolbox {
    margin-top: 12px;
    display: flex;
    justify-content: space-between;

    .cancel {

        height: 38px;
        background: #FFFFFF;
        border: 1px solid #EBEBEB;
        border-radius: 4px;
        font-size: 14px;
        display: flex;
        justify-content: center;
        align-items: center;
        color: #737478;
        flex: 1;
    }

    .ok {
        margin-left: 12px;
        flex: 1;
        border-radius: 4px;
        height: 38px;
        display: flex;
        justify-content: center;
        align-items: center;
        background: #43C9C3;
        border: 1px solid #43C9C3;
        font-size: 14px;
        color: #fff;
    }
}

</style>
