<template>
    <info-dialog
        :options="options"
        @closeDialog="closeDialog"
    >
        <div :style="{color: '#ff0000'}">
            <div
                v-for="(item, name) in errorList"
                :key="name"
                :style="{ padding: '20px 20px'}"
            >
                <div>{{ name }}</div>
                <div
                    v-for="(val, i) in item"
                    :key="i"
                    :style="{padding: '10px 10px'}"
                >
                    {{ val }}
                </div>
            </div>
        </div>
    </info-dialog>
</template>
<script lang="ts" setup>
import { reactive, computed } from 'vue'
import infoDialog from '../../../components/infoDialog/index.vue'

const props = defineProps({
    errorData: {
        type: Object,
        default: () => {
        }
    }
})
// dialog
const options = reactive({
    title: 'errorInfo',
    isShowDialog: false,
    width: '60%',
    clickModalClose: false,
    isShowBtn: false,
    dialogOperates: [
        {
            label: () => $t('close'),
            type: 'primary',
            plain: true,
            method: () => {
                closeDialog()
            }
        }
    ]
})

const errorList = computed(() => {
    return props.errorData.errorList
})
const showDialog = () => {
    options.isShowDialog = true
}
const closeDialog = () => {
    options.isShowDialog = false
}
defineExpose({
    showDialog
})
</script>
