<template>
  <div class="notebar">
    <Card  :padding="0" shadow style="width: 220px;height: 100%">
        <p slot="title">
            <Icon type="md-add-circle" style="float: right;font-size: 20px;cursor: pointer;padding-top: 2px"/>
            <Dropdown @on-click="handleChange">
                <span style='cursor: pointer'>切換筆記本</span>
                <Icon type="ios-arrow-down"></Icon>

            <Dropdown-menu slot="list">
              <Dropdown-item v-for='item in notebooks' :key='item.id' :name="item.id">{{item.title}}</Dropdown-item>
            </Dropdown-menu>
            </Dropdown>
         </p>
        <CellGroup @on-click='cellChange'>
          <Cell
            v-for='item in notes'
            :key="item.id"
            :title="item.title||'標(biāo)題為空'"
            style="border-bottom: 1px solid #eee"
            :name="item.id"
            :to="`/notes?notebookId=${$route.query.notebookId}&noteId=${item.id}`"
          />
        </CellGroup>
        </Card>
  </div>
</template>

<script>
import Notebook from '../apis/Notebooks'
import Note from '../apis/Notes'
export default {
  data(){
    return {
      notebooks: null,
      notes: null,
      curNotebookId: '',
      curNoteId: ''
    }
  },
  created(){
    Notebook.getNotebooks().then(res=>{
      this.notebooks = res.data
      this.curNotebookId = this.$route.query.notebookId||res.data[0].id;
      Note.getNotes({notebookId: this.curNotebookId}).then(res=>{
        this.notes = res.data
        this.$emit('setCurNote',res.data[0])
        this.curNoteId = res.data[0]?res.data[0].id:'null'
        console.log(this.curNoteId)
        this.$router.replace({
          path: '/notes',
          query: {
            notebookId: this.curNotebookId,
            noteId: this.curNoteId
          }
        })
      })

    })
  },
  methods: {
    handleChange(id){
      this.curNotebookId = id
      Note.getNotes({notebookId:id}).then(res=>{
        this.notes = res.data || []
        this.curNoteId = res.data[0]?res.data[0].id:'null'
        this.$emit('setCurNote',res.data[0])
        // 如果筆記本中筆記為空
        this.$router.replace({
          path: '/notes',
          query: {
            notebookId: this.curNotebookId,
            noteId: this.curNoteId
          }
        })
      })
    },
    cellChange(id){
      let curNote = this.notes.find(item=>item.id===id)
      this.$emit('setCurNote',curNote)
    }

  }
  // beforeRouteUpdate(to,from,next){
  //   console.log(111)
  // }
}
</script>