<template>
  <!-- 考核指标录入 -->
  <div class="dashboard-container">
    
    <div class="gva-table-box">
      <el-container>
        <!-- 左侧内容 -->
        <el-aside
          width="300px"
          
          style="border-right: 1px solid rgb(220, 223, 230);height: 750px"
        >
          <el-tree
            :data="GovthreeList2"
            :props="defaultProps1"
            @node-click="handleNodeClick"
          ></el-tree>
        </el-aside>
        <el-aside
          width="200px"
          style="border-right: 1px solid rgb(220, 223, 230);height: 750px"
        >
          <el-tree
            :data="postList"
            :props="defaultProps1"
            @node-click="NodePostClick"
          ></el-tree>
        </el-aside>
        <!-- 右侧内容 -->
        <el-main style="padding: 10px">
          <div v-if="tableGWShow">
            <gwTarget :gwFromList="gwFromList" :gwId="gwId"></gwTarget>
          </div>
          <div v-if="tableBMShow">
            <target :bmId="bmId"></target>
          </div>
        </el-main>
      </el-container>
    </div>
    
  </div>
</template>

<script>
import { govthree, positionlist } from "@/api/personnel/post";
import { dutyclasslist } from "@/api/duty/dimension";
import target from "@/views/basicInfo/target.vue";
import gwTarget from "@/views/basicInfo/gwTarget.vue";
import {
  posttargetlist,
  addtarget,
  gettargetinfo,
  eiteassessinfo,
  eitetarget,
  deltarget,
  editposttarget,
  editstate,
  addposttarget,
} from "@/api/duty/project";
import { getgroupdepartmap, getgroupuser } from "@/api/duty/group";
export default {
  components: {
    target,
    gwTarget
  },
  name: "Dashboard",
  data() {
    return {
      gwFromList:{
        gwId:1,
        bmId:1
      },
      tableGWShow: false,
      tableBMShow: true,
      gwId:1,
      bmId:1,
      GovthreeList2: [],
      defaultProps1: {
        children: "child",
        label: "name",
      },
      grouplistBackup: [],
      grouplist: [],
      props: {
        checkStrictly: true,
        value: "id",
        label: "name",
        children: "children",
        emitPath: false,
        // multiple: true
      },
      userProps: {
        value: "key",
        label: "name",
        children: "govlist",
        emitPath: false,
        multiple: true,
      },
      dutyclasslist: {},
      searchList: {
        page: 1,
        pagesize: 10000,
      },
      // 查询详情的数据
      editFrom: {},
      // 修改状态提交数据
      switchFrom: {},
      // 删除数据提交
      deleFrom: {},
      // 编辑时数据
      editAdd: {
        unittitle: "",
        parentId: "",
      },
      assessList: {},
      // 添加数据
      form: {
        share: 2,
        cycleattr: 1,
        scoringmethod: 1,
      },
      // 弹窗变量
      dialogFormVisible: false,
      // 修改弹窗
      editDialogFormVisible: false,
      total: 0,
      postListAdd: [],
      postList: [],
      tableData: [],
      // 条件查询变量
      searchInfo: {
        page: 1,
        pagesize: 10,
      },
      // 条件查询变量
      abc: {
        aaa: "111",
        bbb: "222",
      },
    };
  },
  created() {
    console.log(this.$store.state.user.token);
    if (this.$store.state.user.token == "") {
      this.$router.push("/login");
    }
    // 页面渲染时获取初始数据
    this.getDataList();
    this.getDutyclasslist();
    this.getSystemadminlist();
    this.getGrouplist();
    this.getGovthree2();
  },
  methods: {
    // 点击岗位列表
    NodePostClick(val) {
      console.log(val)
        this.gwId=val.id
        this.gwFromList.gwId=val.id
        this.tableGWShow=true
        this.tableBMShow=false
        console.log('岗位')
      console.log(this.gwFromList);
    },
    // 获取岗位
    async getPost(val) {
      const from = {
        organization: val.toString(),
        page: 1,
        pagesize: 10,
      };
      const res = await positionlist(from);
      this.postList = res.data.list;
    },
    // 点击行政组织树
    handleNodeClick(val) {
      // this.searchInfo.organization=val.id
      // this.searchInfo.organization=this.searchInfo.organization.toString()
      this.getPost(val.id);
      console.log('bumen ')
      this.bmId=val.id
      this.gwFromList.bmId=val.id
      this.tableGWShow=false
      this.tableBMShow=true
      console.log(val);
    },
    // 添加时点击行政组织
    async departChange(val) {
      console.log(val);
      // this.searchInfo.organization=val.id
      // this.searchInfo.organization=this.searchInfo.organization.toString()
      const from = {
        organization: val.toString(),
        page: 1,
        pagesize: 10,
      };
      const res = await positionlist(from);
      this.postListAdd = res.data.list;
      console.log(val);
    },
    //   获取行政组织二级树
    async getGovthree2() {
      const res = await govthree();
      this.GovthreeList2 = res.data[0].child;
      console.log("this.GovthreeList2");
      console.log(res.data[0].child);
    },
    // 获取员工列表
    async getSystemadminlist() {
      const from = {
        level: 4,
      };
      const res = await getgroupuser(from);
      this.grouplistBackup = res.data;
      this.grouplistBackup.forEach((item) => {
        if (item.govlist != null) {
          // 即：this.digui(item);在这地方添加的
          item.govlist.forEach((items) => {
            // 下面的就是执行递归的方法，因为我是从第二层才开始需要往下挖的，所以这里多了个forEach,如果从第一层起，从item就好了，即：this.digui(item);在上面添加
            this.digui(items); // 这里是源头，把一个对象开始递归，开始循环
            // 如果想看完整数据，那么是在这里打印数据哦
            console.log(items, "看我查看完整的数据哦");
            // 因为上一步递归时，就已经把循环children的动作做完了，这里是验收递归方法的地方。
          });
        } else {
          item.govlist = item.child;
          // 如果第一层没有子项做的操作。。。。。
        }
      });
      console.log(this.grouplistBackup);
    },
    // 获取部门
    async getGrouplist() {
      const res = await getgroupdepartmap();
      this.grouplist = res.data;
    },
    // 获取考核纬度列表
    async getDutyclasslist() {
      const res = await dutyclasslist(this.searchList);
      this.dutyclasslist = res.data.list;
    },
    //删除操作
    async deleteOperate(row) {
      this.$confirm("此操作将永久删除, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then(async () => {
        this.deleFrom.state = 3;
        this.deleFrom.id = row.id;
        this.deleFrom.id = this.deleFrom.id.toString();
        const res = await editstate(this.deleFrom);
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "删除成功!",
          });

          this.getDataList();
        }
      });
    },
    // 树形结构递归
    digui(item) {
      // 一层一层往下面执行，循环，直到不满足情况的条件下，会自动跳出这个递归方法，然后又到上面方法的源头处，开始执行下一个对象。。。
      if (item.govlist != null) {
        // 因为三级联动的数据格式是value和label,所以需要自己手动添加，没有的忽略。
        item.govlist.forEach((ff) => {
          // 这里就是判断他的children下面还有没有值，有的话我就要往下挖，就又开始自己调用自己了
          this.digui(ff);
        });
      } else {
        // 这里就是判断，如果我这一层的children下面没有东西的时候该做什么操作
        // 要添加value和label,否则会看不到标签名字和值
        // --------------------------分割线---------------------------------

        item.govlist = item.child;
      }
      // 到这里为止，不能在这里打印数据，不然数据就是个断层的，因为在这里打印的数据是当前循环的这一层的数据，如果想看完整数据效果，那么就需要在递归方法第一次调用的地方打印需要递归的值，即上一个方法中。
    },
    // 新增按钮
    showAdd() {
      this.dialogFormVisible = true;
      console.log(this.dialogFormVisible);
    },
    // 编辑按钮
    async showEdit(row) {
      this.editFrom.outid = row.outid;
      const res = await gettargetinfo(this.editFrom);
      this.editAdd = res.data;
      console.log("this.editAdd");
      console.log(this.editAdd);
      this.editDialogFormVisible = true;
    },
    // 开关状态监听
    async changeVal(val, id) {
      this.switchFrom.id = id;
      this.switchFrom.id = this.switchFrom.id.toString();
      if (val == 1) {
        this.switchFrom.state = 1;
        const res = await editstate(this.switchFrom);
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "修改状态成功",
            showClose: true,
          });
          this.getDataList();
        }
      } else {
        this.switchFrom.state = 2;
        const res = await editstate(this.switchFrom);
        if (res.code === 0) {
          this.$message({
            type: "success",
            message: "修改状态成功",
            showClose: true,
          });
          this.getDataList();
        }
      }
    },
    // 重置搜索条件
    onReset() {
      this.searchInfo = {};
    },
    // 条件搜索
    onSubmit() {
      this.searchInfo.page = 1;
      this.searchInfo.pagesize = 10;
      this.getDataList();
    },
    // 日期时间戳转日期格式
    formatDate(nS) {
      return new Date(parseInt(nS) * 1000)
        .toLocaleString()
        .replace(/:\d{1,2}$/, " ");
    },

    // 提交按钮
    async enterDialog() {
      this.$refs.addForm.validate(async (valid) => {
        if (valid) {
          this.form.relevantDepartments =
            this.form.relevantDepartments.toString();
          if (this.form.departmentsPost != null) {
            this.form.departmentsPost = this.form.departmentsPost.map(String);
          }
          this.form.cycleattr = parseInt(this.form.cycleattr);
          const res = await addposttarget(this.form);
          if (res.code === 0) {
            this.$message({
              type: "success",
              message: "添加成功",
              showClose: true,
            });
          }
          this.getDataList();
          this.closeDialog();
        }
      });
    },

    // 编辑提交按钮
    async editEnterDialog() {
      this.$refs.editForm.validate(async (valid) => {
        if (valid) {
          if (this.editAdd.relevantdepartmentsmap != null) {
            this.editAdd.relevantdepartments =
              this.editAdd.relevantdepartmentsmap.map(String);
          }
          if (this.editAdd.relevantdepartmentsmap == null) {
            this.editAdd.relevantdepartments =
              this.editAdd.relevantdepartments.split(",");
          }
          if (this.editAdd.visiblerangedepartmap == null) {
            this.editAdd.visiblerange = this.editAdd.visiblerange.split(",");
          }
          if (this.editAdd.visiblerangegroupmap == null) {
            this.editAdd.visiblerangegroup =
              this.editAdd.visiblerangegroup.split(",");
          }
          console.log(this.editAdd.relevantdepartments);
          if (this.editAdd.share == 1) {
            this.editAdd.relevantdepartments = [];
            this.editAdd.relevantdepartmentsmap = [];
            this.$delete(this.editAdd, "relevantdepartments");
            this.$delete(this.editAdd, "relevantdepartmentsmap");
          }
          this.editAdd.report = this.editAdd.reportmap;
          this.editAdd.dimension = this.editAdd.dimensionidstr;
          this.editAdd.cycleattr = parseInt(this.editAdd.cycleattr);
          const res = await eitetarget(this.editAdd);
          if (res.code === 0) {
            this.$message({
              type: "success",
              message: "编辑成功",
              showClose: true,
            });
          }
          this.getDataList();
          this.editCloseDialog();
        }
      });
    },
    // 添加框关闭
    closeDialog() {
      console.log("closeDialog");
      this.initForm();
      this.dialogFormVisible = false;
    },
    // 修改框关闭
    editCloseDialog() {
      this.editInitForm();
      this.editDialogFormVisible = false;
    },
    // 添加重置表单
    initForm() {
      console.log("initForm");
      this.$refs.addForm.resetFields();
      this.form = {};
      console.log(this.form);
    },
    // 修改重置表单
    editInitForm() {
      this.$refs.editForm.resetFields();
      this.editAdd = {};
    },
    // 改变pageSize
    handleSizeChange(val) {
      this.searchInfo.pagesize = val;
      this.getDataList(this.searchInfo);
    },
    // 改变page
    handleCurrentChange(val) {
      this.searchInfo.page = val;
      this.getDataList(this.searchInfo);
    },
    // 获取初始数据
    async getDataList() {
      if (this.searchInfo.relevantdepartments != null) {
        this.searchInfo.relevantdepartments =
          this.searchInfo.relevantdepartments.map(String);
      }
      const res = await posttargetlist(this.searchInfo);
      this.tableData = res.data.list;
      this.total = res.data.total;
      this.searchInfo.page = res.data.page;
      this.searchInfo.pagesize = res.data.pageSize;
    },
  },
};
</script>

<style lang="scss" scoped>
.dashboard {
  &-container {
    margin: 30px;
  }
  &-text {
    font-size: 30px;
    line-height: 46px;
  }
}
</style>
