<template>
  <div class="flex items-start">
    <app-icon
      icon-name="avator"
      class-name="w-8 h-8 flex-shrink-0"
    />
    <div class="info ml-1.5">
      <div class="text-sm text-text-primary-dark">{{ record.name }}</div>
      <div class="mt-1">{{ record.content }}</div>
      <div v-if="record.resource.length > 0" class="mt-1.5 flex-1 grid grid-cols-4 gap-1">
        <template v-if="record.resource.length > 4 && !showAll">
          <div
            v-for="(img, index) in preRecords"
            :key="index"
            class="rounded overflow-hidden"
            @click="previewImages"
          >
            <img :src="img.href" alt="" class="max-w-full">
          </div>
          <div class="border flex items-center justify-center rounded bg-black bg-opacity-30 text-white" @click="showAll = true">
            +{{ record.resource.length - 3 }}
          </div>
        </template>
        <template v-else>
          <div
            v-for="(img, index) in record.resource"
            :key="index"
            class="rounded overflow-hidden"
            @click="previewImages"
          >
            <img :src="img.href" alt="" class="max-w-full">
          </div>
        </template>
      </div>
      <div class="text-xs text-text-secondary mt-1">{{ record.time }}</div>
    </div>
  </div>
</template>
<script lang="ts">
import Vue from 'vue'
import { ImagePreview } from 'vant'
import * as Records from '@/DTO/follow-records'

Vue.use(ImagePreview)

export default Vue.extend({
  name: 'FollowRecord',
  components: {
    'app-icon': () => import('@/components/common/Icon.vue')
  },
  props: {
    record: {
      type: Object,
      default() {
        return {}
      }
    }
  },
  data() {
    return {
      showAll: false
    }
  },
  computed: {
    preRecords(): Array<Records.Records> {
      if (this.record.resource.length > 4) {
        return this.record.resource.slice(0, 3)
      } else {
        return this.record.resource
      }
    },
    images() {
      const arr: Array<string> = []
      if (this.record.resource.length > 0) {
        this.record.resource.forEach((item: Records.Resource) => {
          arr.push(item.href)
        })
      }
      return arr
    }
  },
  methods: {
    previewImages() {
      ImagePreview({
        images: this.images,
        closeable: true
      })
    }
  }
})
</script>
<style lang="less" scoped>

</style>
