<template>
  <div class="header-item">
    <div class="__top">
      <div class="icon">
        <slot name="icon"/>
      </div>
      <div class="title">
        <div class="title_text">{{title}}</div>
        <div class="total"><span class="number">{{count}}</span> 件</div>
      </div>
    </div>
    <div class="__bottom">
      <div class="tag">较昨日</div>
      <div class="change">
        <div class="change_icon">
          <img v-if="changeType" class="up-or-down-icon" src="@/assets/images/icon/down.png" />
          <img v-else class="up-or-down-icon" src="@/assets/images/icon/up.png" /> 
        </div>
        <span class="number">
          {{change}}
        </span>
      </div>
    </div>
  </div>
</template>

<script>

export default {
  props: {
    title: {
      type: String,
      default: ''
    },
    count: {
      type: Number,
      default: 0
    },
    changeType: {
      type:Boolean,
      default: true
    },
    change: {
      type: Number,
      default: 0
    }
  }
}
</script>



<style lang="less" scoped>

.header-item {
  font-size: 16px;
  background-image:-webkit-linear-gradient(bottom,#2999fd,#f0ffff); 
  -webkit-background-clip:text; 
  -webkit-text-fill-color:transparent;

  .__top {
    display: flex;
    align-items: center;
    font-size: 16px;
    gap: 5px;
  }
  .__bottom {
    display: flex;
    align-items: flex-end;
    justify-content: center;
    font-size: 16px;
    gap: 5px;
    .tag {
      display: flex;
      height: 27px;
      align-items: flex-end;
      padding-bottom: 1.4px;
      font-size: 16px;
    }

    .change {
      height: 27px;
      display: flex;
      align-items: flex-end;
      gap: 5px;
    }
  }

  .number {
    font-size: 25px;
    background-image:-webkit-linear-gradient(bottom,#2999fd,#f0ffff); 
    -webkit-background-clip:text; 
    -webkit-text-fill-color:transparent;
  }
}

.up-or-down-icon {
  width:16px;
  height:23px;
}

</style>
