<template>
  <div class="header-scroll_box-fa">
    <div class="header-scroll_box" @mouseenter="stopAn" @mouseleave="leaveAn">
      <div
        class="scroll-box-fa"
        ref="scroll_box_1"
        :style="{
          '-webkit-animation': animationSpeed,
          animation: animationSpeed,
        }"
      >
        <div
          class="scroll-token-box"
          v-for="item in ScrollList.list"
          :key="item.title"
        >
          <div class="left-img">
            <img :src="item.img" alt="" />
            <span class="span-1">{{ item.sy }}</span>
          </div>
          <div class="right-info">
            <span class="span-3"> $ </span>
            <span class="span-2">{{ item.up }}</span>
          </div>
        </div>
      </div>
      <div
        class="scroll-box-fa"
        ref="scroll_box_2"
        :style="{
          '-webkit-animation': animationSpeed,
          animation: animationSpeed,
        }"
      >
        <div
          class="scroll-token-box"
          v-for="item in ScrollList.list"
          :key="item.title"
        >
          <div class="left-img">
            <img :src="item.img" alt="" />
            <span class="span-1">{{ item.sy }}</span>
          </div>
          <div class="right-info">
            <span class="span-3"> $ </span>
            <span class="span-2">{{ item.up }}</span>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script lang="ts" setup>
import request from '@/utils/request';
import { publicTokenImg } from '@/constants/UnifiedManagementChain';
const ScrollList = reactive({
  list: [],
});
// 获取当前链
const chain = useChain();
watch(
  () => chain.value,
  (v) => {
    v && getPublicToken();
  }
);
// 动画速度
const animationSpeed = ref('');
onMounted(() => {
  if (!ScrollList.list.length) {
    getPublicToken();
  }
});
// 获取滚动代币
const getPublicToken = async () => {
  try {
    const result: any = await request.post(
      `/v1/${chain.value}/mainstream/scroll`,
      {}
    );
    let list: any = [];
    Object.keys(result).forEach((item: any, index: any) => {
      let Obj: any = {};
      // 价格
      Obj.up = parseFloat(result[item]).toFixed(3);
      // name
      Obj.sy = item;
      // img
      let CurImgObj = publicTokenImg.find(
        (it: any) => it.title.toLowerCase() == Obj.sy.toLowerCase()
      );
      // 检测图片是否存在
      // console.log(Obj.sy);
      Obj.img = CurImgObj.img;
      if (Obj.sy.indexOf('.e') !== -1) {
        Obj.sy = Obj.sy.replace('.e', 'E');
      }
      list.push(Obj);
    });
    animationSpeed.value = `${
      list.length * 2
    }s scroll-token-box linear infinite normal`;
    ScrollList.list = list;
  } catch (e) {
    console.log(e);
  }
};
// 图片
const doubt = {
  img: '/images/svg/header/doubt.svg',
};
let scroll_box_1 = ref(null);
let scroll_box_2 = ref(null);
// 鼠标移入暂停
const stopAn = () => {
  scroll_box_1.value.style.animationPlayState = 'paused';
  scroll_box_2.value.style.animationPlayState = 'paused';
};
// 鼠标移出继续滚动
const leaveAn = () => {
  scroll_box_1.value.style.animationPlayState = 'running';
  scroll_box_2.value.style.animationPlayState = 'running';
};
</script>

<style lang="less" scoped>
@import '@/style/variables.less';
@import '@/style/flex.less';
.header-scroll_box-fa {
  padding-bottom: 12px;
  .header-scroll_box {
    width: 100%;
    box-sizing: border-box;
    .da();
    // 滚动模块始终居中于导航栏剩余内容
    overflow: hidden;
    // overflow-x: auto;
    scrollbar-width: none; /* firefox */
    -ms-overflow-style: none; /* IE 10+ */
    &::-webkit-scrollbar {
      display: none; /* Chrome Safari */
    }
    padding-left: 12px;
    .scroll-box-fa {
      display: flex;
      // -webkit-animation: 20s token-box linear infinite normal;
      // animation: 20s token-box linear infinite normal;
      .scroll-token-box {
        margin-left: 12px;
        font-size: @font-size-s;
        cursor: pointer;
        width: 205px;
        height: 45px;
        border-radius: 10px;
        background: var(--new-background-1);
        border: 1px solid var(--new-border-1);
        padding: 0 12px;
        .dj(space-between);
        font-size: 16px;
        box-sizing: border-box;
        .left-img {
          margin-right: 4px;
          .dja();
          .span-1 {
            padding-left: 6px;
            font-weight: 500;
          }
        }
        .right-info {
          .da();
          .span-2 {
            font-weight: 600;
          }
          .span-3 {
            color: #9b96b6;
          }
        }
      }
    }
  }
}
</style>

<style lang="less">
@keyframes scroll-token-box {
  0% {
    -webkit-transform: translate3d(0, 0, 0);
    transform: translate3d(0, 0, 0);
  }
  100% {
    -webkit-transform: translate3d(-100%, 0, 0);
    transform: translate3d(-100%, 0, 0);
    display: none;
  }
}
</style>
