<template>
  <el-drawer
    v-if="vectory"
    ref="drawer"
    :visible.sync="CoursewareDrawer"
    :before-close="CoursewareDrawerClose"
    title="课件类型选择"
    size="50%">
    <div style="margin-left: 30px">
      <el-form ref="form" :model="form" class="edit_form" style="height: 500px;margin-bottom: 50px" label-position="top">
        <el-row :gutter ="20">
          <el-col :span="10">
            <el-form-item label="课程大类选择">
              <el-select v-model="CoursewareDrawerForm.grandType" placeholder="请选择" style="width: 300px;" @change="getDicListByPID(CoursewareDrawerForm.grandType)">
                <el-option
                  v-for="item in coursewareType"
                  :key="item.value"
                  :label="item.label"
                  :value="item"/>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="14">
            <div style="width: 400px" class="information">
              <el-input
                v-model="filterText"
                placeholder="输入关键字进行过滤"
                style="margin-bottom: 10px"/>
              <el-form-item label="课程大类明细">
                <el-scrollbar style="height: 400px;margin-bottom: 10px">
                  <el-tree
                    v-loading="treeLoading"
                    ref="tree"
                    :data="dicListMap"
                    :props="treeProps"
                    :filter-node-method="filterNode"
                    :check-strictly="true"
                    :highlight-current="true"
                    show-checkbox
                    class="type_tree"
                    node-key="id"
                    @node-click="handleNodeClick"/>
                </el-scrollbar>
                <el-button type="primary" @click="addTage">添加</el-button>
              </el-form-item>
            </div>
          </el-col>
        </el-row>
      </el-form>
      <el-divider/>
      <div>
        <el-tag
          v-for="tag in dynamicTags"
          :key="tag.value"
          :disable-transitions="false"
          closable
          style="margin-left: 10px;margin-bottom: 10px"
          @close="tagHandleClose(tag)">
          {{ tag.label }}
        </el-tag>
      </div>
      <el-divider/>
      <div>
        <el-button @click="CoursewareDrawer = false">取 消</el-button>
        <el-button :loading="CoursewareDrawerLoading" type="primary" @click="submit">{{ CoursewareDrawerLoading ? '提交中 ...' : '确 定' }}</el-button>
      </div>
    </div>
  </el-drawer>
</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'
export default {
  components: { Pagination, videoPlayer },
  directives: { waves },
  data() {
    return {
      form: {},
      CoursewareDrawer: false,
      CoursewareDrawerLoading: false,
      CoursewareDrawerForm: {
        grandType: {},
        fatherType: {},
        sonType: {},
        grandsonType: {}
      },
      dynamicTags: [],
      tagModelList: [],
      coursewareType: [],
      tagLoading: false,
      dicListMap: [],
      treeLoading: false,
      treeProps: {
        children: 'nodes',
        label: 'name'
      },
      filterText: '',
      vectory: false
    }
  },
  watch: {
    filterText(val) {
      this.$refs.tree.filter(val)
    }
  },
  created() {
    // this.getCoursewareType()
  },
  methods: {
    init(tags) {
      this.vectory = true
      this.CoursewareDrawer = true
      this.dynamicTags = tags
    },
    getCoursewareType() {
      this.treeLoading = true
      requestFN(
        '/videocourseware/coursewareType',
        {}
      ).then((data) => {
        this.coursewareType = []
        for (var vector in data.list) {
          this.coursewareType.push({
            label: data.list[vector].name,
            value: data.list[vector].dictionaries_ID
          })
        }
        this.treeLoading = false
      }).catch((e) => {
        this.treeLoading = false
      })
    },
    CoursewareDrawerClose(done) {
      done()
    },
    tagHandleClose(tag) {
      this.dynamicTags.splice(this.dynamicTags.indexOf(tag), 1)
    },
    addTage() {
      var choose = this.$refs.tree.getCheckedNodes()
      if (!this.dynamicTags) this.dynamicTags = []
      for (var x in choose) {
        var vector = { label: choose[x].name, value: choose[x].id }
        if (vector.label !== '') {
          var constents = false
          for (const y in this.dynamicTags) {
            if (this.dynamicTags[y].value == vector.value) {
              constents = true
            }
          }
          if (!constents) this.dynamicTags.push(vector)
        }
      }
    },
    getTags(query) {
      this.tagLoading = true
      requestFN(
        '/labelFactory/list?showCount=' + this.listQuery.limit + '&currentPage=' + this.listQuery.page,
        {
          KEYWORDS: query
        }
      ).then((data) => {
        this.tagLoading = false
        this.tagModelList = data.varList
      }).catch((e) => {
        this.tagLoading = false
      })
    },
    submit() {
      if ((!this.dynamicTags) || this.dynamicTags.length <= 0) {
        this.$message.warning('未选择课件类型')
        return
      }
      var type = ''
      for (var x in this.dynamicTags) {
        if (x == '0') {
          type = this.dynamicTags[x].label
        } else if (x < '4') {
          type += ',' + this.dynamicTags[x].label
        }
      }
      type += '...'
      this.$emit('getMessage', type, this.dynamicTags)
      this.CoursewareDrawer = false
      this.vectory = false
    },
    getDicListByPID(pId) {
      requestFN(
        '/dictionaries/listAllDictToParId',
        {
          parentId: pId.value
        }
      ).then((data) => {
        this.dicListMap = JSON.parse(data.zTreeNodes)
        console.log(this.dicListMap)
      }).catch((e) => {

      })
    },
    handleNodeClick(node, data, value) {
      if (data.isLeaf) { // 判断是否根节点
        this.INDUSTRY3 = node.INDUSTRYTYPE_ID
        this.INDUSTRY3_NAME = node.NAME
      }
    },
    filterNode(value, data) {
      if (!value) return true
      return data.name.indexOf(value) !== -1
    }
  }
}

</script>

<style scoped>
.information >>> .el-scrollbar__wrap {
  overflow-x: hidden;
}
</style>
