<template>
  <div class="app-container">
    <div class="filter-container">
      <div class="app-search">
        <el-form ref="searchFrom" :model="searchFrom" label-width="100px">
          <el-row>
            <el-col :span="6">
              <el-form-item label="课程名称" prop="KEYWORDS">
                <el-input v-model="searchFrom.KEYWORDS" placeholder="请输入课程名称" style="width: 300px"/>
              </el-form-item>
            </el-col>
            <el-col :span="6"/>
            <el-col :span="6"/>
            <el-col :span="6"/>
            <!--            <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="结束日期"/>-->
            <!--              </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="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="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="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: left">-->
            <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>-->
          <!--          <el-button v-show="edit" type="info" icon="el-icon-switch-button" @click="handleBatchEditState">批量下架</el-button>-->
        </div>
      </div>
      <div class="app-container">
        <el-table
          v-loading="listLoading"
          ref="multipleTable"
          :data="varList"
          :row-key="getRowKey"
          :header-cell-style="{
            '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="CURRICULUM_NAME" label="课程名称" />
          <el-table-column :show-overflow-tooltip="true" prop="CREATTIME" label="上传时间" />
          <el-table-column prop="COURSEWARE_NUMBER" label="课件数" width="90" align="center" />
          <el-table-column prop="VIDEOTIME" label="课程时长" width="140" align="center">
            <template slot-scope="{row}">
              {{ secondsCount(row.TIME) }}
            </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>
              <span class="app-divider"/>
              <el-button type="text" @click="syncCurriculum(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: false,
      del: false,
      edit: false,
      listQuery: {
        page: 1,
        limit: 10
      },
      searchFrom: {
        KEYWORDS: '',
        TRAINTYPE: '',
        POSTTYPE: '',
        TRAINLEVEL: '',
        INDUSTRY: '',
        TIME: [],
        ISSELL: ''
      },
      INDUSTRY: '',
      searchFromCollapse: true,
      total: 0,
      config: config,
      KEYWORDS: '',
      trainingSectionKey: [],
      TRAINTYPE: '',
      POSTTYPE: '',
      LEARNERCATEGORY: '',
      dates: ['', ''], // 区间条件
      STARTTIMES: [],
      ENDTIMES: [],
      varList: []
    }
  },
  created() {
    this.getList()
  },
  methods: {
    getRowKey(row) {
      return row.CURRICULUM_ID
    },
    // 搜索
    getQuery() {
      this.$refs.multipleTable.clearSelection()
      this.getList()
    },
    goKeyReset() {
      this.$refs.searchFrom.resetFields()
      // this.$refs.keyIndTypeRef.clearHandle()
      // this.dicListMap['postDicList'] = []
      // this.dicListMap['industryTreeData'] = []
      // this.dicListMap['trainLevelDicList'] = []
      this.getList()
      this.KEYWORDS = ''
      this.getQuery()
    },
    syncCurriculum(CURRICULUM_ID) {
      this.$confirm('确定要加入吗?', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(() => {
        this.listLoading = true
        requestFN(
          '/videoRes/syncCurriculum',
          {
            CURRICULUM_ID: CURRICULUM_ID
          }
        ).then(() => {
          this.$message({
            message: '加入成功',
            type: 'success'
          })
          this.listLoading = false
          this.varList = []
          this.listQuery.page = 1
          this.getList()
        }).catch((e) => {
          this.listLoading = false
        })
      }).catch(() => {
      })
    },
    // 获取列表
    getList() {
      this.listLoading = true
      requestFN(
        '/videoRes/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          ...this.searchFrom
        }
      ).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
      })
    },
    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 + '秒'
        }
      }
    },
    handleShow(rowID) {
      this.$parent.CURRICULUM_ID = rowID
      this.$parent.activeName = 'Info'
    }
  }
}

</script>
<style>
.tree_dialog .selectTree{
  width: 300px;
}
  .hide .el-upload--picture-card {
    display: none;
  }
</style>
