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

const props = 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: 'meta.title',
    label: '接口名称'
  },
  {
    field: 'apiUrl',
    label: '接口地址'
  },
  {
    field: 'methods',
    label: '请求方式'
  },
  {
    field: 'unique_auth',
    label: '权限标识'
  },
  {
    field: 'status',
    label: '状态',
    slots: {
      default: (data) => {
        return renderTag(data.status)
      }
    }
  }
]
const api = [
  {
    field: 'type',
    label: '类型',
    span: 24,
    slots: {
      default: (data) => {
        return <>{data.type === 1 ? '菜单' : '接口'}</>
      }
    }
  },
  {
    field: 'meta.title',
    label: '菜单名称'
  },
  {
    field: 'unique_auth',
    label: '权限标识'
  },
  {
    field: 'meta.icon',
    label: '图标',
    slots: {
      default: (data) => {
        const icon = data.meta.icon
        if (icon) {
          return (
            <>
              <Icon icon={icon} />
            </>
          )
        } else {
          return null
        }
      }
    }
  },
  {
    field: 'path',
    label: '路径'
  },
  {
    field: 'meta.activeMenu',
    label: '高亮菜单'
  },
  {
    field: 'permissionList',
    label: '按钮权限',
    span: 24,
    slots: {
      default: (data: any) => (
        <>
          {data?.permissionList?.map((v) => {
            return (
              <ElTag class="mr-1" key={v.value}>
                {v.label}
              </ElTag>
            )
          })}
        </>
      )
    }
  },
  {
    field: 'status',
    label: '菜单状态',
    slots: {
      default: (data) => {
        return renderTag(data.status)
      }
    }
  },
  {
    field: 'meta.hidden',
    label: '是否隐藏',
    slots: {
      default: (data) => {
        // console.log(data, 'data')
        return renderTag(data.meta.hidden)
      }
    }
  },
  {
    field: 'meta.noTagsView',
    label: '是否隐藏标签页',
    slots: {
      default: (data) => {
        return renderTag(data.meta.noTagsView)
      }
    }
  },
  {
    field: 'meta.alwaysShow',
    label: '是否一直显示',
    slots: {
      default: (data) => {
        return renderTag(data.meta.alwaysShow)
      }
    }
  },
  {
    field: 'meta.noCache',
    label: '是否清除缓存',
    slots: {
      default: (data) => {
        return renderTag(data.meta.noCache)
      }
    }
  },
  {
    field: 'meta.breadcrumb',
    label: '是否显示面包屑',
    slots: {
      default: (data) => {
        return renderTag(data.meta.breadcrumb)
      }
    }
  },
  {
    field: 'meta.affix',
    label: '是否固定标签页',
    slots: {
      default: (data) => {
        return renderTag(data.meta.affix)
      }
    }
  },

  {
    field: 'meta.canTo',
    label: '是否可跳转',
    slots: {
      default: (data) => {
        return renderTag(data.meta.canTo)
      }
    }
  }
]

const detailSchema = ref<DescriptionsSchema[]>(ishidden.value ? api : menu)
</script>

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