<template>
  <div>
    <el-dialog
      v-model="dialogVisible11"
      title="选择接收人"
      width="1050"
      append-to-body
      style="height: 800px"
      :before-close="closeSelUserDialog"
    >
      <el-row :gutter="20">
        <el-col
          style="
            padding: 0;
            width: 250px;
            border: 1px solid #e7eaec;
            border-radius: 5px;
            min-height: 360px;
            margin-left: 20px;
          "
          :span="7"
          :xs="24"
        >
          <div
            style="
              display: flex;
              height: 40px;
              line-height: 40px;
              border-bottom: 1px solid #e7eaec;
              margin-bottom: 10px;
            "
          >
            <div
              @click="toggle(0)"
              :class="{ selected: fontIndex === 0 }"
              style="
                font-size: 17px;
                margin-left: 15px;
                padding-left: 10px;
                height: 40px;
                width: 110px;
                border-right: 1px solid #e7eaec;
                cursor: pointer;
              "
            >
              所属部门
            </div>
          </div>

          <div class="head-container"></div>

          <!-- 部门 -->
          <div v-if="show" class="head-container">
            <el-tree
              :data="deptOptions"
              :props="{ label: 'Name', children: 'children' }"
              :expand-on-click-node="false"
              :filter-node-method="filterNode"
              ref="dept"
              node-key="No"
              highlight-current
              default-expand-all
              @node-click="handleNodeClick"
              :current-node-key="currentNodeKey"
              :default-expanded-keys="expandedKeys"
            />
          </div>
        </el-col>

        <!-- 所属部门 -->
        <el-col
          v-if="show"
          style="margin-left: 40px; margin-top: 5px"
          :span="15"
          :xs="10"
        >
          <!-- <div
            style="
              font-size: 15px;
              color: black;
              height: 30px;
              line-height: 20px;
            "
          >
            已选接收人：{{ Names }}
          </div> -->
          <el-table
            style="height: 539px"
            ref="multipleTable1"
            v-loading="loading"
            :row-key="getRowKeys"
            :data="userList"
            @selection-change="handleSelectionChange"
            @select="setSelectRows"
            @select-all="selectAll"
          >
            <el-table-column
              :selectable="getSelectable"
              :reserve-selection="true"
              type="selection"
              width="100"
              align="center"
            />
            <el-table-column
              label="用户姓名"
              align="left"
              key="Name"
              prop="Name"
              v-if="columns[2].visible"
              :show-overflow-tooltip="true"
            />
          </el-table>
          <div style="float: right; margin-top: 20px; margin-right: 20px">
            <!--            <el-pagination
                          v-model:current-page="queryParams.pageNum"
                          v-model:page-size="queryParams.pageSize"
                          :page-sizes="[10, 20, 30, 50, 100]"
                          :small="small"
                          :disabled="disabled"
                          :background="background"
                          layout="total, sizes, prev, pager, next, jumper"
                          :total="total"
                          @size-change="handleSizeChange"
                          @current-change="handleCurrentChange"
                        />-->
          </div>
        </el-col>
      </el-row>

      <template #footer>
        <span class="dialog-footer">
          <el-button @click="closeSelUser">取消</el-button>
          <el-button type="primary" @click="submitUserList"> 确认 </el-button>
        </span>
      </template>
    </el-dialog>
  </div>
</template>

