import { NForm, NFormItem, NInput, NDataTable, NButton } from 'naive-ui'
import ModalCom from '@/components/Modal/index.vue'
import { getMainGantt } from '@/api/gantt'
import useTask from './hooks'
export default defineComponent({
  // props: {
  //   show: {
  //     type: Boolean,
  //     default: false,
  //   },
  // },
  setup() {
    const task = ref({
      name: '',
      description: '',
    })
    const columns = [
      { type: 'selection' },
      {
        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>
          }
        },
      },
    ]
    const tableData = ref([])
    onMounted(async () => {
      const res = await getMainGantt()
      tableData.value = res
    })
    const { showNewTask } = useTask()

    const close = () => {
      showNewTask.value = false
    }

    return () => (
      <ModalCom v-model:show={showNewTask.value} title="新增任务">
        <NForm
          class="w-[900px]"
          model={task}
          label-placement="left"
          label-width="auto"
        >
          <NFormItem label="任务名称" path="name">
            <NInput v-model:value={task.value.name} />
          </NFormItem>
          <NFormItem label="任务描述" path="description">
            <NInput v-model:value={task.value.description} />
          </NFormItem>
          <NFormItem label="事件" path="event">
            <NDataTable
              class="h-[400px]"
              flex-height
              columns={columns}
              data={tableData.value}
              row-key={row => row.name}
            />
          </NFormItem>
        </NForm>
        <div class="flex justify-end gap-2">
          <NButton onClick={close}>取消</NButton>
          <NButton type="primary">确认</NButton>
        </div>
      </ModalCom>
    )
  },
})
