import { RouterView } from 'vue-router'
import {
  NDatePicker,
  NButton,
  NFloatButton,
  NIcon,
  NDrawer,
  NDrawerContent,
  NTabs,
  NTabPane,
  NSelect,
} from 'naive-ui'
import { ArrowForward } from '@vicons/ionicons5'
import HeaderCom from '../Content/components/Header/index.vue'
import TaskList from './components/TaskList'
import EventList from './components/EventList'
import NewTask from './components/TaskList/components/NewTask'

import useTask from './components/TaskList/components/NewTask/hooks'
import { useEvent } from './components/EventList/hooks'
import { getSimpList, getSimpTreeList } from '@/api/Gantt'
import { onBeforeMount, nextTick } from 'vue'
export default defineComponent({
  setup() {
    const show = ref(false)

    const { showNewTask } = useTask()

    const addNewTask = () => {
      showNewTask.value = true
    }
    async function getSimpListData() {
      const res = await getSimpList()
      ddList.value = res.data.list
      targetId.value = res.data.list[0].id
    }

    // const ddList = Array.from({ length: 8 }, (_, i) => ({
    //   label: `DD-${i + 1}`,
    //   value: `DD-${i + 1}`,
    // }))
    const ddList = ref([])

    const paneClass = `border-1 h-full border-l-0 border-[var(--n-tab-border-color)] !p-2`

    const {
      showMainEvent,
      mainEventData,
      targetId,
      range,
      searchTreeList,
      tableData,
    } = useEvent()
    const addNewMainEvent = async () => {
      showMainEvent.value = true
      // const res =  await addNewMainEvent({ })
      mainEventData.value = {}
    }

    onBeforeMount(() => {
      nextTick(async () => {
        await getSimpListData()
        await searchTreeList()
      })
    })

    return () => (
      <div class="flex flex-col bg-[#1c202c] w-h-full">
        <div class="relative h-[60px]">
          <HeaderCom />
        </div>
        <div class="z-30 flex flex-1 flex-col gap-4 p-5">
          <RouterView />
        </div>
        <NFloatButton
          class="z-40"
          left={-10}
          bottom={document.body.clientHeight / 2}
          shape="square"
          onClick={() => {
            show.value = true
          }}
        >
          <NIcon>
            <ArrowForward />
          </NIcon>
        </NFloatButton>
        <NDrawer
          class="h-[100vh] bg-[#1c202cee]"
          v-model:show={show.value}
          width={document.body.clientWidth - 200}
          placement="left"
          display-directive={'show'}
        >
          <NDrawerContent title="事件管理" closable>
            <div class="flex h-full flex-col gap-2">
              {/* <NTabs
                class="h-full"
                pane-wrapper-class="h-full"
                type="card"
                animated
                placement="left"
                defaultValue={'事件列表'}
              >
                <NTabPane
                  class={paneClass}
                  name="任务列表"
                  tab="任务列表"
                  display-directive={'show'}
                >
                  <div class="flex h-full flex-col gap-2">
                    <div class="flex justify-end gap-2">
                      <NDatePicker
                        v-model:value={range.value}
                        type="daterange"
                        clearable
                      />
                      <NButton type="primary" onClick={addNewTask}>
                        添加任务
                      </NButton>
                    </div>
                    <div class="flex-1">
                      <TaskList />
                    </div>
                  </div>
                </NTabPane>
                <NTabPane
                  class={paneClass}
                  name="事件列表"
                  tab="事件列表"
                  display-directive={'show'}
                > */}
              <div class="flex h-full flex-col gap-2">
                <div class="flex justify-end gap-2 ">
                  <NSelect
                    class="w-[200px]"
                    v-model:value={targetId.value}
                    options={ddList.value}
                    label-field="name"
                    value-field="id"
                  ></NSelect>
                  <NDatePicker
                    v-model:value={range.value}
                    type="daterange"
                    clearable
                  />
                  <NButton type="primary" onClick={searchTreeList}>
                    搜索
                  </NButton>
                  <NButton type="primary" onClick={addNewMainEvent}>
                    添加事件
                  </NButton>
                </div>
                <div class="flex-1">
                  <EventList dd={targetId.value} tableData={tableData.value} />
                </div>
              </div>
              {/* </NTabPane>
              </NTabs> */}
              {/* <div class="flex justify-end gap-2 ">
                <NDatePicker
                  v-model:value={range.value}
                  type="daterange"
                  clearable
                />
                
              </div>
              <div class="flex-1">
                <TaskList />
              </div> */}
            </div>
          </NDrawerContent>
        </NDrawer>

        <NewTask v-model:show={showNewTask.value} />
      </div>
    )
  },
})