<template>
    <el-input
       v-model="textarea"
       :disabled="disabled"
       type="textarea"
       :rows="rows"
       :placeholder="placeholder"
       @input="areaChange"
     >
    </el-input>
</template>
<script setup lang="ts">
import { ref, watch } from 'vue';
import { ElMessage } from 'element-plus';
const props = defineProps({
    value: { type: String, default: '' }, // 内容字段
    disabled: { type: Boolean, default: false }, // 是否禁用
    rows: { type: Number, default: 5 }, // 行数
    placeholder: { type: String, default: '请输入设备地址 例如：1.1.1.1或1.1.2.0/24，最多可输入5行，每个设备地址用回车隔开。' }, // 提示语
});

const textarea = ref<string>(''); // 内容字段
watch(
    () => props.value,
    (newVal: string) => {
        textarea.value = newVal;
    },
    { deep: true, immediate: true }
);

const emit = defineEmits(['input']);

// 文本框内容改变 事件
const areaChange = (e: string) => {
    if (getRow() > props.rows) {
        textarea.value = props.value;
        ElMessage.error("最多输入" + props.rows + "行");
    } else {
        // 判断成功才返回赋值
        emit('input', e);
    }
};
// 得到textarea的行数
const getRow = () => {
    let row = 0;
    textarea.value.split("\n").forEach((item: string) => {
        if (item.length === 0) {
            row += 1; //如果一行只有回车符就是行数增加一行
        } else {
            row += Math.ceil(item.replace(/[\u0391-\uFFE5]/g, "ab").length / 52);
            //item.replace(/[\u0391-\uFFE5]/g, 'ab'）
            //这句只是把一个汉字替换成两个字母，进行长度划算
        }
    });
    return row;
};

// 父级页面使用
/**
<IPaddress
    :value="formData.deviceIp"
    :rows="4"
    placeholder="请输入设备地址 例如：1.1.1.1或1.1.2.0/24，最多可输入5行，每个设备地址用回车隔开。"
    @input="(e: string) => formData.deviceIp = e"
></IPaddress>
value => 为表单绑定的字段
rows => 行数
placeholder => 提示语
@input => 输入事件返回   需要父级重新想表单字段绑定数据
*/
</script>
