<template>
  <div class="listStyle">
    <div class="listHeader">
      <template v-for="(item, index) in headerInfo" :key="'headerInfo_' + index">
        <div class="headerItem" :style="'width:' + (item.width || fitWidth)">
          <span>{{ item.title }}</span>
        </div>
      </template>
    </div>
    <div ref="listBody" class="listBody">
      <vue3-seamless-scroll :list="bodyInfo" class="scroll" :step="0.2" :hover="true" :wheel="true">
        <template v-for="(item, index) in bodyInfo" :key="'bodyInfo_' + index">
          <div @click="dataInfo.click ? dataInfo.click(item) : (e) => {}" class="bodyGroup">
            <template v-for="(item2, index2) in headerInfo" :key="'bodyInfo_' + index + '_' + index2">
              <div class="bodyItem" :style="'width:' + (item2.width || fitWidth)">
                <span>{{ item[item2.key] }}</span>
              </div>
            </template>
          </div>
        </template>
      </vue3-seamless-scroll>
    </div>
  </div>
</template>

<script>
import { ref, reactive, watch, onMounted, onUnmounted } from 'vue';
// 滚动插件
import { Vue3SeamlessScroll } from 'vue3-seamless-scroll';
import TFMapUitl from '/@/utils/TFMapUitl.ts';
export default {
  name: 'ListStyle',
  components: { Vue3SeamlessScroll },
  props: {
    dataInfo: {
      roll: null,
      header: {
        type: Array,
        default: [
          {
            key: 'address',
            title: '地址',
            width: '200',
          },
        ],
      },
      click: null,
      bodyData: {
        type: Array,
        default: [{ address: '地址1' }, { address: '地址2' }],
      },
    },
  },
  setup(props, ctx) {
    const headerInfo = reactive(props.dataInfo.header);
    const bodyInfo = reactive(props.dataInfo.bodyData);
    const listBody = ref(null);
    const roll = ref(props.dataInfo.roll);

    /**
     * 销毁
     */
    onUnmounted((e) => {});

    /**
     * 自适应宽度计算
     */
    let fitWidth = ref(getfitWidth(headerInfo));
    function getfitWidth(data) {
      let noWidthNumber = 0;
      let tempWidth = 0;
      data.forEach((item) => {
        if (item.width) {
          if (typeof item.width == 'number') {
            tempWidth += item.width;
          } else {
            tempWidth += parseInt(item.width);
          }
          item.width = item.width + 'px';
        } else {
          noWidthNumber++;
        }
      });
      return 'calc((100% - ' + tempWidth + 'px)/' + noWidthNumber + ')';
    }

    //监听数据的变化
    watch(
      () => props.dataInfo,
      (newVal) => {
        TFMapUitl.clearArray(bodyInfo);
        bodyInfo.push(...props.dataInfo.bodyData);
      }
    );

    return {
      headerInfo,
      bodyInfo,
      fitWidth,
      listBody,
      roll,
    };
  },
};
</script>

<style lang="less" scoped>
.listStyle {
  height: 100%;
  position: relative;
}
.listHeader {
  display: flex;
  flex-direction: row;
  text-align: center;
  color: #00d0e3;
  position: relative;
  padding-bottom: 10px;
  width: 98%;
  // &:after {
  //   content: '';
  //   height: 1px;
  //   width: 100%;
  //   position: absolute;
  //   background: linear-gradient(to right, rgba(3, 49, 79, 0.4) 10%, #00afed 50%, rgba(3, 49, 79, 0.4) 90%);
  //   bottom: 0px;
  // }
}
.listBody {
  display: flex;
  flex-direction: column;
  text-align: center;
  height: calc(100% - 40px);
  overflow-y: auto;
  .bodyGroup {
    display: flex;
    flex-direction: row;
    position: relative;
    align-items: center;
    &:hover {
      background: linear-gradient(to bottom, rgba(6, 210, 223, 0) 0%, #00afed 610%);
    }
    &:hover:after {
      content: '';
      height: 3px;
      width: 100%;
      position: absolute;
      background: linear-gradient(to right, rgba(3, 49, 79, 0.1) 0%, #00afed 50%, rgba(6, 210, 223, 0.1) 100%);
      top: 100%;
    }
  }

  .scroll {
    height: 260px;
    width: 100%;
    // margin: 100px auto;
    // overflow: hidden;
  }
}
.listBody::-webkit-scrollbar-thumb {
  background-color: #007e8f; /* 设置滚动条滑块颜色 */
  box-shadow: inset 0 0 6px rgba(0, 0, 0, 0.2) !important;
  border-radius: 2px;
}
</style>
