<template>
  <wrapper
    :vertical="false"
    fill
    margin
    padding
    background
  >
    <div class="l-flex__none c-media-type">
      <div
        class="c-media-type__item section u-pointer"
        :class="{ active: isImage }"
        @click="to('IMAGE')"
      >
        <svg-icon
          class="c-media-type__icon"
          icon-class="image"
        />
        图片
      </div>
      <div
        class="c-media-type__item section u-pointer"
        :class="{ active: isVideo }"
        @click="to('VIDEO')"
      >
        <svg-icon
          class="c-media-type__icon"
          icon-class="video"
        />
        视频
      </div>
      <div
        class="c-media-type__item section u-pointer"
        :class="{ active: isAudio }"
        @click="to('AUDIO')"
      >
        <svg-icon
          class="c-media-type__icon"
          icon-class="audio"
        />
        音频
      </div>
    </div>
    <schema-table
      v-if="type"
      ref="table"
      class="has-left-padding"
      :schema="schema"
      :proxy.sync="currOptions"
      :header-cell-class-name="adjustHeader"
    />
    <preview-dialog ref="previewDialog" />
  </wrapper>
</template>

<script>
import mixin from './mixin'

export default {
  name: 'MediaViewer',
  mixins: [mixin]
}
</script>
