<template>
  <div class="page">
    <div style="margin:10px 0">
      <tab-pane
        :thirdList="thirdList"
        :activeName="activeName"
        @handleClick="handleClick"
      ></tab-pane>
    </div>
    <el-row :gutter="20">
      <el-col :span="6" :xs="12" class="mytree">
        <div class="title">
          <el-button type="primary" size="mini" @click="saveFn('group')"
            >新增分组</el-button
          >
          <el-button type="success" size="mini" @click="saveFn('job')"
            >新增职位</el-button
          >
        </div>
        <el-scrollbar style="height: 100%" class="mt20">
          <!-- 区分分组和职位 -->
          <el-tree
            size="mini"
            ref="siteTree"
            :data="tableData.data"
            id="el-tree"
            node-key="id"
            indent="4"
            :props="{
              children: 'children',
            }"
            highlight-current
            default-expand-all
            :expand-on-click-node="false"
            :render-content="renderContent"
            @node-click.self="handleNodeClick"
          >
            <template slot-scope="{ node, data }">
              <span class="custom-tree-node">
                <span style="font-size:14px" v-if="!data.groupId">{{
                  data.groupName
                }}</span>
                <span style="font-size:14px" v-if="data.groupId">{{
                  data.jobName
                }}</span>
                <span style="margin-left:50px">
                  <el-button
                    type="text"
                    class="el-icon-edit-outline"
                    size="mini"
                    @click.stop="editJob(data)"
                  ></el-button>
                  <el-button
                    type="text"
                    class="el-icon-delete"
                    size="mini"
                    style="color:#F56C6C"
                    @click.stop="deleteFn(data)"
                  ></el-button>
                </span>
              </span>
            </template>
          </el-tree>
        </el-scrollbar>
      </el-col>
      <el-col :span="18" :xs="12" class="mytree">
        <div class="mt20" style="font-size:14px" v-if="currentName">
          {{ currentName }} ({{ this.staffList.length }})
        </div>

        <div class="mt10">
          <el-button type="success" size="mini" @click="addStaff">
            新增员工</el-button
          >
          <el-button
            type="primary"
            @click="doExport"
            :disabled="isExport"
            size="mini"
            >导出数据</el-button
          >

          <el-button
            type="danger"
            @click="allDelete"
            :disabled="isExport"
            size="mini"
            >批量删除</el-button
          >
        </div>

        <el-table
          :data="staffList"
          border
          class="mt20"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55"> </el-table-column>
          <el-table-column
            label="序号"
            type="index"
            width="50"
          ></el-table-column>
          <el-table-column label="姓名" prop="name"></el-table-column>
          <el-table-column label="部门" prop="deptName"></el-table-column>
          <el-table-column label="员工类型" prop="staffType">
            <template slot-scope="scope">
              <el-tag size="mini" v-show="scope.row.staffType == 1"
                >全职</el-tag
              >
              <el-tag size="mini" v-show="scope.row.staffType == 2"
                >兼职</el-tag
              >
              <el-tag size="mini" v-show="scope.row.staffType == 3"
                >实习</el-tag
              >
            </template>
          </el-table-column>
          <el-table-column label="手机号" prop="phoneNumber"></el-table-column>
          <el-table-column label="添加时间" prop="createTime"></el-table-column>
          <el-table-column label="操作">
            <template slot-scope="scope">
              <el-button type="text" @click="deleteStaff(scope.row)">
                删除
              </el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <drawer-show ref="drawerform" @ok="getData" />
    <drawer-staff
      ref="drawerStaff"
      :bumentree="bumentree"
      @ok="refresh"
    ></drawer-staff>
  </div>
</template>