<script>
import { GenerNextStepNodeEmpsNoWorkId } from "@/api/offcial/supervision";
import { GenerNextStepNodeEmps } from "@/api/liucheng";
import { listPeoplegroup, delPeoplegroup } from "@/api/system/contact";
import { listUser, deptTreeSelect } from "@/api/system/user";
import { getJToken } from "@/utils/auth";
export default {
  name: "YinetoaWjwWebSelectUser",
  selected: false,
  data() {
    return {
      Names: "",
      selectedIndex: 0,
      showSearch: true,
      ids: [],
      deptOptions: [],
      fontIndex: 0,
      allUserList: [],
      userList: [],
      delPeopleInfo: {
        groupId: undefined,
        userId: undefined,
      },
      dialogVisible2: false,
      dialogVisible1: false,
      userNames: [],
      contactsOptions: undefined,
      forwardInfo: {
        mailId: null,
        userIds: [],
      },
      groupInfo: {
        groupName: "",
      },
      // 查询参数
      queryParams1: {
        pageNum: 1,
        pageSize: 50,
        userId: "1",
      },
      selection: [],
      contactsList: [],
      dialogVisible11: false,
      yijiaoFlg: false,
      ruleForm: {
        mailUserIds: [],
        isRead: "N",
        isDel: "N",
        mailState: "1",
        mailType: null,
        sendTime: "",
        files: [],
      },
      mailUserIds: [],
      show: true,
      total: 0,
      queryParams: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
        nickName: undefined,
      },
      queryParams2: {
        pageNum: 1,
        pageSize: 150,
      },
      queryParams3: {
        pageNum: 1,
        pageSize: 10,
        userName: undefined,
        phonenumber: undefined,
        status: undefined,
        deptId: undefined,
      },
      peopleInfo: {
        groupId: null,
        userIds: [],
      },
      columns: [
        { key: 0, label: `用户编号`, visible: true },
        { key: 1, label: `用户名称`, visible: true },
        { key: 2, label: `用户昵称`, visible: true },
        { key: 3, label: `部门`, visible: true },
        { key: 4, label: `手机号码`, visible: true },
        { key: 5, label: `状态`, visible: true },
        { key: 6, label: `创建时间`, visible: true },
      ],
    };
  },
  created() {
    this.$emit("closeDialogf");
    this.$nextTick(() => {
      // this.$refs.multipleTable1.clearSelection();
    });
    //
  },
  mounted() {},

  methods: {
    // el-table只能选一个

    setSelectRows(selection) {
      if (selection.length > 1) {
        const del_row = selection.shift();
        this.$refs.multipleTable1.toggleRowSelection(del_row, false); //设置这一行取消选中
      }
    },

    // 点击表头的全选复选框触发
    selectAll(selection) {
      this.$modal.msgError("人员只能选一个！");
      this.$refs.multipleTable1.clearSelection();
      return;
    },
    // 查询表数据
    getList1() {
      GenerNextStepNodeEmpsNoWorkId({
        flowNo: "016",
        toNodeID: "1603",
      }).then((res) => {
        console.log("122523", res);
        this.allUserList = res.Emps;
        this.userList = res.Emps;
        this.deptOptions = this.handleTree(res.Depts, "No", "ParentNo");
      });
    },
    closeView() {
      this.dialogVisible11 = false;
    },

    show1() {
      // if (str == "0") {
      //   this.yijiaoFlg = true;
      // }
      this.getList1();
      this.dialogVisible11 = true;
    },
    /** * 表格单行返回是否可以勾选 */
    getSelectable(row) {
      return row.status !== "REJECT";
    },
    // // 多选框选中数据  常用联系人
    handleSelectionChange(selection) {
      console.log(selection);
      // this.userNames = selection.map((item) => item.NO);
      this.Names = selection.map((item) => item.NO).join(",");
      console.log(this.Names);
    },
    addContact() {
      this.dialogVisible1 = true;
    },

    getRowKeys(row) {
      return row.NO;
    },
    //取消
    closeSelUserDialog(done) {
      this.$emit("closeDialogf", 1);
      done();
    },
    closeSelUser() {
      this.dialogVisible11 = false;
      this.userNames = [];
      this.$refs.multipleTable1.clearSelection();
      this.$emit("closeDialogf", 1);
    },
    submitUserList() {
      const uIds = this.Names;
      if (uIds == "") {
        this.$modal.msgError("请选择人员");
        return;
      } else {
        this.$emit("ok", uIds);
        this.dialogVisible11 = false;
        this.userNames = [];
        this.Names = "";
        this.$refs.multipleTable1.clearSelection();
      }
      // if (this.yijiaoFlg) {
      //   this.$emit("ok", uIds, "0");
      // } else {
      //   this.$emit("ok", uIds, "1");
      // }
    },
    // /** 节点单击事件 */
    handleNodeClick(data) {
      if (data.ParentNo == "0") {
        this.userList = this.allUserList;
      } else {
        this.userList = [];
        for (let i = 0; i < this.allUserList.length; i++) {
          if (this.allUserList[i].FK_Dept == data.No) {
            this.userList.push(this.allUserList[i]);
          }
        }
      }
    },

    // /** 查询部门下拉树结构 */
    // async getDeptTree() {
    //   await deptTreeSelect().then((response) => {
    //     this.deptOptions = response.data;
    //   });
    // },

    //点击
    selectItem(val, index) {
      this.selectedIndex = index;
      this.peopleInfo.groupId = val.id;
      this.getPeoplegroup();
    },
  },
};
</script>

<style lang="scss" scoped>
::v-deep img {
  max-width: 790px;
}
::v-deep .el-tree-node__content {
  display: flex;
  align-items: center;
  height: 26px;
  cursor: pointer;
  font-size: 16px;
}
::v-deep .el-dialog__body {
  padding: 20px 30px;
  color: var(--el-text-color-regular);
  font-size: var(--el-dialog-content-font-size);
  word-break: break-all;
}
.hover-li:hover {
  background-color: #f5f7fa;
}
.selected {
  font-size: 17px;
  margin-left: 25px;
  padding-right: 25px;
  border-right: 1px solid #e7eaec;
  color: #3792f4; // 字体颜色变为蓝色
}
.lineStyle.active {
  background-color: #ebf5ff;
}
#bg:hover {
  background-color: #f5f7fa;
}
</style>
