<template>
  <view class="warn-swiper" v-if="warnings.length > 0">
    <view class="warn-icon">
      <image
        style="
          width: 18rpx;
          height: 22rpx;
          margin-right: 16rpx;
          vertical-align: middle;
        "
        src="../../static/tabs/ld.png"
        mode="aspectFit"
      ></image>
    </view>
    <view class="marquee-container">
      <view
        class="marquee-content"
        :style="{ animationDuration: `${duration}s` }"
      >
        <text
          v-for="(item, index) in loopWarnings"
          :key="index"
          class="warn-item"
          @tap="goDetail(item)"
        >
          {{ item.content }}
        </text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "WarnSwiper",
  props: {
    warnings: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      duration: 15, // 动画持续时间，可根据内容长度调整
    };
  },
  computed: {
    loopWarnings() {
      // 复制一份数据实现无缝循环
      return [...this.warnings, ...this.warnings];
    },
  },
  methods: {
    goDetail(record) {
      uni.navigateTo({
        url:
          "/pages/forewarning/shInformation/shInformation?obj=" +
          JSON.stringify(record), // 跳转到对应路径的页面
      });

      // this.$emit("onWarnClick", item);
    },
  },
};
</script>

<style lang="scss">
.warn-swiper {
  display: flex;
  align-items: center;
  // background: rgba(255, 77, 79, 0.1);
  padding: 20rpx;
  padding-left: 0;
  overflow: hidden;

  .warn-icon {
    width: 40rpx;
    height: 40rpx;
    margin-right: 20rpx;
    flex-shrink: 0;
  }

  .marquee-container {
    flex: 1;
    overflow: hidden;
    height: 40rpx;
  }

  .marquee-content {
    white-space: nowrap;
    display: inline-block;
    animation: marquee linear infinite;

    .warn-item {
      color: #ff9001;
      font-size: 28rpx;
      margin-right: 50rpx;
    }
  }
}

@keyframes marquee {
  0% {
    transform: translateX(0);
  }
  100% {
    transform: translateX(-50%);
  }
}
</style>