import { h } from 'vue'
import { ProjectStatusDesc, ProjectStatus } from '@/api'
import { router, RoutesName } from '@/router'

import type { SimpleProject } from '@/api'
import type { ColumnsType } from 'ant-design-vue/es/table'

export const ProjectStatusComp = (props: SimpleProject) => {
  const desc = ProjectStatusDesc[props.projectStatus]
  const style = {
    color: props.projectStatus === ProjectStatus.done ? '#04CE75' : '#323233',
    fontSize: '14px'
  }
  return h('span', { style }, desc)
}

export const projectColumns: ColumnsType<SimpleProject> = [
  {
    title: '序列',
    dataIndex: 'projectId',
    key: 'projectId'
  },
  {
    title: '封面',
    dataIndex: 'projectImg',
    key: 'projectImg',
    customRender({ record }) {
      const style = {
        width: '60px',
        height: '60px'
      }
      return h('img', { src: record.projectImg, style })
    }
  },
  {
    title: '项目名称',
    dataIndex: 'projectName',
    key: 'projectName'
  },
  {
    title: '创建人',
    dataIndex: 'projectCreater',
    key: 'projectCreater'
  },
  {
    title: '创建时间',
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: '更新时间',
    dataIndex: 'updateTime',
    key: 'updateTime'
  },
  {
    title: '项目状态',
    dataIndex: 'projectStatus',
    key: 'projectStatus',
    customRender: ({ record }) => ProjectStatusComp(record)
  },
  {
    title: '操作',
    dataIndex: 'projectId',
    key: 'projectId',
    customRender({ record }) {
      const onManage = () => {
        router.push({
          name: RoutesName.projectScenes,
          params: { id: record.projectId }
        })
      }

      const renderManage = h('a', { onClick: onManage }, '查看')

      return h(
        'div',
        {
          class: 'table-actions'
        },
        [renderManage]
      )
    }
  }
]
