<template>
  <div class="app-warp">
    <div class="app-structure">
      <el-page-header content="添加课程" @back="goback"/>
      <div class="app-search" style="margin-top: 20px">
        <el-form ref="searchFrom" :model="searchFrom" label-width="80px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="课程名称" prop="KEYWORDS">
                <el-input v-model="searchFrom.KEYWORDS" placeholder="请输入课程名称"/>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="创建时间" prop="TIME">
                <el-date-picker
                  v-model="searchFrom.TIME"
                  style="width: 100%;"
                  type="daterange"
                  range-separator="至"
                  start-placeholder="开始日期"
                  end-placeholder="结束日期"
                  format="yyyy-MM-dd"
                  value-format="yyyy-MM-dd"
                />
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item label="课程状态" prop="ISSELL">
                <el-select v-model="searchFrom.ISSELL" placeholder="请选择课程状态" style="width: 100%;">
                  <el-option :value="1" label="上架"/>
                  <el-option :value="0" label="下架"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="!searchFromCollapse" :span="6">
              <el-form-item label="培训类型" prop="TRAINTYPE">
                <el-select v-model="searchFrom.TRAINTYPE" placeholder="请选择培训类型" style="width: 100%;">
                  <el-option v-for="item in trainingList" :key="item.TRAININGTYPE_ID" :label="item.NAME" :value="item.TRAININGTYPE_ID"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="!searchFromCollapse" :span="6">
              <el-form-item label="行业类型" prop="INDUSTRY">
                <SelectTree
                  ref="keyIndTypeRef"
                  :options="industryTreeData"
                  :props="industryProps"
                  v-model="searchFrom.INDUSTRY"
                  style="width: 100%;"
                  placeholder="请选择培训行业类型"/>
              </el-form-item>
            </el-col>
            <el-col v-show="!searchFromCollapse" :span="6">
              <el-form-item label="岗位类型" prop="POSTTYPE">
                <el-select v-model="searchFrom.POSTTYPE" placeholder="请选择岗位类型" style="width: 100%;">
                  <el-option v-for="item in postList" :key="item.POSTTYPE_ID" :label="item.NAME" :value="item.POSTTYPE_ID"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col v-show="!searchFromCollapse" :span="6">
              <el-form-item label="培训级别" prop="TRAINLEVEL">
                <el-select v-model="searchFrom.TRAINLEVEL" placeholder="请选择培训级别" style="width: 100%;">
                  <el-option v-for="item in trainLevelList" :key="item.TRAINLEVEL_ID" :label="item.NAME" :value="item.TRAINLEVEL_ID"/>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="6">
              <el-form-item style="text-align: right">
                <el-button v-waves type="primary" icon="el-icon-search" class="ml-10" @click="getQuery">
                  搜索
                </el-button>
                <el-button icon="el-icon-refresh" @click="goKeyReset">
                  重置
                </el-button>
                <el-button type="text" @click="searchFromCollapse = !searchFromCollapse">{{ searchFromCollapse ? '展开' : '合并' }} <i :class="searchFromCollapse ? 'el-icon-arrow-down' : 'el-icon-arrow-up'"/></el-button>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
      <div class="app-tools">
        <div class="app-function">
          <el-button v-show="add" type="primary" icon="el-icon-plus" @click="handleAdd">保存课程</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',
            'font-weight': 'bold',
            'color': '#000'
          }"
          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" />
          <el-table-column prop="CURRICULUMNAME" label="课程名称" />
          <el-table-column v-if="checkList.includes('上传时间')" :show-overflow-tooltip="true" prop="CREATTIME" label="上传时间" />
          <el-table-column v-if="checkList.includes('培训类型')" :show-overflow-tooltip="true" prop="TRAININGTYPE_NAME" label="培训类型" />
          <el-table-column v-if="checkList.includes('行业类型')" :show-overflow-tooltip="true" prop="INDUSTRY_END_NAME" label="行业类型" />
          <el-table-column v-if="checkList.includes('岗位类型')" prop="POSTTYPE_NAME" label="岗位类型" align="center" />
          <el-table-column v-if="checkList.includes('培训级别')" prop="TRAINLEVEL_NAME" label="培训级别" align="center" />
          <el-table-column v-if="checkList.includes('课程属性')" prop="COLLECTIVE" label="课程属性" align="center" >
            <template slot-scope="{row}">
              <template v-if="row.COLLECTIVE=='0'">
                <div>平台通用</div>
              </template>
              <template v-else>
                <div>指定机构专用</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column v-if="checkList.includes('课件数')" prop="COURSEWARECOUNT" label="课件数" width="90" align="center" />
          <el-table-column v-if="checkList.includes('课程时长')" prop="VIDEOTIME" label="课程时长" width="140" align="center">
            <template slot-scope="{row}">
              {{ secondsCount(row.VIDEOTIME) }}
            </template>
          </el-table-column>
          <el-table-column v-if="checkList.includes('课程状态')" prop="ISSELL" label="课程状态" width="100" align="center">
            <template slot-scope="{row}">
              <template v-if="row.ISSELL=='1'">
                <div><span class="status-dot status-green"/>上架</div>
              </template>
              <template v-else-if="row.ISSELL=='0'">
                <div><span class="status-dot status-red"/>下架</div>
              </template>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="150">
            <template slot-scope="{row}">
              <el-button type="text" @click="handleShow(row.CURRICULUM_ID)">查看</el-button>
            </template>
          </el-table-column>
        </el-table>
        <div class="page-btn-group">
          <div/>
          <pagination :total="total" :page.sync="listQuery.page" :limit.sync="listQuery.limit" @pagination="getList" />
        </div>
      </div>
    </div>
  </div>
