<template>
  <div>
    <template v-if="data">
      <article class="message is-findata" v-if="data.length===0">
        <div class="message-body py-2 fs-16">
          Chưa có <b>ghi chú</b> nào được lưu
        </div>
      </article>
      <template v-else>
        <article class="media mt-0 mb-0" v-for="(v,i) in data">
          <figure class="media-left">
            <Avatarbox v-bind="{ 
              text: v.user__fullname[0].toUpperCase(), 
              size: 'two', 
              type: 'primary' 
            }" />
          </figure>
          <div class="media-content">
            <div>
              <p class="fs-15">
                {{ v.detail }}
              </p>
              <p class="mt-1 fs-14 has-text-grey">
                <span class="icon-text">
                  <span>{{v.user__fullname}}</span>
                  <span class="ml-3">{{ $dayjs(v['create_time']).fromNow(true) }}</span>
                  <template v-if="login.id===v.user">
                    <a class="ml-3" @click="edit(v)">
                      <SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 20}"></SvgIcon>
                    </a>
                    <a class="ml-3" @click="askConfirm(v, i)">
                      <SvgIcon v-bind="{name: 'bin.svg', type: 'gray', size: 20}"></SvgIcon>
                    </a>
                  </template>
                </span>
              </p>
            </div>
          </div>
        </article>
      </template>
    </template>
    <div v-if="$getEditRights()" class="field is-grouped mt-3">
      <div class="control is-expanded">
        <textarea class="textarea" rows="2" placeholder="Viết ghi chú tại đây" v-model="detail"></textarea>
      </div>
      <div class="control">
        <button class="button is-primary has-text-white" @click="save()">Lưu</button>
      </div>
    </div>
    <Modal @close="showmodal=undefined" v-bind="showmodal" v-if="showmodal" @confirm="confirm()"></Modal>
  </div>
</template>
<script>
export default {
  props: ['row', 'api', 'pagename'],
  data() {
    return {
      data: undefined,
      detail: undefined,
      vbind2: {image: undefined, text: 'ABC', size: 'two', type: 'findata'},
      current: undefined,
      showmodal: undefined,
      obj: undefined
    }
  },
  async created() {
    if(!this.row) return 
    this.data = await this.$getdata(this.api, {ref: this.row.id})
  },
  computed: {
    login: {
      get: function() {return this.$store.login},
      set: function(val) {this.$store.commit("updateLogin", {login: val})}
    }
  },
  methods: {
    async save() {
      if(this.$empty(this.detail)) return this.$snackbar('Chưa nhập nội dung ghi chú')
      let data = {user: this.$store.login.id, detail: this.detail, ref: this.row.id}
      if(this.current) {
        data = this.$copy(this.current)
        data.detail = this.detail
      }
      let rs = data.id? await this.$updateapi(this.api, data) : await this.$insertapi(this.api, data)  
      if(!rs) return
      this.detail = undefined
      if(this.current) {
        this.current = undefined
        let idx = this.$findIndex(this.data, {id: rs.id})
        this.$set(this.data, idx, rs)
      } else {
        this.data.push(rs)
        let rows = this.$copy(this.$store[this.pagename].data)
        let idx = this.$findIndex(rows, {id: this.row.id})
        let copy = this.$copy(this.row)
        copy.count_note += 1
        rows[idx] = copy
        this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
      }
    },
    edit(v) {
      this.current = this.$copy(v)
      this.detail = v.detail
    },
    askConfirm(v, i) {
      this.obj = {v: v, i: i}
      this.showmodal = {component: `dialog/Confirm`,vbind: {content: 'Bạn có muốn xóa ghi chú này không?', duration: 10}, 
      title: 'Xóa ghi chú', width: '500px', height: '100px'}
    },
    async confirm() {
      let v = this.obj.v
      let i = this.obj.i
      let rs = await this.$deleteapi(this.api, v.id)
      if(rs==='error') return
      this.$delete(this.data, i)
      let rows = this.$copy(this.$store[this.pagename].data)
      let idx = this.$findIndex(rows, {id: this.row.id})
      let copy = this.$copy(this.row)
      copy.count_note -= 1
      rows[idx] = copy
      this.$store.commit('updateState', {name: this.pagename, key: 'update', data: {data: rows}})
    }
  }
}
</script>