<template>
  <!-- 弹出框表单 -->
  <el-dialog :title="title" :visible.sync="open" width="90%" append-to-body>

    <el-dialog
        width="30%"
        title="选择部门"
        :visible.sync="innerDeptVisible"
        append-to-body>

      <div class="mytree">
        <el-tree
            ref="deptTree"
            :data="data"
            id="el-tree"
            indent="0"
            node-key="id"
            :props="treeProps"
            :load="loadNode"
            highlight-current
            lazy
            show-checkbox
            default-expand-all
            :default-checked-keys="deptChecked"
            @node-click="handleNodeClick"
        >
        </el-tree>
      </div>

      <div slot="footer" class="dialog-footer">
        <el-button type="primary" @click="deptConfirm">确 定</el-button>
        <el-button @click="innerDeptVisible= false">取 消</el-button>
      </div>

    </el-dialog>

    <el-dialog
        width="70%"
        title="选择人员"
        :visible.sync="innerPersonVisible"
        append-to-body>

      <el-row>
        <el-col>
        </el-col>

        <el-col>
          <!--搜索-->
          <div>
            <el-form :inline="true" size="mini">

              <el-form-item style="float: right">
                <el-button plain @click="searchConfirm">查询</el-button>
              </el-form-item>

              <el-form-item label="学员名称" style="float: right">
                <el-input
                    v-model="searchform.realName"
                    placeholder="学员名称"
                ></el-input>
              </el-form-item>
            </el-form>
          </div>
          <!--学员列表-->
          <el-table
              size="mini"
              ref="multipleTable"
              :data="personPageInfoData"
              tooltip-effect="dark"
              border
              v-loading="loading"
              highlight-current-row
              :default-selection="personIds"
              @selection-change="handleSelectionChange"
          >
            <el-table-column type="selection" width="55"></el-table-column>
            <el-table-column type="index" label="序号"/>

            <el-table-column
                prop="realName"
                label="学员姓名"
            />
            <el-table-column
                prop="deptName"
                label="所属部门"
            />

          </el-table>
          <!-- 分页器 -->
          <el-row type="flex" justify="end">
            <el-pagination
                @current-change="handleCurrentChange"
                @size-change="handleSizeChange"
                :current-page="personPageInfo.currPage"
                :page-size="personPageInfo.prePageResult"
                :page-sizes="[10, 20, 50, 100, 200]"
                layout="sizes, total, prev, pager, next, jumper"
                :total="personPageInfo.totalResult"
            >
            </el-pagination>
          </el-row>

          <el-row style="float: right;margin-top: 10px" class="dialog-footer">
            <el-button type="primary" @click="selectPersonConfirm">确 定</el-button>
            <el-button @click="innerPersonVisible = false">取 消</el-button>
          </el-row>


        </el-col>

      </el-row>
    </el-dialog>

    <el-form ref="form" :model="form" :rules="rules" label-width="120px">
      <el-row>
        <Field :span="22" label="标题" prop="title" v-model="form.title" placeholder="请输入标题"/>
        <Field :span="22" label="项目类型" prop="projectType" v-model="form.projectType" type="radio" :enumData="dict.projectType" placeholder="请选择项目类型"/>
        <Field :span="22" label="开始时间" prop="projectStartTime" v-model="form.projectStartTime" type="datetime"/>
        <Field :span="22" label="结束时间" prop="projectEndTime" v-model="form.projectEndTime" type="datetime"/>
        <Field :span="22" label="学习人员" prop="person" v-model="form.person" @change="changePerson" :enumData="{0:'全部人员',1:'部分人员'}" type="radio"/>

        <Field :span="22" label="指定部门" v-if="form.person==1">
          <el-button type="primary" @click="selectDept">选择部门</el-button>
        </Field>

        <Field :span="22" label="指定学员" v-if="form.person==1">
          <el-button type="primary" @click="selectPerson">选择学员</el-button>
        </Field>

        <Field :span="22" label="是否置顶" prop="top" v-model="form.top" type="radio" :enumData="dict.top" placeholder="请选择是否置顶"/>
        <Field :span="22" label="已读要求" prop="readRequest" v-model="form.readRequest" type="radio" :enumData="dict.readRequest" placeholder="请选择已读要求"/>
        <Field :span="22" label="学习内容">
          <editor v-model="form.studyContent" :min-height="256"/>
        </Field>
        <Field :span="22" label="项目附件">
          <fileUpload v-model="form.filePath" @getFileName="getProjectFileName"   prePath="/file/fileupload"/>
        </Field>

      </el-row>

    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="primary" v-if="pageInfo.type !== 'view'" @click="submitForm">确 定</el-button>
      <el-button @click="cancel">取 消</el-button>
    </div>
  </el-dialog>
