<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>
    <div class="l-flex__auto l-flex--col">
      <el-tabs
        v-model="active"
        class="c-tabs has-bottom-padding"
      >
        <el-tab-pane
          label="待提交"
          name="0"
        />
        <el-tab-pane
          label="已审核"
          name="2"
        />
        <el-tab-pane
          label="待审核"
          name="1"
        />
        <el-tab-pane
          label="驳回"
          name="3"
        />
      </el-tabs>
      <schema-table
        v-if="type"
        ref="table"
        :schema="schema"
        :proxy.sync="currOptions"
        :header-cell-class-name="adjustHeader"
      />
    </div>
    <preview-dialog ref="previewDialog" />
  </wrapper>
</template>

<script>
import { State } from '@/constant'
import {
  addListener,
  removeListener
} from '@/utils/upload'
import mixin from './mixin'

export default {
  name: 'MediaDesigner',
  mixins: [mixin],
  created () {
    addListener('uploaded', this.onUploaded)
  },
  beforeDestroy () {
    removeListener('uploaded', this.onUploaded)
  },
  methods: {
    onUploaded ({ type }) {
      if (this.type === type && Number(this.active) === State.READY) {
        this.$refs.table.pageTo(1)
      }
    }
  }
}
</script>
