<template>
    <el-descriptions class="noob-descriptions" :title="title" :column="colnums[state.size.size]" :size="state.size.size"
        :border="border">
        <el-descriptions-item v-if="isObi()" v-for="(val, key, i) in data" :label="key">
            {{ val }}
        </el-descriptions-item>
        <el-descriptions-item v-else-if="isArr()" v-for="item in data" :label="item.key">
            {{ item.value }}
        </el-descriptions-item>
        <el-descriptions-item v-else :label="t('base.value')">{{ data }}</el-descriptions-item>
    </el-descriptions>
</template>

<script lang="ts" setup>
import { useStore } from "vuex";
import { onMounted } from "vue";
import { useI18n } from "vue3-i18n";
const { t } = useI18n();

const { state, commit, dispatch } = useStore();

const prop = defineProps({
    data: {
        type: Object,
        default: 0,
    },
    title: {
        type: String,
        default: null,
    },
    border: {
        type: Boolean,
        default: true
    }
});

const colnums = {
    'normal': 4,
    'small': 5,
    'large': 3
}

const isObi = () => {
    return typeof prop.data === 'object';
}

const isArr = () => {
    return Array.isArray(prop.data);
}

onMounted(() => { });
</script>
<style lang="scss" scoped>
//@import url(); 引入公共css类
.noob-descriptions {
    --el-descriptions-item-bordered-label-background: v-bind('state.style.tableBg') !important;
}
</style>