<template>
  <div style="width: 640px">
    <v-card
      color="white"
    >
      <v-card-title>
        <v-avatar>
          <img
            :src="item.avatarUrl"
            alt="social"
          >
        </v-avatar>
        <span class="text-body-1 font-weight-light">{{ item.username }}</span>
        <span class="text-body-1 font-weight-light">{{ item.createdAt }}</span>
      </v-card-title>

      <v-card-text class-name="text-h5 font-weight-bold">
        <span v-html="item.text" />
        <v-row v-if="item.imageUrls.length !== 0">
          <v-col
            v-for="imageUrl in item.imageUrls"
            :key="imageUrl.thumbnailUrl"
            class="d-flex child-flex"
            cols="4"
          >
            <v-img
              :src="imageUrl.thumbnailUrl"
              :lazy-src="imageUrl.thumbnailUrl"
              aspect-ratio="1"
              class="grey lighten-2"
              @click="showImage(item.imageUrls)"
            >
              <template v-slot:placeholder>
                <v-row
                  class="fill-height ma-0"
                  align="center"
                  justify="center"
                >
                  <v-progress-circular
                    indeterminate
                    color="grey lighten-5"
                  />
                </v-row>
              </template>
            </v-img>
          </v-col>
        </v-row>
      </v-card-text>
      <v-icon
        small
        left
      >
        mdi-twitter
      </v-icon>
    </v-card>
  </div>
</template>

<script>
import * as DateUtils from '@/utils/date-utils'
import * as StringUtils from '@/utils/string-utils'
import { mapActions } from 'vuex'

export default {
  name: 'StatusCard',
  props: {
    item: {
      type: Object,
      default: () => {
      }
    }
  },
  data() {
    return {
    }
  },
  methods: {
    ...mapActions([
      'setImageZoom',
      'setDetailContent'
    ]),
    showImage(imageUrls) {
      const imgs = []
      for (const i of imageUrls) {
        imgs.push(i.originalUrl)
      }
      this.$viewerApi({
        images: imgs,
        options: {
          movable: false,
          fullscreen: false,
          keyboard: true
        }
      })
    },
    goDetailContent() {
      this.setDetailContent(this.item)
      this.$router.push({ name: 'detail-content' })
    },
    formatTime(time) {
      return DateUtils.format(time)
    },
    compareImgSize(size) {
      const count = size / 3
      if (count >= 1) {
        return true
      } else {
        return false
      }
    },
    formatThumbImg(img) {
      return StringUtils.formatImgThumb(img)
    },
    formatMidImg(img) {
      return StringUtils.formatImgMiddle(img)
    },
    formatNum(num) {
      return StringUtils.formatNum(num)
    },
    imageZoom(url) {
      this.setImageZoom(this.formatMidImg(url))
      this.$router.push({ name: 'imageZoom' })
    },
    imgClass(size) {
      let clazz = ''
      switch (size) {
        case 1:
          clazz = 'img-li-one'
          break
        case 2:
        case 4:
          clazz = 'img-li-two'
          break
        default:
          clazz = 'img-li-other'
          break
      }
      return clazz
    }
  }
}
</script>

<style>
</style>