</template>
<script>
import Pagination from '@/components/Pagination' // 通过 el-pagination二次打包
import { requestFN } from '@/utils/request'
import waves from '@/directive/waves' // waves directive
import SelectTree from '@/components/SelectTree'
export default {
  components: { Pagination, SelectTree },
  directives: { waves },
  data() {
    return {
      listLoading: true,
      add: true,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      searchFrom: {
        KEYWORDS: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        TRAINLEVEL: '',
        INDUSTRY: '',
        TIME: [],
        ISSELL: ''
      },
      searchFromCollapse: true,
      total: 0,
      config: config,
      KEYWORDS: '',
      TRAINTYPE: '',
      POSTTYPE: '',
      LEARNERCATEGORY: '',

      varList: [],
      pd: [],

      form: {
        CURRICULUMNAME: '', // 课程名称
        CURRICULUMINTRODUCE: '', // 课程介绍
        CURRICULUMAIM: '', // 课程目的
        STARTTIME: '', // 开始时间
        ENDTIME: '', // 结束时间
        CURRICULUMUSERS: '', // 适用人员
        VIDEOCOURSEWARES: '', // 视频课件组
        DATACOURSEWARES: '', // 资料课件组，
        TRAINTYPE: '', // 培训行业类型
        POSTTYPE: '', // 岗位培训类型
        FFILE: {}, // 图片
        dialogImageUrl: '',
        dialogVisible: false,
        CLASSHOUR: 0, // 课时总和
        trainingSection: []
      },
      hideUpload: false, // 显示图片

      CURRICULUM_ID: '',
      CURRICULUMUSERS: '',
      rules: {
        CURRICULUMNAME: [{ required: true, message: '课程名称不能为空', trigger: 'blur' }],
        // TRAINTYPE: [{ required: true, message: '培训行业类型不能为空', trigger: 'blur' }],
        POSTTYPE: [{ required: true, message: '岗位培训类型不能为空', trigger: 'blur' }],
        CURRICULUMINTRODUCE: [{ required: true, message: '课程介绍不能为空', trigger: 'blur' }]
      },
      dicListMap: {
        outlineDicList: [],
        trainDicList: [],
        postDicList: [],
        trainingSectionList: [],
        relatedTermList: []
      },
      videoMap: { // 视频课件数据
        list: [],
        total: 0,
        page: 1,
        limit: 10,
        xzVidoList: []
      },
      dataMap: {// 资料课件数据
        list: [],
        total: 0,
        page: 1,
        limit: 10,
        xzDataList: []
      },
      trainingList: [],
      postList: [],
      CORPINFO_ID: '',
      trainLevelList: [],
      industryTreeData: [],
      industryProps: {
        children: 'nodes',
        label: 'NAME',
        value: 'INDUSTRYTYPE_ID'
      },
      checkList: ['上传时间', '培训类型', '行业类型', '岗位类型', '培训级别', '课程属性', '课件数', '课程时长', '课程状态'],
      checkboxList: ['上传时间', '培训类型', '行业类型', '岗位类型', '培训级别', '课程属性', '课件数', '课程时长', '课程状态']
    }
  },
  watch: {
    // 'searchFrom.TRAINTYPE': {
    //   handler() {
    //     this.searchFrom.POSTTYPE = ''
    //     this.searchFrom.INDUSTRY = ''
    //     this.searchFrom.TRAINLEVEL = ''
    //     this.getPostList()
    //     this.getTrainLevelList()
    //   }
    // },
    'searchFrom.POSTTYPE': {
      handler(newVal, OldVal) {
        this.searchFrom.TRAINLEVEL = ''
        this.getTrainLevelList()
      }
    }
  },
  created() {
    this.getList()
    this.getIndTree()
    this.getPostList()
    this.getTrainingList()
    this.CORPINFO_ID = this.$parent.parentObj.CORPINFO_ID
  },
  inject: ['setActiveName', 'setCorpInfoId'],
  methods: {
    getRowKey(row) {
      return row.CURRICULUM_ID
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.$refs.searchFrom.resetFields()
      this.dicListMap['postDicList'] = []
      this.dicListMap['industryTreeData'] = []
      this.dicListMap['trainLevelDicList'] = []
      this.$refs.keyIndTypeRef.clearHandle()
      this.getList()
    },
    // 获取列表
    getList() {
      this.listLoading = true
      requestFN(
        '/curPrivate/priCurriculumlist?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          ...this.searchFrom,
          STARTTIME: this.searchFrom.TIME[0],
          COLLECTIVE: 1,
          ISCOMPLETE: '1',
          CORPINFO_ID: this.$parent.parentObj.CORPINFO_ID,
          ENDTIME: this.searchFrom.TIME[1]
        }
      ).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
      })
    },
    // 添加
    handleAdd() {
      if (this.$refs.multipleTable.selection.length == 0) {
        this.$message.warning('请选择课程')
        return false
      }
      this.curriculumIdList = []
      const curriculumList = this.$refs.multipleTable.selection// 选择的视频课件内容
      curriculumList.forEach(item => {
        this.curriculumIdList.push(item.CURRICULUM_ID)
      })
      requestFN(
        '/curPrivate/add',
        {
          curriculumIdList: JSON.stringify(this.curriculumIdList),
          CORPINFO_ID: this.CORPINFO_ID
        }
      ).then((data) => {
        this.$message.success('保存成功')
        this.$refs.multipleTable.clearSelection()
        this.getList()
      }).catch((e) => {
      })
    },
    goback() {
      this.setActiveName('curriculumList')
    },
    // 判断按钮权限，用于是否显示按钮
    hasButton: function() {
      var keys = 'curriculum:add,curriculum:del,curriculum:edit,toExcel'
      requestFN(
        '/head/hasButton',
        {
          keys: keys
        }
      ).then((data) => {
        this.add = data.curriculumfhadminadd		// 新增权限
        this.del = data.curriculumfhadmindel		// 删除权限
        this.edit = data.curriculumfhadminedit	// 修改权限
      }).catch((e) => {
        this.listLoading = false
      })
    },
    resetForm() {
      this.form = {
        CURRICULUMNAME: '', // 课程名称
        CURRICULUMINTRODUCE: '', // 课程介绍
        CURRICULUMAIM: '', // 课程目的
        STARTTIME: '', // 开始时间
        ENDTIME: '', // 结束时间
        CURRICULUMUSERS: '', // 适用人员
        VIDEOCOURSEWARES: '', // 视频课件组
        DATACOURSEWARES: '', // 资料课件组，
        TRAINTYPE: '', // 培训行业类型
        POSTTYPE: '', // 岗位培训类型
        FFILE: {}, // 图片
        dialogImageUrl: '',
        dialogVisible: false,
        hideUpload: false, // 显示图片
        CLASSHOUR: 0 // 课时总和
      }

      if (this.$refs.upload) {
        this.$refs.upload.clearFiles()
        this.form.FFILE = {}
        this.hideUpload = false
      }
      this.resetVideoAndDataMap()
    },
    getIdcList() {
      this.getDicListByPID('d538d11e4eec409ab428f5d2f3c67c24', 'trainingSectionList') // 培训板块
      this.getDicListByPID('4459d3ff36d1475d8b2266da959fcc44', 'relatedTermList') // 相关词条
      this.getDicListByPID('052369aa22d242118236cde52d0c67ea', 'trainDicList')
      this.getDicListByPID('f6a7c4f5602f46e291d06b1390a3f820', 'postDicList')
    },
    getDicListByPID(pId, listName) {
      requestFN(
        '/dictionaries/listAllDictToParId',
        {
          parentId: pId
        }
      ).then((data) => {
        this.dicListMap[listName] = JSON.parse(data.zTreeNodes)
      }).catch((e) => {

      })
    },

    getCourseReset(type) { // 视频课件和资料课件的条件重置
      if (type == '1') {
        this.videoMap.KEYWORDS = ''
        this.videoMap.tarinTypeID = ''
        this.$refs.keyvidHyRef.clearHandle()
        this.videoMap = { // 视频课件数据
          list: [],
          total: 0,
          page: 1,
          limit: 10,
          xzVidoList: []
        }
        this.getVoidList()
      }
      if (type == '2') {
        this.dataMap.KEYWORDS = ''
        this.dataMap.tarinTypeID = ''
        this.$refs.keydataHyRef.clearHandle()
        this.dataMap = {// 资料课件数据
          list: [],
          total: 0,
          page: 1,
          limit: 10,
          xzDataList: []
        }
        this.getDataList()
      }
    },
    getRowKeyByVideoTable(row) {
      return row.VIDEOCOURSEWARE_ID
    },
    handleShow(rowID) {
      this.$parent.CURRICULUM_ID = rowID
      this.$parent.InfoBace = 'ADD'
      this.$nextTick(() => {
        this.setActiveName('INFO')
      })
    },
    getTrainingList() {
      requestFN(
        '/trainingtype/listAll',
        {}
      ).then((data) => {
        this.trainingList = data.varList
      }).catch((e) => {
      })
    },
    getPostList() {
      requestFN(
        '/posttype/listAll',
        { TRAININGTYPE_ID: this.searchFrom.TRAINTYPE }
      ).then((data) => {
        this.postList = data.varList
      }).catch((e) => {
      })
    },
    getTrainLevelList() {
      requestFN(
        '/trainleveltype/listAll',
        { POSTTYPE_ID: this.searchFrom.POSTTYPE }
      ).then((data) => {
        this.trainLevelList = data.varList
      }).catch((e) => {
      })
    },
    getIndTree() {
      requestFN(
        '/industrytype/getIndustryTree',
        { POSTTYPE_ID: this.searchFrom.POSTTYPE }
      ).then((data) => {
        this.industryTreeData = data.zTreeNodes
      }).catch((e) => {
      })
    },
    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>
.tree_dialog .selectTree{
  width: 300px;
}
.hide .el-upload--picture-card {
  display: none;
}
</style>
