<template>
  <div>
    <div class="hyperlink" @click="open()" v-if="note">{{ note }}</div>
    <div class="inputshow" style="min-height: 20px;"  v-else>
      <span class="material-symbols-outlined fs-12 is-clickable inputhide" @click="open()">edit</span>
    </div>
<Modal @close="showmodal=undefined" v-bind="showmodal" @changenote="changeNote" v-if="showmodal" />
</div>
</template>
<script>
export default {
  props: ['pagename', 'row', 'field'],
  data() {
    return {
      showmodal: undefined,
      note: undefined
    }
  },
  created() {
    if(this.row[this.field.name]) this.note = this.row[this.field.name]
  },
  methods: {
    open() {
      let title = this.$stripHtml(this.field.label)
      title = title.toLowerCase().indexOf('nhập')>=0? title : `Nhập ${title}` 
      this.showmodal = {component: 'datatable/Note', vbind: {note: this.note}, title: title, width: '500px', height: '200px'}
    },
    changeNote(data) {
      this.note = data.note
      let copy = this.$copy(this.$store.state[this.pagename])
      let idx = this.$findIndex(copy.data, {stock_code: this.row.stock_code})
      let copyRow = this.$copy(this.row)
      copyRow[this.field.name] = this.note
      copy.data[idx] = copyRow
      this.$store.commit("updateState", {name: this.pagename, key: "update", data: {data: copy.data}})
      this.showmodal = undefined
      let datainput = copy.setting.input || {}
      let f = datainput[this.row.stock_code] || {}
      this.note? f[this.field.name] = this.note : delete f[this.field.name]
      Object.keys(f).length>0? datainput[this.row.stock_code] = f : delete datainput[this.row.stock_code]
      copy.setting.input = Object.keys(datainput).length>0? datainput : null
      this.$store.commit("updateState", {name: this.pagename, key: "setting", data: copy.setting})
    }
  }
}
</script>
<style>
.inputhide {
  display: none;
  cursor: pointer;
  font-size: 12px;
}
.inputshow:hover .inputhide {
  display: block;
}
</style>