<script>
/** 表单弹出框模式需引入 */
import { handleTree } from "@/assets/utils/table";
import drawerShow from "./drawershow";
import table from "@/assets/mixins/table";
import TabPane from "@/components/tabPane.vue";
import drawerStaff from "./drawershowStaff.vue";
import { timestampToTime } from "@/assets/utils/dateFormat.js";
export default {
  name: "JobList",
  components: {
    drawerShow,
    TabPane,
    drawerStaff,
  },
  mixins: [table],
  created() {
    this.query = {
      page: 1,
      size: -1,
    };
    this.$post("/dept/treeselect", {}).then(({ data }) => {
      this.bumentree = data.result;
    });
  },
  computed: {
    thirdList() {
      if (!this.$store.state.CurrentThirdArr) return [];
      return this.$store.state.CurrentThirdArr;
    },
    activeName() {
      return this.$store.state.ThirdPath;
    },
  },
  methods: {
    handleSelectionChange(val) {
      this.multipleSelection = val;
    },
    getStaff() {
      this.$post("/job/info?id=" + this.currentId).then((res) => {
        if (res.code == 1) {
          this.staffList = res.data.staffEntities;
          this.staffList.forEach((item) => {
            item.createTime = timestampToTime(item.createTime, 6);
          });
        }
      });
    },
    addStaff() {
      this.$refs.drawerStaff.add(this.currentId);
    },
    refresh() {
      // 请求
      // 员工、职位列表
      if (this.currentId) {
        this.getStaff();
      }
      this.getData();
    },
    handleNodeClick(node) {
      if (!node.groupId) {
        return;
      }
      this.currentId = node.id;
      this.currentName = node.jobName;
      this.getStaff();
    },
    // 获取数据后
    // 处理树结构
    afterRender(data) {
        console.log(data);
      data.data = handleTree(data.data, "id", "groupId");
    },
    saveFn(from) {
      this.$refs.drawerform.add(from);
    },
    doExport() {
      this.isExport = true;
      let params = {};
      if (this.multipleSelection.length > 0) {
        params["idList"] = this.multipleSelection;
      }
      this.$download(
        "/staff/exportExcel",
        {
          ...params,
        },
        { type: "excel" }
      )
        .then(() => (this.isExport = false))
        .catch((error) => {
          this.isExport = false;
          this.$message.error(error.message);
        });
    },
    /** 重写新增方法 */
    toAdd(row) {
      // console.log(row,'ssss')
      // this.$refs.drawerform.add(row);
    },
    /** 重写编辑方法 */
    toEdit(form, row) {
      this.$refs.drawerform.edit(form, row);
    },
    /** 重写查看方法 */
    toView(row) {
      this.$refs.drawerform.view(row);
    },
    handleClick(key) {
      this.$store.commit("setThirdPath", key);
      this.$router.push({
        path: key,
      });
    },
    // 职位
    editJob(row) {
      let from = "";
      // 编辑职位/分组
      if (!row.groupId) {
        from = "group";
      } else {
        from = "job";
      }

      this.toEdit(from, row);
    },
    // 删除分组或者职位
    deleteFn(row) {
      this.$confirm("此操作将永久删除该信息, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        // 删除操作
        this.$post("/job/delete?id=" + row.id).then((data) => {
          if (data.code == 1) {
            this.$message({
              type: "success",
              message: "删除成功!",
            });
            this.getData();
          }
        });
      });
    },
    // 删除员工
    deleteStaff(row) {
      this.$confirm("此操作将永久删除该员工，是否继续", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }).then((res) => {
        this.$post("/staff/delete?id=" + row.id).then((res) => {
          if (res.code == 1) {
            this.$message.success("删除成功");
            this.getStaff();
          }
        });
      });
    },
    // 批量删除员工
    allDelete() {
      if (!this.multipleSelection.length) {
        return this.$message.warning("请选中一条记录");
      }
      let ids = this.multipleSelection.map((item) => item.id).join(",");
      this.$get("/staff/delete?", { id: ids }).then((res) => {
        if (res.code == 1) {
          this.$message.success("删除成功");
          this.getStaff();
        }
      });
    },
  },
  data() {
    return {
      isExport: false,
      saveFrom: "",
      addShow: false,
      staffList: [],
      bumentree: [],
      currentId: "",
      currentName: "",
      multipleSelection: [],
    };
  },
};
</script>
