<template>
  <div>
    <table>
      <colgroup>
        <col v-for="item in props.header" :style="{width: item.width + 'px'}"/>
      </colgroup>
      <thead>
      <tr>
        <th v-for="(item,index) in props.header">
          <div v-if="index === 0 && props.multipleChoice" @click="clearSelected" style="cursor: default">
            #
          </div>
          <span v-else>
          {{ item.name }}
          </span>
        </th>
      </tr>
      </thead>
    </table>
    <el-scrollbar :height="maxHeight" @scroll="scroll">
      <div style="display: flex">
        <div :style="{height: virtualHeight + 'px'}">
        </div>
        <div :style="{transform: `translateY(${translateY})`}" style="height: 100%">
          <table ref="tableRef">
            <colgroup>
              <col v-for="item in props.header" :style="{width: item.width + 'px'}"/>
            </colgroup>
            <tbody>
            <tr v-for="(item,index) in props.data.slice(startIndex, startIndex + itemCount)"
                @click="rowClick(item,index + startIndex)"
                :style="rowStyle(item,index + startIndex)">
              <td v-for="(he,heindex) in props.header" :title="item[he.code]">
                <div v-if="heindex === 0 && props.multipleChoice">
                  <input type="checkbox"
                         @click.stop="clickSelected(item,item.tempCheckbox)"
                         v-model="item.tempCheckbox">
                </div>
                <div v-else-if="he.func" v-html="he.func(item,startIndex + index)"/>
                <div v-else>
                  {{ item[he.code] }}
                </div>
              </td>
            </tr>
            </tbody>
          </table>
        </div>
      </div>
    </el-scrollbar>
  </div>
</template>

<script setup name='YzTableV3'>
import {defineProps, defineEmits, ref, watch} from 'vue'
import sleep from "@/utils/sleep";

const props = defineProps({
  data: {
    type: Array
  },
  header: Array,
  multipleChoice: {
    type: Boolean,
    default: false
  }
})

const emit = defineEmits(['rowClick'])

const selectedData = ref([])
const tableRef = ref(null)

const clearSelected = () => {
  selectedData.value = []
  for (let i = 0, len = props.data.length; i < len; i++) {
    props.data[i].tempCheckbox = false
  }
}

const rowStyle = (row, index) => {
  if (index === currentIndex) {
    return {
      background: 'rgba(0, 58, 241, 0.68)',
      color: '#fff',
    }
  }
}

const clickSelected = async (row, check) => {
  await nextTick()
  await sleep(100)
  if (row.tempCheckbox) {
    selectedData.value.push(row)
  } else {
    let index = selectedData.value.indexOf(row)
    selectedData.value.splice(index, 1)
  }
}

// div 的最大高度
const maxHeight = ref(400)
// 开始位置
const startIndex = ref(0)
// 可以看见 的 内容大小
const itemCount = ref(0)
//  实际的高度
const virtualHeight = ref(0)
// 每一个 元素的大小
const itemHeight = ref(24)
// 偏移量
const translateY = ref('0px')

const scroll = ({scrollTop}) => {
  translateY.value = scrollTop + 'px'
  startIndex.value = Math.floor(scrollTop / itemHeight.value)
}

let currentIndex = $ref(-1)
const rowClick = (val, index) => {
  currentIndex = index
  emit('rowClick', val)
}

watch(() => props.data, (oldData, newData) => {
  if (oldData.length !== newData.length) {
    itemCount.value = Math.ceil(maxHeight.value / itemHeight.value)
    virtualHeight.value = itemHeight.value * props.data.length
  }
})


</script>

<style scoped lang="scss">
table {
  width: 100%;
  border-spacing: 0;
  border-collapse: separate;
  table-layout: fixed;

  tr, td, th {
    border: 1px solid #fff;
  }

  td {
    height: 20px;
    width: 100%;
    word-break: keep-all; /* 不换行 */
    white-space: nowrap; /* 不换行 */
    overflow: hidden; /* 内容超出宽度时隐藏超出部分的内容 */
    text-overflow: ellipsis; /* 当对象内文本溢出时显示省略标记(...) ；需与overflow:hidden;一起使用*/
  }


}


</style>
