import { RouterView, useRouter } from 'vue-router'
import {
  NDatePicker,
  NButton,
  NFloatButton,
  NIcon,
  NDrawer,
  NDrawerContent,
  NTabs,
  NTabPane,
} 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'
export default defineComponent({
  setup() {
    const router = useRouter()
    const show = ref(false)
    const range = ref()

    const { showNewTask } = useTask()

    const addNewTask = () => {
      showNewTask.value = true
    }

    const paneClass = `border-1 h-full border-l-0 border-[var(--n-tab-border-color)] !p-2`
    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 - 300}
          placement="left"
        >
          <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"
              >
                <NTabPane class={paneClass} name="任务列表" tab="任务列表">
                  <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="事件列表">
                  <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">
                      <EventList />
                    </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>
    )
  },
})
