<template>
  <a-modal id="modal" :title="modalTitle" :width="1500" height="auto" :visible="visible" @ok="handleSubmit" @cancel="handleCancel">
    <a-card :bordered="false" title="项目课程选择">
      <a-row type="flex" justify="center" align="top">
        <a-col :span="4" id="tree">
          <a-menu v-model="menuKey" mode="horizontal" @select="menuChack" >
            <a-menu-item key="sys">系统课程</a-menu-item>
            <a-menu-item key="self">自主课程</a-menu-item>
          </a-menu>
          <a-tree :treeData="treeData" @select="onSelect" :defaultExpandAll="true" :defaultExpandedKeys="defaultExpandedKeys" :replaceFields="replaceFields">
            <a-icon slot="switcherIcon" type="down" />
          </a-tree>
        </a-col>
        <a-col :span="20" id="content">
          <a-page-header title="课程选择" sub-title="" />
          <a-col :span="18" id="table">
            <a-form layout="inline">
              <a-row>
                <a-form-item label="课程名称">
                  <a-input v-model="queryParam.name" placeholder="请输入课程名称" />
                </a-form-item>
                <a-button type="primary" @click="$refs.table.refresh(true)">查询</a-button>
              </a-row>
            </a-form>
            <s-table ref="table" :columns="columns" :data="loadData" :rowKey="(record) => record.id" :rowSelection="{ selectedRowKeys: selectedRowKeys, selectedRows: selectedRows, onChange: onSelectChange }">
              <span slot="serial" slot-scope="text, record, index">
                {{ index + 1 }}
              </span>
            </s-table>
          </a-col>
          <a-col :span="6" id="select">
            <p>点击列表项取消选择或【<a @click="removeAllSelece">清空所有</a>】</p>
            <a-list size="small" :data-source="selectedRows" :rowKey="(item) => item.id">
              <a-list-item slot="renderItem" slot-scope="item" @click="changeList({ item })">
                {{ item.courseName + '（' + item.courseCode + '）' }}
              </a-list-item>
            </a-list>
          </a-col>
        </a-col>
      </a-row>
    </a-card>
  </a-modal>
</template>

<script>
// 这里可以导入其他文件（比如：组件，工具js，第三方插件js，json文件，图片文件等等）
// 例如：import 《组件名称》 from '《组件路径》'
import { coursewareClassList } from '@/api/course/courseware'
import { listByClass } from '@/api/course/course'
import { STable } from '@/components'
const rootParentId = 0

