<template>
  <div class="o-preload-asset">
    <div
      class="o-preload-asset__img"
      :class="{ 'u-pointer': status === 2 }"
      @click="onClick"
    >
      <auto-image
        class="o-preload-asset__thumb"
        :placeholder="placehoder"
        :src="src"
      />
      <i
        v-if="status === -1"
        class="o-preload-asset__refresh o-icon has-active el-icon-refresh u-pointer"
      />
    </div>
    <div class="l-flex--row o-preload-asset__footer">
      <auto-text
        class="l-flex__fill c-sibling-item"
        :text="asset.name"
      />
      <i
        v-if="canDel"
        class="l-flex__none c-slibing-item el-icon-delete has-active u-pointer"
        @click="onDel"
      />
    </div>
  </div>
</template>

<script>
import { getThumbnailUrl } from '@/api/asset'

export default {
  name: 'AssetCard',
  props: {
    asset: {
      type: Object,
      required: true
    }
  },
  data () {
    return {
      showDetail: false,
      isMultipleFiles: false,
      total: 0,
      active: 0,
      source: null
    }
  },
  computed: {
    type () {
      return this.asset.type
    },
    isImage () {
      return this.type === 1
    },
    isVideo () {
      return this.type === 2
    },
    isWeb () {
      return this.type === 3
    },
    status () {
      return this.asset.status
    },
    canDel () {
      return this.status === -1 || this.status === 2
    },
    placehoder () {
      switch (true) {
        case this.isVideo:
          return 'video-bg'
        case this.isWeb:
          return 'web'
        default:
          return null
      }
    },
    src () {
      return this.isImage
        ? getThumbnailUrl(this.asset.keyName)
        : null
    }
  },
  methods: {
    onClick () {
      switch (this.status) {
        case -1:
          this.$emit('reload', this.asset)
          break
        case 2:
          this.$emit('play', this.asset)
          break
        default:
          break
      }
    },
    onDel () {
      if (!this.canDel) {
        return
      }
      this.$emit('del', this.asset)
    }
  }
}
</script>

<style lang="scss" scoped>
.o-preload-asset {
  position: relative;

  &__img {
    position: relative;
    padding-top: 56.25%;
    color: $info;
    border-radius: $radius;
    background-color: rgba(#000, 0.8);
    background-position: center center;
    background-size: contain;
    background-repeat: no-repeat;
  }

  &__thumb {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
  }

  &__refresh {
    position: absolute;
    top: 50%;
    left: 50%;
    color: #fff;
    border-radius: 50%;
    background-color: rgba(#000, 0.5);
    transform: translate(-50%, -50%);
  }

  &__footer {
    margin-top: 4px;
    font-size: 14px;
  }
}
</style>
