<template>
    <div class="detail-popup">
        <popup ref="popupRef" :async="true" :width="width" @close="handleClose" :showFootBtn="false">
            <el-form ref="formRef" :model="formData" label-width="100px">
                <el-descriptions :column="column" :title="detailConfig?.title || '详情'" border>
                    <el-descriptions-item :label="item.label" label-align="left" align="left"
                        v-for="(item, index) in detailConfig?.config.filter(item => !item.column)" :key="index">
                        {{ formData[item.value] ??
            (item.value.includes('.') ?
                (formData[item.value.split('.')[0]])[item.value.split('.')[1]] :
                '')
                        }}
                    </el-descriptions-item>
                </el-descriptions>
                <el-descriptions :column="1" border
                    v-for="(item, index) in detailConfig?.config.filter(item => item.column == 1)" :key="index">
                    <el-descriptions-item :label="item.label" label-align="left" align="left"
                        v-if="Array.isArray(formData[item.value])">
                        <el-link :href="items.uri" type="primary" target="_blank" v-for="items in formData[item.value]"
                            class="mr-5">
                            {{ items.name }}
                        </el-link>
                    </el-descriptions-item>
                    <el-descriptions-item :label="item.label" label-align="left" align="left" v-else>
                        {{ formData[item.value] }}
                    </el-descriptions-item>
                </el-descriptions>
            </el-form>
            <div v-if="detailConfig?.table">
                <el-card class="mt-5" v-if="!Array.isArray(detailConfig?.table)">
                    <template #header>
                        {{ detailConfig.table.title }}列表
                    </template>
                    <el-table :data="tableLists">
                        <el-table-column :label="item.label" :prop="item.value" show-overflow-tooltip
                            v-for="(item, index) in detailConfig.table.tableConfig" :key="index" />
                    </el-table>
                </el-card>
                <el-card class="mt-5" v-else>
                    <!-- <template #header>
                        {{ detailConfig.table.title }}列表
                    </template>
                    <el-table :data="tableLists">
                        <el-table-column :label="item.label" :prop="item.value" show-overflow-tooltip
                            v-for="(item, index) in detailConfig.table.tableConfig" :key="index" />
                    </el-table> -->
                </el-card>
            </div>



        </popup>
    </div>
</template>

<script lang="ts" setup name="customdetail">

import Popup from '@/components/popup/index.vue'
import { defineProps, ref, defineExpose } from "vue"
import { cloneDeep } from 'lodash-es'
const props = defineProps({
    detailConfig: {
        type: Object,
        require: true
    },
    column: {
        type: Number,
        default: 3
    },
    width: {
        type: String,
        default: '80vw'

    }

})
const emit = defineEmits(['success', 'close'])
const popupRef = shallowRef<InstanceType<typeof Popup>>()
const tableLists = ref('')

// 表单数据
const formData = ref({})



// 获取详情
const setFormData = async (data: Record<any, any>) => {
    formData.value = data
    if (props.detailConfig?.table) {
        let query = cloneDeep(props.detailConfig.table.query)
        if (typeof (props.detailConfig.table.query) === 'object') {
            for (let key in query) {
                query[key] ||= data.id
            }
        } else {
            query = { [query]: data.id }
        }


        tableLists.value = (formData.value)[String(props.detailConfig.table.fetchFun)] ?? (await props.detailConfig.table.fetchFun({ ...query })).lists
    }

}



//打开弹窗
const open = () => {
    popupRef.value?.open()
}

// 关闭回调
const handleClose = () => {
    emit('close')
    console.log("gianni1")
}





defineExpose({
    open,
    setFormData,
})
</script>

<style lang="scss" scoped></style>
