import { h } from 'vue'
import { ProjectStatusDesc, ProjectStatus } from '@/api'
import { router, RoutesName } from '@/router'
import { useUserStore, pinia, useProject } from '@/store'
import unProjectPic from '@/assets/images/un-project-pic.png'

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

const projectStore = useProject(pinia)

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',
  //   customRender: ({ index }) => index + 1
  // },
  {
    title: ui18n.t('project.projectImgLabel'),
    dataIndex: 'projectImg',
    key: 'projectImg',
    customRender({ record }) {
      const style = {
        width: '60px',
        height: '60px'
      }
      return h('img', { src: record.projectImg || unProjectPic, style })
    }
  },
  {
    title: ui18n.t('project.projectNameLabel'),
    dataIndex: 'projectName',
    key: 'projectName'
  },
  {
    title: ui18n.t('project.projectCreaterLabel'),
    dataIndex: 'projectCreater',
    key: 'projectCreater'
  },
  {
    title: ui18n.t('project.createTimeLabel'),
    dataIndex: 'createTime',
    key: 'createTime'
  },
  {
    title: ui18n.t('project.updateTimeLabel'),
    dataIndex: 'updateTime',
    key: 'updateTime'
  },
  {
    title: ui18n.t('project.projectStatusLabel'),
    dataIndex: 'projectStatus',
    key: 'projectStatus',
    customRender: ({ record }) => ProjectStatusComp(record)
  },
  {
    title: ui18n.t('sys.oper'),
    dataIndex: 'projectId',
    key: 'projectId',
    customRender({ record }) {
      const onManage = async () => {
        await projectStore.setRoles(record.projectId)
        router.push({
          name: RoutesName.projectScenes,
          params: { id: record.projectId }
        })
      }

      const renderManage = h('a', { onClick: onManage }, ui18n.t('sys.query'))

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