<template>
  <schema-table :schema="schema">
    <div
      v-if="more"
      class="l-flex__none l-flex--row has-top-padding"
    >
      <div class="l-flex__auto" />
      <button
        class="l-flex__none c-sibling-item o-button"
        @click="onNext"
      >
        {{ btnMsg }}
      </button>
    </div>
    <program-dialog ref="programDialog" />
  </schema-table>
</template>

<script>
import { State } from '@/constant'
import mixin from './mixin'

export default {
  name: 'WorkflowReviewPrograms',
  mixins: [mixin],
  data () {
    return {
      type: 'item'
    }
  },
  computed: {
    schema () {
      return {
        condition: { pageSize: this.list.length },
        list: this.getList,
        cols: [
          { prop: 'file', label: '缩略图', type: 'asset', on: this.onView },
          { prop: 'name', label: '节目名称' },
          { prop: 'resolutionRatio', label: '分辨率' },
          ...this.reviewCol
        ]
      }
    }
  },
  created () {
    this.list = this.transform(this.workflow.items)
    if (!this.list.some(({ pass }) => !pass)) {
      this.$emit('next')
    }
  },
  methods: {
    transform (arr) {
      return arr.map(this.transformItem).sort((a, b) => a.status - b.status)
    },
    transformItem (program) {
      return {
        pass: program.status !== State.SUBMITTED,
        id: program.id,
        file: program.img ? { id: program.id, thumbnail: program.img } : null,
        name: program.name,
        resolutionRatio: program.resolutionRatio,
        status: program.status
      }
    },
    onView ({ id }) {
      this.$refs.programDialog.show(id)
    }
  }
}
</script>
