<template>
  <div class="px-2" :style="`max-height: ${maxheight}; overflow-y: auto;`">
    <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)">
        {{ $stripHtml(v[name] || v.fullname || v.code || 'n/a', 75) }}
        <span class="icon has-text-primary" v-if="checked[i] && notick!==true">
          <SvgIcon v-bind="{name: 'tick.svg', type: 'primary', size: 15}"></SvgIcon>
        </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">
          <SvgIcon v-bind="{name: 'user.svg', type: 'gray', size: 15}"></SvgIcon>
          <span>{{ v[show.author] }}</span>
        </span>
        <span class="icon-text has-text-grey mr-2 fs-13" v-if="show.view">
          <SvgIcon v-bind="{name: 'view.svg', type: 'gray', size: 15}"></SvgIcon>
          <span>{{ v[show.view] }}</span>
        </span>
          <span class="fs-13 has-text-grey" v-if="show.time">{{$dayjs(v['create_time']).fromNow(true)}}</span>
          <span class="tooltip">
          <a class="icon ml-1" v-if="show.link" @click="doClick(v,i, 'newtab')">
            <SvgIcon v-bind="{name: 'opennew.svg', type: 'gray', size: 15}"></SvgIcon>
          </a>
          <span class="tooltiptext">Mở trong tab mớ</span>
        </span>
        <span class="tooltip" v-if="show.rename">
          <a class="icon ml-1" @click="$emit('rename', v, i)">
            <SvgIcon v-bind="{name: 'pen1.svg', type: 'gray', size: 15}"></SvgIcon>
          </a>
          <span class="tooltiptext">Đổi tên</span>
        </span>
        <span class="tooltip" v-if="show.rename">
          <a class="icon has-text-danger ml-1" @click="$emit('remove', v, i)">
            <SvgIcon v-bind="{name: 'bin1.svg', type: 'gray', size: 15}"></SvgIcon>
          </a>
          <span class="tooltiptext">Xóa</span>
        </span>
      </p>
    </div>
  </div>
</template>
<script>
export default {
  props: ['data', 'name', 'maxheight', 'perpage', 'sort', 'selects', 'keyval', 'show', 'notick'],
  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.$remove(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>