<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>
        <div class="course_form">
          <el-form ref="form" :rules="rules" :model="form" label-width="110px">
            <el-form-item label="课程名称" prop="CURRICULUMNAME">
              <el-input v-model="form.CURRICULUMNAME" maxlength="255" placeholder="这里输入课程名称..." title="课程名称"/>
            </el-form-item>
            <el-form-item label="培训类型" class="is-required">
              <div @click="dialogFormVisible = true">
                <el-input
                  v-model="trainAllName"
                  :readonly="true"
                  maxlength="255"
                  placeholder="这里输入培训类型..."
                  title="培训类型"/>
              </div>
            </el-form-item>
            <el-form-item label="课程描述" prop="CURRICULUMINTRODUCE">
              <el-input
                v-model="form.CURRICULUMINTRODUCE"
                rows="5"
                type="textarea"
                maxlength="255"
                placeholder="这里输入课程介绍..."
                title="课程介绍"/>
            </el-form-item>

            <el-form-item label="课程封面" class="is-required">
              <div v-if="hideUpload" class="disContent">
                <div v-for="(item, index) in images" :key="index" class="img-div">
                  <img :src="config.fileUrl + item.FILEPATH" alt="">
                  <div class="disContent-hide">
                    <el-tooltip class="item" effect="dark" content="预览" placement="top">
                      <span class="el-icon-zoom-in yuLan">
                        <viewer :images="images">
                          <img :src="config.fileUrl + item.FILEPATH" alt="" class="yuLanImg">
                        </viewer>
                      </span>
                    </el-tooltip>
                    <el-tooltip class="item" effect="dark" content="删除" placement="top">
                      <span class="Delete" @click="deleteImage(index)"><i class="el-icon-delete" /></span>
                    </el-tooltip>
                  </div>
                </div>
              </div>
              <el-upload
                ref="upload"
                :class="{hide:hideUpload}"
                :limit="1"
                :on-remove="handleRemove"
                :on-preview="handlePictureCardPreview"
                :on-change="beforeFileUpload"
                :auto-upload="false"
                class="avatar-uploader"
                action="#"
                accept=".jpg,.jpeg,.png"
                list-type="picture-card">
                <i class="el-icon-plus"/>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible">
                <img :src="dialogImageUrl" width="100%" alt="">
              </el-dialog>
            </el-form-item>
          </el-form>
        </div>
        <div class="level-title">
          <h1>课程章节</h1>
        </div>
        <div class="level-tree">
          <el-tree
            :data="chapterList"
            :props="{children: 'nodes', label: 'COURSEWARENAME'}"
            class="course-management-tree"
            style="margin-bottom: 15px;"
            default-expand-all>
            <span slot-scope="{ node, data }">
              <i v-if="data.COURSEWARENAME" class="el-icon-video-camera"/>
              <span>{{ data.NAME || data.COURSEWARENAME }}</span>
              <span v-if="data.COURSEWARENAME" style="display: inline-block;width: 200px;margin-left: 200px;">课件时长：{{ secondsCount(data.VIDEOTIME) }}</span>
              <el-button v-if="data.COURSEWARENAME" type="primary" size="mini" @click="goViewVideo(data)">预览</el-button>
              <el-button v-if="data.ISCOMPLETE == '0'" type="primary" size="mini" @click="goCompleteVideo(data)">完善</el-button>
            </span>
          </el-tree>
        </div>
        <div class="level-title">
          <h1>是否上下架</h1>
        </div>
        <el-form>
          <el-form-item label=" " class="is-required" prop = "ISSELL">
            <el-radio-group v-model="form.ISSELL">
              <el-radio label="1">上架</el-radio>
              <el-radio label="0">下架</el-radio>
            </el-radio-group>
          </el-form-item>
        </el-form>
        <div class="level-title">
          <h1>课程属性</h1>
        </div>
        <el-form>
          <el-form-item label=" " class="is-required" prop = "COLLECTIVE">
            <el-radio-group v-model="form.COLLECTIVE">
              <el-radio :label="0">平台通用</el-radio>
              <el-radio :label="1">机构专用</el-radio>
            </el-radio-group>
          </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>
    <el-dialog :visible.sync="dialogFormVisible" title="培训类型" top="80px" width="1040px">
      <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 class="type_field_item">
            <div class="type_field_top">培训级别</div>
            <div class="type_field_content type_pa">
              <div
                v-for="(item,i) in trainLevelList"
                :key="i"
                :class="TRAINLEVEL == item.TRAINLEVEL_ID?'type_li_active':''"
                class="type_li"
                @click="checkTrainLevel(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-if="dialogCoursewareShow" :visible.sync="dialogCoursewareShow" title="选择课件" width="90%">
      <el-form :model="videoMap" label-width="100px">
        <el-row>
          <el-col :span="6">
            <el-form-item label="课件名称" prop="KEYWORDS">
              <el-input v-model="videoMap.KEYWORDS" placeholder="请输入课件名称"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="讲师" prop="teacherKey">
              <el-input v-model="videoMap.teacherKey" placeholder="请输入讲师"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="培训类型" prop="TRAINTYPE">
              <el-select v-model="videoMap.TRAINTYPE" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in dicListMap.trainDicList"
                  :key="item.TRAININGTYPE_ID"
                  :label="item.NAME"
                  :value="item.TRAININGTYPE_ID"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="岗位类型" prop="POSTTYPE">
              <el-select v-model="videoMap.POSTTYPE" placeholder="请选择" style="width: 100%;">
                <el-option
                  v-for="item in dicListMap.postDicList"
                  :key="item.POSTTYPE_ID"
                  :label="item.NAME"
                  :value="item.POSTTYPE_ID"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="行业类型" prop="INDUSTRY">
              <SelectTree
                ref="keyIndTypeRef"
                :options="dicListMap.industryTreeData"
                :props="industryProps"
                v-model="videoMap.INDUSTRY"
                style="width: 100%;"
                placeholder="请选择培训行业类型"/>
            </el-form-item>
          </el-col>
          <el-col :span="6">
            <el-form-item label="相关词条" prop="teacherKey">
              <!--              <el-input v-model="videoMap.RELATEDTERM" placeholder="请输入相关词条"/>-->
              <el-cascader
                :options="dicListMap.relatedTermList"
                :props="{ multiple: true,value: 'id', children: 'nodes', label: 'name' }"
                v-model="videoMap.relatedTerm"
                placeholder="请输入相关词条"
                filterable/>
            </el-form-item>
          </el-col>
          <el-col :span="12">
            <el-form-item label-width="10px">
              <el-button v-waves type="primary" icon="el-icon-search" @click="getVideoList">搜索</el-button>
              <el-button v-waves type="success" icon="el-icon-refresh" @click="getCourseReset('1')"> 重置</el-button>
            </el-form-item>
          </el-col>
        </el-row>
      </el-form>
      <!--          课件名称、岗位培训类型-->
      <el-table
        v-loading="listLoading"
        ref="multipleVideoTable"
        :data="videoMap.list"
        :row-key="getRowKeyByVideoTable"
        :header-cell-style="{ 'font-weight': 'bold','color': '#000' }"
        tooltip-effect="dark"
        border
        fit
        highlight-current-row>
        <el-table-column
          v-if="addCouType === 'multiple'"
          :reserve-selection="true"
          type="selection"
          width="55"
          align="center"/>
        <el-table-column v-if="addCouType === 'radio'" width="35" align="center">
          <template slot-scope="{row}">
            <el-radio v-model="videoCheck" :label="row.VIDEOCOURSEWARE_ID">
              <span style="display:none;">占位符</span>
            </el-radio>
          </template>
        </el-table-column>
        <el-table-column type="index" label="序号" width="50" align="center"/>
        <el-table-column prop="COURSEWARENAME" label="课程名称"/>
        <el-table-column prop="POSTTYPE_NAME" label="岗位"/>
        <el-table-column prop="INDUSTRY_LAST" label="行业类型"/>
        <el-table-column prop="TRAININGTYPE_NAME" label="课件类型"/>
        <el-table-column prop="TEACHERNAME" label="讲师"/>
        <el-table-column prop="CLASSHOUR" label="课件学时"/>
        <el-table-column prop="RELATEDTERMNAME" label="相关词条"/>
      </el-table>
      <pagination
        :total="videoMap.total"
        :page.sync="videoMap.page"
        :limit.sync="videoMap.limit"
        @pagination="getVideoList"/>
      <div slot="footer" class="dialog-footer">
        <el-button @click="dialogCoursewareShow = false">取 消</el-button>
        <el-button type="primary" @click="confirmByCou">确 定</el-button>
      </div>
    </el-dialog>
    <el-dialog :visible.sync="dialogViewVideo" title="预览" width="800px" @close="player.dispose()">
      <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'
