<template>
  <div>
    <!-- <Remark> 关于课程 的上传流程需要讨论一下 <br/> 文档类的比如word文档，转化成pdf显示</br>
    批量操作还存在疑问，如果是批量操作可见性，那么保存和批量操作不是功能重复了？
    </Remark> -->
    <el-container>
      <el-header style="height:120px">
        <div style="padding: 12px 0px 10px 0px;  position: relative;" >
          <!-- <el-row :gutter="20">
             <el-col :span="3" style="margin-left:88%">
              <div class="grid-content bg-purple" style="line-height: 34px; "><el-checkbox v-model="params.self">只看自己</el-checkbox></div>
            </el-col> -->
          <!-- </el-row> -->
          <el-row :gutter="20">
            <!--
            <el-col :span="6">
              <div class="grid-content bg-purple">
                <el-cascader style="margin-left: 0px" placeholder="资源归属" :options="resOwnerListMap" :props="defaultProps" v-model="resOwner" clearable></el-cascader>
              </div>
            </el-col>
            -->
            <el-col :span="4">
              <div class="grid-content bg-purple"><el-input v-model="params.name" placeholder="名称" clearable></el-input></div>
            </el-col>
            <el-col :span="4">
              <div class="grid-content bg-purple"><el-input placeholder="创建人" v-model="params.sysCreateBy" clearable></el-input></div>
            </el-col>
             <el-col :span="4">
              <div class="grid-content bg-purple">
                <el-select v-model="params.resType" clearable placeholder="课件类型">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div>
            </el-col>
             <el-col :span="8" >
              <div class="grid-content bg-purple" >
                <el-button type="primary" style="margin-left: 0px" @click="search()" icon="el-icon-search">搜索</el-button>
                <el-button @click="reset()" style="margin-left: 20pxpx" type="primary" icon="el-icon-refresh-right">重置</el-button>
              </div>

            </el-col>
          </el-row>

           <el-row :gutter="20" style="margin-top:15px;margin-bottom:15px">
            <el-col :span="4" style="margin-left:0%;">
              <div class="grid-content bg-purple">
                <el-button @click="addFile()" type="primary" icon="el-icon-plus">上传课件</el-button>
              </div>
            </el-col>
            <el-col :span="6">
              <div class="grid-content bg-purple" style="line-height: 34px;">
                <el-checkbox v-model="params.self" @change="getSearch()">仅显示我上传的</el-checkbox>
                 <!-- <el-checkbox v-model="params.self" label="只看自己" border></el-checkbox> -->
                </div>
            </el-col>
            <!-- <el-col :span="6">

            </el-col> -->

          </el-row>
          <!-- <div><el-button @click="addFile()" type="primary">上传课件</el-button></div> -->
          <!-- <el-cascader style="margin-left: 10px" placeholder="资源归属" :options="resOwnerList" :props="defaultProps"   v-model="resOwner" clearable></el-cascader> -->
          <!-- <div> -->
          <!-- <div style="display: flex; justify-content: flex-end"> -->

          <!-- <div class="one_search"><el-input v-model="params.name" placeholder="名称关键字" clearable></el-input></div> -->
          <!-- <div class="two_search" style="margin-left: 10px">
                <el-select v-model="params.resType" clearable placeholder="课件类型" style="margin-left: 10px">
                  <el-option v-for="item in options" :key="item.value" :label="item.label" :value="item.value"></el-option>
                </el-select>
              </div> -->
          <!-- <el-button type="primary" style="margin-left: 10px" @click="getSearch()">查询</el-button> -->
          <!-- </div> -->
          <!-- </div> -->
        </div>
      </el-header>
      <el-container style="min-height: 500px; margin:0px 10px; ">
        <el-main>
          <el-table border stripe :data="tableData" style="width: 100%">
            <el-table-column label="序号" type="index" width="50"></el-table-column>
            <el-table-column prop="name" show-overflow-tooltip label="名称" width="200">
              <template slot-scope="scope">
                <span class="previewStyle" @click="viewTopic(scope.row)">{{ scope.row.name }}</span>
              </template>
            </el-table-column>
            <!-- 点击名称预览 -->
            <el-table-column prop="resType" label="类型">
              <template slot-scope="scope">
                {{ getType(scope.row.resType) }}
              </template>
            </el-table-column>
            <!-- <el-table-column prop="type" label="资源归属" width="400" show-overflow-tooltip>
              <template slot-scope="scope">
                <span>{{ resOwnerName(scope.row.resOwner1) }}</span>
                <span v-if="scope.row.resOwner2 != ''">/{{ resOwnerName(scope.row.resOwner2) }}</span>
                <span v-if="scope.row.resOwner3 != ''">/{{ resOwnerName(scope.row.resOwner3) }}</span>
              </template>
            </el-table-column> -->
            <el-table-column prop="resType" label="创建人">
              <template slot-scope="scope">
                {{ scope.row.sysCreateBy }}
              </template>
            </el-table-column>
            <el-table-column prop="resType" label="上传时间" width="200">
              <template slot-scope="scope">
                {{ scope.row.sysCreateTime }}
              </template>
            </el-table-column>

            <el-table-column prop="fileName" label="文件名" width="200" show-overflow-tooltip></el-table-column>
            <el-table-column label="操作" width="160px" fixed="right">
              <template slot-scope="scope">
                <el-button type="text" size="mini" v-if="scope.row.down" @click="downloadFile(scope.row)">下载</el-button>
                <el-button type="text" size="mini" @click="editFile(scope.row)">编辑</el-button>
                <el-button type="text" size="mini" @click="deleteCourseware(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <div v-if="tableData.length > 0" style="text-align: center;margin-top:70px">
            <el-pagination background
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange"
              :current-page="page.pageIndex"
              :page-sizes="[10, 20, 30, 40]"
              :page-size="page.pageSize"
              layout="total, sizes, prev, pager, next, jumper"
              :total="page.count"
            ></el-pagination>
          </div>
        </el-main>
      </el-container>
    </el-container>
    <el-dialog title="上传课件" :close-on-click-modal="false" :close-on-press-escape="false" top="10vh" width="800px" :visible.sync="upload.show" :before-close="handleCloseCheck" custom-class="g-dialog">
      <div>
        <div style="line-height: 30px;">
          <div>请在当前面板选择需要上传的课件</div>
          <div style="">提示：课件大小超过1G时，无法上传，请先压缩视频，或剪切成多个再上传。如果上传zip文件必须是scorm标准打包文件</div>
        </div>
        <div>
          <div style="display: flex;line-height: 30px;padding: 5px 0px;">
            <el-input :readonly="true" placeholder="请选择资源归属" v-model="upload.orgName" style="width: 300px;">
                <el-button  v-if="identity==3 || identity==5" @click="showChooseOrg()" size="small" slot="append" icon="el-icon-search">选择</el-button>
            </el-input>
           <!-- <el-cascader clearable v-model="projectOwnership" :options="resOwnerListMap" :props="defaultProps" @change="handleChange"></el-cascader> -->
          </div>
          <!-- <div style="margin-top: 10px" v-if="isUpload"><el-button type="primary" size="mini" @click="isUploadHandle()">选择文件并上传</el-button></div> -->
          <div style="margin-top: 10px;margin-bottom: 10px;">
            <div style="float: right;">
               <el-checkbox v-model="deviceMobile" @change="isVisible(1)" label="移动端可见" border></el-checkbox>
               <el-checkbox v-model="devicePc" @change="isVisible(2)" label="pc端可见" border></el-checkbox>
            </div>
            <file-upload scorm="zip" dir="files" :beforeMsg="needOrg" :showList="true" :value="imageShowUrl" :limit="5" @success="handleUploadSuccess" @remove="handleRemoveSuccess"></file-upload>
          </div>

        </div>
        <div style="margin-top: 10px">
          <el-table border stripe :data="fileList" style="width: 100%" @selection-change="handleSelectionChange">
            <!-- <el-table-column type="selection" width="40"></el-table-column> -->
            <el-table-column prop="fileName" label="文件名称"></el-table-column>
            <el-table-column prop="name" label="课件名称">
              <template slot-scope="scope">
                <el-input type="text" v-model="scope.row.name"></el-input>
              </template>
            </el-table-column>
            <el-table-column prop="resType" label="类型" width="80">
              <template slot-scope="scope">
                {{ getType(scope.row.resType) }}
              </template>
            </el-table-column>
            <el-table-column prop="duration" label="时长(分)"  width="100">
              <template slot-scope="scope">
                <el-input type="number" size="small" v-model="scope.row.minute"></el-input>
              </template>
            </el-table-column>
            <el-table-column label="可见性" width="100">
              <template slot-scope="scope">
                <el-checkbox label="移动端" v-model="fileList[scope.$index].device1"></el-checkbox>
                <el-checkbox label="pc端" v-model="fileList[scope.$index].device2"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="允许下载" width="80" align="center">
              <template slot-scope="scope">
                <el-checkbox v-model="fileList[scope.$index].down"></el-checkbox>
              </template>
            </el-table-column>
            <el-table-column label="操作" width="60">
              <template slot-scope="scope">
                <el-button type="text" @click="deleteFile(scope.row)">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
        </div>
      </div>
      <span slot="footer">
        <!-- <el-button type="infor" @click="isVisible(1)">移动端可见</el-button>
        <el-button type="infor" @click="isVisible(2)">pc端可见</el-button> -->
        <el-button type="primary" @click="saveUpload()">保存</el-button>
      </span>
    </el-dialog>
    <el-dialog v-if="coursewareShow" title="预览课件" :close-on-click-modal="false" width="800px" :visible.sync="coursewareShow" custom-class="g-dialog">
      <div>
        <div class="courseware-title">{{ fileInfo.name }}</div>
        <div class="courseware-icon">
          <div v-if="fileInfo.resType == 10" style="position: relative;">
            <videoPlayer
              :src="fileBaseUrl + fileInfo.filePath"
              @onPlayerPlaying="onPlayerPlaying"
              @onPlayerPlay="onPlayerPlay"
              @onPlayerPause="onPlayerPause"
              @onPlayerEnded="onPlayerEnded"
            ></videoPlayer>
            <!-- <video :src="fileBaseUrl + fileInfo.filePath" controls controlslist="nodownload" style="width: 100%; height: 100%; object-fit: fill"></video> -->
          </div>
          <div v-if="fileInfo.resType == 20">
            <audioPlayer
              :url="fileBaseUrl + fileInfo.filePath"
              :name="fileInfo.fileName"
              @onPlaying="audioPlaying"
              @onPlay="audioPlay"
              @onPause="audioPause"
              @onPlayEnd="audioEnd">
            </audioPlayer>
            <!-- <audio width="100%" controls :src="fileBaseUrl+fileInfo.filePath">
                   您的浏览器不支持 audio 标签。
              </audio> -->
          </div>
          <div v-if="fileInfo.resType == 30"><img style="width:100%;height:100%" :src="fileBaseUrl + fileInfo.filePath" alt="图片" /></div>
          <div v-if="fileInfo.resType == 40"><pdfPreview :filePath="fileBaseUrl + fileInfo.previewFilePath"></pdfPreview></div>
          <div v-if="fileInfo.resType == 50"> <!--scorm课件预览-->
              <iframe v-if="scormUrl" :src="scormUrl" frameborder="0" border="0px" style="width:100%;height:530px;border:0px;"></iframe>
          </div>
        </div>
      </div>
      <span slot="footer"><el-button type="primary" @click="coursewareShow = false">关闭</el-button></span>
    </el-dialog>
    <el-dialog v-if="editCoursewareShow" title="编辑课件" :close-on-click-modal="false" :visible.sync="editCoursewareShow" custom-class="g-dialog">
      <div>
        <el-form ref="form" :model="form" label-width="80px">
          <!-- <el-form-item label="资源归属">
            <el-cascader v-model="projectOwnership1" :options="resOwnerListMap" :props="defaultProps" @change="handleChange"></el-cascader>
          </el-form-item> -->
          <!-- <el-form-item label="编号">{{}}</el-form-item> -->
          <el-form-item label="资源归属">{{ form.orgName }}</el-form-item>
          <el-form-item label="文件名称">{{ form.fileName }}</el-form-item>
          <el-form-item label="课件名称"><el-input v-model="form.name"  maxlength="50" show-word-limit></el-input></el-form-item>
          <el-form-item label="课件类型">{{ getType(form.resType) }}</el-form-item>
          <el-form-item label="时长(分)">
            <!-- <el-input v-model="form.duration"></el-input> -->
            <el-input type="number" placeholder="请输入数字" :maxlength="32" show-word-limit v-model="form.minute"></el-input>
            <!-- <el-input-number max="" v-model="form.duration" controls-position="right"></el-input-number> -->
          </el-form-item>
          <el-form-item label="可见性">
            <el-checkbox label="移动端" v-model="form.device1"></el-checkbox>
            <el-checkbox label="pc端" v-model="form.device2"></el-checkbox>
          </el-form-item>
          <el-form-item label="允许下载">
            <el-checkbox label="允许" v-model="form.down"></el-checkbox>
          </el-form-item>
        </el-form>
      </div>
      <span slot="footer"><el-button :loading="loading" type="primary" @click="saveUpdate()">保存</el-button></span>
    </el-dialog>
    <chooseOrg ref="refChooseOrg" @confirm="confirmChooseOrg"></chooseOrg>
  </div>
