import { defineComponent } from 'vue'
import useNotepadStore from './useNotepadStore'

export default defineComponent(() => {
  const store = useNotepadStore()

  return () => (
    <div class="w-full h-full bg-[#fff] flex ">
      <div class={"w-1/2 h-full flex items-center justify-center flex-col gap-y-1 relative"}>
        <img class={'w-[52px] h-[52px]'} src={'/tab/icons/note_pad_icon.png'}></img>
        <span>记事本</span>
        <img src="/tab/icons/notepad/note_pad_line.png" class={"absolute w-[25px] right-2 top-1/2 -translate-y-1/2"} alt="" />
      </div>
      <div class="w-0 flex-1 h-full bg-[#fff] flex flex-col px-4 pb-0 pt-5 gap-y-2">
        <div>
          <span class={"text-[14px] text-[#333] pb-1 border-b-[1px] border-b-[#e5daca]"}>欢迎使用记事本</span>

        </div>
        {
          store.state.list.filter((_, idx) => idx < 4).map(item => (
            <div class={"w-full pb-[1px] border-b-[1px] border-b-[#e5daca]"}>
              <div class={"w-[130px] text-[12px] text-[#656565] text-ellipsis overflow-hidden whitespace-nowrap"}>{item.title || '新建笔记'}</div>
            </div>
          ))
        }
      </div>
    </div>
  )
})