<template>
  <div class="app-warp">
    <div class="app-structure">
      <div class="app-search">
        <div class="app-search-form">
          <div class="form-item">
            <label> 课件名称：</label>
            <el-input v-model="listQueryForm.KEYWORDS" placeholder="搜索课件名称" clearable @clear="getQuery"/>
          </div>
          <div class="form-item">
            <label> 培训类型：</label>
            <el-select v-model="listQueryForm.TRAINTYPE" placeholder="请选择">
              <el-option v-for="item in dicListMap.trainDicList" :key="item.TRAININGTYPE_ID" :label="item.NAME" :value="item.TRAININGTYPE_ID" />
            </el-select>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label> 行业类型：</label>
            <SelectTree ref="keyIndTypeRef" :options="listQueryForm.industryTreeData" :props="industryProps" v-model="listQueryForm.INDUSTRY" placeholder="请选择培训行业类型" />
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label> 岗位类型：</label>
            <el-select v-model="listQueryForm.POSTTYPE" placeholder="请选择">
              <el-option v-for="item in dicListMap.postDicList" :key="item.POSTTYPE_ID" :label="item.NAME" :value="item.POSTTYPE_ID" />
            </el-select>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label> 课件状态：</label>
            <el-select v-model="listQueryForm.vidSate" placeholder="请选择" >
              <el-option v-for="item in vidStateList" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label> 是否完善：</label>
            <el-select v-model="listQueryForm.ISCOMPLETE" placeholder="请选择" >
              <el-option v-for="item in iscompleteList" :key="item.value" :label="item.label" :value="item.value"/>
            </el-select>
          </div>
          <div v-show="!searchFromCollapse" class="form-item">
            <label> 习题数：</label>
            <el-input v-model="listQueryForm.QUESTIONCOUNT" placeholder="请输入习题最小数量" clearable @clear="getQuery"/>
          </div>
          <div class="form-item">
            <el-button v-waves type="primary" icon="el-icon-search" @click="getQuery">
              搜索
            </el-button>
            <el-button icon="el-icon-refresh" @click="goKeyReset">
              重置
            </el-button>
            <el-button v-if="searchFromCollapse==true" type="text" @click="searchFromCollapse = false">展开 <i class="el-icon-arrow-down"/></el-button>
            <el-button v-else type="text" @click="searchFromCollapse = true">合并 <i class="el-icon-arrow-up"/></el-button>
          </div>
        </div>

      </div>
      <div class="app-tools">
        <div class="app-function">
          <el-button type="primary" icon="el-icon-plus" @click="handleAdd">新增</el-button>
          <el-button type="primary" icon="el-icon-plus" @click="handleBatchType">批量维护类型</el-button>
        </div>
        <div class="app-minbtn">
          <span class="screening">
            <el-dropdown trigger="click">
              <el-button type="text" icon="el-icon-finished"/>
              <el-dropdown-menu slot="dropdown" style="margin-top:3px;">
                <div class="app-checkbox-group">
                  <el-checkbox-group v-model="checkList">
                    <el-checkbox v-for="item in checkboxList" :key="item" :label="item" style="display: block"/>
                  </el-checkbox-group>
                </div>
              </el-dropdown-menu>
            </el-dropdown>
          </span>

          <el-button type="text" icon="el-icon-refresh-left"/>
          <el-button type="text" icon="el-icon-full-screen"/>
        </div>
      </div>
      <div class="app-container">
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          :header-cell-style="{background:'#f5f7fa',color:'#606266'}"
          tooltip-effect="dark"
          border
          fit
          highlight-current-row
        >
          <el-table-column
            :reserve-selection="true"
            type="selection"
            width="55"
            align="center"/>
          <el-table-column type="index" label="序号" width="50" align="center" fixed/>
          <el-table-column prop="COURSEWARENAME" label="课件名称" min-width="200" fixed>
            <template slot-scope="{row}">
              <a @click="goViewVideo(row)">{{ row.COURSEWARENAME }}</a>
            </template>
          </el-table-column>
          <!-- <el-table-column v-for="item in checkList" :key="item.prop" :prop="item.prop" :label="item.label"/> -->
          <el-table-column v-if="checkList.includes('上传时间')" prop="CREATTIME" label="上传时间" align="center" width="200"/>
          <el-table-column v-if="checkList.includes('培训类型')" prop="TRAININGTYPE_NAME" label="培训类型" align="center" width="200"/>
          <el-table-column v-if="checkList.includes('行业类型')" prop="INDUSTRY_END_NAME" label="行业类型" align="center" width="200"/>
          <el-table-column v-if="checkList.includes('岗位类型')" prop="POSTTYPE_NAME" label="岗位类型" align="center" width="200" />
          <el-table-column v-if="checkList.includes('课件状态')" prop="STATE" label="课件状态" align="center" width="100">
            <template slot-scope="{row}">
              <template v-if="row.STATE=='0'">
                <div><span class="status-dot status-green"/>启用</div>
              </template>
              <template v-else-if="row.STATE=='1'">
                <div><span class="status-dot status-red"/>禁用</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column v-if="checkList.includes('培训教师')" prop="TEACHERNAME" label="培训教师" align="center" width="100"/>
          <el-table-column v-if="checkList.includes('学时')" prop="CLASSHOUR" label="学时" align="center" width="100"/>
          <el-table-column v-if="checkList.includes('课件时长')" prop="VIDEOTIME" label="课件时长" align="center" width="140">
            <template slot-scope="{row}">
              {{ secondsCount(row.VIDEOTIME) }}
            </template>
          </el-table-column>
          <el-table-column v-if="checkList.includes('相关词条')" prop="RELATEDTERMNAME" label="相关词条" align="center" width="140"/>
          <el-table-column v-if="checkList.includes('习题数')" prop="QUESTIONCOUNT" label="习题数" align="center" width="140"/>
          <el-table-column label="操作" align="center" width="260" fixed="right">
            <template slot-scope="{row}">
              <el-button v-show="edit && row.STATE == 0" type="text" @click="handleEditState(row.VIDEOCOURSEWARE_ID,'1')">禁用</el-button>
              <span v-show="edit && row.STATE == 0" class="app-divider"/>
              <el-button v-show="edit && row.STATE == 1" type="text" @click="handleEditState(row.VIDEOCOURSEWARE_ID,'0')">启用</el-button>
              <span v-show="edit && row.STATE == 1" class="app-divider"/>
              <el-button type="text" @click="goInfo(row.VIDEOCOURSEWARE_ID)">详情</el-button>
              <span class="app-divider"/>
              <el-button v-if="row.ISCOMPLETE == '0'" type="text" @click="goComplete(row.VIDEOCOURSEWARE_ID)">完善</el-button>
              <span v-if="row.ISCOMPLETE == '0'" class="app-divider"/>
              <el-button v-show="del && row.CURRICULUMCOUNT == 0 && row.STAGECOUNT == 0" type="text" @click="handleDelete(row.VIDEOCOURSEWARE_ID)" ><span class="color-red">删除</span></el-button>
              <span v-show="del && row.CURRICULUMCOUNT == 0 && row.STAGECOUNT == 0" class="app-divider"/>
              <el-button type="text" @click="handleQuestion(row.VIDEOCOURSEWARE_ID)">课件习题</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div/>
          <pagination :total="total" :page.sync="listQueryForm.listQuery.page" :limit.sync="listQueryForm.listQuery.limit" @pagination="getList" />
        </div>
      </div>
    </div>
    <el-dialog v-if="dialogFormEdit" :visible.sync="dialogFormEdit" :title="dialogType==='info'?'详情':'新增'" width="600px" top="60px">
      <el-form ref="form" :rules="rules" :model="form" label-width="140px" style="width: 500px;">
        <el-form-item label="课件名称" prop="COURSEWARENAME">
          <el-input id="COURSEWARENAME" ref="COURSEWARENAME" :disabled="dialogType == 'info'" v-model="form.COURSEWARENAME" maxlength="255" placeholder="这里输入课件名称..." title="课件名称"/>
        </el-form-item>
        <el-form-item label="培训板块" prop="trainingSection"><!-- 培训板块 -->
          <el-cascader
            :disabled="dialogType == 'info'"
            :options="dicListMap.trainingSectionList"
            :props="{ multiple: true,value: 'id', children: 'nodes', label: 'name' }"
            v-model="form.trainingSection"
            placeholder="请输入培训板块"
            filterable/>
        </el-form-item>
        <el-form-item label="培训行业类型" prop="TRAINTYPE">
          <SelectTree ref="pxTree" :disabled="dialogType == 'info'" :options="dicListMap.trainDicList" :props="defaultProps" v-model="form.TRAINTYPE" placeholder="请选择" style="width:100%"/>
        </el-form-item>
        <el-form-item label="岗位培训类型" prop="POSTTYPE">
          <SelectTree ref="gwTree" :disabled="dialogType == 'info'" :options="dicListMap.postDicList" :props="defaultProps" v-model="form.POSTTYPE" placeholder="请选择" style="width:100%" />
        </el-form-item>
        <!--<el-form-item label="课件学时(分钟)" prop="CLASSHOUR">
          &lt;!&ndash;          <el-input ref="CLASSHOUR" v-model="form.CLASSHOUR" type="number" maxlength="11" placeholder="这里输入课件学时..." title="课件学时" style="width:100px"/>&ndash;&gt;
          <el-input-number v-model="form.CLASSHOUR" :min="1" label="课件学时"/>
          <span class="ml-10">分钟</span>
        </el-form-item>-->
        <el-form-item label="讲师名称" prop="SPEAKER"> <!-- 主讲人 -->
          <!--          <el-input id="SPEAKER" ref="SPEAKER" v-model="form.SPEAKER" maxlength="255" placeholder="这里输入主讲人..." title="主讲人"/>-->
          <el-select :disabled="dialogType == 'info'" v-model="form.SPEAKER" filterable placeholder="请选择">
            <el-option v-for="item in teacherAllList" :key="item.id" :label="item.name" :value="item.id"/>
          </el-select>
        </el-form-item>
        <el-form-item label="课件文件">
          <!-- <div v-if="form.fileIsType" style="display:flex">
            <el-upload ref="videoUpload" :on-remove="handleRemoveVideo" :on-error="handleUploadVideoError" :on-exceed="handleUploadVideoExceed" :before-upload="beforeVideoFileUpload" :file-list="fileList" :limit="1" accept=".mp4" class="upload-demo" action="" multiple>
              <div>
                <el-button size="small" type="primary" style="width:110px">点击上传</el-button>
                <span class="red-tip">* 只能上传mp4文件.最大上传500M</span>
              </div>
            </el-upload>
          </div> -->
          <div v-if="form.fileIsType">
            <div>
              <input v-show="false" id="fileUpload" ref="fileUpload" type="file" @change="fileChange($event)">
              <el-button type="primary" @click="uploadFile">选择文件</el-button>
              <span v-if="file">{{ file.name }}</span>
            </div>
            <div class="color-red">
              * 只能上传mp4文件.最大上传500M
            </div>
            <!-- <label class="status">上传状态: <span>{{ statusText }}</span></label>
            <div class="upload-type">
              上传方式一, 使用 UploadAuth 上传:
              <button :disabled="uploadDisabled" @click="authUpload">开始上传</button>
              <button :disabled="pauseDisabled" @click="pauseUpload">暂停</button>
              <button :disabled="resumeDisabled" @click="resumeUpload">恢复上传</button>

              <span class="progress">上传进度: <i id="auth-progress">{{ authProgress }}</i> %</span>
            </div> -->
          </div>
          <div v-else>
            <a class="a_link" @click="goViewVideo(form)">{{ form.COURSEWARENAME_update }}</a>
            <i v-show="form.kjCount =='0' && dialogType != 'info'" class="el-icon-close" @click="delFujian"/>
          </div>
        </el-form-item>
        <el-form-item v-if="!form.captureIsType && !form.fileIsType" label="课件截图">
          <!-- <div style="display:flex">
            <el-upload ref="videoCaptureUpload" :on-remove="handleRemove" :on-change="handleEditChange" :before-upload="beforeFCaptureileUpload" :auto-upload="false" :limit="1" :class="{hide:hideUpload}" action="#" accept=".jpg,.jpeg,.png" list-type="picture-card">
              <i class="el-icon-plus" />
            </el-upload>
            <span style="margin-left:20px;color: red;font-size: 12px">
              * 建议上传尺寸224*160。
            </span>
          </div> -->
          <div class="img-size">
            <img :src="form.VIDEOCAPTURE" width="100%" alt="">
          </div>
        </el-form-item>
        <el-form-item label="课件描述" prop="COURSEWAREINTRODUCE"><!-- 课件介绍 -->
          <el-input id="COURSEWAREINTRODUCE" ref="COURSEWAREINTRODUCE" :disabled="dialogType == 'info'" v-model="form.COURSEWAREINTRODUCE" type="textarea" maxlength="255" placeholder="这里输入课件介绍..." title="课件介绍"/>
        </el-form-item>
        <el-form-item label="大纲类型" prop="ONTLINETYPE">
          <el-select :disabled="dialogType == 'info'" v-model="form.ONTLINETYPE" placeholder="请选择">
            <el-option v-for="item in dicListMap.outlineDicList" :key="item.DICTIONARIES_ID" :label="item.NAME" :value="item.DICTIONARIES_ID"/>
          </el-select>
        </el-form-item>
        <el-form-item label="相关词条" prop="trainingSection"><!-- 相关词条 -->
          <el-cascader
            :disabled="dialogType == 'info'"
            :options="dicListMap.relatedTermList"
            :props="{ multiple: true,value: 'id', children: 'nodes', label: 'name' }"
            v-model="form.relatedTerm"
            placeholder="请输入相关词条"
            filterable/>
        </el-form-item>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormEdit = false">取 消</el-button>
        <el-button v-show="dialogType != 'info'" type="primary" @click="confirm">确 定</el-button>
      </div>
    </el-dialog>
    <div v-if="isShowProgress" class="popContainer">
      <div class="progress_title">视频上传中，请耐心等待...</div>
      <el-progress
        :percentage="authProgress"
        type="circle"
        class="progress"/>
    </div>
    <el-dialog :visible.sync="dialogFormVisible" title="培训类型" top="80px" width="940px">
      <el-form :model="formBydig" class="appformwith">
        <div class="type_field_box">
          <div class="type_field_item">
            <div class="type_field_top">培训类型</div>
            <div class="type_field_content type_pa">
              <div v-for="(item,i) in trainingList" :key="i" :class="TRAINTYPE === item.TRAININGTYPE_ID?'type_li_active':''" class="type_li" @click="checkTrain(item)">
                {{ item.NAME }}
              </div>
            </div>
          </div>
          <div class="type_field_item" style="width:320px">
            <div class="type_field_top">行业类型</div>
            <div class="type_field_content m-scroll-style">
              <div class="type_field_search">
                <el-input
                  v-model="filterText"
                  placeholder="请输入关键字进行过滤..."
                  prefix-icon="el-icon-search"
                  size="mini"
                  clearable/>
              </div>
              <el-tree
                v-loading="treeLoading"
                ref="tree"
                :data="industryTreeData"
                :props="industryProps"
                :check-on-click-node="true"
                :filter-node-method="filterNode"
                :node-key = "industryProps.value"
                :check-strictly="true"
                highlight-current="true"
                class="type_tree"
                @check="treeCheck"
                @node-click="handleNodeClick"/>
            </div>
          </div>
          <div class="type_field_item">
            <div class="type_field_top">岗位类型</div>
            <div class="type_field_content type_pa">
              <div v-for="(item,i) in postList" :key="i" :class="POSTTYPE === item.POSTTYPE_ID?'type_li_active':''" class="type_li" @click="checkPost(item)">
                {{ item.NAME }}
              </div>
            </div>
          </div>
        </div>
      </el-form>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="selectIndustry">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog v-show="dialogViewVideo" :visible.sync="dialogViewVideo" title="视频" width="800px" @close="closePlayer">
      <!-- <div>
        <video-player ref="videoPlayer" :playsinline="true" :options="playerOptions" class="video-player vjs-custom-skin" />
      </div> -->

      <div id="aLiVideoPlayer" class="prism-player"/>
    </el-dialog>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import { videoPlayer } from 'vue-video-player'
