<style>
  .movefolder_left {
    color: #3A8BFF;
    float: left;
    margin: 20px;
    cursor: pointer;
  }

  .movefolder_left i {
    margin-right: 3px;
    font-size: 18px;
  }

  .movefolder_left:hover {
    opacity: .7;
  }

  .move_Icon i {
    font-size: 20px;
    color: #3A8BFF;
  }

  .treeDiv .el-tree-node__content {
    height: auto;
  }

  .Move_PaperName {
    display: inline-block;
    width: 300px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    position: relative;
    top: 4px;
  }

</style>
<!--移动到文件夹-->
<template>
  <q-dialog v-model="persistent" content-class="bg-grey-1" persistent transition-show="scale" transition-hide="scale">
    <q-card style="width: 500px;max-width:500px;">
      <q-card-section>
        <div class="text-h6">移动至 (选择目标目录)</div>
      </q-card-section>
      <q-card-section class="q-pt-none scroll" style="max-height: 70vh">
        <div class="treeDiv">
          <el-tree :data="dataList" node-key="PaperId" ref="paperFolderTree" highlight-current :props="defaultProps"
            @node-click="handleNodeClick" default-expand-all>
            <span class="custom-tree-node" slot-scope="{node,data}">
              <span>
                <i class="iconfont icon-weibiaoti5" style="font-size:18px;margin-right:3px;color:#85CDFD"></i>
                <template v-if="data.isEdit">
                  <el-input size="small" v-model="folderMsg.PaperName"></el-input>
                  <span class="move_Icon">
                    <i class="iconfont icon-queren" style="margin:0 10px;" @click="setFolder"></i>
                    <i class="iconfont icon-shanchu2" @click="() => delMoveData(node, data)"></i>
                  </span>
                </template>
                <template v-else>
                  <div class="Move_PaperName">{{data.PaperName}}</div>
                </template>
              </span>
            </span>
          </el-tree>
        </div>
        <div class="movefolder_left" @click="CreateNewFolder(1)">
          <i class="iconfont icon-weibiaoti5" style="color:#85CDFD"></i>同级目录
        </div>
        <div class="movefolder_left" @click="CreateNewFolder(2)">
          <i class="iconfont icon-weibiaoti5" style="color:#85CDFD"></i>子目录
        </div>
      </q-card-section>
      <q-separator />
      <q-card-actions align="right" class="bg-white">
        <q-btn label="取消" flat color="grey-10" style="font-weight:400 !important" @click="closeSaveForm" />
        <q-btn label="确认" color="accent" class="q-px-md" style="font-weight:400 !important" :loading="saveLoading"
          @click="setMoveFolderInfo" />
      </q-card-actions>
    </q-card>
  </q-dialog>
</template>
<script>
  import {
    queryFolderTree,
    movePaperInfo,
    savePaperFolderInfo
  } from '../../api/teacher/index'
  export default {
    props: {
      saveObj: {
        type: Object,
        default: null
      },
      Ids: {
        type: String,
        default: ''
      }
    },
    data() {
      return {
        persistent: true,
        //新增文件夹参数
        folderMsg: {
          PaperId: 0,
          PaperName: '', //文件夹名称
          PaperType: 1, //试卷类型(1-文件夹，2-试卷)
          ParentId: 0, //上级文件夹编号
        },
        saveLoading: false,
        defaultProps: {
          children: 'ChildList',
          label: 'PaperName'
        },
        dataList: [], //数据列表
        //移动文件夹参数
        moveMsg: {
          PaperIds: 0,
          ParentId: 0,
        },
        //选中的文件夹
        checkFolder: null,
        //选中文件夹得父节点
        parentNode: null,
      }
    },
    created() {
      if (this.saveObj && this.saveObj.PaperId) {
        this.moveMsg.PaperIds = this.saveObj.PaperId;
      }
      if (this.Ids) {
        this.moveMsg.PaperIds = this.Ids;
      }
    },
    mounted() {
      this.initObj();
    },
    methods: {
      //删除节点
      delMoveData(node, nodeData) {
        const parent = node.parent;
        const children = parent.data.ChildList || parent.data;
        const index = children.findIndex(d => d.PaperId === nodeData.PaperId);
        children.splice(index, 1);
      },
      handleNodeClick(val, node) {
        this.parentNode = null;
        if (node.parent && node.parent.data) {
          this.parentNode = node.parent.data;
        }
        this.checkFolder = val;
      },
      //创建文件夹
      CreateNewFolder(type) {
        let obj = {
          PaperId: 0,
          PaperName: '',
          ParentId: 0,
          ChildList: [],
          isEdit: true
        }
        //选择了文件夹
        if (this.checkFolder) {
          //根目录
          if (this.checkFolder.PaperId == 0) {
            //直接在根目录添加
            this.dataList[0].ChildList.push(obj);
          }
          //其他子目录
          else {
            //同级目录
            if (type == 1) {
              this.folderMsg.ParentId = this.checkFolder.ParentId;
              if (this.parentNode) {
                this.parentNode.ChildList.push(obj);
              }
            }
            //子目录
            else if (type == 2) {
              this.folderMsg.ParentId = this.checkFolder.PaperId;
              this.checkFolder.ChildList.push(obj);
            }
          }
        }
        //没有选中文件夹
        else {
          //直接在根目录添加
          this.dataList[0].ChildList.push(obj);
        }
      },
      //保存文件夹
      setFolder() {
        savePaperFolderInfo(this.folderMsg).then(res => {
          if (res.Code == 1) {
            this.$q.notify({
              icon: 'iconfont icon-chenggong',
              timeout: 2000,
              message: "创建文件夹成功!",
              position: 'top'
            })
            this.clearMsg();
            this.initObj();
          }
        });
      },
      //清空文件夹提交数据
      clearMsg() {
        this.checkFolder = null;
        this.folderMsg.PaperId = 0;
        this.folderMsg.PaperName = "";
        this.folderMsg.PaperType = 1;
        this.folderMsg.ParentId = 0;
      },
      //初始化下拉列表
      initObj() {
        queryFolderTree({}).then(res => {
          if (res.Code == 1) {
            this.dataList = res.Data;
          }
        })
      },
      closeSaveForm() {
        this.$emit('close')
        this.persistent = false
      },
      setMoveFolderInfo() {
        if (!this.checkFolder) {
          this.$q.notify({
            type: 'negative',
            position: "top",
            message: `请选择目标文件夹`
          })
          return
        }
        this.saveLoading = true;
        this.moveMsg.ParentId = this.checkFolder.PaperId;
        movePaperInfo(this.moveMsg).then(res => {
          this.saveLoading = false
          this.$q.notify({
            icon: 'iconfont icon-chenggong',
            color: 'accent',
            timeout: 2000,
            message: '数据保存成功！',
            position: 'top'
          })
          this.$emit("success")
          this.closeSaveForm();
        }).catch(() => {
          this.saveLoading = false
        })
      },
    },
  }

</script>
<style>
</style>
