{% extends 'base.html' %}
{% block title_content %} notes {% endblock title_content %}

{% block body_content %}

{% for note in notes_dict %} 
    <el-card class="box-card note">
        <template #header>
        <div class="card-header">
            <span> 用户： {{ note.user.username }} </span>
            <div>
              <el-button class="button" @click="open( {{note.id}} )"> edit </el-button>
              <el-button class="button" type="danger" @click="del( {{note.id}} )"> delete </el-button>
            </div
        </div>
        </template>
        <div class="text item"> {{ note.note }} </div>
    </el-card>
{% endfor %}


<el-card class="note el-card_1" shadow="hover" @click="add"> + </el-card>
<el-button  class="button" @click="change_message"> click </el-button>

{% endblock body_content %}


{% block script_import %}
<script>
let App = {
  setup() {
    const hello_message = Vue.ref("good")
    // 获取 cookies 中的数据
    const cookies = document.cookie.split(';');
    const csrf_token = cookies.find(c => c.includes('csrftoken=')).split('=')[1];
    const open = (id) => {
        ElementPlus.ElMessageBox.prompt('Please edit your note ', 'Tip', {
        confirmButtonText: 'OK',
      })
        .then(({ value }) => {
          $.ajax({
            url: '/note/change_note/',
            type: 'POST',
            data: { 
              change_note: value,
              note_id: id,
              csrfmiddlewaretoken: csrf_token
            }, 
            success: function(response) {
              // handle the response
              ElementPlus.ElMessage({
                type: 'success',
                message: '更改成功',
              })
              location.reload();
            },
            error: function(response) {
              if (response.status === 403) {
                ElementPlus.ElMessage({
                  type: 'info',
                  message: '该角色没有修改权限'
                })
              }
              else {
                ElementPlus.ElMessage({
                  type: 'info',
                  message: '修改失败'
                })
              }
            }
          });
        })
        .catch((e) => {
          console.log(e)
          ElementPlus.ElMessage({
            type: 'info',
            message: 'Input canceled',
          })
        })
    }

    const add = () => {
      ElementPlus.ElMessageBox.prompt('add your note ', 'Tip', {
        confirmButtonText: 'OK',
      })
        .then(({ value }) => {
          $.ajax({
            url: '/note/add_note/',
            type: 'POST',
            data: { 
              note: value,
              csrfmiddlewaretoken: csrf_token
            }, 
            success: function(response) {
              // handle the response
              ElementPlus.ElMessage({
                type: 'success',
                message: '添加成功',
              })
              location.reload();
            },
            error: function(response) {
              if (response.status === 403) {
                ElementPlus.ElMessage({
                  type: 'info',
                  message: '该角色没有添加权限'
                })
              }
              else {
                ElementPlus.ElMessage({
                  type: 'info',
                  message: '添加失败'
                })
              }
            }
          });
        })
        .catch((e) => {
          console.log(e)
          ElementPlus.ElMessage({
            type: 'info',
            message: 'Input canceled',
          })
        })
    }

    const del = (id) => {
      ElementPlus.ElMessageBox.confirm(
        'Are you sure to delete the note?',
        'Warning',
        {
          confirmButtonText: 'OK',
          cancelButtonText: 'Cancel',
          type: 'warning',
        }
      )
        .then(() => {
          $.ajax({
            url: '/note/del_note/',
            type: 'POST',
            data: {
              note_id: id,
              csrfmiddlewaretoken: csrf_token
            },
            success: function(response) {
              ElementPlus.ElMessage({
                type: 'success',
                message: '删除成功'
              })
              location.reload()
            },
            error: function(response) {
              console.log(response)
              if (response.status === 403) {
                ElementPlus.ElMessage({
                  type: 'info',
                  message: '该角色没有删除权限'
                })
              }
              else {
                ElementPlus.ElMessage({
                  type: 'info',
                  message: '删除失败'
                })
              }
            }
          })
        })
        .catch(() => {
          ElementPlus.ElMessage({
            type: 'info',
            message: 'Delete canceled',
          })
        })
    }

    const logout = () => {
      $.ajax({
        url: '/note/logout/',
          type: 'POST',
          data: {
            csrfmiddlewaretoken: csrf_token
          },
          success: (response) => {
            location.reload()
          },
          error: (response) => {
            console.log(response)
          }
        })
    }

    const change_message = () => {
      hello_message.value = "hello world"
    }

    return {
        hello_message,
        open,
        add,
        del,
        logout,
        change_message
    }
  }
}
</script>
{% endblock script_import %}