<template>
  <div class="flex-container">
    <div class="file-list">
      <el-table :data="fileList" style="width: 100%" highlight-current-row @row-click="rowClick">
        <el-table-column label="文件列表">
          <template slot-scope="scope">
            <span style="margin-left: 10px">{{ scope.row.name|f_fileName }}</span>
          </template>
        </el-table-column>
      </el-table>
    </div>
    <div class="file-show">
      <template v-if="isImg(activeFile.url)">
        <el-image :fit="'fill'" :src="activeFile.url|f_url" />
      </template>
      <template v-if="isPdf(activeFile.url)">
        <pdf :src="activeFile.url|f_url" />
      </template>
    </div>
  </div>
</template>

<script>
import pdf from 'vue-pdf'

export default {
  components: {
    pdf
  },
  filters: {
    f_fileName(val) {
      return val.substring(0, val.lastIndexOf('-'))
    },
    f_url(val) {
      return `${window.SITE_CONFIG['apiURL']}/upload/${val}`
    }
  },
  props: {
    fileList: { type: Array, required: true }
  },
  data() {
    return {
      activeFile: {}
    }
  },
  watch: {
    fileList: {
      immediate: true,
      handler(val) {
        this.activeFile = this.fileList[0] || {}
      }
    }
  },
  mounted() {
    this.$nextTick(() => {
    })
  },
  methods: {
    fileType(url) {
      return url ? url.substring(url.lastIndexOf('.') + 1) : ''
    },
    isImg(url) {
      const type = this.fileType(url)
      return ['png', 'jpg', 'jpeg', 'bmp'].indexOf(type.toLowerCase()) >= 0
    // console.log(url, t, type, type.toLowerCase())
    },
    isPdf(url) {
      const type = this.fileType(url)
      return ['pdf'].indexOf(type.toLowerCase()) >= 0
    },
    rowClick(row) {
      this.activeFile = row
    }
  }

}
</script>

<style lang="scss" scoped>
.flex-container {
    display: flex;
    width: 100%;
    height: 100%;
    // height: 500px;
}
.file-list{
    // display:flex;
    width: 200px;
    height: 100%;
    margin-right: 20px;

    .file-item{
        display: block;
    }
}

.file-show{
    // display:flex;
    width: calc(100% - 220px);
    height: 100%;
    border:1px solid;
}
</style>