</template>

<script>
import form from "@/assets/mixins/formdialog";
import dialogShow from "./dialogshow";
import FileUpload from '@/components/FileUpload';
import Editor from '@/components/Editor';

export default {
  mixins: [form],
  components: {
    dialogShow,
    FileUpload,
    Editor,
  },
  data() {
    return {
      node: {},
      data: [],
      deptIds:[],
      personIds:[],
      personPageInfoData: [],
      deptChecked: [],
      tree: [],
      treeProps: {
        children: "children",
        label: "label",
        id: "id",
      },
      toDate: ['projectStartTime', 'projectEndTime'],
      searchform: {realName: ""},
      personPageInfo: {
        totalResult: 0,
        prePageResult: 10,
        currPage: 1,
      },
      innerDeptVisible: false,
      innerPersonVisible: false,
      // 遮罩层
      loading: true,
      // 弹出层标题
      title: "学习项目",
      // 是否显示弹出层
      open: false,
      toString: [
        "person",
        "projectType",
        "top",
        "readRequest",
      ],
      // 表单校验
      rules: {
        title: [
          {required: true, message: "请输入标题", trigger: "blur"},
          {max: 256, message: "最多只能录入256个字符", trigger: "blur",},
        ],
        projectStartTime: [
          {required: true, message: "请选择开始时间"},
        ],
        projectEndTime: [
          {required: true, message: "请选择结束时间"},
        ],
        top: [
          {required: true, message: "请输入是否置顶", trigger: "blur"},
        ],
        readRequest: [
          {required: true, message: "请输入已读要求", trigger: "blur"},
        ],
      }
    };
  },

  methods: {
    getProjectFileName(fileName) {
      this.form.fileName = fileName;
    },
    searchConfirm() {
      this.getPersonList({'userType': 2});
    },
    //弹窗事项列表搜索事件-清空
    personSearchClear() {
      this.searchform = {'userType': 2};
    },


    handleSelectionChange(val) {
      //判断是否选中
      console.log("selected", val);
      this.form.personIds = val.map(i => i.id);
      //获取当前列表未选中行，与tags比较 如果有 则删除tags中的行
      // this.multipleSelection = val;
    },

    handleSizeChange(currSize) {
      console.log("currSize=" + currSize);
      this.personPageInfo.prePageResult = currSize;
      this.getPersonList(this.searchform);
    },
    handleCurrentChange(currPage) {
      console.log("currPage=" + currPage);
      this.personPageInfo.currPage = currPage;
      this.getPersonList(this.searchform);
    },

    initPersonPage() {
      this.personPageInfo = {
        totalResult: 0,
        prePageResult: 10,
        currPage: 1,
      };
    },

    getPersonList(query) {
      query["page"] = this.personPageInfo.currPage;
      query["size"] = this.personPageInfo.prePageResult;

      //弹窗材料列表搜索条件name
      if (this.searchform.realName) {
        query["realName"] = "%" + this.searchform.realName + "%";
      }
      this.loading = true;
      this.$post("/user/list", query).then((res) => {
        if (res && res.code && res.code == 1) {
          this.loading = false;
          this.personPageInfoData = res.data.data;
          this.personPageInfo.currPage = res.data.pageInfo.currPage;
          this.personPageInfo.prePageResult = res.data.pageInfo.prePageResult;
          this.personPageInfo.totalResult = res.data.pageInfo.totalResult;
        }
      });
    },

    deptConfirm() {
      console.log(this.$refs.deptTree.getCheckedKeys());
      this.deptChecked = this.$refs.deptTree.getCheckedKeys()
      this.innerDeptVisible = false;
    },

    changePerson(val) {
      console.log(val)
    },

    async loadNode(node, resolve) {
      if (node.level === 0) {
        return;
      }
      this.$get("/dept/getListByParentId", {
        parentId: node.data.id,
      }).then(({data}) => {
        resolve(data.result);
      });
    },

    selectDept(val) {
      console.log("选择部门");
      try {
        //  this.userDeptDialog.data = row;
        this.$nextTick(() => {
          this.$get("/dept/getListByParentId", {
            parentId: 0,
          }).then(({data}) => {
            this.data = data.result;
            this.node = {}

          });
        });
      } catch (error) {
        this.$message.error(error.message);
      }
      this.innerDeptVisible = true;
    },

    selectPerson(val) {
      console.log(val)
      this.personSearchClear();
      this.initPersonPage();
      this.searchConfirm();
      this.innerPersonVisible = true;
    },

    selectPersonConfirm() {
      //选择人员
      this.innerPersonVisible = false;
      console.log(this.form.personIds)
    },

    /** 编辑 */
    edit(row) {
      this.reset()
      this.query = {id: row.id};
      this.urls.currUrl = "project/edit";
      this.getData();
      this.pageInfo.type = "edit"
      this.title = "修改学习项目";
    },
    /** 新增 */
    add(row) {
      this.reset()
      this.urls.currUrl = "project/add";
      this.getData();
      this.pageInfo.type = "add"
      this.title = "新增学习项目";
    },
    /** 查看*/
    view(row) {
      this.reset()
      this.query = {id: row.id};
      this.urls.currUrl = "project/view";
      this.getData();
      this.pageInfo.type = "view"
      this.title = "学习项目详细";
    },
    /**取消按钮 */
    cancel() {
      this.open = false;
    },
    /**获取数据后弹框 */
    afterRender(data) {
      this.open = true;
    },

    afterSubmit(data) {
      this.open = false;
      this.$emit("ok");
    },

    // 表单重置
    reset() {
      this.form = {
        title: "",
        projectType: 0,
        projectStartTime: null,
        projectEndTime: null,
        top: 0,
        person: 0,
        personIds:this.personIds,
        deptIds:this.deptIds,
        readRequest: 0,
        studyContent: "",
        filePath: "",
        fileName: "",
        remark: "",
      };
      this.resetForm("form");
    },
    resetForm(refName) {
      if (this.$refs[refName]) {
        this.$refs[refName].resetFields();
      }
    },
  },
};
</script>


