<template>
    <div id="uploadParamater">
        <info-dialog
            :options="{
                title: $t('upload'),
                width: '60%',
                isShowDialog: isShowDialog,
                isShowBtn: true
            }"
            @closeDialog="closeDialog"
            @confirmDialog="confirmDialog"
        >
            <el-input
                v-model="upLoadVal"
                type="textarea"
                :autosize="{ minRows: 20, maxRows: 20}"
                :placeholder="$t('uploadParamater')"
            />
            <p :style="{margin: '20px 0'}">
                {{ $t('uploadParamater') }}
            </p>
        </info-dialog>
    </div>
</template>
<script lang="ts">
import { defineComponent, reactive, ref } from 'vue'
import infoDialog from '../../infoDialog/index.vue'
import { UploadDataInterface } from './index'
export default defineComponent({
    components: {
        infoDialog
    },
    props: {
        isSplit: {
            type: Boolean,
            default: false
        }
    },
    emit: ['confirmDialog'],
    setup (props, ctx) {
        const { isSplit } = props
        let isShowDialog = ref<boolean>(false)
        const upLoadVal = ref<string>('')
        let upLoadData = reactive<UploadDataInterface>({ list: [] })
        const closeDialog = (): void => {
            isShowDialog.value = false
            upLoadVal.value = ''
        }
        // eslint-disable-next-line
        const showDialog = (): void => {
            isShowDialog.value = true
        }
        const submitUpload = (): void | boolean => {
            upLoadData.list = []
            if (upLoadVal.value === '') {
                return false
            }
            let handleUpLoadData = upLoadVal.value.split('\n')
            for (let item of handleUpLoadData) {
                let temp: string[] = []
                if (isSplit) {
                    temp.push(item)
                } else {
                    for(let val of item.split(',')) {
                        if (val.trim()) {
                            temp.push(val.trim())
                        } else if (val === '' ) {
                            temp.push('')
                        }
                    }
                }
                upLoadData.list.push(temp)
            }
        }
        const confirmDialog = (): void => {
            submitUpload()
            ctx.emit('confirmDialog', upLoadData.list)
            isShowDialog.value = false
            upLoadVal.value = ''

        }
        return {
            isShowDialog,
            upLoadVal,
            closeDialog,
            confirmDialog
        }
    }
})
</script>
<style lang="scss" scoped>
</style>
