<!--
 * @Description : 备注
 * @Author      : jinxin
 * @Date        : 2023-02-16 16:04:54
-->
<template>
    <div class="lc_remarks_box">
       <div class="lc_remarks_box_title">
            <span> </span><span>{{ title }}</span>
       </div>
       <div class="lc_remarks_context">
        <el-input
            @input="changeInput"
            v-model="data.iptVal"
            maxlength="500"
            placeholder="请输入"
            show-word-limit
            type="textarea"
            resize="none"
            :autosize="{minRows:11,maxRows:11}"
        />
       </div>
    </div>
</template>

<script>
import { defineComponent,onMounted,reactive,watch } from 'vue'
export default defineComponent({
    props:{
        title:String,
        remarks_vale:String
    },
    emits:['emitRemarks'],
    setup(props,context){
        onMounted(()=>{
            data.iptVal = props.remarks_vale
        })
        let data = reactive({
            iptVal:''
        })
        const changeInput = (value) => {
            context.emit('emitRemarks',value)
        }
        watch(()=>props.remarks_vale,(v1)=>{
            data.iptVal = v1
        })
        return{
            data,
            props,
            changeInput
        }
    }

})
</script>

<style scoped>
.lc_remarks_box_title{
    display:flex;
    justify-content:left;
    align-items:center;
    padding-bottom: 16px;
}
.lc_remarks_box_title span:nth-child(2){
    color:#303133;
    font-size: 14px;
    font-weight: 700;
}
.lc_remarks_box_title span:nth-child(1){
    color:#fff;
    height:14px;
    border-left:2px solid #4178D5;
    margin-right:8px;
}
</style>