<template>
  <div class="d-flex h100">
    <div class="left h100 pt15 pr15">

      <div>
        <div class="flex-row">
          <h3 class="font-size-18">组织机构</h3>
<!--          <el-button type="primary" @click="createNew">新建</el-button>-->
        </div>
        <el-tree
            class="mt30"
            :data="defaultData"
            :default-expand-all="true"
            :highlight-current="true"
            :current-node-key="defaultId"
            @node-click="handleNodeClick"
            node-key="id"
        ></el-tree>
      </div>

    </div>
    <div class="right h100 pl15 pt15">
      <el-tabs v-model="activeName">
        <el-tab-pane label="组织结构成员" name="first">
          <el-table :data="tableData" v-loading="loading" tooltip-effect="dark" style="width: 100%">
            <el-table-column
                label="编号"
                align="center"
                type="index"
                width="50"
            >
            </el-table-column>
            <el-table-column label="成员姓名" prop="user_realname"></el-table-column>

            <el-table-column label="操作" width="100">
              <template slot-scope="scope">
                <el-button type="text" @click="">删除</el-button>
              </template>
            </el-table-column>
          </el-table>
          <footer
              class="flex-item-none"
              style="display: flex; justify-content: flex-end; margin-top: 30px"
          >
            <el-pagination
                background
                layout="total,prev, pager, next"
                :page-size="limit"
                :total="total"
                :current-page.sync="cur_page"
                @current-change="handleCurrentChange"
            ></el-pagination>
          </footer>
        </el-tab-pane>
        <el-tab-pane label="权限设置" name="second" class="pb30">
          <el-table
              :data="navData"
              style="width: 100%;margin-bottom: 20px;"
              border
              row-key="id"
              default-expand-all
              :tree-props="{children: 'children'}">
            <el-table-column
                prop="label"
                label="功能菜单"
                width="300">
            </el-table-column>
            <el-table-column
                label="勾选权限">
              <template v-slot="scope">
                <el-checkbox-group v-model="scope.row.checkList">
                  <el-checkbox label="1">查看界面</el-checkbox>
                  <el-checkbox label="2">创建</el-checkbox>
                  <el-checkbox label="3">编辑</el-checkbox>
                  <el-checkbox label="4">删除</el-checkbox>
                </el-checkbox-group>
              </template>
            </el-table-column>
          </el-table>
        </el-tab-pane>
      </el-tabs>
    </div>
    <el-dialog title="新建机构" :visible.sync="dialogFormVisible" width="600px">
      <el-form :model="dialogForm" ref="addForm" :rules="rules" label-width="110px">
        <el-form-item label="机构名称：" prop="title">
          <el-input v-model="dialogForm.title" placeholder="请输入机构名称"></el-input>
        </el-form-item>
        <el-form-item label="序号：" prop="order">
          <el-input v-model="dialogForm.order" placeholder="请输入序号"></el-input>
        </el-form-item>
      </el-form>
      <div slot="footer">
        <el-button @click="dialogFormVisible = false">取 消</el-button>
        <el-button type="primary" @click="addFormSubmit('addForm')">确 定</el-button>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import {org_list_tree, org_users,nav_tree,org_add} from "./api";

