<template>
  <view class="announcement-bar" @click="onAnnouncementClick">
    <image class="announcementIcon" :src="announcementIcon"></image>
    <view class="announcement-box">
      <text class="announcement-text">{{ announcementText }}</text>
    </view>
  </view>
</template>

<script>
export default {
  name: 'AnnouncementBar',
  props: {
    announcementText: {
      type: String,
      default: '暂无更多公告! 暂无更多公告! 暂无更多公告!',
    },
    announcementIcon: {
      type: String,
      required: true,
    },
  },
  methods: {
    onAnnouncementClick() {
      this.$emit('announcement-click')
    },
  },
}
</script>

<style lang="scss" scoped>
.announcement-bar {
  background: white;
  opacity: 0.5;
  margin: 34rpx 19rpx 0 19rpx;
  padding: 15rpx 30rpx;
  display: flex;
  align-items: center;
  gap: 15rpx;
  overflow: hidden;
  height: 34rpx;
  border-radius: 100rpx;

  .announcementIcon {
    height: 32rpx;
    width: 32rpx;
    flex-shrink: 0;
  }

  .announcement-box {
    flex: 1;
    overflow: hidden;
    position: relative;

    .announcement-text {
      font-size: 13px;
      opacity: 1;
      color: black;
      white-space: nowrap;
      animation: scroll-text 10s linear infinite;
      display: inline-block;
      padding-left: 100%;
    }

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