export default {
  // import引入的组件需要注入到对象中才能使用
  components: {
    STable,
  },
  props: {
    selectRows: {
      type: Array,
    },
  },
  data() {
    // 这里存放数据
    return {
      visible: false, //是否显示弹框
      modalTitle: '',

      menuKey: ['sys'], //默认系统课程

      // 查询参数
      queryParam: { name: '', classType: 0 ,type: 0},
      replaceFields: { children: 'children', title: 'name', key: 'id', value: 'id' },
      expandedKeys: [],
      autoExpandParent: true,
      defaultExpandedKeys: [],
      selectedRowKeys: [],
      selectedRows: [],
      treeData: [],
      treeDataOne: [],
      columns: [
        { title: '序号', key: 'id', dataIndex: 'id', width: 60, scopedSlots: { customRender: 'serial' } },
        { title: '课程编号', dataIndex: 'courseCode' },
        { title: '课程名称', dataIndex: 'courseName' },
      ],
      //人员列表数据
      loadData: (parameter) => {
        return listByClass(Object.assign(parameter, this.queryParam)).then((res) => {
          return res
        }) 
      },
    }
  },
  // 计算属性 类似于data概念
  computed: {
    hasSelected() {
      return this.selectedRowKeys.length > 0
    },
  },
  // 监控data中的数据变化
  watch: {
  },
  // 方法集合
  methods: {
    //菜单改变，
    menuChack(){
      console.log('menuKey',this.menuKey)
      let type = 0;
      console.log('菜单改变',this.menuKey[0])
      if(this.menuKey[0] === 'self') type = 1;
      this.queryParam.type = type
      this.getCourseTreeData(type);
      this.$refs.table.refresh(true);
    },
    // 编辑打开页面初始化
    edit(record) {
      console.log('课程选择打开了', record)
      this.modalTitle = '选择课程'
      this.visible = true
      console.log('selectRows-------------', this.selectRows)
      if (this.selectRows) {
        this.selectedRows = this.selectRows;
        this.selectedRowKeys = this.selectedRows.map((value) => value.id)
      }
    },
    handleCancel() {
      console.log('课程选择关闭')
      this.visible = false
    },
    handleSubmit() {
      console.log('课程选择提交了', this.selectedRowKeys)
      this.visible = false
      if (this.selectedRowKeys) this.$emit('selectKeyDataSubmit', this.selectedRowKeys.join(','))
      else this.$emit('selectKeyDataSubmit', '')
    },

    /** 表格行选中后触发 */
    onSelectChange(selectedRowKeys, selectedRows) {
      console.log('selectedRowKeys changed: ', selectedRowKeys)
      console.log('选择的表格数据 : ', selectedRows)
      this.selectedRowKeys = this.uniqueKeys([...this.selectedRowKeys, ...selectedRowKeys])
      this.selectedRows = this.unique([...this.selectedRows, ...selectedRows])
    },

    //对象去重
    unique(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr.id) && res.set(arr.id, 1))
    },

    //key去重
    uniqueKeys(arr) {
      const res = new Map()
      return arr.filter((arr) => !res.has(arr) && res.set(arr, 1))
    },

    //列表点击删除列表项
    changeList(item) {
      console.log('列表点击删除列表项 : ', item)
      this.selectedRows = this.selectedRows.filter(function (i) {
        return i.id != item.item.id
      })
      this.selectedRowKeys = this.selectedRowKeys.filter(function (i) {
        return i != item.item.id
      })
    },

    //清空选择
    removeAllSelece() {
      this.selectedRowKeys = []
      this.selectedRows = []
    },

    //选中后触发
    onSelect(selectedKey, info) {
      console.log('onSelect-------', selectedKey, info)
      this.queryParam.classType = selectedKey.toString()
      // this.orgId = selectedKey.toString()
      this.$refs.table.refresh(true)
    },

    //树使用的方法
    onExpand(expandedKeys) {
      this.expandedKeys = expandedKeys
      this.autoExpandParent = false
    },

    //查询课程列表
    queryCourseList() {
      console.log('this.treeDataOne-------', this.treeDataOne)
      listByClass({ classType: this.treeDataOne[0] || 0 ,type: this.menuKey[0] === 'sys'?0:1}).then((res) => {
        this.courseData = res.data
      })
    },

    //获取课程分类数据，转换成树结构
    getCourseTreeData(type) {
      coursewareClassList({type:type}).then((res) => {
        //list转🌲
        const list2tree1 = (list, parentId) => {
          return list.filter((item) => {
            // 默认选中第一个节点
            if (this.treeDataOne) this.treeDataOne.push(item.id)
            if (item.parentId === parentId) {
              item.children = list2tree1(list, item.id)
              return true
            }
            return false
          })
        }
        this.treeData = list2tree1(res.data, 0)
      })
    },
  },
  // 生命周期 - 创建完成（可以访问当前this实例）
  created() {
    this.getCourseTreeData(0) //进来首先获取系统课程
  },
  // 生命周期 - 挂载完成（可以访问DOM元素）
  mounted() { },
  // 生命周期 - 创建之前
  beforeCreate() { },
  // 生命周期 - 挂载之前
  beforeMount() { },
  // 生命周期 - 更新之前
  beforeUpdate() { },
  // 生命周期 - 更新之后
  updated() { },
  // 生命周期 - 销毁之前
  beforeDestroy() { },
  // 生命周期 - 销毁完成
  destroyed() { },
  // 如果页面有keep-alive缓存功能，这个函数会触发
  activated() { },
}
</script>
<style scoped>
</style>