<style lang="scss" scoped>
.mytree ::v-deep {
  .el-tree--highlight-current
  ::v-deep
  .el-tree-node.is-checked
  > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }

  .el-tree--highlight-current
  ::v-deep
  .el-tree-node.is-current
  > .el-tree-node__content {
    background-color: rgb(255, 255, 255);
    color: rgb(64, 158, 255);
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node {
    position: relative;
    padding-left: 16px;
  }

  //节点有间隙，隐藏掉展开按钮就好了,如果觉得空隙没事可以删掉
  .el-tree-node__expand-icon.is-leaf {
    display: none;
  }

  .el-tree-node__children {
    padding-left: 16px;
  }

  .el-tree-node :last-child:before {
    height: 38px;
  }

  .el-tree > .el-tree-node:before {
    border-left: none;
  }

  .el-tree > .el-tree-node:after {
    border-top: none;
  }

  .el-tree-node:before {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:after {
    content: "";
    left: -4px;
    position: absolute;
    right: auto;
    border-width: 1px;
  }

  .el-tree-node:before {
    border-left: 1px dashed #4386c6;
    bottom: 0px;
    height: 100%;
    top: -26px;
    width: 1px;
  }

  .el-tree-node:after {
    border-top: 1px dashed #4386c6;
    height: 20px;
    top: 12px;
    width: 24px;
  }

}
</style>
