<template>
    <el-dialog draggable :title="title" v-model="visibleLocal" width="600px" @close="handleCancel">
        <el-input type="textarea" v-model="rawText" :rows="10" :placeholder="placeholder" clearable></el-input>
        <template #footer>
            <el-button @click="handleCancel">取消</el-button>
            <el-button type="primary" @click="handleConfirm">确定</el-button>
        </template>
    </el-dialog>
</template>

<script setup>
import { ref, computed, watch } from 'vue';

// 定义接收的 props
const props = defineProps({
    /** 对话框可见性，外部通过 v-model:visible 绑定 */
    visible: {
        type: Boolean,
        required: true,
    },
    /** 对话框标题 */
    title: {
        type: String,
        default: '',
    },
    /** 文本框初始内容，可选 */
    initialText: {
        type: String,
        default: '',
    },
    /** 文本框行数 */
    type: {
        type: Number,
        default: 10,
    },
    /** index */
    index: {
        type: Number,
        default: 999,
    },
    /** 文本框占位符 */
    placeholder: {
        type: String,
        default: '每行一条，支持粘贴多行后自动拆分',
    },
    /** 是否去重，默认 true */
    dedupe: {
        type: Boolean,
        default: true,
    },
});

// 定义 emits
const emit = defineEmits(['update:visible', 'confirm', 'cancel']);

// 本地 rawText，用于绑定 textarea
const rawText = ref(props.initialText);

// 当 props.initialText 变化时，更新 rawText
watch(
    () => props.initialText,
    (newVal) => {
        rawText.value = newVal;
    }
);

// 计算属性，用于 v-model:visible 绑定 el-dialog
const visibleLocal = computed({
    get() {
        return props.visible;
    },
    set(val) {
        emit('update:visible', val);
    },
});

/** 解析 rawText 为数组：按行拆分，trim，去空，去重（如 dedupe=true） */
function parseLines() {
    const lines = rawText.value
        .split(/\r?\n/)
        .map((line) => line.trim())
        .filter((line) => line.length > 0);
    if (props.dedupe) {
        return Array.from(new Set(lines));
    }
    return lines;
}

/** 点击确定按钮 */
function handleConfirm() {
    const items = parseLines();
    emit('confirm', items, props.title, props.index);
    // 关闭对话框
    emit('update:visible', false);
    rawText.value = '';
}

/** 点击取消或对话框关闭 */
function handleCancel() {
    emit('update:visible', false);
    emit('cancel');
}
</script>

<style scoped>
/* 可根据项目风格调整 */
</style>