<template>
    <el-drawer class="mixed-detail-drawer" :model-value="modelValue" @close="handleClose" direction="rtl" size="55%"
        :close-on-click-modal="false" :destroy-on-close="true" :with-header="false" v-bind="$attrs">
        <div class="drawer-header">
            <div class="title">{{ title }}</div>
            <el-button link icon="Close" @click="handleClose" />
        </div>
        <div class="drawer-body" v-loading="loading">
            <template v-if="detail">
                <el-descriptions :column="2" border>
                    <el-descriptions-item v-for="item in items" :key="item.key" :label="item.label">
                        <span v-if="item.key === 'mode'">
                            {{ mixedReformMethodOptions.find(item => item.value === detail?.mode)?.label || formatValue(detail[item.key]) }}
                        </span>
                        <span v-else-if="item.key === 'partnerNature'">
                            {{ cooperationPartnerNatureOptions.find(item => item.value === detail?.partnerNature)?.label || formatValue(detail[item.key]) }}
                        </span>
                        <span v-else-if="item.key === 'type'">
                            {{ mixedReformTypeOptions.find(item => item.value === detail?.type)?.label || formatValue(detail[item.key]) }}
                        </span>
                        <span v-else>{{ formatValue(detail[item.key]) }}</span>
                    </el-descriptions-item>
                </el-descriptions>
            </template>
            <el-empty v-else :image-size="120" :description="emptyText" />
        </div>
    </el-drawer>
</template>

<script setup lang="ts">
import { toRef } from 'vue';
import {
    cooperationPartnerNatureOptions,
    industryChainCategoryOptions,
    mixedCompanyCategoryOptions,
    mixedCompanyFieldOptions,
    mixedCompanyIndustryOptions,
    mixedReformMethodOptions,
    mixedReformTypeOptions
} from '/@/hooks/enums'
defineOptions({
    inheritAttrs: false,
});
type DetailItem = {
    key: string;
    label: string;
};

const props = withDefaults(
    defineProps<{
        modelValue: boolean;
        title?: string;
        detail?: Record<string, any> | null;
        items: DetailItem[];
        loading?: boolean;
        emptyText?: string;
    }>(),
    {
        title: '详情',
        loading: false,
        emptyText: '暂无数据',
    }
);

const emit = defineEmits<{
    (e: 'update:modelValue', value: boolean): void;
}>();

const handleClose = () => {
    emit('update:modelValue', false);
};

const formatValue = (value: unknown) => {
    if (value === null || value === undefined || value === '') return '--';
    return value;
};

const modelValue = toRef(props, 'modelValue');
const title = toRef(props, 'title');
const detail = toRef(props, 'detail');
const items = toRef(props, 'items');
const loading = toRef(props, 'loading');
const emptyText = toRef(props, 'emptyText');
</script>

<style scoped>
.mixed-detail-drawer {
    --el-drawer-border-radius: 0;
}

.drawer-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-bottom: 1px solid var(--el-border-color);
    background-color: #fff;
}

.drawer-header .title {
    font-size: 18px;
    font-weight: 600;
    color: var(--el-text-color-primary);
}

.drawer-body {
    padding: 16px;
    height: calc(100% - 52px);
    overflow: auto;
    background-color: #f9fafc;
}

:deep(.el-descriptions__body) {
    background-color: #fff;
}
</style>
