<template>
  <div class="app-container">
    <el-card class="box-card" style="margin-bottom:30px">
      <el-row :gutter="24">
        <el-col :span="16">
          <div style="overflow:hidden; text-overflow:ellipsis; white-space:nowrap;padding-right:20px ;color: #1890ff;font-size: 14px;">
            个人资源库 / {{title}} / 课件上传
          </div>
        </el-col>
        <el-col :span="8" style="text-align: right;">
          <el-button @click="$router.go(-1)" size="mini" round>返回</el-button>
        </el-col>
      </el-row>
    </el-card>
    <el-card class="box-card" style="margin-bottom:30px">
      <el-form :model="queryParams" label-width="112px" ref="queryForm" style="position: relative;">
        <el-form-item class="searchRadio" label="上传课件：" style="margin-bottom: 60px;">
          <file-upload @input="uploadChanged"></file-upload>
        </el-form-item>
        <el-form-item label="课件名称：" style="margin-top:30px;">
          <el-input v-model="resourcesName" placeholder="请填写课件名称"></el-input>
        </el-form-item>
        <form-search labelWidth="75px" :searchformShow="searchformShow" :isForm="true" @handleQuery="handleQuery" @change="formChange">
        </form-search>
        <el-form-item label="章节目录：">
          <el-select ref="chapterSelector" size="small" placeholder="请先选择科目、版本、学册后在选择章节" clearable v-model="selectLabel" @clear="selectClear" style="width:100%">
            <el-option class="option-style" :label="selectLabel" :value="selectValue">
              <el-input class="search" size="small" placeholder="输入关键字进行过滤" v-model="keywork" @click.stop.native>
              </el-input>
              <el-tree :data="treeDate" :props="treeProps" @node-click="nodeClick"></el-tree>
            </el-option>
          </el-select>
        </el-form-item>
        <el-row :gutter="24">
          <el-col :span="24" style="text-align: center;margin-bottom:100px;margin-top:100px">
            <el-button type="primary" :loading="loading" @click="save">提交</el-button>
          </el-col>
        </el-row>
      </el-form>

    </el-card>
  </div>
</template>

<script>
import {
  getUploadToken,
  uploadFile2OSS
} from '@/api/webApi/common.js'
import {
  treeList,
} from '@/api/webApi/webQue.js'
import {
  add
} from '@/api/webApi/person.js'
export default {
  data() {
    return {
      loading: false,
      uploading: false,
      uploadPercent: 0,
      resourcesName: '',
      treeClick: null, //点击样式
      keywork: null, //搜索关键字
      selectLabel: null, //下拉框显示名称
      selectValue: null, //下拉框显示ID
      treeLoading: false,
      showCheckbox: true,
      queryParams: {
        slipid: '',
        fileList: []
      },
      fileList: [],
      searchformShow: {
        'userSubject': '',
        'edition': '',
        'slipid': '',
        'coursewareType': ''
      },
      title: '课件资源',
      treeDate: [],
      treeProps: {
        children: 'children',
        label: 'name',
        code: 'id'
      },
    }
  },
  watch: {
    keywork(val) {
      this.$refs.tree.filter(val)
    },
    'queryParams.slipid': function (vlaue) {
      if (vlaue) {
        // load chapter tree
        let Ajax = {
          editionId: this.queryParams.edition, //版本
          subjectId: this.queryParams.userSubject, //科目
          gradeId: this.queryParams.slipid, //学册
        }
        this.deptOptions = []
        treeList(Ajax).then(response => {
          this.treeDate = response.data
          this.treeLoading = false
        }).catch(response => {
          this.treeLoading = false
        })
      }
    }
  },
  created() {
    if (this.$route.query.type == '课件资源') {
      this.title = '课件资源'
    } else {
      this.title = '自定义'
    }
  },
  methods: {
    handleQuery(data) {

    },
    formChange(data, type) {
      if (type != 'coursewareType') {        
        // reset
        this.selectClear()
        this.treeDate = []
      }
      this.queryParams = data
      console.log(this.queryParams)
    },
    uploadChanged(fileList) {
      this.fileList = fileList;
      const fileName = this.fileList.length ? this.fileList[0].name : ""
      this.resourcesName = fileName
    },
    save() {
      if (this.fileList.length == 0) {
        this.$message.error('请选择文件!')
        return
      }
      if (!this.resourcesName) {
        this.$message.error('请填写课件名称!')
        return
      }
      if (!this.queryParams.coursewareType) {
        this.$message.error('请选择类型!')
        return
      }
      if (!this.queryParams.section) {
        this.$message.error('请选择章节!')
        return
      }
      let Ajax = {
        "subjectId": this.queryParams.subjectid || this.queryParams.userSubject,
        "resourcesName": this.resourcesName,
        "resourcesUrl": this.fileList[0].url,
        "fileSize": this.fileList[0].fileSize,
        "category": this.$route.query.type == '课件资源' ? '2' : '3',
        "chapterId": this.queryParams.section,
        "edition": this.queryParams.edition,
        'bookId': this.queryParams.slipid,
        "linkWay": 1,
        "coursewareType": this.queryParams.coursewareType
      }
      this.loading = true
      add(Ajax).then(res => {
        this.loading = false
        this.msgSuccess('添加成功')
        this.$router.go(-1)
      }).catch(err => {
        this.loading = false
      })
    },
    selectClear() {
      this.treeClick = null
      this.selectLabel = null
      this.selectValue = null
      this.queryParams.section = null
    },
    filterNode(value, data) {
      if (!value) {
        return true
      }
      return data.label.indexOf(value) !== -1
    },
    nodeClick(obj, node) {
      if (!obj.children?.length) {
        this.treeClick = obj.id
        this.selectLabel = obj.name
        this.selectValue = obj.id
        this.queryParams.section = obj.id

        this.$refs.chapterSelector.blur()
      }
      console.log(obj, node, this.queryParams)
    },
    checkChange(obj, node) {
      console.log(obj, node)
    }
  }
}
</script>

<style lang="scss" scoped>
.el-select-dropdown .el-scrollbar {
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item {
  height: auto;
  padding: 0;
  overflow: hidden;
  overflow-y: auto;
}

.el-scrollbar .el-scrollbar__view .el-select-dropdown__item .el-tree {
}
</style>
