<template>
  <div>
    <div class="hyperlink" @click="open()" v-html="note" v-if="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" @changedate="changeDate" 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}` 
      let date = this.note? `${this.note.substring(6,10)}-${this.note.substring(3,5)}-${this.note.substring(0,2)}` : new Date() 
      this.showmodal = {component: 'datatable/Date', vbind: {trandate: date}, title: title, width: '460px', height: '300px'}
    },
    changeDate(date) {
      this.note = date? this.$dayjs(date).format('DD/MM/YYYY') : null
      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}})
      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>