<template>
  <div class="header-container">
    <div class="header-icon">
      <img
        src="//img10.360buyimg.com/imgzone/jfs/t1/174353/24/34877/898/6413cf26F1ecf9464/da487325cd0907ff.png"
      />
      <ul v-if="showProgress" class="progress-line">
        <li v-for="(e, i) in 9" :key="i" />
      </ul>
    </div>
    <div class="header-content">
      <div class="main">
        您当前累计消费
        <span>{{ amount }}</span>
        元，距离下一个大奖还差
        <span>{{ differ }}</span>
        元
      </div>
      <div class="remark">
        (确认收货后才会计入消费金额中呦)
      </div>
    </div>
  </div>
</template>

<script>
export default {
  props: {
    showProgress: {
      type: Boolean,
      default: false
    },
    amount: {
      type: Number,
      default: 0
    },
    differ: {
      type: Number,
      default: 0
    }
  }
};
</script>

<style lang="scss" scoped>
.header-container {
  width: 100%;
  padding: 0 0.3rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-direction: row;
  margin-bottom: 0.18rem;
  .header-icon {
    width: 0.53rem;
    text-align: center;
    height: 0.34rem;
    position: relative;
    img {
      height: 0.34rem;
      width: 0.27rem;
    }

    .progress-line {
      position: absolute;
      top: calc(0.23rem + 100%);
      left: 50%;
      transform: translate(-50%, 0);
      display: flex;
      gap: 0.11rem;
      flex-direction: column;
      li {
        height: 0.04rem;
        width: 0.04rem;
        background: rgb(234, 73, 52);
        border-radius: 50%;
      }
    }
  }
  .header-content {
    width: 6.3rem;
    height: 1.08rem;
    background-color: #fff;
    border-radius: 0.1rem;
    position: relative;
    padding: 0 0.4rem;
    display: flex;
    justify-content: center;
    flex-direction: column;

    .main {
      font-size: 0.24rem;
      font-family: "SourceHanSansCN";
      color: rgb(0, 0, 0);
      text-align: left;
      font-weight: bolder;
      white-space: nowrap;
      text-overflow: ellipsis;
      span {
        color: #e82841;
        font-size: 0.26rem;
      }
    }

    .remark {
      font-size: 0.24rem;
      font-family: "SourceHanSansCN";
      color: rgb(102, 102, 102);
      text-align: left;
    }

    &::after {
      content: "";
      position: absolute;
      height: 0.16rem;
      width: 0.16rem;
      top: 50%;
      left: -0.08rem;
      transform: translate(0, -50%) rotate(45deg);
      background-color: #fff;
      border-radius: 0 0 0 0.05rem;
    }
  }
}
</style>
