<template>
  <div class="l-flex__auto l-flex--col has-padding">
    <c-table
      :curr="options"
      @pagination="getList"
    >
      <el-table-column
        label="缩略图"
        align="center"
        width="100"
        class-name="c-thumbnail-col"
      >
        <template v-slot="scope">
          <i
            v-if="scope.row.type === 1"
            class="o-thumbnail u-pointer"
            :style="{ 'background-image': `url('${scope.row.thumbnail}')` }"
            @click="toView(scope.row)"
          />
        </template>
      </el-table-column>
      <el-table-column
        prop="originalName"
        label="文件名"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createBy"
        label="申请人"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        prop="createTime"
        label="创建时间"
        align="center"
        show-overflow-tooltip
      />
      <el-table-column
        label="操作"
        align="center"
        width="180"
      >
        <template v-slot="scope">
          <div
            class="c-table__btn u-pointer"
            @click.stop="toView(scope.row)"
          >
            预览
          </div>
          <div
            class="c-table__btn u-pointer"
            @click.stop="toResolve(scope.row)"
          >
            通过
          </div>
          <div
            class="c-table__btn u-pointer"
            @click.stop="toReject(scope.row)"
          >
            驳回
          </div>
        </template>
      </el-table-column>
    </c-table>
    <preview ref="preview" />
  </div>
</template>

<script>
import {
  getAssets,
  getThumbnailUrl
} from '@/api/asset'
import mixin from './mixin'
import Preview from '@/components/Preview'

export default {
  name: 'ReviewAsset',
  components: {
    Preview
  },
  mixins: [mixin],
  methods: {
    _getList: getAssets,
    transform (asset) {
      if (asset.type === 1) {
        asset.thumbnail = getThumbnailUrl(asset.keyName, '64,fit')
      }
      asset.createBy = asset.userName || asset.createBy
      return asset
    },
    toView ({ type, keyName }) {
      this.$refs.preview.show({ type, keyName })
    }
  }
}
</script>

<style lang="scss" scoped>
</style>
