<template>
  <div class="card">
    <div
      class="item flex items-center"
      v-for="(item, index) in msgList"
      :key="index"
    >
      <img :src="item.icon" style="width: 52px; height: 52px;" alt="" />
      <div>
        <div class="text-text-color font-normal">
          {{ item.title }}
        </div>
        <div
          class="text-title-color font-bold"
          style="font-size: 32px; font-family: DINAlternate-Bold, DINAlternate;"
        >
          <countto
            ref="countto"
            :startVal="0"
            :endVal="item.number"
            :autoplay="false"
            :duration="2000"
          ></countto>
        </div>
      </div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue, { PropType } from 'vue'
import countto from 'vue-count-to'

export default Vue.extend({
  components: {
    countto,
  },
  props: {
    msgList: Array as PropType<
      {
        icon: string
        title: string
        number: number
      }[]
    >,
  },
  computed: {
    first(): any {
      return this.msgList[0]
    },
    second(): any {
      return this.msgList[1]
    },
    third(): any {
      return this.msgList[2]
    },
    fourth(): any {
      return this.msgList[3]
    },
  },
  watch: {
    first(p, c) {
      // eslint-disable-next-line @typescript-eslint/no-extra-semi
      p.number !== c.number && (this.$refs.countto as any)[0].start()
    },
    second(p, c) {
      // eslint-disable-next-line @typescript-eslint/no-extra-semi
      p.number !== c.number && (this.$refs.countto as any)[1].start()
    },
    third(p, c) {
      // eslint-disable-next-line @typescript-eslint/no-extra-semi
      p.number !== c.number && (this.$refs.countto as any)[2].start()
    },
    fourth(p, c) {
      // eslint-disable-next-line @typescript-eslint/no-extra-semi
      p.number !== c.number && (this.$refs.countto as any)[3].start()
    },
  },
})
</script>
<style scoped>
.card {
  width: 400px;
  height: 500px;
  background: #ffffff;
  box-shadow: 0px 9px 25px 0px rgba(31, 52, 112, 0.14);
  border-radius: 40px;
  padding-top: 30px;
}
.item {
  height: 110px;
  padding-left: 19px;
}
.item img {
  margin-right: 20px;
}
</style>
