import { NDataTable, NIcon, NButton } from 'naive-ui'
import { getTask } from '@/api/gantt'
import {
  HelpCircleOutline,
  CreateOutline,
  TrashBinOutline,
  AddCircleOutline,
  EnterOutline,
} from '@vicons/ionicons5'

export default defineComponent({
  setup() {
    const columns = [
      {
        title: '任务名称/事件名称',
        key: 'name',
        width: 220,
        render: row => {
          return (
            <div class="inline-flex items-center gap-2">
              <NIcon>
                <HelpCircleOutline />
              </NIcon>
              {row.name}
            </div>
          )
        },
      },
      {
        title: '开始时间',
        key: 'start',
      },
      {
        title: '结束时间',
        key: 'end',
      },
      {
        title: '类型',
        key: 'type',
      },
      {
        title: '图片',
        key: 'avatar',
        render(row) {
          if (row.avatar) {
            return <img src={row.avatar} width="50" alt="" />
          } else {
            return <span>-</span>
          }
        },
      },
      {
        title: '操作',
        key: 'action',
        render(row) {
          return (
            <div class="flex justify-end">
              {row.type === 'task' ? (
                <>
                  <NButton
                    type="primary"
                    size="small"
                    quaternary
                    onClick={() => handleEdit(row)}
                  >
                    <NIcon>
                      <EnterOutline />
                    </NIcon>
                  </NButton>
                  <NButton
                    type="primary"
                    size="small"
                    quaternary
                    onClick={() => handleEdit(row)}
                  >
                    <NIcon>
                      <CreateOutline />
                    </NIcon>
                  </NButton>
                </>
              ) : null}
              {/* {!row.avatar ? (
                <NButton
                  type="success"
                  size="small"
                  quaternary
                  onClick={() => handleEdit(row)}
                >
                  <NIcon>
                    <AddCircleOutline />
                  </NIcon>
                </NButton>
              ) : (
                <></>
              )} */}

              <NButton
                type="error"
                size="small"
                quaternary
                onClick={() => handleEdit(row)}
              >
                <NIcon>
                  <TrashBinOutline />
                </NIcon>
              </NButton>
            </div>
          )
        },
      },
    ]
    const tableData = ref([])
    onMounted(async () => {
      const res = await getTask()
      tableData.value = res
    })

    return () => (
      <NDataTable
        class="h-full"
        flex-height
        columns={columns}
        data={tableData.value}
        row-key={row => row.name}
      />
    )
  },
})