<template>
  <wrapper
    :vertical="false"
    fill
    margin
    padding
    background
  >
    <div class="l-flex__none c-media-type">
      <div
        v-for="tab in tabs"
        :key="tab.key"
        class="c-media-type__item section u-pointer"
        :class="{ active: type === tab.key }"
        @click="to(tab.key)"
      >
        <svg-icon
          class="c-media-type__icon"
          :icon-class="tab.icon"
        />
        {{ tab.label }}
      </div>
    </div>
    <component
      :is="activeComponent"
      :type="type"
      @view="onView"
    />
    <preview-dialog ref="previewDialog" />
  </wrapper>
</template>

<script>
import {
  Access,
  AssetType
} from '@/constant'
import Designer from './MediaDesigner'
import Viewer from './MediaViewer'

export default {
  name: 'MediaList',
  components: {
    Designer,
    Viewer
  },
  data () {
    return {
      type: AssetType.IMAGE,
      tabs: [
        { key: AssetType.IMAGE, label: '图片', icon: 'image' },
        { key: AssetType.VIDEO, label: '视频', icon: 'video' },
        { key: AssetType.AUDIO, label: '音频', icon: 'audio' },
        { key: AssetType.PPT, label: 'PPT', icon: 'ppt' },
        { key: AssetType.PDF, label: 'PDF', icon: 'pdf' },
        { key: AssetType.DOC, label: 'DOC', icon: 'doc' }
      ]
    }
  },
  computed: {
    activeComponent () {
      return this.accessSet.has(Access.MANAGE_CALENDAR)
        ? 'Designer'
        : 'Viewer'
    }
  },
  methods: {
    to (type) {
      if (this.type !== type) {
        this.type = null
        this.$nextTick(() => {
          this.type = type
        })
      }
    },
    onView (asset) {
      this.$refs.previewDialog.show(asset)
    }
  }
}
</script>

<style lang="scss">
.c-media-type {
  width: 177px;
  padding: 60px $spacing 20px 0;
  margin-right: $spacing;
  border-right: 1px solid $gray--light;

  &__item {
    display: flex;
    align-items: center;
    height: 38px;
    padding-left: 30px;
    font-size: 16px;
    line-height: 1;
    font-weight: bold;
    border-radius: $radius--mini;

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

    &.section {
      color: $gray;

      &:hover {
        background-color: $blue--light;
      }

      &.active {
        color: #fff;
        background-color: $blue;
      }
    }
  }

  &__icon {
    margin-right: 10px;
    font-size: 24px;
  }
}

.o-media-name {
  padding-left: 10px !important;
}
</style>
