<script setup lang="tsx">
import { PropType, ref } from 'vue'
import { Descriptions, DescriptionsSchema } from '@/components/Descriptions'
import { ElImage } from 'element-plus'

defineProps({
  currentRow: {
    type: Object as PropType<any>,
    default: () => undefined
  }
})
//
// const ishidden = computed(() => props.currentRow?.type === 1)
// const renderTag = (enable?: boolean) => {
//   return <ElTag type={!enable ? 'danger' : 'success'}>{enable ? '启用' : '禁用'}</ElTag>
// }

const menu = [
  {
    field: 'draft[0].id',
    label: 'ID'
  },
  {
    field: 'draft[0].status_chs',
    label: '审核状态'
  },
  {
    field: 'draft[0].mark',
    label: '备注',
    span: 24
  },
  {
    field: 'draft[0].deign_draft_images',
    label: '封面',
    span: 24,
    slots: {
      default: (data) => {
        if (data.draft.length > 0) {
          return (
            <>
              <ElImage
                src={data.draft[0].deign_draft_images}
                preview-src-list={[data.draft[0].deign_draft_images]}
                style="width: 100px;height: 100px"
              />
            </>
          )
        } else {
          return <></>
        }
      }
    }
  },
  {
    field: 'draft[0].deign_draft_images_chs',
    label: '详情图',
    span: 24,
    slots: {
      default: (data) => {
        if (data.draft.length > 0) {
          return (
            <>
              {data.draft[0].deign_draft_images_chs.map((item) => {
                return (
                  <>
                    <ElImage
                      src={item}
                      preview-src-list={[data.draft[0].deign_draft_images]}
                      style="width: 100px;height: 100px"
                    />
                  </>
                )
              })}
            </>
          )
        } else {
          return <></>
        }
      }
    }
  }
]

const detailSchema = ref<DescriptionsSchema[]>(menu)
</script>

<template>
  <Descriptions :schema="detailSchema" :data="currentRow || {}" />
</template>