import 'video.js/dist/video-js.css'
import SelectTree from '@/components/SelectTree'
import axios from 'axios'
export default {
  components: { Pagination, videoPlayer, SelectTree },
  directives: { waves },
  data() {
    return {
      searchFromCollapse: true,
      listLoading: true,
      dialogFormVisible: false,
      postList: [],
      trainingList: [],
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      config: config,
      KEYWORDS: '',
      teacherKey: '',
      trainingSectionKey: '',
      TRAINTYPE: '',
      POSTTYPE: '',
      INDUSTRY: '',
      vidSate: '',
      ISCOMPLETE: '',
      varList: [],
      pd: [],
      treeLoading: false,
      industryTreeData: [],
      QUESTIONCOUNT: '',
      form: {
        COURSEWARENAME: '', // 课件名称
        SPEAKER: '', // 主讲人
        COURSEWAREINTRODUCE: '', // 课件介绍
        VIDEOFILES: '', // 课件文件路径
        VIDEOCAPTURE: '', // 课件截图
        VIDEOUSERS: [], // 适用人员
        TRAINTYPE: '',
        POSTTYPE: '',
        vfile: '',
        vcfile: '',
        CLASSHOUR: 0,
        dialogVisible: false,
        fileIsType: true,
        trainingSection: [],
        relatedTerm: [],
        trainAllName: '',
        POSTTYPE_NAME: '',
        TRAINTYPE_NAME: '',
        INDUSTRY_ALL_TYPE: '',
        INDUSTRY_ALL_NAME: '',
        INDUSTRY1: '',
        INDUSTRY2: '',
        INDUSTRY_END_ID: '',
        INDUSTRY_END_ID_NAME: '',
        captureIsType: true,
        QUESTIONCOUNT: ''
      },
      formBydig: {
        COURSEWARENAME: '', // 课件名称
        SPEAKER: '', // 主讲人
        COURSEWAREINTRODUCE: '', // 课件介绍
        VIDEOFILES: '', // 课件文件路径
        VIDEOCAPTURE: '', // 课件截图
        VIDEOUSERS: [], // 适用人员
        vfile: '',
        vcfile: '',
        CLASSHOUR: 0,
        dialogVisible: false,
        fileIsType: true,
        trainingSection: [],
        relatedTerm: [],
        captureIsType: true,
        trainAllName: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        POSTTYPE_NAME: '',
        TRAINTYPE_NAME: '',
        INDUSTRY_ALL_TYPE: '',
        INDUSTRY_ALL_NAME: '',
        INDUSTRY1: '',
        INDUSTRY2: '',
        INDUSTRY_END_ID: '',
        INDUSTRY_END_ID_NAME: '',
        QUESTIONCOUNT: ''
      },
      hideUpload: false, // 显示图片
      filterText: '',
      fileList: [],
      defaultProps: {
        value: 'id',
        children: 'nodes',
        label: 'name',
        multiple: true,
        checkStrictly: true
      },
      multipleSelectionAll: [], // 所有选中的数据包含跨页数据
      multipleSelection: [], // 当前页选中的数据
      dialogFormEdit: false,
      dialogType: 'add',
      LearnerCategoryList: [],
      serverurl: config.fileUrl,
      dialogViewVideo: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], // 可选的播放速度
        autoplay: false, // 如果为true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 是否视频一结束就重新开始。
        preload: 'auto', // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: 'zh-CN',
        aspectRatio: '16:9', // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [{
          type: 'video/mp4', // 类型
          src: 'https://whrx.qhdsafety.com/file/uploadFiles/file/13cf0f4ec77e4d98ae8cdd9c3386ae0c/20210625/691910cd81024986a392f6203c4045f8.mp4' // url地址
        }],
        poster: '', // 封面地址
        notSupportedMessage: '此视频暂无法播放，请稍后再试', // 允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, // 当前时间和持续时间的分隔符
          durationDisplay: true, // 显示持续时间
          remainingTimeDisplay: true, // 是否显示剩余时间功能
          fullscreenToggle: true // 是否显示全屏按钮
        }
      },
      rules: {
        COURSEWARENAME: [{ required: true, message: '课件名称不能为空', trigger: 'blur' }],
        // TRAINTYPE: [{ required: true, message: '请选择培训行业类型', trigger: 'blur' }],
        POSTTYPE: [{ required: true, message: '请选择岗位培训类型', trigger: 'blur' }],
        CLASSHOUR: [{ required: true, message: '课件学时不能为空', trigger: 'blur' }],
        SPEAKER: [{ required: true, message: '讲师名称不能为空', trigger: 'blur' }],
        COURSEWAREINTRODUCE: [{ required: true, message: '课件描述不能为空', trigger: 'blur' }],
        ONTLINETYPE: [{ required: true, message: '请选择大纲类型', trigger: 'blur' }]
      },
      dicListMap: {
        outlineDicList: [],
        trainDicList: [],
        postDicList: [],
        trainingSectionList: [],
        relatedTermList: []
      },
      teacherAllList: [],
      vidStateList: [{ value: '0', label: '启用' },
        { value: '1', label: '禁用' }
      ],
      iscompleteList: [{ value: '0', label: '否' },
        { value: '1', label: '是' }
      ],
      authProgress: 0,
      isShowProgress: false,
      player: {},
      isEditVideo: false,
      file: {},
      INDUSTRY_END_ID: '',
      INDUSTRY1: '',
      INDUSTRY2: '',
      industryProps: {

        value: 'INDUSTRYTYPE_ID',
        multiple: true,
        checkStrictly: true,
        children: 'nodes',
        label: 'NAME'
      },
      checkList: ['上传时间', '培训类型', '岗位类型', '课件状态', '行业类型', '培训教师', '学时', '课件时长', '相关词条', '习题数'],
      checkboxList: ['上传时间', '培训类型', '岗位类型', '课件状态', '行业类型', '培训教师', '学时', '课件时长', '相关词条', '习题数'],
      listQueryForm: {
        listQuery: {
          page: 1,
          limit: 10
        },
        industryTreeData: [],
        KEYWORDS: '',
        teacherKey: '',
        trainingSectionKey: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        INDUSTRY: '',
        vidSate: '',
        ISCOMPLETE: '',
        QUESTIONCOUNT: ''
      }
    }
  },
  watch: {
    'listQueryForm.TRAINTYPE': {
      handler() {
        this.listQueryForm.POSTTYPE = ''
        this.getPostList()
      }
    },
    'listQueryForm.POSTTYPE': {
      handler() {
        // this.getIndTree()
      }
    }
  },
  async created() {
    window.addEventListener('touchmove', e => e.preventDefault())
    if (this.$parent.listQueryForm.listQuery) {
      this.listQueryForm = this.$parent.listQueryForm
    }
    this.getList()
    this.getTrainList()
    this.getTrainingList()
    this.getTreeList()
  },
  methods: {
    getRowKey(row) {
      return row.VIDEOCOURSEWARE_ID
    },
    // 行业类型树
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/industrytype/getIndustryTree',
        {
        }
      ).then((data) => {
        this.treeLoading = false
        this.industryTreeData = data.zTreeNodes
        this.listQueryForm.industryTreeData = data.zTreeNodes
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    // 培训类型
    getTrainingList() {
      requestFN(
        '/trainingtype/listAll',
        { }
      ).then((data) => {
        this.trainingList = data.varList
      }).catch((e) => {
      })
    },
    // 岗位类型
    getPostListCerate(TRAININGTYPE_ID) {
      requestFN(
        '/posttype/listAll',
        {
          TRAININGTYPE_ID: TRAININGTYPE_ID
        }
      ).then((data) => {
        this.postList = data.varList
      }).catch((e) => {
      })
    },
    // 已经选择的禁止重复选择
    // selected(row, index) {
    //   return !row.INDUSTRY_END_ID
    // },
    handleNodeClick(node, data, value) {
      //  if (data.isLeaf) {判断是否根节点
      this.INDUSTRY_END_ID = node.INDUSTRYTYPE_ID
      this.INDUSTRY_END_ID_NAME = node.NAME
      //  }
    },
    checkTrain(item) {
      this.getPostListCerate(item.TRAININGTYPE_ID)
      this.$set(this, 'TRAINTYPE', item.TRAININGTYPE_ID)
      this.$set(this, 'TRAINTYPE_NAME', item.NAME)
    },
    checkPost(item) {
      this.$set(this, 'POSTTYPE', item.POSTTYPE_ID)
      this.$set(this, 'POSTTYPE_NAME', item.NAME)
    },
    treeCheck(data, list) {
      let thisNode = this.$refs.tree.getNode(data.INDUSTRYTYPE_ID) // 获取当前节点
      this.formBydig.INDUSTRY_ALL_TYPE = ''
      this.formBydig.INDUSTRY_ALL_NAME = ''
      const keys = [] // 获取已勾选节点的key值
      const names = [] // 获取已勾选节点的key值
      keys.unshift(thisNode.data.INDUSTRYTYPE_ID)
      names.unshift(thisNode.data.NAME)
      if (thisNode.checked) { // 当前节点若被选中
        for (let i = thisNode.level; i > 1; i--) {
          // 当前子节点选中，取消勾选父节点
          this.$refs.tree.setChecked(thisNode.parent, false)
          // 判断是否有父级节点
          if (!thisNode.parent.checked) { // 父级节点未被选中，则将父节点替换成当前节点，往上继续查询，并将此节点key存入keys数组
            thisNode = thisNode.parent
            keys.unshift(thisNode.data.INDUSTRYTYPE_ID)
            names.unshift(thisNode.data.NAME)
          }
        }
      }
      this.formBydig.INDUSTRY_ALL_TYPE = keys.join(',')
      this.formBydig.INDUSTRY_ALL_NAME = names.join('-')
    },
    filterNode(value, data) {
      console.log(data)
      if (!value) return true
      return data.NAME.indexOf(value) !== -1
    },
    // 搜索
    selectIndustry() {
      this.formBydig.TRAINTYPE = this.TRAINTYPE
      this.formBydig.POSTTYPE = this.POSTTYPE
      this.formBydig.POSTTYPE_NAME = this.POSTTYPE_NAME
      this.formBydig.TRAINTYPE_NAME = this.TRAINTYPE_NAME
      this.formBydig.INDUSTRY1 = this.INDUSTRY1
      this.formBydig.INDUSTRY2 = this.INDUSTRY2
      this.formBydig.INDUSTRY_END_ID = this.INDUSTRY_END_ID
      this.formBydig.INDUSTRY_END_ID_NAME = this.INDUSTRY_END_ID_NAME
      // var pn = this.form.POSTTYPE_NAME ? '-' + this.form.POSTTYPE_NAME : ''
      // var iname = this.form.INDUSTRY_END_ID_NAME ? '-' + this.form.INDUSTRY_END_ID_NAME : ''
      const tName = []
      tName.push(this.TRAINTYPE_NAME == '' ? '1' : this.TRAINTYPE_NAME)
      tName.push(this.INDUSTRY_END_ID_NAME == '' ? '1' : this.INDUSTRY_END_ID_NAME)
      tName.push(this.POSTTYPE_NAME == '' ? '1' : this.POSTTYPE_NAME)
      // this.form.trainAllName = this.form.TRAINTYPE_NAME + iname + pn
      const tName2 = tName.filter(item => {
        return item !== '1'
      })
      this.formBydig.trainAllName = tName2.join('-').replace(',', '')
      // 配合id进行修改
      const dataList = this.$refs.multipleTable.selection
      const dataIds = []
      dataList.forEach(data => {
        dataIds.push(data.VIDEOCOURSEWARE_ID)
      })

      console.log('this.formBydig')
      console.log(this.formBydig)
      // INDUSTRY_ALL_NAME:
      // INDUSTRY_ALL_TYPE:
      // INDUSTRY_END_ID:
      // POSTTYPE:
      requestFN(
        '/videocourseware/updIndPos',
        {
          INDUSTRY_ALL_NAME: this.formBydig.INDUSTRY_ALL_NAME,
          INDUSTRY_ALL_TYPE: this.formBydig.INDUSTRY_ALL_TYPE,
          INDUSTRY_END_ID: this.formBydig.INDUSTRY_END_ID,
          POSTTYPE: this.formBydig.POSTTYPE,
          TRAINTYPE: this.formBydig.TRAINTYPE,
          VIDEOIDS: JSON.stringify(dataIds)
        }
      ).then((data) => {
        this.$message.success('修改成功')
        this.dialogFormVisible = false
        this.goKeyReset()
        this.getList()
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.listQueryForm.listQuery = {
        page: 1,
        limit: 10
      }
      this.getList()
    },
    goKeyReset() {
      this.KEYWORDS = ''
      this.TRAINTYPE = ''
      this.POSTTYPE = ''
      this.vidSate = ''
      this.teacherKey = ''
      this.ISCOMPLETE = ''
      this.QUESTIONCOUNT = ''
      this.$parent.listQueryForm = {}
      this.listQueryForm = {
        listQuery: {
          page: 1,
          limit: 10
        },
        industryTreeData: this.industryTreeData
      }
      this.dicListMap.postDicList = []
      // this.$refs.keyGwRef.clearHandle()
      // this.$refs.trainingSectionRef.clearHandle()
      this.$refs.keyIndTypeRef.clearHandle()
      this.getQuery()
    },
    // 获取列表
    getList() {
      this.listLoading = true
      console.info('industry:' + this.listQueryForm)
      requestFN(
        '/videocourseware/list?showCount=' + this.listQueryForm.listQuery.limit + '&currentPage=' + this.listQueryForm.listQuery.page,
        {
          KEYWORDS: this.listQueryForm.KEYWORDS,
          TRAINTYPE: this.listQueryForm.TRAINTYPE,
          POSTTYPE: this.listQueryForm.POSTTYPE,
          STATE: this.listQueryForm.vidSate,
          teacherKey: this.listQueryForm.teacherKey,
          INDUSTRY: this.listQueryForm.INDUSTRY,
          ISCOMPLETE: this.listQueryForm.ISCOMPLETE,
          QUESTIONCOUNT: this.listQueryForm.QUESTIONCOUNT
        }
      ).then((data) => {
        this.listLoading = false
        this.varList = data.varList
        this.total = data.page.totalResult
        this.hasButton()
        this.pd = data.pd
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 格式化适用人员名称
    formatterUsers(row, column) {
      var VIDEOUSERS_VAL = ''
      const VIDEOUSERS = row.VIDEOUSERS.slice(1, row.VIDEOUSERS.length - 1).split(',')
      for (let i = 0; i < VIDEOUSERS.length; i++) {
        for (let j = 0; j < this.LearnerCategoryList.length; j++) {
          const option = this.LearnerCategoryList[j]
          if (option.BIANMA === VIDEOUSERS[i]) {
            VIDEOUSERS_VAL += option.NAME + ','
          }
        }
      }
      return VIDEOUSERS_VAL.slice(0, VIDEOUSERS_VAL.length - 1)
    },
    // 添加
    handleAdd() {
      this.$parent.COURSEWAREID = ''
      this.$parent.activeName = 'Edit'
    },
    handleBatchType() {
      if (!this.$refs.multipleTable.selection.length > 0) {
        this.$message.warning('请选择数据')
        return false
      }
      this.dialogFormVisible = true
    },
    goComplete(ID) {
      this.$parent.listQueryForm = this.listQueryForm
      this.$parent.COURSEWAREID = ID
      this.$parent.activeName = 'Complete'
    },
    goInfo(ID) {
      this.$parent.listQueryForm = this.listQueryForm
      this.$parent.COURSEWAREID = ID
      this.$parent.activeName = 'Info'
    },
    // 修改
    handleEdit(ID) {
      this.resetForm()
      // this.getDict()
      this.dialogType = 'edit'
      requestFN(
        '/videocourseware/goEdit',
        {
          VIDEOCOURSEWARE_ID: ID
        }
      ).then((data) => {
        this.form = Object.assign({}, data.pd) // copy obj
        // console.info(this.form)
        // //培训板块     相关词条 回显
        var trainingSectionIDS = [] // 培训板块
        var relatedTermIDS = [] //  相关词条
        data.coursewareAllList.forEach((item, index) => {
          if (item.RECORD_TYPE_ID == 'trainingSection') {
            const valID = item.DICTIONARIES_IDS.split(',')
            trainingSectionIDS.push(valID)
          } else if (item.RECORD_TYPE_ID == 'relatedTerm') {
            const valID = item.DICTIONARIES_IDS.split(',')
            relatedTermIDS.push(valID)
          }
        })
        this.form.trainingSection = trainingSectionIDS
        this.form.relatedTerm = relatedTermIDS
        // this.form.VIDEOUSERS = this.form.VIDEOUSERS.slice(1, this.form.VIDEOUSERS.length - 1).split(',')
        this.form.COURSEWARENAME_update = this.form.COURSEWARENAME
        this.form.fileIsType = false
        this.form.captureIsType = false
        this.dialogFormEdit = true
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 修改
    handleEditState(ID, state) {
      this.$confirm(`确定要${state === '1' ? '禁用' : '启用'}此课件吗?`, '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        requestFN(
          '/videocourseware/editState',
          {
            VIDEOCOURSEWARE_ID: ID,
            STATE: state
          }
        ).then((data) => {
          this.$message.success('操作成功')
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消'
        })
      })
    },
    validStr(str) {
      if (str != null && str != '' && typeof (str) != 'undefined' && str != 0) { return true }
      return false
    },
    // 保存
    confirm() {
      if (this.form.fileIsType) {
        if (!this.file) {
          this.$message.warning('课件文件不能为空，请上传')
          return false
        }
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          Object.keys(this.form).map(key => {
            if (key == 'trainingSection' && this.form[key]) {
              var trainingSectionIDS = ''
              this.form[key].forEach((item, index) => {
                trainingSectionIDS += item + ';'
              })
              this.form.trainingSection = trainingSectionIDS
              // formData.append('trainingSection', trainingSectionIDS)
            } else if (key == 'relatedTerm' && this.form[key]) {
              var relatedTermIDS = ''
              this.form[key].forEach((item, index) => {
                relatedTermIDS += item + ';'
              })
              this.form.relatedTerm = relatedTermIDS
              // formData.append('relatedTerm', relatedTermIDS)
            }
          })
          this.form.isEditVideo = this.isEditVideo
          if (this.dialogType == 'add' || (this.dialogType == 'edit' && this.isEditVideo)) {
            this.authUpload()
            this.dialogFormEdit = false
            this.isShowProgress = true
          } else {
            this.saveInfo()
          }
        } else {
          return false
        }
      })
    },
    closePlayer() {
      this.player.dispose()
    },
    saveInfo() {
      requestFN(
        '/videocourseware/' + this.dialogType,
        this.form
      ).then((data) => {
        this.$message({
          message: data.message,
          type: data.type
        })
        this.isShowProgress = false
        this.dialogFormEdit = false
        this.getList()
      }).catch((e) => {
      })
    },
    handleQuestion(ID) {
      this.$parent.listQueryForm = this.listQueryForm
      this.$parent.COURSEWAREID = ID
      this.$parent.COURSEWARETYPE = '1'
      this.$parent.activeName = 'Question'
    },
    beforeVideoFileUpload(file) {
      const types = ['video/mp4']
      const isImage = types.includes(file.type)
      const isLt500M = file.size / 1024 / 1024 < 500
      if (this.fileList.length > 0) {
        this.$message.error('文件超出个数限制!')
        return false
      }
      if (!isImage) {
        this.$message.error('上传视频只能是 MP4 格式!')
        return false
      } else if (!isLt500M) {
        this.$message.error('上传视频大小不能超过 500MB!')
        return false
      } else {
        // const filistMap = {}
        // console.info(file)
        // filistMap.name = file.name
        // file.status = 'success'
        // filistMap.file = file
        this.fileList.push(file)
        this.$forceUpdate()
        return true
      }
    },
    beforeFCaptureileUpload(file) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
      } else {
        this.form.vcfile = file
        this.form.VIDEOCAPTURE = file
      }
    },
    handlePictureCardPreview(file, fileList) {
      this.form.vcfile = file
      this.form.VIDEOCAPTURE = file
      this.form.dialogImageUrl = file.url
      this.form.dialogVisible = true
    },
    handleRemove(file, fileList) {
      this.form.vcfile = file
      this.form.VIDEOCAPTURE = file
      this.hideUpload = fileList.length >= 1
    },
    handleEditChange(file, fileList) {
      this.form.vcfile = file
      this.form.VIDEOCAPTURE = file
      this.hideUpload = fileList.length >= 1
    },
    handleRemoveVideo(file, fileList) { // 文件列表移除文件时的钩子
      this.fileList = []
    },
    handleUploadVideoExceed(file, fileList) { // 上传超出数量限制时的钩子
      this.$message.warning('最多上传1个课件哦！')
    },
    // eslint-disable-next-line handle-callback-err
    handleUploadVideoError(err, file, fileList) {
      this.fileList = fileList
      file.status = 'success'
      this.fileList.push(file)
    },
    handleDelete(id) {
      this.$confirm('确定要删除吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/videocourseware/delete',
          {
            VIDEOCOURSEWARE_ID: id
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },

    batchDel() {
      const _selectData = this.$refs.multipleTable.selection
      if (_selectData == null || _selectData.length == 0) {
        this.$message({
          message: '请选中要删除的项...',
          type: 'error'
        })
        return false
      }
      const ids = _selectData.map((item, index) => {
        return item.VIDEOCOURSEWARE_ID
      }).join(',')

      this.$confirm('确定要删除选中的数据吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/videocourseware/deleteAll',
          {
            DATA_IDS: ids
          }
        ).then(() => {
          this.$message({
            message: '删除成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.$refs.multipleTable.clearSelection()
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton: function() {
      var keys = 'courseware:add,courseware:del,courseware:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.coursewarefhadminadd		// 新增权限
        this.del = data.coursewarefhadmindel		// 删除权限
        this.edit = data.coursewarefhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    },
    // 获取数据字典数据
    getDict: function() {
      requestFN(
        '/dictionaries/getLevels',
        {
          DICTIONARIES_ID: '3c0d9b5e74834adfacb76139e5d731e5'
        }
      ).then((data) => {
        this.dicListMap.outlineDicList = data.list
      }).catch((e) => {
      })
    },
    resetForm() {
      this.form = {
        COURSEWARENAME: '', // 课件名称
        SPEAKER: '', // 主讲人
        COURSEWAREINTRODUCE: '', // 课件介绍
        VIDEOFILES: '', // 课件文件路径
        VIDEOCAPTURE: '', // 课件截图
        VIDEOUSERS: '', // 适用人员
        vfile: '',
        vcfile: '',
        CLASSHOUR: 0,
        TRAINTYPE: '',
        POSTTYPE: '',
        ONTLINETYPE: '',
        fileIsType: true,
        captureIsType: true
      }
      if (this.$refs.pxTree) {
        this.$refs.pxTree.clearHandle()
      }
      if (this.$refs.gwTree) {
        this.$refs.gwTree.clearHandle()
      }
      if (this.$refs.videoUpload) {
        this.$refs.videoUpload.clearFiles()
      }
      if (this.$refs.videoCaptureUpload) {
        this.form.vcfile = ''
        this.form.VIDEOCAPTURE = ''
        this.hideUpload = false
        this.$refs.videoCaptureUpload.clearFiles()
      }
    },
    goViewVideo(row) {
      requestFN(
        '/videocourseware/getVideoPlayInfo',
        {
          VIDEOCOURSEWARE_ID: row.VIDEOCOURSEWARE_ID
        }
      ).then((data) => {
        if (data.result == 'success') {
          this.dialogViewVideo = true
          this.$nextTick(() => {
            // eslint-disable-next-line no-undef
            this.player = new Aliplayer({
              id: 'aLiVideoPlayer',
              source: JSON.stringify(data.urlList),
              width: '100%',
              height: '500px',
              autoplay: true,
              isLive: false,
              components: [{
                name: 'QualityComponent',
                // eslint-disable-next-line no-undef
                type: AliPlayerComponent.QualityComponent,
                args: [function(definition, desc) {
                  console.log(definition + '-----' + desc)
                }]
              }]
            }, function(player) {
              console.log('The player is created')
              /* Register the sourceloaded of the player, query the resolution of the video, invoke the resolution component, and call the setCurrentQuality method to set the resolution. */
              player.on('sourceloaded', function(params) {
                var paramData = params.paramData
                var desc = paramData.desc
                var definition = paramData.definition
                player.getComponent('QualityComponent').setCurrentQuality(desc, definition)
              })
            })
          })
        } else {
          this.$message.warning(data.message)
        }
      }).catch((e) => {
      })
      // const type = row.VIDEOFILES.slice(row.VIDEOFILES.lastIndexOf('.') + 1)
      // this.playerOptions.sources[0].src = this.serverurl + row.VIDEOFILES
      // this.playerOptions.poster = this.serverurl + row.VIDEOCAPTURE
      // this.playerOptions.sources[0].type = 'video/' + type
    },
    // closePlay() {
    //   this.$refs.videoPlayer.player.pause()
    // },
    getDicListByPID(pId, listName) {
      requestFN(
        '/dictionaries/listAllDictToParId',
        {
          parentId: pId
        }
      ).then((data) => {
        this.dicListMap[listName] = JSON.parse(data.zTreeNodes)
      }).catch((e) => {

      })
    },
    getTrainList() {
      requestFN(
        '/trainingtype/listAll',
        {
        }
      ).then((data) => {
        this.dicListMap['trainDicList'] = data.varList
      }).catch((e) => {

      })
    },
    getPostList() {
      console.info('traintype：' + this.listQueryForm.TRAINTYPE)
      if (this.listQueryForm.TRAINTYPE) {
        requestFN(
          '/posttype/listAll',
          {
            TRAININGTYPE_ID: this.listQueryForm.TRAINTYPE
          }
        ).then((data) => {
          this.dicListMap['postDicList'] = data.varList
        }).catch((e) => {

        })
      }
    },
    getIndTree() {
      if (this.POSTTYPE) {
        requestFN(
          '/industrytype/getIndustryTree',
          { POSTTYPE_ID: this.POSTTYPE }
        ).then((data) => {
          this.dicListMap['industryTreeData'] = data.zTreeNodes
        }).catch((e) => {
        })
      }
    },
    delFujian() {
      this.fileList = []
      this.isEditVideo = true
      this.form.COURSEWARENAME_update = ''
      this.form.fileIsType = true
      this.form = Object.assign({}, this.form)
      // this.$forceUpdate()
    },
    delFujianTupian() {
      this.form.captureIsType = true
      this.form.vcfile = ''
      this.form.VIDEOCAPTURE = ''
      this.hideUpload = false
    },
    getTeacher() { // 获取教师信息
      requestFN(
        '/teacher/listAllSelect',
        {}
      ).then((data) => {
        this.teacherAllList = JSON.parse(data.zTreeNodes)
      }).catch((e) => {
      })
    },

    uploadFile() {
      this.$refs.fileUpload.dispatchEvent(new MouseEvent('click'))
    },
    fileChange(e) {
      if (!e.target.files[0]) {
        this.$message.warning('请先选择需要上传的文件!')
        return
      } else if (e.target.files[0].type != 'video/mp4') {
        this.$message.warning('请选择MP4文件!')
        return
      }

      this.file = e.target.files[0]
      // eslint-disable-next-line no-unused-vars
      var Title = this.file.name
      var userData = '{"Vod":{}}'
      if (this.uploader) {
        this.uploader.stopUpload()
        this.authProgress = 0
        this.statusText = ''
      }
      this.uploader = this.createUploader()
      this.uploader.addFile(this.file, null, null, null, userData)
      this.uploadDisabled = false
      this.pauseDisabled = true
      this.resumeDisabled = true
    },
    authUpload() {
      // 然后调用 startUpload 方法, 开始上传
      if (this.uploader !== null) {
        this.uploader.startUpload()
        this.uploadDisabled = true
        this.pauseDisabled = false
      }
    },
    // 暂停上传
    pauseUpload() {
      if (this.uploader !== null) {
        this.uploader.stopUpload()
        this.resumeDisabled = false
        this.pauseDisabled = true
      }
    },
    // 恢复上传
    resumeUpload() {
      if (this.uploader !== null) {
        this.uploader.startUpload()
        this.resumeDisabled = true
        this.pauseDisabled = false
      }
    },
    createUploader(type) {
      const self = this
      // eslint-disable-next-line no-undef
      const uploader = new AliyunUpload.Vod({
        timeout: self.timeout || 60000,
        partSize: self.partSize || 1048576,
        parallel: self.parallel || 5,
        retryCount: self.retryCount || 3,
        retryDuration: self.retryDuration || 2,
        region: self.region,
        userId: self.userId,
        // 添加文件成功
        addFileSuccess(uploadInfo) {
          self.uploadDisabled = false
          self.resumeDisabled = false
          self.statusText = '添加文件成功, 等待上传...'
          // console.log('addFileSuccess: ' + uploadInfo.file.name)
        },
        // 开始上传
        onUploadstarted(uploadInfo) {
          // 如果是 UploadAuth 上传方式, 需要调用 uploader.setUploadAuthAndAddress 方法
          // 如果是 UploadAuth 上传方式, 需要根据 uploadInfo.videoId是否有值，调用点播的不同接口获取uploadauth和uploadAddress
          // 如果 uploadInfo.videoId 有值，调用刷新视频上传凭证接口，否则调用创建视频上传凭证接口
          // 注意: 这里是测试 demo 所以直接调用了获取 UploadAuth 的测试接口, 用户在使用时需要判断 uploadInfo.videoId 存在与否从而调用 openApi
          // 如果 uploadInfo.videoId 存在, 调用 刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)
          // 如果 uploadInfo.videoId 不存在,调用 获取视频上传地址和凭证接口(https://help.aliyun.com/document_detail/55407.html)
          if (!uploadInfo.videoId) {
            const createUrl = config.httpurl + '/audioOrVideo/createUploadVideo?Title=' + uploadInfo.file.name + '&FileName=' + uploadInfo.file.name
            axios.get(createUrl).then(({ data }) => {
              const uploadAuth = data.body.uploadAuth
              const uploadAddress = data.body.uploadAddress
              const videoId = data.body.videoId
              uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
            })

            self.statusText = '文件开始上传...'
            console.log('onUploadStarted:' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object)
          } else {
            // 如果videoId有值，根据videoId刷新上传凭证
            // https://help.aliyun.com/document_detail/55408.html?spm=a2c4g.11186623.6.630.BoYYcY
            const refreshUrl = config.httpurl + '/audioOrVideo/refreshUploadVideo?Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
            axios.get(refreshUrl).then(({ data }) => {
              const uploadAuth = data.data.uploadAuth
              const uploadAddress = data.data.uploadAddress
              const videoId = data.data.videoId
              uploader.setUploadAuthAndAddress(uploadInfo, uploadAuth, uploadAddress, videoId)
            })
          }
        },
        // 文件上传成功
        onUploadSucceed(uploadInfo) {
          console.log('onUploadSucceed: ' + uploadInfo.file.name + ', endpoint:' + uploadInfo.endpoint + ', bucket:' + uploadInfo.bucket + ', object:' + uploadInfo.object)
          self.statusText = '文件上传成功!'

          self.uploadDisabled = true
          self.resumeDisabled = true
          self.form.videoId = uploadInfo.videoId
          self.saveInfo()
        },
        // 文件上传失败
        onUploadFailed(uploadInfo, code, message) {
          console.log('onUploadFailed: file:' + uploadInfo.file.name + ',code:' + code + ', message:' + message)
          self.statusText = '文件上传失败!'
        },
        // 取消文件上传
        onUploadCanceled(uploadInfo, code, message) {
          console.log('Canceled file: ' + uploadInfo.file.name + ', code: ' + code + ', message:' + message)
          self.statusText = '文件已暂停上传'
        },
        // 文件上传进度，单位：字节, 可以在这个函数中拿到上传进度并显示在页面上
        onUploadProgress(uploadInfo, totalSize, progress) {
          console.log('onUploadProgress:file:' + uploadInfo.file.name + ', fileSize:' + totalSize + ', percent:' + Math.ceil(progress * 100) + '%')
          const progressPercent = Math.ceil(progress * 100)
          self.authProgress = progressPercent
          self.statusText = '文件上传中...'
          // const loading = self.$loading({
          //   lock: true,
          //   text: self.authProgress,
          //   spinner: 'el-icon-loading',
          //   background: 'rgba(0, 0, 0, 0.7)'
          // })
          // if (self.authProgress == 100) {
          //   loading.close()
          //   self.$message({
          //     message: '视频课件保存成功',
          //     type: 'success'
          //   })
          //   self.dialogFormEdit = false
          //   self.getList()
          // }
        },
        // 上传凭证超时
        onUploadTokenExpired(uploadInfo) {
          // 上传大文件超时, 如果是上传方式一即根据 UploadAuth 上传时
          // 需要根据 uploadInfo.videoId 调用刷新视频上传凭证接口(https://help.aliyun.com/document_detail/55408.html)重新获取 UploadAuth
          // 然后调用 resumeUploadWithAuth 方法, 这里是测试接口, 所以我直接获取了 UploadAuth
          const refreshUrl = 'https://demo-vod.cn-shanghai.aliyuncs.com/voddemo/RefreshUploadVideo?BusinessType=vodai&TerminalType=pc&DeviceModel=iPhone9,2&UUID=59ECA-4193-4695-94DD-7E1247288&AppVersion=1.0.0&Title=haha1&FileName=xxx.mp4&VideoId=' + uploadInfo.videoId
          axios.get(refreshUrl).then(({ data }) => {
            const uploadAuth = data.UploadAuth
            uploader.resumeUploadWithAuth(uploadAuth)
            console.log('upload expired and resume upload with uploadauth ' + uploadAuth)
          })
          self.statusText = '文件超时...'
        },
        // 全部文件上传结束
        onUploadEnd(uploadInfo) {
          console.log('onUploadEnd: uploaded all the files')
          self.statusText = '文件上传完毕'
        }
      })
      return uploader
    },
    secondsCount(second) {
      if (!second) return 0
      const h = parseInt(second / 60 / 60 % 24, 10)
      const m = parseInt(second / 60 % 60, 10)
      const s = parseInt(second % 60, 10)
      if (h) {
        return h + '小时' + m + '分钟' + s + '秒'
      } else {
        if (m) {
          return m + '分钟' + s + '秒'
        } else {
          return s + '秒'
        }
      }
    }
  }
}

</script>
<style lang="scss">
  html{
    touch-action:none;
  }
  .hide .el-upload--picture-card {
    display: none;
  }

  .popContainer {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 999999;
 background: rgba(0, 0, 0, 0.6);
 .el-progress__text{
   color: #fff;
 }
 .progress_title{
   position: relative;
    top: 35%;
    color: #e8e8e8;
    left:44.7%;
    text-shadow:#000 1px 1px 2px
 }
  .progress {
    position: relative;
    top: 37%;
    color: #fff;
    left:46%;
    // margin: auto;
  }
}
</style>
