<route lang="json">
{ "style": { "navigationBarTitleText": "待办", "navigationBarBackgroundColor": "#f2f3f6" } }
</route>
<script setup lang="ts">
import { createTodo, deleteTodo, getTodos, updateTodo } from '../../../core/libs/requests'
import { useUserStore } from '../../../store'
import { storeToRefs } from 'pinia'
import dayjs from 'dayjs'
import DataForm from '@/components/data-form.vue'
import { requestToast } from '@designer-hub/app/src/core/utils/common'
import SectionHeading from '@/components/section-heading.vue'
import { Todo } from '@designer-hub/app/src/core/libs/models'
import BottomAppBar from '@/components/bottom-app-bar.vue'
import { DataFormSchema } from '../../../components/data-form'

const userStore = useUserStore()
const { userInfo } = storeToRefs(userStore)
const current = ref(Date.now())
const { data, run: setData } = useRequest(
  () =>
    getTodos({
      brokerId: String(userInfo.value.userId),
      executionTime: [
        dayjs(current.value).startOf('days').format('YYYY-MM-DD HH:mm:ss'),
        dayjs(current.value).endOf('days').format('YYYY-MM-DD HH:mm:ss'),
      ].join(','),
    }),
  {
    initialData: [],
  },
)
const addSheetVisible = ref(false)
const floatPanelHeight = ref()
const schema = ref<DataFormSchema>({
  executionTime: {
    type: 'TimePick',
    label: '时间：',
    labelWidth: 52,
    props: { defaultValue: dayjs().toDate().getTime() },
  },
  content: { type: 'Textarea', label: '备注：', labelWidth: 52, props: {} },
})
const formData = ref({
  // executionTime: '',
})
const handleAddTodo = () => {
  addSheetVisible.value = true
}
const handleSubmit = async () => {
  console.log('提交')
  await requestToast(
    () => createTodo({ ...formData.value, creator: String(userInfo.value.userId), status: 0 }),
    {
      successTitle: '添加成功',
      success: true,
    },
  )
  await setData()
  addSheetVisible.value = false
  formData.value = {}
}
const handleDelete = async (todo: Todo) => {
  console.log('删除')
  await requestToast(() => deleteTodo(todo.id), { success: true, successTitle: '删除成功' })
  await setData()
}
const handleClick = async ({ value }: { value: boolean }, todo: Todo) => {
  await updateTodo({ id: todo.id, status: value ? 1 : 0 })
  await setData()
}
const handleCalendarChange = async () => {
  await setData()
}
onMounted(async () => {
  await setData()
})
</script>
<template>
  <div class="flex-grow">
    <wd-calendar-view v-model="current" @change="handleCalendarChange" />
    <wd-floating-panel v-if="!addSheetVisible" :anchors="[260, 490]" :custom-class="'h-auto'">
      <div class="box-border p-4 flex flex-col gap-3.5">
        <div class="flex items-center gap-2.5">
          <div class="w-1 h-4 bg-[#2357e9] rounded-[20px]"></div>

          <SectionHeading :title="dayjs(current).format('MM月DD日')"></SectionHeading>
        </div>
        <div class="flex-1 flex flex-col gap-6 py-6 b-t-solid b-t-[#f6f6f6]">
          <template v-for="(it, i) in data" :key="i">
            <div class="flex items-center gap-3.5">
              <wd-checkbox
                :modelValue="it.status === 1"
                shape="square"
                @change="(e: any) => handleClick(e, it)"
              ></wd-checkbox>
              <div
                class="text-base font-normal font-['PingFang_SC'] leading-relaxed"
                :class="it.status === 1 ? 'text-black/30 ' : 'text-black/90'"
              >
                {{ it.content }}
              </div>
              <div class="flex-1"></div>

              <div
                class="text-center text-black/30 text-sm font-normal font-['PingFang_SC'] leading-relaxed"
              >
                {{ dayjs(it.executionTime).format('HH:mm') }}
              </div>
              <wd-icon
                custom-class="text-black/30"
                name="close"
                size="12"
                @click="handleDelete(it)"
              ></wd-icon>
            </div>
          </template>
        </div>
      </div>
    </wd-floating-panel>
    <BottomAppBar v-if="!addSheetVisible" fixed placeholder :border="false" custom-class="z-100">
      <div>
        <wd-button :round="false" block @click="handleAddTodo">添加待办</wd-button>
      </div>
    </BottomAppBar>
    <wd-action-sheet v-model="addSheetVisible" custom-class="z-10000000000000!">
      <div class="p-4">
        <DataForm :schema="schema" direction="horizontal" v-model="formData"></DataForm>
        <wd-button :round="false" block @click="handleSubmit">添加待办</wd-button>
      </div>
    </wd-action-sheet>
  </div>
</template>
