<template>
  <div class="app-container">
    <formSearch :withoutSearchButton="true" :searchformShow="{subjectid:'',workSource:'1'}" @change="handleQuery"
      @handleQuery="handleQuery">
    </formSearch>
    <mx-table :propDefines="propDefines" :rows="dataList">
      <template #index="{$index}">
        <span>{{(queryParams.pageNum-1)*queryParams.pageSize+$index+1}}</span>
      </template>
      <template #cover-view="{row}">
        <img @click="playVideo(row)" :src="typeCoverImages[type]" class="videoImage" />
      </template>
      <template #icon-title="{value,row}">
        <img src="../../../assets/images/word.png"
          v-if="row.resourcesUrl.toLowerCase().endsWith('doc')||row.resourcesUrl.toLowerCase().endsWith('docx')"
          class="titleIcon" />
        <img src="../../../assets/images/ppt.png" v-if="row.resourcesUrl.toLowerCase().endsWith('ppt')"
          class="titleIcon" />
        <img src="../../../assets/images/pdf.png" v-else-if="row.resourcesUrl.toLowerCase().endsWith('pdf')"
          class="titleIcon" />
        <img src="../../../assets/images/icon_dantiweike.png" v-else-if="row.resourcesUrl.toLowerCase().endsWith('mp4')"
          class="titleIcon" />
        {{value}}
      </template>
      <template #creation-info="{row}">
        <div>{{row.createBy}}</div>
        <div>{{row.createTime}}</div>
      </template>
      <template #action-preview="{row}">
        <el-button type="text" icon="el-icon-view" @click="handleView(row)">预览/下载</el-button>
      </template>
    </mx-table>
    <pagination v-show="total > queryParams.pageSize" :total="total" :page.sync="queryParams.pageNum"
      :limit.sync="queryParams.pageSize" :page-size="20" @pagination="getList" />
    <el-dialog title="查看视频" :visible.sync="dialogVideo" width="60%">
      <mx-video v-if="dialogVideo" :aliIdType="aliIdType" :src="src" controls></mx-video>
    </el-dialog>
  </div>
</template>

<script>
  import * as webQue from '@/api/webApi/webQue.js'
  export default {
    props: {
      type: {
        type: String | Number,
        default: '0' // 0:文件 1：视频
      },
      propDefines: {
        type: Object,
        default: _ => {}
      }
    },
    data() {
      return {
        total: 0,
        dataList: [],
        typeCoverImages: {
          '0': require('@/assets/images/ship.png'),
          '1': require('@/assets/images/ship.png')
        },
        queryParams: {
          pageNum: 1,
          pageSize: 20,

          subjectId: '',
          source: '',
          type: this.type
        },
        dialogVideo: false,
        aliIdType: '',
        src: ''
      }
    },
    created() {

    },
    methods: {
      handleQuery(model = {}) {
        this.queryParams.pageNum = 1
        this.queryParams.subjectId = model.subjectid || ''
        this.queryParams.source = model.workSource || ''

        this.getList()
      },
      getList() {
        webQue.getResources(this.queryParams).then(res => {
          this.dataList = res.rows
          this.total = res.total
        })
      },
      handleView(row) {
        if (row.resourcesUrl.indexOf('.pdf') != -1) {
          window.open('/pdfView/index.html?src=' + row.resourcesUrl)
        } else if (row.resourcesUrl.indexOf('.doc') != -1 || row.resourcesUrl.indexOf('.ppt') != -1 || row.resourcesUrl
          .indexOf('.xls') != -1 || row.resourcesUrl.indexOf('.xlsx') != -1) {
          window.open('https://view.officeapps.live.com/op/view.aspx?src=' + row.resourcesUrl)
        } else if (row.resourcesUrl.indexOf('.mp4') != -1) {
          this.aliIdType = row.aliIdType;
          this.src = row.resourcesUrl;
          this.dialogVideo = true
        } else {
          this.$message.error('格式错误，无法预览该格式文件！');
        }
      },
      playVideo(row) {     
        this.aliIdType = row.aliIdType;
        this.src = row.resourcesUrl;
        this.dialogVideo = true;
      },
    }
  }
</script>

<style>
  .videoImage {
    width: 130px;
    height: 80px;
    cursor: pointer
  }

  .titleIcon {
    height: 24px;
    margin-right: 5px;
  }
</style>
