<template>
  <view class="info-summary">
    <view class="left">
      <view style="display: flex; align-items: center; gap: 10rpx">
        <img src="@/assets/zixun/title_text.png" class="banner_title" />
        <text class="date"
          >({{ dayjs(new Date().getTime()).format("MM/DD") }})</text
        >
      </view>

      <text class="sub_title">评分80分以上精选咨洵数量</text>
    </view>
    <view class="right">
      <!-- <text class="num">{{ count }}</text> -->
      <countTo
        :startVal="lastCount"
        :endVal="count"
        :duration="5000"
        class="num"
      ></countTo>

      <text class="sub_title" style="margin-left: 5rpx">条</text>
    </view>
  </view>
</template>

<script setup>
import { ref, watch, onUnmounted, reactive } from "vue";
import { defineProps } from "vue";
import dayjs from "dayjs/esm/index";
import countTo from "@/components/count-to/vue-countTo.vue";

// 定义接收的 props，date 为日期，count 为数量
const props = defineProps({
  count: {
    type: Number,
    required: true,
  },
});

const lastCount = ref(0);
watch(
  () => props.count,
  (newValue, oldValue) => {
    lastCount.value = newValue;
  },
  {
    deep: true,
  }
);
</script>

<style scoped>
.info-summary {
  background: #f5f8fe;
  border: 1rpx solid #e3ecfd;

  border-radius: 20rpx;
  display: flex;
  align-items: center;
  padding: 30rpx;
  justify-content: space-between;
}

.left {
  display: flex;
  flex-direction: column;
}

.banner_title {
  width: 210rpx;
  height: 36rpx;
}

.date {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 24rpx;
  color: #333333;
  line-height: 33rpx;
  text-align: left;
  font-style: normal;
}

.sub_title {
  font-family: PingFangSC, PingFang SC;
  font-weight: 400;
  font-size: 22rpx;
  color: #999999;
  line-height: 30rpx;
  text-align: left;
  font-style: normal;
  margin-top: 10rpx;
}

.num {
  font-family: PingFangSC, PingFang SC;
  font-weight: 500;
  font-size: 50rpx;
  color: #3f80fa;
  line-height: 59rpx;
  text-align: right;
  font-style: normal;
}
</style>