<template>
  <div class="app-warp">
    <div class="detail-structure">
      <el-page-header content="完善页面" @back="goBack"/>
      <div class="detail-container">
        <div class="level-title">
          <h1>课件基本信息</h1>
        </div>
        <el-form ref="form" :rules="rules" :model="form" label-width="110px" class="edit_form">
          <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="trainAllName">
            <div @click="dialogFormVisible = true">
              <el-input v-model="form.trainAllName" :readonly="true" maxlength="255" placeholder="这里输入培训类型..." title="培训类型"/>
            </div>
          </el-form-item>
          <!-- <el-form-item label="培训类型">
            <div>{{ form.TRAINTYPE_NAME }}{{ form.POSTTYPE_NAME?'-'+form.POSTTYPE_NAME:'' }}{{ form.INDUSTRY_END_ID_NAME?'-'+form.INDUSTRY_END_ID_NAME:'' }}</div>
            <el-button type="text" @click="dialogFormVisible = true">培训类型</el-button>
          </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 >
              <a class="a_link" @click="goViewVideo(form)">[视频预览]</a>
            </div>
          </el-form-item>
          <el-form-item v-if="!form.captureIsType && !form.fileIsType" label="课件截图">

            <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" rows="5" type="textarea" maxlength="255" placeholder="这里输入课件介绍..." title="课件介绍"/>
          </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 class="detail_foot">
          <el-button type="primary" @click="confirm">保存</el-button>
          <el-button icon="el-icon-arrow-left" @click="goBack">返回</el-button>
        </div>
      </div>
    </div>

    <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="840px">
      <el-form :model="form" 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 {
      listLoading: true,
      add: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      total: 0,
      config: config,
      KEYWORDS: '',
      teacherKey: '',
      trainingSectionKey: '',
      TRAINTYPE: '',
      POSTTYPE: '',
      trainLevelList: [],
      TRAINLEVEL: '',
      vidSate: '',
      varList: [],
      pd: [],
      form: {
        COURSEWARENAME: '', // 课件名称
        SPEAKER: '', // 主讲人
        COURSEWAREINTRODUCE: '', // 课件介绍
        VIDEOFILES: '', // 课件文件路径
        VIDEOCAPTURE: '', // 课件截图
        VIDEOUSERS: [], // 适用人员
        vfile: '',
        vcfile: '',
        CLASSHOUR: 0,
        dialogVisible: false,
        fileIsType: true,
        trainingSection: [],
        relatedTerm: [],
        captureIsType: true,
        INDUSTRY_ALL_TYPE: [],
        INDUSTRY_ALL_NAME: [],

        TRAINTYPE: '',
        POSTTYPE: '',
        POSTTYPE_NAME: '',
        TRAINTYPE_NAME: '',
        INDUSTRY1: '',
        INDUSTRY2: '',
        INDUSTRY_END_ID: '',
        INDUSTRY_END_ID_NAME: ''
      },
      hideUpload: false, // 显示图片
      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' }],
        // trainAllName: [{ required: true, message: '请选择培训类型', trigger: 'change' }],
        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: '禁用' }
      ],
      authProgress: 0,
      isShowProgress: false,
      player: {},
      isEditVideo: false,
      file: {},
      // 行业类型树
      treeLoading: false,
      industryTreeData: [],
      industryProps: {
        children: 'nodes',
        value: 'INDUSTRYTYPE_ID',
        label: 'NAME'
      },
      trainAllName: '',
      dialogFormVisible: false,
      postList: [],
      trainingList: [],
      defaultExpanded: [],
      defaultChecked: [],
      initFlag: false,
      POSTTYPE_NAME: '',
      TRAINTYPE_NAME: '',
      INDUSTRY1: '',
      INDUSTRY2: '',
      INDUSTRY_END_ID: '',
      INDUSTRY_END_ID_NAME: '',
      filterText: ''

    }
  },
  watch: {

    // 'TRAINTYPE': {
    //   handler(newVal, oldVal) {
    //     console.info(oldVal)
    //     // if (this.dialogType == 'add' || (oldVal != null && oldVal != '')) { // 编辑初始化时，不监听
    //     this.POSTTYPE = ''
    //     this.POSTTYPE_NAME = ''
    //     this.getPostList()
    //     this.INDUSTRY1 = ''
    //     this.INDUSTRY2 = ''
    //     this.INDUSTRY_END_ID = ''
    //     this.INDUSTRY_END_ID_NAME = ''
    //     this.industryTreeData = []
    //     // }
    //   },
    //   immediate: false

    // },
    'POSTTYPE': {
      handler() {
        // if (!this.initFlag) {
        //   this.initFlag = true
        // }
        // this.INDUSTRY1 = ''
        // this.INDUSTRY2 = ''
        // this.INDUSTRY_END_ID = ''
        // this.INDUSTRY_END_ID_NAME = ''
        // this.getTreeList()
      }
    },
    'filterText': {
      handler(val) {
        this.$refs.tree.filter(val)
      }
    }
  },
  created() {
    this.getTrainingList()
    this.getTeacher()
    // this.getPostList()
    this.getTreeList()
    this.getDicListByPID('4459d3ff36d1475d8b2266da959fcc44', 'relatedTermList') // 相关词条
    if (this.$parent.COURSEWAREID) {
      this.dialogType = 'edit'
      this.getData()
    }
  },
  methods: {
    selectIndustry() {
      this.form.TRAINTYPE = this.TRAINTYPE
      this.form.POSTTYPE = this.POSTTYPE
      this.form.POSTTYPE_NAME = this.POSTTYPE_NAME
      this.form.TRAINTYPE_NAME = this.TRAINTYPE_NAME
      this.form.INDUSTRY1 = this.INDUSTRY1
      this.form.INDUSTRY2 = this.INDUSTRY2
      this.form.INDUSTRY_END_ID = this.INDUSTRY_END_ID
      this.form.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)

      const tName2 = tName.filter(item => {
        return item !== '1'
      })
      // this.form.trainAllName = this.form.TRAINTYPE_NAME + iname + pn
      this.form.trainAllName = tName2.join('-').replace(',', '')
      this.dialogFormVisible = false
    },
    treeCheck(data, list) {
      let thisNode = this.$refs.tree.getNode(data) // 获取当前节点
      this.form.INDUSTRY_ALL_TYPE = []
      this.form.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.form.INDUSTRY_ALL_TYPE = keys
      this.form.INDUSTRY_ALL_NAME = names
    },
    handleNodeClick(node, data, value) {
      this.INDUSTRY_END_ID = node.INDUSTRYTYPE_ID
      this.INDUSTRY_END_ID_NAME = node.NAME
      // this.form.PARENT_ID = node.id
      // this.getList(node.id)
    },
    filterNode(value, data) {
      if (!value) return true
      return data.NAME.indexOf(value) !== -1
    },
    checkPost(item) {
      this.$set(this, 'POSTTYPE', item.POSTTYPE_ID)
      this.$set(this, 'POSTTYPE_NAME', item.NAME)
      // this.form.POSTTYPE = id
    },
    checkTrain(item) {
      this.getPostList(item.TRAININGTYPE_ID)
      this.$set(this, 'TRAINTYPE', item.TRAININGTYPE_ID)
      this.$set(this, 'TRAINTYPE_NAME', item.NAME)
      // this.form.TRAINTYPE = id
    },
    // 培训类型
    getTrainingList() {
      requestFN(
        '/trainingtype/listAll',
        { }
      ).then((data) => {
        this.trainingList = data.varList
      }).catch((e) => {
      })
    },
    // 岗位类型
    getPostList(TRAININGTYPE_ID) {
      requestFN(
        '/posttype/listAll',
        { TRAININGTYPE_ID: TRAININGTYPE_ID }
      ).then((data) => {
        this.postList = data.varList
      }).catch((e) => {
      })
    },
    // 行业类型树
    getTreeList() {
      this.treeLoading = true
      requestFN(
        '/industrytype/getIndustryTree',
        { }
      ).then((data) => {
        this.treeLoading = false
        this.industryTreeData = data.zTreeNodes
      }).catch((e) => {
        this.treeLoading = false
      })
    },

    getRowKey(row) {
      return row.VIDEOCOURSEWARE_ID
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.KEYWORDS = ''
      this.TRAINTYPE = ''
      this.POSTTYPE = ''
      this.vidSate = ''
      this.teacherKey = ''
      this.$refs.keyGwRef.clearHandle()
      this.$refs.trainingSectionRef.clearHandle()
      this.$refs.keyTrainTypeRef.clearHandle()
      this.getQuery()
    },
    // 获取列表
    getList() {
      this.listLoading = true
      requestFN(
        '/videocourseware/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: this.KEYWORDS,
          TRAINTYPE: this.TRAINTYPE,
          POSTTYPE: this.POSTTYPE,
          STATE: this.vidSate,
          teacherKey: this.teacherKey,
          trainingSectionKey: this.trainingSectionKey
        }
      ).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'
      // this.dialogType = 'add'
      // this.resetForm()
      // // this.getDict()
      // this.dialogFormEdit = true
    },
    getData() {
      // this.getDict()
      this.resetForm()
      requestFN(
        '/videocourseware/goEdit',
        {
          VIDEOCOURSEWARE_ID: this.$parent.COURSEWAREID
        }
      ).then((data) => {
        this.form = Object.assign({}, data.pd) // copy obj
        this.form.trainAllName = data.pd.TYPENAME
        // // console.info(this.form)
        // // //培训板块     相关词条 回显
        // var relatedTermIDS = [] //  相关词条
        // data.coursewareAllList.forEach((item, index) => {
        //   if (item.RECORD_TYPE_ID == 'relatedTerm') {
        //     const valID = item.DICTIONARIES_IDS.split(',')
        //     relatedTermIDS.push(valID)
        //   }
        // })
        // this.trainAllName = data.pd.TRAININGTYPE_NAME + '-' + data.pd.POSTTYPE_NAME + '-' + data.pd.INDUSTRY_END_ID_NAME
        // 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.TRAINTYPE = this.form.TRAINTYPE
        // this.POSTTYPE = this.form.POSTTYPE
        // this.INDUSTRY1 = this.form.INDUSTRY1
        // this.INDUSTRY2 = this.form.INDUSTRY2
        // this.INDUSTRY_END_ID = this.form.INDUSTRY_END_ID
        // this.defaultExpanded = [this.INDUSTRY1, this.INDUSTRY2, this.INDUSTRY_END_ID]
        // this.defaultChecked = [this.INDUSTRY1, this.INDUSTRY2, this.INDUSTRY_END_ID]
        // this.getPostList()
        // this.getTreeList()
        this.dialogFormEdit = true
      }).catch((e) => {
        this.listLoading = false
      })
    },

    // 修改
    handleEditState(ID, state) {
      requestFN(
        '/videocourseware/editState',
        {
          VIDEOCOURSEWARE_ID: ID,
          STATE: state
        }
      ).then((data) => {
        this.getList()
      }).catch((e) => {
        this.listLoading = false
      })
    },
    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
      //   }
      // }

      // if (!this.form.INDUSTRY_END_ID) {
      //   this.$message.warning('请选择培训类型')
      //   return false
      // }
      this.$refs.form.validate(valid => {
        if (valid) {
          Object.keys(this.form).map(key => {
            if (key == 'relatedTerm' && this.form[key]) {
              var relatedTermIDS = ''
              this.form[key].forEach((item, index) => {
                relatedTermIDS += item + ';'
              })
              this.form.relatedTerm = relatedTermIDS
              // formData.append('relatedTerm', relatedTermIDS)
            }
          })
          requestFN(
            '/videocourseware/complete',
            this.form
          ).then((data) => {
            this.$message({
              message: data.message,
              type: data.type
            })
            this.isShowProgress = false
            this.dialogFormEdit = false

            this.$parent.activeName = 'List'
            // this.getList()
          }).catch((e) => {
          })
        } 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.$parent.activeName = 'refreshList'
        // this.getList()
      }).catch((e) => {
      })
    },
    handleQuestion(ID) {
      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) => {

      })
    },
    getIdcList() {
      this.getDicListByPID('052369aa22d242118236cde52d0c67ea', 'trainDicList')
      this.getDicListByPID('f6a7c4f5602f46e291d06b1390a3f820', 'postDicList')
      // this.getDicListByPID('d538d11e4eec409ab428f5d2f3c67c24', 'trainingSectionList') // 培训板块
      this.getDicListByPID('4459d3ff36d1475d8b2266da959fcc44', 'relatedTermList') // 相关词条
      this.getTeacher() // 获取教师信息
    },
    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'))
    },

    goBack() {
      this.$parent.activeName = 'List'
    },
    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
    }
  }
}
</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>
<style lang="sass" scoped>
.el-row
  margin-bottom: 16px
  &:last-child
    margin-bottom: 0
    .form-group
      display: flex
      align-items: center
      margin-right: 20px
      .form-label
        padding: 9px 15px
        font-size: 14px
        width: 240px
        font-weight: 400
        line-height: 20px
        text-align: right
        margin-bottom: 0
        .star
          color: red
          padding-right: 4px
      .input-block
        flex: 1
        min-height: 36px
        position: relative

.disContent
  padding: 0 20px
  display: flex
  align-items: center
  flex-wrap: wrap
  .img-div
    position: relative
    margin: auto 10px 10px 10px
    width: 120px
    height: 120px
    border-radius: 4px
    &>img
      width: 100%
      height: 100%

    .disContent-hide
      position: absolute
      width: 100%
      height: 100%
      border-radius: 4px
      background-color: rgba(48, 48, 48, 0.59)
      display: none
      top: 0
      left: 0

      .Delete
        position: absolute
        bottom: 14px
        right: 10px
        font-size: 16px
        color: white
        cursor: pointer

        .editCss
          .Delete
            font-size: 16px
            right: 90px

      .yuLan
        position: absolute
        bottom: 23px
        right: 50px
        font-size: 16px
        color: white
        cursor: pointer

      .yuLanImg
        position: absolute
        bottom: 0
        right: 0
        width: 100%
        height: 100%
        opacity: 0

  .img-div:hover .disContent-hide
    display: block

  .pitchCss
    border: 1px solid #202e78
    transition: all linear 0.1s
    width: 116px
    height: 116px
</style>
