<template>
  <div class="table-loop" ref="tableLoop">
    <div class="thead" ref="thead">
      <div class="td index">排名</div>
      <div
        class="td"
        v-for="(item, index) in columns"
        :key="index"
        :style="item.style || {}"
      >
        {{ item.label }}
      </div>
    </div>
    <swiper
      v-if="hasData"
      :key="swiperKey"
      :style="{ height: 36 * rowNum + 'px', width: swiperWidth + 'px' }"
      :modules="modules"
      direction="vertical"
      :slides-per-view="rowNum"
      :space-between="0"
      :mousewheel="true"
      :autoplay="{ delay: 1500 }"
    >
      <swiper-slide
        class="slide"
        v-for="(item, index) in data || []"
        :key="index"
        @click="rowClick(item)"
      >
        <div class="td index">
          <div class="cell" v-if="index == 0"
            ><img class="index" src="../../../assets/imgs/No1.png"
          /></div>
          <div class="cell" v-else-if="index == 1"
            ><img class="index" src="../../../assets/imgs/No2.png"
          /></div>
          <div class="cell" v-else-if="index == 2"
            ><img class="index" src="../../../assets/imgs/No3.png"
          /></div>
          <div class="cell" v-else>{{ index + 1 }}</div>
        </div>
        <div
          class="td"
          v-for="(v, i) in columns"
          :key="i"
          :style="v.style || {}"
        >
          <div class="cell">
            <t-tooltip
              v-if="v.prop !== 'rate'"
              placement="top"
              :content="item[v.prop] + ''"
            >
              <span>{{ item[v.prop] }}</span>
            </t-tooltip>
            <div class="process-box" v-else>
              <div class="process" :style="{ width: item.rate }"></div>
            </div>
          </div>
        </div>
      </swiper-slide>
    </swiper>
    <div v-else class="none-data">暂无数据</div>

    <BigTableLoopDialog
      v-if="visible"
      :data="data"
      :columns="columns"
      @close="visible = false"
      :width="bigTableWidth"
    ></BigTableLoopDialog>
  </div>
</template>

<script setup name="TableLoop">
import { ref, onMounted, computed, watch } from 'vue';
import { Navigation, Mousewheel, Autoplay } from 'swiper';
import { Swiper, SwiperSlide } from 'vue-awesome-swiper';
import BigTableLoopDialog from './big-table-loop-dialog.vue';
import 'swiper/css';
import 'swiper/css/autoplay';
const visible = ref(false);
const emits = defineEmits(['rowClick']);
const props = defineProps({ data: Object, columns: Array });
const modules = ref([Navigation, Mousewheel, Autoplay]);
const swiperKey = ref(Date.now() + '');
const tableLoop = ref();
const tbodyHeight = ref(1);
const rowNum = computed(() => {
  return parseInt(tbodyHeight.value / 36);
});
const swiperWidth = ref(0);
const thead = ref();
const bigTableWidth = computed(() => {
  return (props.columns || []).reduce((total, col) => {
    let tdWidth = parseFloat(col.style.width);
    return total + tdWidth * 2;
  }, 34);
});
onMounted(() => {
  let w = 0;
  for (let i = 0; i < thead.value.children.length; i++) {
    let node = thead.value.children[i];
    w += node.offsetWidth;
  }
  swiperWidth.value = w;
});
const hasData = computed(() => {
  return !!props.data?.length;
});
watch(hasData, () => {
  swiperKey.value = Date.now() + '';
});
onMounted(() => {
  tbodyHeight.value = tableLoop.value.offsetHeight - 46;
  setTimeout(() => {
    swiperKey.value = Date.now() + '';
  });
});

const rowClick = (item) => {
  console.log('item:', item);
  emits('rowClick', item);
};
const maximize = () => {
  visible.value = true;
};
defineExpose({
  maximize,
});
</script>

<style lang="less" scoped>
.table-loop {
  height: 100%;
  overflow: auto;
  .none-data {
    height: calc(100% - 36px);
    display: flex;
    justify-content: center;
    align-items: center;
    color: #ccc;
    font-size: 14px;
  }
  .thead {
    height: 36px;
    font-size: 12px;
    margin-left: auto;
    margin-right: auto;
    .td {
      text-align: center;
      line-height: 36px;
      color: #8c8c8c !important;
      background-color: #f7f7f7;
    }
  }
  .slide {
    cursor: pointer;
    &:hover {
      background-color: #f7f7f7;
    }
    .td {
      color: #262626;
      .cell {
        height: 100%;
        width: 100%;
        display: flex;
        justify-content: center;
        align-items: center;
        img.index {
          height: 14px;
        }
        > span {
          overflow: hidden;
          white-space: nowrap;
          text-overflow: ellipsis;
        }
      }
    }
  }
  .thead,
  .slide {
    white-space: nowrap;
  }
  .td {
    display: inline-block;

    height: 100%;
    &.index {
      width: 34px;
    }
    .process-box {
      background-color: #d9d9d9;
      height: 6px;
      border-radius: 3px;
      width: 90%;
      overflow: hidden;
      .process {
        background-color: #4080ff;
        height: 100%;
      }
    }
  }
}
</style>
