<template>
  <div class="l-flex__auto l-flex--col">
    <el-tabs
      :value="active"
      class="c-tabs has-bottom-padding"
      @tab-click="onTabClick"
    >
      <el-tab-pane
        label="待审核"
        name="101"
      />
      <el-tab-pane
        label="已审核"
        name="2"
      />
      <el-tab-pane
        label="驳回"
        name="3"
      />
    </el-tabs>
    <schema-table
      v-if="isVaild"
      ref="table"
      :schema="schema"
      :proxy.sync="currOptions"
      :header-cell-class-name="adjustHeader"
    />
  </div>
</template>

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

export default {
  name: 'MediaDesigner',
  mixins: [mixin],
  data () {
    return {
      active: `${State.AVAILABLE_ASSET}`
    }
  },
  computed: {
    isVaild () {
      return this.type && this.active
    }
  },
  created () {
    addListener('uploaded', this.onUploaded)
  },
  beforeDestroy () {
    removeListener('uploaded', this.onUploaded)
  },
  methods: {
    onUploaded ({ type }) {
      if (this.type === type && Number(this.active) === State.AVAILABLE_ASSET) {
        this.$refs.table.pageTo(1)
      }
    },
    onTabClick ({ name: active }) {
      if (this.active !== active) {
        this.active = null
        this.$nextTick(() => {
          this.active = active
        })
      }
    }
  }
}
</script>
