<script setup lang="ts">
import type {Ref} from "vue";

export interface DrawerColumn{
    key: string;
    value: string;
}
const data: any = defineModel('data');
const columns:Ref<DrawerColumn[],DrawerColumn[]> = defineModel('columns') as Ref<DrawerColumn[],DrawerColumn[]>;
const visible = defineModel('visible');
const title = defineModel('title');
const emit = defineEmits(['close']);

const handleClose = () => {
    emit('close');
};
function getContent(x:DrawerColumn):string
{
    if(x.key === "ApprovalStatus")
    {
        switch(data.value[x.key])
        {
            case 0:
                return "未批准";
            case 1:
                return "已批准";
            case 2:
                return "已拒绝";
        }
    }
    return data.value[x.key];
}
</script>

<template>
    <t-drawer v-model:visible="visible" :header="title" @close="handleClose"
              style="display:inline-flex;">
        <t-row>
            <t-col class="name">
                <t-row v-for="x of columns"><p class="nameContent">{{ x.value }}:</p></t-row>
            </t-col>
            <t-col class="value">
                <t-row v-for="x of columns"><p class="valueContent">{{ getContent(x) }}&nbsp;</p></t-row>
            </t-col>
        </t-row>
    </t-drawer>
</template>

<style scoped>
.name {
    flex: 3;
}

.value {
    flex: 7;
}
p{
    margin:6px 0;
}
.nameContent{
    width: 100%;
    padding-right: 10px;
    text-align: right;
}
.valueContent{
    width: 100%;
    padding-left: 10px;
}
</style>