<template>
  <div class="o-widget-shortcut">
    <div
      class="o-widget-shortcut__content"
      :class="{ thumbnail: background }"
    >
      <div
        v-if="customStyle"
        class="o-widget-shortcut__thumbnail u-size--contain"
        :style="customStyle"
      />
      <svg-icon
        v-if="icon"
        class="o-widget-shortcut__logo"
        :icon-class="icon"
      />
      <span
        v-else
        class="o-widget-shortcut__logo text"
      >
        画布
      </span>
    </div>
    <div
      v-if="hasSources"
      class="o-widget-shortcut__assets"
    >
      <div
        v-for="source in sources"
        :key="source.id"
        class="o-widget-shortcut"
      >
        <div
          class="o-widget-shortcut__content thumbnail"
          @click="onView(source)"
        >
          <auto-image
            class="o-widget-shortcut__thumbnail"
            :placeholder="source.icon"
            :src="source.thumbnail"
          />
          <div
            v-if="needTag"
            class="o-widget-shortcut__tag"
          >
            {{ source.tag }}
          </div>
        </div>
        <div class="o-widget-shortcut__info u-ellipsis">{{ source.origin.name }}</div>
        <template v-if="source.editable">
          <div
            v-if="diffInterval"
            class="l-flex--row o-widget-shortcut__number"
            @mousedown.stop
          >
            <el-input-number
              v-model="source.origin.duration"
              class="l-flex__auto"
              size="mini"
              :min="1"
              :max="9999999"
              step-strictly
            />
            <div class="l-flex__none o-widget-shortcut__unit">秒</div>
          </div>
          <div
            v-else
            class="o-widget-shortcut__info u-ellipsis"
          >
            {{ duration }}
          </div>
        </template>
        <div
          v-else
          class="o-widget-shortcut__info u-ellipsis"
        >
          {{ source.duration }}
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { getThumbnailUrl } from '@/api/asset'
import { AssetType } from '@/constant'
import { parseDuration } from '@/utils'
import { WidgetType } from '../core/constant'
import { getIcon } from '../core/utils'

export default {
  name: 'WidgetShortcut',
  props: {
    widget: {
      type: Object,
      required: true
    },
    customStyle: {
      type: Object,
      default: null
    },
    sourceKey: {
      type: String,
      default: 'sources'
    },
    background: {
      type: [Boolean, String],
      default: false
    },
    editable: {
      type: [Boolean, String],
      default: false
    }
  },
  computed: {
    diffInterval () {
      return this.widget.sameInterval === 0
    },
    needTag () {
      return this.widget.type === WidgetType.MEDIA
    },
    icon () {
      return getIcon(this.widget.type)
    },
    sources () {
      return this.widget[this.sourceKey]?.map(this.transform) || []
    },
    hasSources () {
      return this.sources.length > 0
    },
    hasMore () {
      return this.sources.length > 1
    },
    duration () {
      return parseDuration(this.widget.interval)
    }
  },
  methods: {
    transform (data) {
      const type = data.type
      const source = {
        id: Math.random().toString(16).slice(2),
        origin: data,
        type,
        url: data.keyName,
        tag: this.getAssetType(type),
        duration: parseDuration(data.duration),
        editable: this.editable && type === AssetType.IMAGE
      }

      switch (type) {
        case AssetType.IMAGE:
          source.thumbnail = getThumbnailUrl(data.keyName)
          break
        default:
          if (data.thumbnail) {
            source.thumbnail = getThumbnailUrl(data.thumbnail)
          } else {
            source.icon = `${type === AssetType.VIDEO ? 'video' : 'audio'}-bg`
          }
          break
      }
      return source
    },
    getAssetType (type) {
      switch (type) {
        case AssetType.IMAGE:
          return '图片'
        case AssetType.VIDEO:
          return '视频'
        case AssetType.AUDIO:
          return '音频'
        default:
          return '媒资'
      }
    },
    onView (source) {
      this.$emit('view', source)
    }
  }
}
</script>

<style lang="scss" scoped>
.o-widget-shortcut {
  &.dark {
    .o-widget-shortcut__content {
      background-color: rgba(#fff, 0.1);
    }

    .o-widget-shortcut__logo {
      color: #fff;
    }
  }

  & + & {
    margin-top: 10px;
  }

  &__content {
    position: relative;
    padding-top: 40%;
    background-color: rgba(#000, 0.05);

    &.thumbnail {
      padding-top: 60%;
      background-color: #000 !important;

      .o-widget-shortcut__logo {
        color: #fff !important;
      }
    }
  }

  &__logo {
    position: absolute;
    top: 50%;
    left: 50%;
    font-size: 24px;
    white-space: nowrap;
    transform: translate(-50%, -50%);
    z-index: 9;

    &.text {
      font-size: 16px;
    }
  }

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

  &__assets {
    padding: 10px;
  }

  &__info {
    margin-top: 6px;
    font-size: 12px;
    line-height: 1;
  }

  &__tag {
    position: absolute;
    top: 0;
    right: 0;
    padding: 4px 6px 4px 8px;
    color: #fff;
    font-size: 12px;
    line-height: 1;
    border-bottom-left-radius: $radius;
    background-color: rgba(#000, 0.5);
  }

  &__number {
    margin-top: 6px;

    ::v-deep .el-input-number {
      height: 20px;
      line-height: 20px;
    }

    ::v-deep .el-input__inner {
      height: 20px;
      padding: 0 24px;
      color: #a8e3ff;
      line-height: 20px;
      border: 1px solid #3f5673;
      background-color: #263445;
    }

    ::v-deep span {
      top: 1px;
      width: 20px;
      height: 18px;
      color: #a8e3ff;
      border-color: #3f5673;
      background-color: #5e6b82;
    }
  }

  &__unit {
    margin-left: 4px;
    font-size: 12px;
  }
}
</style>