export default {
  name: "index",
  data() {
    return {
      loading: false,
      defaultData: [],
      activeName: "first",
      tableData: [
        {
          id: "1",
          cyxm: "周静",
        },
        {
          id: "2",
          cyxm: "徐杰",
        },
        {
          id: "3",
          cyxm: "徐杰",
        },
        {
          id: "4",
          cyxm: "徐杰",
        },
        {
          id: "5",
          cyxm: "徐杰",
        },
        {
          id: "6",
          cyxm: "徐杰",
        },
      ],
      limit: 10,
      total: 0,
      cur_page: 1,
      navData: [
        {
          label: "文件收集",
          id: 1,
          checkList: [],
          children: [
            {
              id: 2,
              label: "文件工作台",
              checkList: [],
            },
            {
              id: 3,
              label: "我发起的",
              checkList: [],
            },
            {
              id: 4,
              label: "我提交的",
              checkList: [],
            },
          ],
        },
        {
          label: "教师流动管理",
          id: 5,
          checkList: [],
          children: [
            {
              id: 6,
              label: "工作台",
              checkList: [],
            },
            {
              id: 7,
              label: "入职流程",
              checkList: [],
            },
            {
              id: 8,
              label: "流动流程",
              checkList: [],
            },
            {
              id: 9,
              label: "离职流程",
              checkList: [],
            },
            {
              id: 10,
              label: "退休流程",
              checkList: [],
            },
            {
              id: 11,
              label: "流程管理",
              checkList: [],
            },
            {
              id: 12,
              label: "报表统计",
              checkList: [],
            },
          ],
        },
        {
          label: "科研立项申报",
          id: 13,
          checkList: [],
          children: [
            {
              id: 14,
              label: "科研立项",
              checkList: [],
            },
            {
              id: 15,
              label: "科研类别",
              checkList: [],
            },
            {
              id: 16,
              label: "科研活动",
              checkList: [],
            },
            {
              id: 17,
              label: "报表统计",
              checkList: [],
            },
          ],
        },
        {
          label: "教学调研登记",
          id: 18,
          checkList: [],
          children: [
            {
              id: 19,
              label: "教研消息通知",
              checkList: [],
            },
            {
              id: 20,
              label: "调研结果",
              checkList: [],
            },
            {
              id: 21,
              label: "报表统计",
              checkList: [],
            },
          ],
        },
        {
          label: "餐费补贴申报",
          id: 22,
          checkList: [],
          children: [
            {
              id: 23,
              label: "工作台",
              checkList: [],
            },
            {
              id: 24,
              label: "补贴列表",
              checkList: [],
            },
            {
              id: 25,
              label: "审核设置",
              checkList: [],
            },
            {
              id: 26,
              label: "报表统计",
              checkList: [],
            },
          ],
        },
        {
          label: "教育设备预算",
          id: 27,
          checkList: [],
          children: [
            {
              id: 28,
              label: "设备预算",
              checkList: [],
            },
            {
              id: 29,
              label: "设备类别管理",
              checkList: [],
            },
            {
              id: 30,
              label: "报表统计",
              checkList: [],
            },
          ],
        },
        {
          label: "需求预测统计",
          id: 31,
          checkList: [],
          children: [
            {
              id: 32,
              label: "我参与的",
              checkList: [],
            },
            {
              id: 33,
              label: "我发起的",
              checkList: [],
            },
            {
              id: 34,
              label: "报表统计",
              checkList: [],
            },
          ],
        },
        {
          label: "健康档案管理",
          id: 35,
          checkList: [],
          children: [
            {
              id: 36,
              label: "数据概览",
              checkList: [],
            },
            {
              id: 37,
              label: "教职工档案",
              checkList: [],
            },
            {
              id: 38,
              label: "学生档案",
              checkList: [],
            },
            {
              id: 39,
              label: "报表统计",
              checkList: [],
            },
          ],
        },
        {
          label: "区教研管理",
          id: 40,
          checkList: [],
          children: [
            {
              id: 41,
              label: "资源信息列表",
              checkList: [],
            },
            {
              id: 42,
              label: "资源类别管理",
              checkList: [],
            },
            {
              id: 43,
              label: "资源共享",
              checkList: [],
            },
          ],
        },
        {
          label: "督导督学",
          id: 44,
          checkList: [],
          children: [
            {
              id: 45,
              label: "督导任务",
              checkList: [],
            },
            {
              id: 46,
              label: "督导工作计划",
              checkList: [],
            },
            {
              id: 47,
              label: "督导工作记录",
              checkList: [],
            },
            {
              id: 48,
              label: "督导情况反馈",
              checkList: [],
            },
            {
              id: 49,
              label: "督导综述",
              checkList: [],
            },
            {
              id: 50,
              label: "工作总结",
              checkList: [],
            },
          ],
        },
        {
          label: "评价考核系统",
          id: 51,
          checkList: [],
          children: [
            {
              id: 52,
              label: "数据概览",
              checkList: [],
            },
            {
              id: 53,
              label: "评价考核",
              checkList: [],
            },
          ],
        },
      ],
      checkList: [],
      defaultId: '',
      cpm_id:'80011',
      dialogFormVisible:false,
      dialogForm:{
        title:'',
        order:''
      },
      rules: {
        title: [
          {required: true, message: '请输入机构名称', trigger: 'blur'}
        ],
        order:[
          {required: true, message: '请输入序号', trigger: 'blur'}
        ]
      }
    }
  },
  methods: {
    createNew() {
      this.dialogForm.title = '';
      this.dialogForm.order = '';
      this.dialogFormVisible = true;
    },
    getOrgTree() {
      let data = {}
      org_list_tree(data).then(res => {
        if (res.code == 1) {
          this.defaultData = res.data.one_info;
          this.defaultId = res.data.one_info[0].id;
          this.getOrgUsers();
        }
      })
    },
    getOrgUsers() {
      this.loading = true;
      let data = {
        dept_id: this.defaultId,
        page: this.cur_page,
        limit: this.limit
      }
      org_users(data).then(res => {
        if (res.code == 1) {
          this.loading = false;
          this.tableData = res.data.page_data;
          this.cur_page = Number(res.data.page_now);
          this.total = Number(res.data.total_rows);
        }
      })
    },
    handleCurrentChange(val) {
      this.cur_page = val;
      this.getOrgUsers();
    },
    handleNodeClick(data) {
      this.defaultId = data.id;
      this.cur_page = 1;
      this.getOrgUsers();
    },
    getNavTree() {
      let data = {
        cpm_id:this.cpm_id
      }
      nav_tree(data).then(res =>{
        if(res.code == 1) {
          this.navData = res.data.menu_left;
        }
      })
    },
    addFormSubmit(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true;
          let data = {
            uo_pid:'0',
            uo_name:this.dialogForm.title,
            uo_sort: this.dialogForm.order
          }
          org_add(data).then(res => {
            this.loading = false;
            if (res.code == 1) {
              this.$message({
                message: "机构新建成功！",
                type: "success",
              });
              this.dialogFormVisible = false;
              this.getOrgTree();
            } else {
              this.$message({
                message: res.msg,
                type: "error",
              });
            }
          })
        }
      })
    },
  },
  mounted() {
    this.getOrgTree();
    // this.getNavTree();
  }
};
</script>
<style lang="scss">
.nav-tree {
  .el-tree-node__content {
    width: 100%;

    span {
      display: inline-block;
    }
  }
}
</style>
<style scoped lang="scss">
.left {
  width: 300px;
  height: 100%;
  box-sizing: border-box;
  display: flex;
  flex-direction: column;

  > div {
    flex: 1;
    overflow-y: auto;
  }
}

.right {
  box-sizing: border-box;
  height: 100%;
  flex: 1;
  border-left: 1px solid rgba(112, 112, 112, 0.2);
}

.content-left {
  width: 200px;
  height: 100%;
  box-sizing: border-box;
}

.content-right {
  box-sizing: border-box;
  height: 100%;
  flex: 1;
}
</style>