<template>
  <div class="latest-purchase">
    <vue-seamless-scroll :data="list" :class="{'seamless-warp-mobile': mobile , 'seamless-warp': !mobile}">
      <div class="pay-user-info">
        <div v-for="(item,index) in list" :key="index" class="user-info">
          <div class="left">
            <avatar :gender="item.userBaseInfo.userSex" :url="item.userBaseInfo.userAvatar" customize-style="width: 44px; height: 44px;border-radius: 50%" />
          </div>
          <div class="right">
            <div class="right-head">
              <div class="flag-icon"><flag-icon :code="item.userBaseInfo.countryCode" size="0.5rem" /></div>
              <span class="nickname">{{ item.userBaseInfo.userNickname }}</span>
            </div>
            <div class="right-content">
              <div class="right-content-item">{{ formatRelativeTime(item.orderPurchase.createTime) }}</div>
              <div class="right-content-item product-name">{{ item.orderPurchase.productDescription }}</div>
              <div class="right-content-item">{{ item.orderPurchase.unitPrice }}</div>
            </div>
          </div>
        </div>
      </div>
    </vue-seamless-scroll>

  </div>
</template>

<script>
import { mobile } from '@/utils/device'
import Avatar from '@/components/data/Avatar'
import { getPurchaseTable } from '@/api/purchase'
import { mapGetters } from 'vuex'
export default {
  name: 'DatavLatestPurchase',
  components: { Avatar },
  props: {
    timeOutSecond: {
      type: Number,
      required: false,
      default: 60
    }
  },
  data() {
    return {
      mobile: mobile(),
      list: []
    }
  },
  computed: {
    ...mapGetters(['permissionsSysOriginPlatforms']),
    permissionsSysOriginCode() {
      if (!this.permissionsSysOriginPlatforms) {
        return []
      }
      return this.permissionsSysOriginPlatforms.map(item => item.value)
    }
  },
  created() {
    const that = this
    that.renderData()
    var intervalIndex = setInterval(() => {
      that.renderData()
    }, that.timeOutSecond * 1000)
    that.$store.dispatch('app/pushRunTask', intervalIndex)
  },
  methods: {
    formatRelativeTime(time) {
      if (!time) {
        return ''
      }
      if (typeof time === 'string') {
        time = time.replace(/-/g, '/')
      }
      const date = new Date(time)
      const diff = (Date.now() - date.getTime()) / 1000
      if (!Number.isFinite(diff) || diff < 30) {
        return this.$t('pages.datav.relativeTime.justNow')
      }
      if (diff < 3600) {
        const count = Math.ceil(diff / 60)
        const key = count === 1 ? 'pages.datav.relativeTime.minuteAgo' : 'pages.datav.relativeTime.minutesAgo'
        return this.$t(key, { count })
      }
      if (diff < 3600 * 24) {
        const count = Math.ceil(diff / 3600)
        const key = count === 1 ? 'pages.datav.relativeTime.hourAgo' : 'pages.datav.relativeTime.hoursAgo'
        return this.$t(key, { count })
      }
      const count = Math.ceil(diff / (3600 * 24))
      const key = count === 1 ? 'pages.datav.relativeTime.dayAgo' : 'pages.datav.relativeTime.daysAgo'
      return this.$t(key, { count })
    },
    renderData() {
      const that = this
      getPurchaseTable({ cursor: 1, limit: 60, sysOrigin: this.permissionsSysOriginCode.join(',') }).then(res => {
        that.list = res.body.records || []
      }).catch(er => {})
    }
  }
}
</script>
<style scoped lang="scss">
.seamless-warp {
  height: 520px;
  overflow: hidden;
}
.seamless-warp-mobile {
  height: 360px;
  overflow: hidden;
}
.pay-user-info {
  .user-info {
      display: flex;
      overflow: hidden;
      text-overflow:ellipsis;
      white-space: nowrap;
      align-items: center;
      padding: 12px 6px;
      border-bottom: 1px solid rgba(255, 147, 38, 0.1);

      > .left {
          width: 48px;
          text-align: center;
          flex: 0 0 48px;
      }

      > .right {
          width: 100%;
          min-width: 0;
          padding-left: 12px;

          .right-head {
              display: flex;
              align-items: center;
              gap: 8px;
              color: var(--brand-text-main);
              font-weight: 600;

              .flag-icon {
                  display: inline-block;
                  vertical-align: middle;
              }

              .nickname {
                  overflow: hidden;
                  text-overflow: ellipsis;
              }
          }

          .right-content {
              display: flex;
              gap: 12px;
              color: var(--brand-text-subtle);
              margin-top: 6px;

              > .right-content-item {
                  min-width: 0;
                  flex: 1;
                  font-size: 13px;
                  overflow: hidden;
                  text-overflow: ellipsis;
              }

              > .product-name{
                  color: #ff9326;
                  font-weight: 600;
              }
          }
      }
  }
}
</style>
