<template>
  <div>
  <div class="px-2" :style="`max-height: ${maxheight}; overflow-y: auto;`" @scroll="handleScroll">
    <div class="field is-grouped py-1 border-bottom my-0" v-for="(v, i) in rows" :key="i">
      <p class="control is-expanded py-0 fs-14 hyperlink" @click="doClick(v,i)">
        {{v[name]? $stripHtml(v[name], 75) : 'n/a'}}
        <span class="icon has-text-primary" v-if="checked[i]"><i class="mdi mdi-check"></i></span>
      </p>
      <p class="control py-0" v-if="show">
        <span class="icon-text has-text-grey mr-2 fs-13" v-if="show.author">
          <span class="icon"><i class="mdi mdi-account-outline"></i></span>
          <span>{{ v[show.author] }}</span>
        </span>
        <span class="icon-text has-text-grey mr-2 fs-13" v-if="show.view">
          <span class="icon"><i class="mdi mdi-eye-outline"></i></span>
          <span>{{ v[show.view] }}</span>
        </span>
          <span class="fs-13 has-text-grey" v-if="show.time">{{$dayjs(v['create_time']).fromNow(true)}}</span>
        <b-tooltip label="Mở trong tab mới" type="is-dark" position="is-left">
          <span class="icon hyperlink ml-1" v-if="show.link" @click="doClick(v,i, 'newtab')"><i class="mdi mdi-open-in-new"></i></span>
        </b-tooltip>
          <b-tooltip label="Đổi tên" type="is-dark" position="is-left" v-if="show.rename">
          <span class="icon hyperlink ml-1" @click="$emit('rename', v, i)"><i class="mdi mdi-pencil-outline"></i></span>
        </b-tooltip>
        <b-tooltip label="Xóa" type="is-dark" position="is-left" v-if="show.delete">
          <span class="icon hyperlink has-text-danger ml-1" @click="$emit('remove', v, i)"><i class="mdi mdi-delete-outline"></i></span>
        </b-tooltip>
      </p>
    </div>
  </div>
</div>
</template>

<script>
export default {
  props: ['data', 'name', 'maxheight', 'perpage', 'sort', 'selects', 'keyval', 'show'],
  data() {
    return {
      currentPage: 1,
      total: this.data.length,
      rows: this.data.slice(0, this.perpage),
      selected: [],
      checked: {},
      time: undefined,
      array: []
    }
  },
  created() {
    this.getdata()
  },
  watch: {
    data: function(newVal) {
      this.getdata()
    },
    selects: function(newVal) {
      this.getSelect()
    }
  },
  methods: {
    getdata() {
      this.currentPage = 1
      this.array = this.$copy(this.data)
      if(this.sort!==false) {
        let f = {}
        let showtime = this.show? this.show.time : false
        showtime? f['create_time'] = 'desc' : f[this.name] = 'asc'
        this.$multiSort(this.array, f)
      }
      this.rows = this.array.slice(0, this.perpage)
      this.getSelect()
    },
    getSelect() {
      if(!this.selects) return
      this.selected = []
      this.checked = {}
      this.selects.map(v=>{
        let idx = this.rows.findIndex(x=>x[this.keyval? this.keyval : this.name]===v)
        if(idx>=0) {
          this.selected.push(this.rows[idx])
          this.checked[idx] = true
        }
      })
    },
    doClick(v, i, type) {
      this.checked[i] = this.checked[i]? false : true
      this.checked = this.$copy(this.checked)
      let idx = this.selected.findIndex(x=>x.id===v.id) 
      idx>=0? this.$delete(this.selected) : this.selected.push(v)
      this.$emit('selected', v, type)
    },
    handleScroll(e) {
      const bottom = e.target.scrollHeight - e.target.scrollTop -5 < e.target.clientHeight
      if (bottom) { 
        if(this.total? this.total>this.rows.length : true) {
          this.currentPage +=1
          let arr = this.array.filter((ele,index) => (index>=(this.currentPage-1)*this.perpage && index<this.currentPage*this.perpage))
          this.rows = this.rows.concat(arr)
        }
      }
    }
  }
}
</script>