</template>
<script>
import coueseFile from '@/api/modules/courseFile';
import FileUpload from '@/components/FileUpload/index.vue';
import { getType, deepCopy, toContentType } from '../../utils/tools.js';
import pdfPreview from '@/components/PdfPreview/index.vue';
import { mapGetters, mapActions } from 'vuex';
import videoPlayer from '@/components/VideoPlayer/index.vue';
import audioPlayer from '@/components/AudioPlayer/index.vue';
import chooseOrg from '@/components/System/chooseOrg.vue';
import apiUserBasic from '@/api/boe/userbasic.js';
export default {
  components: { FileUpload, pdfPreview, videoPlayer, audioPlayer,chooseOrg},
  computed: {
    ...mapGetters(['resOwnerMap', 'sysTypeMap','identity','userInfo'])
  },
  data() {
    return {
      resOwnerListMap: [],
      //fileBaseUrl: process.env.VUE_APP_FILE_BASE_URL,
      fileBaseUrl:this.$xpage.constants.fileBaseUrl, //获成动态获取的处理
      getType: getType,
      loading: false,
      defaultProps: {
        value: 'code',
        label: 'name'
      },
      // resOwnerName: resOwnerIndexName,
      isUpload: true,
      fileInfo: {},
      device1: 1,
      device2: 2,
      projectOwnership1: '',
      imageShowUrl: '',
      page: {
        count: 0,
        pageSize: 10,
        pageIndex: 1
      },
      resOwner: [],
      params: {
        name: '', //查,询的名称的关键字
        self: null, //默认是true,是否只查询自己上传的课件
        resOwner1: '', //资源归属一级的id
        resOwner2: '', //资源归属二级的id
        resOwner3: '', // 资源归属三级的id
        resType: '' //文件类型,10视频，20音频，30图片， 40 文档，41表图文，50表scrom包,90表其它
      },
      options: [
        { value: null, label: '全部' },
        { value: 10, label: '视频' },
        { value: 20, label: '音频' },
        { value: 30, label: '图片' },
        { value: 40, label: '文档' },
        { value: 50, label: "scrom" }
      ],
      form: {
        id:'',
        device1:false,
        device2:false,
        fileName:'',
        name:'',
        resType:'',
        duration:0,
        minute:0,
        down:false
      },
      editCoursewareShow: false,
      currentPage4: 4,
      projectOwnership: [],
      videoPathUrl: '',
      coursewareShow: false,
      tableData: [], //Array(10).fill(item)
      // params: { code: '', ctype: '' },
      data: [],
      // defaultProps: { children: 'children', label: 'label' },
      upload: {
        show: false,
        orgId:'',
        orgName:''
      },
      needOrg:'',//如果有值，上传前会提示
      fileList: [],
      courseShow: false,
      devicePc:true,
      deviceMobile:true,
      scormUrl:'',//scorm的播放地址
      multipleSelection: []
    };
  },
  watch: {
    projectOwnership(val) {
      if (val.length !== 0) {
        this.isUpload = false;
      } else {
        this.isUpload = true;
      }
    },
    resOwner(val) {
      if (val.length !== 0) {
        this.params.resOwner1 = val[0];
        this.params.resOwner2 = val[1];
        this.params.resOwner3 = val[2];
      } else {
        this.params.resOwner1 = '';
        this.params.resOwner2 = '';
        this.params.resOwner3 = '';
      }
    }
  },
  mounted() {
    this.upload.orgId=this.userInfo.departId;
    // this.upload.orgName=this.userInfo.departName;
    // this.needOrg='';
    //console.log(this.upload.orgId,'this.upload.orgId')
    if(this.upload.orgId){
       apiUserBasic.getOrgInfo(this.upload.orgId).then(rs=>{
         if(rs.status==200){
             this.upload.orgName=rs.result.name;
             this.needOrg='';
          }
       });
    }
    this.loadResOwners();
    this.getResOwnerTree().then(rs => {
      this.resOwnerListMap = rs;
    });
    this.search();
  },
  methods: {
    beforeCheck(){
      if(!this.upload.orgId ||!this.upload.orgName){
          return false;
      }
      return true;
    },
    showChooseOrg(){
       this.$refs.refChooseOrg.dlgShow = true;
    },
    confirmChooseOrg(orgInfo){
      //console.log(orgInfo,'orgInfo');
      this.upload.orgId=orgInfo.id;
      this.upload.orgName=orgInfo.name;
      this.needOrg='';
      this.$refs.refChooseOrg.dlgShow = false;
      // this.orgName=orgInfo.name;
      // this.courseInfo.orgId=orgInfo.id;
      // this.$refs.refChooseOrg.dlgShow = false;
    },
    search(){
      //this.params.pageIndex = 1;
      this.page.pageIndex=1;
	    this.getSearch();
    },
    reset() {
      this.params.self = null;
      this.params.name = '';
      this.params.resType = '';
      this.resOwner = [];
      this.params.sysCreateBy = '';
      this.params.resOwner1 = '';
      this.params.resOwner2 = '';
      this.params.resOwner3 = '';
      //this.params.pageIndex = 1;
      this.page.pageIndex=1;
	    this.getSearch();
    },
    ...mapActions({
      getResOwnerTree: 'resOwner/getResOwnerTree',
      loadResOwners: 'resOwner/loadResOwners'
    }),
    resOwnerName(code) {
      if (code == '') {
        return '';
      }
      return this.resOwnerMap.get(code);
    },
    onPlayerPlay() {
      console.log('开始播放');
    },
    onPlayerPause() {
      console.log('暂停');
    },
    onPlayerEnded() {
      console.log('播放结束');
    },
    onPlayerPlaying(itme) {
      console.log('当前播放' + itme);
    },
    audioPlaying(item) {
      console.log('当前播放' + item);
    },
    audioPlay() {
      console.log('开始播放');
    },
    audioPause() {
      console.log('暂停');
    },
    audioEnd() {
      console.log('播放结束');
    },
    addFile() {
      this.upload.show = true;
      this.projectOwnership = [];
      this.fileList = [];
    },
    isUploadHandle() {
      this.$message.warning('请选择资源归属！');
    },
    // 编辑保存
    async saveUpdate() {
      this.form.resOwner1 = this.projectOwnership1[0]; //资源归属一级的id
      this.form.resOwner2 = this.projectOwnership1[1]; //资源归属二级的id
      this.form.resOwner3 = this.projectOwnership1[2]; //资源归属三级的id
      if (this.form.device1 === true && this.form.device2 === true) {
        this.form.device = 3;
      } else if (this.form.device1 === true) {
        this.form.device = 1;
      } else if (this.form.device2 === true) {
        this.form.device = 2;
      }
      // 时长，秒与分钟的转化
      if (this.form.minute) {
        this.form.duration = this.form.minute * 60;
      }

      try {
        const { status,message} = await coueseFile.batchUpdate([this.form]);
        if (status === 200) {
          this.$message.success('保存成功');
          this.editCoursewareShow = false;
          this.getSearch();
        } else {
          this.$message.error(message);
        }
      } catch (error) {
        this.$message.error(error);
        this.editCoursewareShow = false;
      }
    },

    isVisible(num) {
      var mflag=this.deviceMobile;
      var pflag=this.devicePc;
      this.fileList.forEach((item, i) => {
          if (num === 1) {
            item.device1 = mflag;
            this.$set(this.fileList, i, item);
          } else {
            item.device2 = pflag;
            this.$set(this.fileList, i, item);
          }
      });
      this.$forceUpdate();
      // let ids = [];
      // this.multipleSelection.forEach(item => {
      //   ids.push(item.id);
      // });
      // //待完善
      // for (let index = 0; index < ids.length; index++) {
      //   this.fileList.forEach((item, i) => {
      //     if (item.id === ids[index]) {
      //       if (num === 1) {
      //         item.device1 = true;
      //         this.$set(this.fileList, i, item);
      //       } else {
      //         item.device2 = true;
      //         this.$set(this.fileList, i, item);
      //       }
      //       this.$forceUpdate();
      //     }
      //   });
      // }
    },
    handleUploadSuccess(rs) {
      if (rs.status === 200) {
        let type = toContentType(rs.result.fileType);
        // ["doc", "xls", "ppt","docx", "xlsx", "pptx","png","txt", "pdf","jpg","gif","bmp","mp4","mp3"]
        if(rs.result.displayName.length > 100){
          this.$message.error('文件名称请不要超过100个字符');
          return;
        }
        //console.log('上传文件：'+rs.result.displayName);
        const data = {
          orgId:this.upload.orgId,
          orgName:this.upload.orgName,
          fileName: rs.result.displayName,
          fileType: rs.result.fileType.toLowerCase(), //文件的后缀名，比如：mp4
          filePath: rs.result.filePath, // 文件的保存路径
          resOwner1: this.projectOwnership[0], //资源归属一级的id
          resOwner2: this.projectOwnership[1], //资源归属二级的id
          resOwner3: this.projectOwnership[2], //资源归属三级的id
          resType: type //文件类型,10视频，20音频，30图片， 40 文档，50表图文，60表scrom包,90表其它，
          // remark: 备注说明，可以为空，不填
        };
        //try {
          coueseFile.saveUpload(data).then(res=>{
            if(res.status==200){
              //console.log('上传文件成功：'+rs.result.displayName);
              res.result.device1 = true;
              res.result.device2 = true;
              res.result.minute='';
              if(res.result.duration){
                res.result.minute=Math.round(res.result.duration/60); //四舍五入
              }
              this.fileList.push(res.result);
            }else{
              this.$message.error(res.message);
            }
          }).catch (error=>{
            console.log(error,'error')
            //this.$message.error(error);
          });
          // const { result, status } = coueseFile.saveUpload(data);
          // if (status === 200) {
          //   console.log('上传文件成功：'+rs.result.displayName);
          //   result.device1 = true;
          //   result.device2 = true;
          //   result.minute='';
          //   if(result.duration){
          //     result.minute=Math.round(result.duration/60); //四舍五入
          //   }

          //   this.fileList.push(result);
          // } else {
          //   this.$message.error(error);
          // }
        //} catch (error) {
        //  this.$message.error(error);
        //}
      } else {
        this.$message.error(rs.message);
      }
    },
    handleRemoveSuccess(res) {

    },
    handleCloseCheck(done){
      //console.log('关闭的处理aaaaa');
      if(this.fileList.length>0){
        this.$message.error('有待保存的上传文件，请执行保存操作');
        return false;
      }else{
        return done(true);
      }

    },
    // 文件上传保存
    saveUpload() {
      if(!this.upload.orgName){
        this.$message.success('请选择资源归属');
        return;
      }
      this.fileList.forEach(item => {
        if (item.device1 === true && item.device2 === true) {
          item.device = 3;
        } else if (item.device1 === true) {
          item.device = 1;
        } else if (item.device2 === true) {
          item.device = 2;
        }
        //转化为秒
        // if(item.minute){
        //    item.duration=parseFloat(item.minute)*60;
        // }
        // 如果没有给一个默认值30分钟
        item.duration = item.minute ? parseFloat(item.minute) * 60 : 1800;
      });
      this.loading = true;
      coueseFile.batchUpdate(this.fileList).then(rs => {
        if (rs.status === 200) {
          this.$message.success('保存成功');
          this.fileList=[];
          this.getSearch();
          this.upload.show = false;
        } else {
          this.$message.error(rs.message);
        }
        this.loading = false;
      });
    },
    // 列表查询
    async getSearch() {
      try {
        // this.params.count = this.page.count;
        this.params.pageSize = this.page.pageSize;
        this.params.pageIndex = this.page.pageIndex;
        const { result, error, status } = await coueseFile.pageList(this.params, this.page);
        if (status === 200) {
          result.list.forEach(item=>{
            item.minute=Math.round(item.duration/60);//转化为分钟
          })
          this.tableData = result.list;
          this.page.count = result.count;
          this.page.pageSize = result.pageSize;
          // this.page.totalPages = result.totalPages;
        }
      } catch (error) {}
    },
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    editFile(row) {
      coueseFile.detail(row.id).then(res=>{
        if(res.status == 200) {
            this.form = res.result;
            if(this.form.duration){
               this.form.minute=Math.round(res.result.duration/60);//转化为分钟
            }else{
               this.form.minute=0;
            }
            if (res.result.resOwner3 == '') {
              this.projectOwnership1 = [res.result.resOwner1, res.result.resOwner2];
            } else {
              this.projectOwnership1 = [res.result.resOwner1, res.result.resOwner2, res.result.resOwner3];
            }
            if (res.result.device === 1) {
              this.form.device1 = true;
            } else if (res.result.device === 2) {
              this.form.device2 = true;
            } else if (res.result.device === 3) {
              this.form.device1 = true;
              this.form.device2 = true;
            }
            if(!res.result.orgName && res.result.orgId){
                apiUserBasic.getOrgInfo(res.result.orgId).then(rs=>{
                  if(rs.status==200){
                      this.form.orgName=rs.result.name;
                   }
                });
            }
          }
      })
      this.editCoursewareShow = true;
    },
    handleSizeChange(val) {
      this.page.pageSize = val;
      this.page.pageIndex = 1;
      this.getSearch();
    },
    handleCurrentChange(val) {
      this.page.pageIndex = val;
      this.getSearch();
    },
    handleChange(value) {
      this.projectOwnership = value;
    },
    downloadFile(row) {
      if (!row.filePath) return;
      let link = document.createElement('a'); //创建a标签
      link.style.display = 'none'; //使其隐藏
      link.download = this.fileBaseUrl + row.filePath;
      link.setAttribute('target', '_blank');
      link.href = this.fileBaseUrl + row.filePath; //赋予文件下载地址
      link.setAttribute('download', row.name); //设置下载属性 以及文件名
      document.body.appendChild(link); //a标签插至页面中
      link.click(); //强制触发a标签事件
      document.body.removeChild(link);
    },
    deleteFile(row) {
      this.fileList.forEach((item, index) => {
        if (item.id === row.id) {
          this.fileList.splice(index, 1);
        }
      });
    },
    uploadFile() {
      if (this.projectOwnership.length === 0) return this.$message.warning('请选择项目归属！');
    },
    deleteCourseware(row) {
      this.$confirm('此操作将数据永久删除, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(async () => {
          let params = {
            id: row.id,
            filePath: row.filePath, //文件的路径
            flag: true
          };
          const { status } = await coueseFile.delFile(params);
          if (status === 200) {
            this.$message({
              type: 'success',
              message: '删除成功!'
            });
            this.getSearch();
          }
        })
        .catch(err => {
          this.$message({
            type: 'info',
            message: '已取消删除'
          });
        });
    },
    viewCourseware(row) {
      this.coursewareShow = true;
      this.videoPathUrl = row.pathUrl;
    },
    viewTopic(row) {
      this.fileInfo = row;//这里的fileInfo 相当于内容对象
      if(row.resType==50){
        if(!row.content){
          this.$message({type: 'error',message: '无SCORM内容，SCORM包解析失败'});
          return;
        }
        //scorm课件的内容，取第一个sco
        var scorm=JSON.parse(row.content);
        //console.log(scorm,'scorm')
        if(scorm){
          let urlPre=window.location.protocol;
          let configUrl=process.env.VUE_APP_SCORM_URL;
          configUrl=urlPre+configUrl.substring(configUrl.indexOf(':')+1);
          //这里需要提取的到配置文件中，实际中只需要传 rowId就可以了
          this.scormUrl=configUrl+'?mode=preview&scormId='+row.id;//播放的首页
        }else{
          this.$message({type: 'error',message: 'SCORM包解析失败'});
        }

      }else if(row.resType==40){
        if(!row.previewFilePath){
          row.previewFilePath=row.filePath;
        }
      }
      //console.log(row, 'row');
      this.coursewareShow = true;
    }
  }
};
</script>

<style lang="scss" scoped>
.butpost{
  position: absolute;
  right: 1%;
}
.butpost2{
   position: absolute;
   right: 1%;
}
.el-col {
  padding: 0 0 0 10px !important;
}
.grid-content {
  padding-right: 0px;
}
.el-button--text {
  font-size: 14px;
}
.el-aside {
  margin: 0px;
  padding: 0px 2px 10px 0px;
}
.el-main {
  margin: 0px;
  padding: 0px 10px;
}
.courseware-title {
  font-size: 24px;
  font-weight: 700;
  margin-left: 50px;
}
.courseware-icon {
  text-align: center;
  width: 100%;
  min-height: 400px;
}
</style>