import SelectTree from '@/components/SelectTree'
import { upload } from '../../../../utils/upload' // waves directive
export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      listLoading: false,
      config: config,
      dialogType: 'add',
      // 行业类型树
      treeLoading: false,
      industryTreeData: [],
      industryProps: {
        children: 'nodes',
        value: 'INDUSTRYTYPE_ID',
        label: 'NAME'
      },
      trainAllName: '',
      dialogFormVisible: false,
      postList: [],
      trainingList: [],
      trainLevelList: [],
      initFlag: false,
      TRAINLEVEL: '',
      TRAINLEVEL_NAME: '',
      TRAINTYPE: '',
      POSTTYPE: '',
      POSTTYPE_NAME: '',
      TRAINTYPE_NAME: '',
      INDUSTRY1: '',
      INDUSTRY2: '',
      INDUSTRY_END_ID: '',
      INDUSTRY_END_ID_NAME: '',
      filterText: '',
      dialogCoursewareShow: false,
      rules: {
        CURRICULUMNAME: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
        CURRICULUMINTRODUCE: [{ required: true, message: '课程描述不能为空', trigger: 'blur' }],
        COLLECTIVE: [{ required: true, message: '课程属性不能为空', trigger: 'blur' }],
        ISSELL: [{ required: true, message: '请选择是否上下架', trigger: 'blur' }]
      },
      form: {
        CURRICULUMNAME: '', // 课件名称
        CURRICULUMINTRODUCE: '', // 课件介绍
        INDUSTRY_ALL_TYPE: [],
        INDUSTRY_ALL_NAME: [],
        TRAINTYPE: '',
        POSTTYPE: '',
        POSTTYPE_NAME: '',
        TRAINTYPE_NAME: '',
        INDUSTRY_END_ID: '',
        INDUSTRY_END_ID_NAME: '',
        CATALOGUELEVEL: '1',
        COLLECTIVE: 0,
        ISSELL: ''
      },
      chapterList: [],
      videoMap: { // 视频课件数据
        list: [],
        total: 0,
        page: 1,
        limit: 10,
        xzVidoList: [],
        KEYWORDS: '',
        teacherKey: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        RELATEDTERM: '',
        INDUSTRY: ''
      },
      dicListMap: {
        outlineDicList: [],
        trainDicList: [],
        postDicList: [],
        trainingSectionList: [],
        relatedTermList: [],
        industryTreeData: []
      },
      videoCheck: '',
      addFirstChapterFlag: false,
      addCouType: '',
      addCouObj: {},
      hideUpload: false,
      dialogImageUrl: '',
      dialogVisible: false,
      dialogViewVideo: false,
      player: {},
      images: []
    }
  },
  watch: {

    'POSTTYPE': {
      handler(newVal, oldVal) {
        // if (!this.initFlag) {
        //   this.initFlag = true
        // }
        this.POSTTYPE = newVal
        if (this.POSTTYPE) {
          this.getTrainLevelList()
        }
      }
    },
    'filterText': {
      handler(val) {
        this.$refs.tree.filter(val)
      }
    }
  },
  created() {
    this.getTrainingList()
    this.getTrainList()
    this.getTreeList()
    // this.getPostList()
    this.getDicListByPID('4459d3ff36d1475d8b2266da959fcc44', 'relatedTermList') // 相关词条
    if (this.$parent.CURRICULUM_ID) {
      this.getData()
    }
  },
  methods: {
    // 保存
    confirm() {
      if (!this.form.INDUSTRY_END_ID) {
        this.$message.warning('请选择培训类型')
        return false
      }
      if (this.$refs.upload.uploadFiles.length === 0 && this.images.length == 0) {
        this.$message.warning('请上传课程封面')
        return false
      }
      // if (this.chapterList.length === 0) {
      //   this.$message.warning('课件内容不能为空')
      //   return false
      // }
      // if (this.form.CATALOGUELEVEL === '1') {
      //   for (let i = 0; i < this.chapterList.length; i++) {
      //     if (!this.chapterList[i].VIDEOCOURSEWARE_ID) {
      //       this.$message.warning('课件内容不能为空')
      //       return false
      //     }
      //   }
      // } else {
      //   for (let i = 0; i < this.chapterList.length; i++) {
      //     for (let j = 0; j < this.chapterList[i].nodes.length; j++) {
      //       if (!this.chapterList[i].nodes[j].VIDEOCOURSEWARE_ID) {
      //         this.$message.warning('课件内容不能为空')
      //         return false
      //       }
      //     }
      //   }
      // }
      if (!this.form.ISSELL) {
        this.$message.warning('请选择是否上下架')
        return false
      }
      this.$refs.form.validate(valid => {
        if (valid) {
          const loading = this.$loading({
            lock: true,
            text: '提交中...',
            spinner: 'el-icon-loading',
            background: 'rgba(0, 0, 0, 0.7)'
          })
          const formData = new FormData()
          Object.keys(this.form).map(key => {
            formData.append(key, this.form[key])
          })
          if (this.$refs.upload.uploadFiles.length > 0) {
            for (var i = 0; i < this.$refs.upload.uploadFiles.length; i++) {
              if (this.$refs.upload.uploadFiles[i]) {
                formData.append('FFILE', this.$refs.upload.uploadFiles[i].raw)
              }
            }
          }
          formData.delete('INDUSTRY_ALL_NAME')
          formData.delete('INDUSTRY_ALL_TYPE')
          formData.delete('INDUSTRY_END_ID')
          formData.append('INDUSTRY_END_ID', this.INDUSTRY_END_ID)
          formData.append('INDUSTRY_ALL_NAME', this.form.INDUSTRY_ALL_NAME.join('-'))
          formData.append('INDUSTRY_ALL_TYPE', this.form.INDUSTRY_ALL_TYPE.join(','))
          // formData.append('chapterList', JSON.stringify(this.chapterList))
          upload('/curriculum/completeEdit', formData).then((data) => {
            loading.close()
            if (data.message) {
              this.$message({
                message: data.message,
                type: 'warning'
              })
            } else {
              this.$message({
                message: '操作成功',
                type: 'success'
              })
              this.goBack()
            }
          }).catch((e) => {
            loading.close()
          })
        } else {
          return false
        }
      })
    },
    getData() {
      requestFN(
        '/curriculum/goEdit',
        { CURRICULUM_ID: this.$parent.CURRICULUM_ID }
      ).then((data) => {
        this.form = data.pd

        // this.trainAllName = data.pd.TRAININGTYPE_NAME + '-' + data.pd.POSTTYPE_NAME + '-' + data.pd.INDUSTRY_END_ID_NAME + '-' + data.pd.TRAINLEVEL_NAME
        if (this.form.COVERPATH) {
          this.images.push({ 'FILEPATH': this.form.COVERPATH })
          this.hideUpload = true
        }
        this.chapterList = data.chapterList
      }).catch((e) => {
        this.listLoading = false
      })
    },
    getDicListByPID(pId, listName) {
      requestFN(
        '/dictionaries/listAllDictToParId',
        {
          parentId: pId
        }
      ).then((data) => {
        this.dicListMap[listName] = JSON.parse(data.zTreeNodes)
      }).catch((e) => {

      })
    },
    addFirstChapter() {
      var firstChapter = {
        VIDEOCOURSEWARE_ID: '',
        NAME: '',
        showNameInput: true,
        SORT: this.chapterList.length + 1,
        iconDirection: '1',
        nodes: []
      }
      this.addFirstChapterFlag = true
      this.chapterList.push(firstChapter)
    },
    addSecondChapter(item) {
      var secondChapter = {
        VIDEOCOURSEWARE_ID: '',
        NAME: '',
        showNameInput: true,
        SORT: item.nodes.length + 1,
        nodes: []
      }
      item.nodes.push(secondChapter)
    },
    deleteImage() {
      this.images = []
      this.hideUpload = false
    },
    changeIcon(item, type) {
      item.iconDirection = type
    },
    inputBulr(item) {
      if (item.NAME) {
        setTimeout(() => {
          this.addFirstChapterFlag = false
          item.showNameInput = false
        }, 200)
      }
    },
    rename(item) {
      item.showNameInput = true
    },
    addCou(addCouType, addCouObj) {
      this.resetVideoAndDataMap()
      this.getVideoList()
      this.videoCheck = ''
      this.dialogCoursewareShow = true
      this.addCouType = addCouType
      this.addCouObj = addCouObj
    },
    getRowKeyByVideoTable(row) {
      return row.VIDEOCOURSEWARE_ID
    },
    resetVideoAndDataMap() {
      this.videoMap = { // 视频课件数据
        list: [],
        total: 0,
        page: 1,
        limit: 10,
        xzVidoList: [],
        KEYWORDS: '',
        teacherKey: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        RELATEDTERM: '',
        INDUSTRY: ''
      }
    },
    confirmByCou() {
      const chapterList = JSON.parse(JSON.stringify(this.chapterList))
      // eslint-disable-next-line no-unused-vars
      let expandChapterList = []
      if (this.addCouType === 'radio') {
        // 单选
        if (this.form.CATALOGUELEVEL === '2') {
          // 二级目录
          for (let i = 0; i < chapterList.length; i++) {
            expandChapterList.push(...chapterList[i].nodes)
          }
          for (let i = 0; i < expandChapterList.length; i++) {
            if (expandChapterList[i].VIDEOCOURSEWARE_ID === this.videoCheck) {
              this.$message.error('课件名称不能重复')
              return
            }
          }
          this.chapterList[this.addCouObj.index1].nodes[this.addCouObj.index2].VIDEOCOURSEWARE_ID = this.videoCheck
        } else {
          // 一级目录
          expandChapterList = [...chapterList]
          for (let i = 0; i < expandChapterList.length; i++) {
            if (expandChapterList[i].VIDEOCOURSEWARE_ID === this.videoCheck) {
              this.$message.error('课件名称不能重复')
              return
            }
          }
          this.chapterList[this.addCouObj.index1].VIDEOCOURSEWARE_ID = this.videoCheck
        }
      } else {
        // 多选
        const selection = this.$refs.multipleVideoTable.selection
        for (let i = 0; i < selection.length; i++) {
          selection[i].NAME = selection[i].COURSEWARENAME
        }
        if (this.form.CATALOGUELEVEL === '1') {
          // 一级目录
          expandChapterList = [...selection, ...this.chapterList]
          for (let i = 0; i < expandChapterList.length; i++) {
            for (let j = 1; j < expandChapterList.length; j++) {
              if (i !== j && expandChapterList[i].VIDEOCOURSEWARE_ID === expandChapterList[j].VIDEOCOURSEWARE_ID) {
                this.$message.error('课件名称不能重复')
                return
              }
            }
          }
          this.chapterList = [...this.chapterList, ...selection]
        } else {
          // 二级目录
          expandChapterList = [...selection]
          for (let i = 0; i < chapterList.length; i++) {
            expandChapterList.push(...chapterList[i].nodes)
          }
          for (let i = 0; i < expandChapterList.length; i++) {
            for (let j = 1; j < expandChapterList.length; j++) {
              if (i !== j && expandChapterList[i].VIDEOCOURSEWARE_ID === expandChapterList[j].VIDEOCOURSEWARE_ID) {
                this.$message.error('课件名称不能重复')
                return
              }
            }
          }
          this.chapterList[this.addCouObj.index1].nodes = [...this.chapterList[this.addCouObj.index1].nodes, ...selection]
        }
      }
      this.dialogCoursewareShow = false
      this.$forceUpdate()
    },
    deleteChapter(index, item) {
      let message = ''
      let title = ''
      if (item) {
        message = '你确定删除该二级项及关联的所有课件和试卷？'
        title = '删除二级项'
      } else {
        message = '你确定删除该一级项及下面所有二级项内容？'
        title = '删除一级项'
      }
      this.$confirm(message, title, {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        if (item) {
          item.nodes.splice(index, 1)
        } else {
          this.chapterList.splice(index, 1)
        }
        this.addFirstChapterFlag = false
        this.$message.success('删除成功')
      }).catch(() => {
        this.$message({
          type: 'info',
          message: '已取消删除'
        })
      })
    },
    getVideoList() { // 获取视频课件 videoMap.tarinTypeID
      this.listLoading = true
      requestFN(
        '/videocourseware/list?showCount=' + this.videoMap.limit + '&currentPage=' + this.videoMap.page,
        {
          KEYWORDS: this.videoMap.KEYWORDS,
          teacherKey: this.videoMap.teacherKey,
          TRAINTYPE: this.videoMap.TRAINTYPE,
          POSTTYPE: this.videoMap.POSTTYPE,
          RELATEDTERM: this.videoMap.RELATEDTERM,
          INDUSTRY: this.videoMap.INDUSTRY,
          STATE: '0'
        }
      ).then((data) => {
        this.listLoading = false
        this.videoMap.list = data.varList
        this.videoMap.total = data.page.totalResult
      }).catch((e) => {
      })
    },
    getCourseReset(type) { // 视频课件和资料课件的条件重置
      this.$refs.keyIndTypeRef.clearHandle()
      this.videoMap = { // 视频课件数据
        list: [],
        total: 0,
        page: 1,
        limit: 10,
        xzVidoList: [],
        KEYWORDS: '',
        teacherKey: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        RELATEDTERM: '',
        INDUSTRY: ''
      }
      this.getVideoList()
    },
    selectIndustry() {
      if (!this.POSTTYPE) {
        this.$message.warning('岗位类型必选')
        return
      }
      if (!this.TRAINTYPE) {
        this.$message.warning('培训类型必选')
        return
      }
      if (!this.TRAINLEVEL) {
        if (this.trainLevelList.length > 0) {
          this.$message.warning('培训级别必选')
          return
        }
      }
      if (!this.INDUSTRY_END_ID) {
        this.$message.warning('行业类型必选')
        return false
      }
      this.form.TRAINTYPE = this.TRAINTYPE
      this.form.TRAINTYPE_NAME = this.TRAINTYPE_NAME
      this.form.TRAINLEVEL = this.TRAINLEVEL
      this.form.TRAINLEVEL_NAME = this.TRAINLEVEL_NAME
      this.form.POSTTYPE = this.POSTTYPE
      this.form.POSTTYPE_NAME = this.POSTTYPE_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.INDUSTRY_END_ID_NAME ? '-' + this.INDUSTRY_END_ID_NAME : ''
      var tlName = this.form.TRAINLEVEL_NAME ? '-' + this.form.TRAINLEVEL_NAME : ''
      // this.trainAllName = this.form.TRAINTYPE_NAME + pn + iname + tlName
      this.trainAllName = this.form.TRAINTYPE_NAME + iname + pn + tlName
      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.$set(this, 'TRAINLEVEL', '')
      this.$set(this, 'TRAINLEVEL_NAME', '')
    },
    checkTrain(item) {
      this.getPostList(item.TRAININGTYPE_ID)
      this.$set(this, 'TRAINTYPE', item.TRAININGTYPE_ID)
      this.$set(this, 'TRAINTYPE_NAME', item.NAME)
      this.$set(this, 'POSTTYPE', '')
      this.trainLevelList = []
    },
    checkTrainLevel(item) {
      this.$set(this, 'TRAINLEVEL', item.TRAINLEVEL_ID)
      this.$set(this, 'TRAINLEVEL_NAME', item.NAME)
    },
    // 培训类型
    getTrainingList() {
      requestFN(
        '/trainingtype/listAll',
        {}
      ).then((data) => {
        this.trainingList = data.varList
      }).catch((e) => {
      })
    },
    changeCatLevel(level) {
      if (this.form.CATALOGUELEVEL === level) return
      this.addFirstChapterFlag = false
      this.form.CATALOGUELEVEL = level
      this.chapterList = []
    },
    // 岗位类型
    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
      })
    },
    // 岗位类型
    getTrainLevelList() {
      requestFN(
        '/trainleveltype/listAll',
        { POSTTYPE_ID: this.POSTTYPE }
      ).then((data) => {
        this.trainLevelList = data.varList
      }).catch((e) => {
      })
    },
    goBack() {
      this.$parent.activeName = 'refreshList'
    },
    handleSizeChange(val) {
      console.log(`每页 ${val} 条`)
    },
    handleCurrentChange(val) {
      console.log(`当前页: ${val}`)
    },
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= 1
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url
      this.dialogVisible = true
    },
    beforeFileUpload(file, fileList) {
      const types = ['image/jpeg', 'image/jpg', 'image/png']
      const isImage = types.includes(file.raw.type)
      if (!isImage) {
        this.$message.error('上传图片只能是 JPG、JPEG、PNG 格式!')
        fileList.pop()
      }
      this.hideUpload = fileList.length >= 1
    },
    getTrainList() {
      requestFN(
        '/trainingtype/listAll',
        {}
      ).then((data) => {
        this.dicListMap['trainDicList'] = data.varList
      }).catch((e) => {

      })
    },
    getPostList1() {
      requestFN(
        '/posttype/listAll',
        {}
      ).then((data) => {
        this.dicListMap['postDicList'] = data.varList
      }).catch((e) => {

      })
    },
    getIndTree() {
      requestFN(
        '/industrytype/getIndustryTree'
      ).then((data) => {
        this.dicListMap['industryTreeData'] = data.zTreeNodes
      }).catch((e) => {
      })
    },
    goCompleteVideo(row) {
      this.$parent.COURSEWAREID = row.VIDEOCOURSEWARE_ID
      this.$parent.activeName = 'CompleteVideo'
    },
    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
    },
    secondsCount(second) {
      if (!second) return 0
      const h = parseInt(second / 60 / 60, 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>

</style>

<style lang="sass" scoped>
.avatar-uploader
  ul
    margin: 0
    li
      padding: 0
.el-dialog__body
  padding: 0
.map-flex
  display: flex
  width: 500px
  align-items: center

.ud-flex
  display: flex
.form-group
  display: flex
  align-items: center
  .form-label
    padding: 0px 15px
    font-size: 14px
    width: 240px
    font-weight: 400
    text-align: right
    margin-bottom: 18px
    .star
      color: red
      padding-right: 4px
  .input-block
    display: flex

.disContent
  display: flex
  align-items: center
  flex-wrap: wrap
  .img-div
    position: relative
    margin: 0 10px 0px 0
    width: 108px
    height: 108px
    border-radius: 4px
    overflow: hidden
    &>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
  line-height: 32px

  .Delete
    position: absolute
    bottom: 14px
    right: 10px
    font-size: 16px
    color: white
    cursor: pointer
  .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>
