import { useRouter } from 'vue-router'
import {
  NDatePicker,
  NRadioButton,
  NRadioGroup,
  NButton,
  NSelect,
} from 'naive-ui'
import GanttCom from '../Gantt'
import {getDDList}from '@/api/Gantt/gantt'
import { onBeforeMount } from 'vue'

export default defineComponent({
  setup() {
    const range = ref([new Date('2000-01-01').getTime(), Date.now()])
    const value = ref('year')
    const types = ref([])

    const router = useRouter()
    const editEvent = () => {
      console.log(router)
      router.push('/gantt/mainEdit')
    }

    onBeforeMount(async ()=>{
      await getDDOptions()
    })

    const ddOptions = ref([])
    async function getDDOptions (){
      const {code,data} = await getDDList()
      if(code === 200) {
        ddOptions.value = data.list
        types.value = ddOptions.value.map(item=>item.id)
      }
    } 


    const ganttRef = ref(null)
    function searchGanttData(){
      // console.log(ganttRef);
      renderMainTask(document.querySelector('#tableContainer'),{
        ids: types.value,
        startTime:  new Date(range.value[0]).toISOString(),
        endTime: new Date(range.value[1]).toISOString()
      })
    }
    


    return () => (
      <>
        <div class="flex gap-2">
          <NDatePicker
            v-model:value={range.value}
            type="daterange"
            clearable
            
          />
          {/* <NRadioGroup v-model:value={value.value} name="radiobuttongroup">
            <NRadioButton value="hour" label="日" />
            <NRadioButton value="day" label="月" />
          </NRadioGroup> */}
          <NSelect
            v-model:value={types.value}
            multiple
            options={ddOptions.value}
            label-field='name'
            clearable
            value-field='id'
          ></NSelect>
          {/* <NButton class="ml-auto" type="primary" onClick={editEvent}>
            编辑事件
          </NButton> */}
          <NButton class="ml-auto" type="primary" onClick={searchGanttData}>
            搜索
          </NButton>
        </div>
        <GanttCom ref={ganttRef} scale={value.value} dateRange={range.value} types={types.value}/>
      </>
    )
  },
})