<template>
    <div class="list-card">
        <template v-for="(desc, i) of descs"
            :key="i">
            <el-descriptions :direction="attr.direction"
                :column="attr.column || 1"
                :border="attr.border"
                :size="attr.size"
                :title="config.title">
                <template #extra>
                    <slot name="extra" />
                </template>
                <template v-if="desc[0].key === 'slotTitle'" #title>
                    <el-divider
                        content-position="left"
                    >
                        {{ $t(desc[0].label) }}
                    </el-divider>
                </template>
                <template v-for="(item, index) of desc"
                :key="index">
                    <!-- 内容插槽 -->
                    <el-descriptions-item v-if="item.isSlot"
                        :label="$t(item.label)"
                        :span="item.span">
                        <slot :name="item.key" />
                    </el-descriptions-item>
                    <!-- 普通项 -->
                    <el-descriptions-item v-else-if="item.key !== 'slotTitle'"
                        :label="$t(item.label)"
                        :span="item.span"
                        :class-name="itemAttr.className"
                        :label-class-name="itemAttr.labelClassName"
                    >
                        <el-tooltip v-if="item.isTip"
                            effect="dark"
                            placement="top-start"
                            :content="globalFormValue(data, item.key, attr.split)._get()"
                        >
                            <div class="tip-text">
                                {{
                                    globalFormValue(
                                        data,
                                        item.key,
                                        attr.split
                                    )._get()
                                }}
                            </div>
                        </el-tooltip>
                        <span v-else>{{
                                globalFormValue(data, item.key, attr.split)._get()
                        }}</span>
                        <!-- 操作按钮 -->
                        <el-button v-if="
                            item.operation &&
                            (item.operation.show === undefined
                                ? true
                                : item.operation.show())"
                            class="operation"
                            plain
                            size="small"
                            :type="item.operation.type"
                            @click="item.operation?.method">{{ $t(item.operation.text) }}
                        </el-button>
                    </el-descriptions-item>
                </template>
            </el-descriptions>
        </template>
    </div>
</template>
<script lang="ts">
interface operationInterface {
    show?: Function
    type: string
    text: string
    method?: Function
}
interface Descs {
    label: string
    key: string
    span?: number
    isSlot?: boolean
    isTip?: boolean
    contentStyle?: object
    operation?: operationInterface
}
import { reactive, defineComponent } from 'vue'
import { globalFormValue } from '../../script/util'
export default defineComponent({
    name: 'ListCard',
    props: {
        data: {
            type: Object,
            default: () => { }
        },
        config: {
            type: Object,
            default: () => { }
        },
        attr: {
            type: Object,
            default: () => {
                return {
                    direction: 'horizontal'
                }
            }
        },
        itemAttr: {
            type: Object,
            default: () => {
                return {}
            }
        }
    },
    setup (props) {
        const getDesc = () => {
            let arr: { key: string; label: string }[] = []
            for (let key in props.config.map) {
                let label: string = props.config.map[key]
                if (props.config.i18n) {
                    label = (window as any).$t(label)
                }
                if (key.startsWith('divider')) {
                    arr.length > 0 && descs.push(arr)
                    arr = []
                    arr.push({
                        key: 'slotTitle',
                        label
                    })
                } else {
                    let obj: Descs = {
                        key,
                        label,
                        isTip:
                            props.config.tips && props.config.tips.includes(key)
                    }
                    if (props.itemAttr) {
                        if (props.itemAttr.contentStyle?.[key]) {
                            // 添加item contentStyle
                            obj.contentStyle = props.itemAttr.contentStyle[key]
                        }
                        if (props.itemAttr.operation?.[key]) {
                            // 添加item 操作
                            obj.operation = props.itemAttr.operation[key]
                        }
                        if (props.itemAttr.span?.[key]) {
                            // 添加item 操作
                            obj.span = props.itemAttr.span[key]
                        }
                    }
                    obj.isSlot = props.config.slots?.includes(key)
                    arr.push(obj)
                }
            }
            descs.push(arr)
        }
        const descs: Descs[][] = reactive([])
        getDesc()
        return {
            descs,
            globalFormValue
        }
    }
})
</script>
<style lang="scss" scoped>
:deep(.el-descriptions) {
    .el-descriptions__header {
        margin-bottom: 8px;

        .el-descriptions__title {
            width: 100%;
            font-weight: 500;
        }
    }

    .el-descriptions__body {
        padding-left: 20px;
    }

    .el-descriptions-item__content {
        flex: 1;
        overflow: hidden;
    }

    .tip-text {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}

.operation {
    margin-left: 20px;
}
</style>
