<template>
  <div>
    <BasicLayout>
      <template #wrapper>
        <!-- 岗位管理 -->
        <el-card class="box-card">
          <div class="org_header">
            <span class="subject">岗位管理</span>
            <div class="header_btn_box">
              <el-button size="mini" @click="getList">刷新列表 </el-button>
              <el-button size="mini" type="primary" @click="handleAdd"
                >添加岗位</el-button
              >
              <!-- <el-dropdown class="m20" @command="handleAdd">
                <el-button type="primary" size="mini"
                  >添加岗位
                  <i class="el-icon-arrow-down el-icon--right"></i>
                </el-button>
                <el-dropdown-menu slot="dropdown">
                  <el-dropdown-item command="1">单个添加</el-dropdown-item>
                  <el-dropdown-item command="2">批量添加</el-dropdown-item>
                </el-dropdown-menu>
              </el-dropdown> -->
            </div>
          </div>
          <el-form
            ref="queryForm"
            :model="queryParams"
            :inline="true"
            label-position="right"
            label-width="100px"
            style="margin-top: 20px"
            @submit.native.prevent
          >
            <el-form-item label="" prop="filter">
              <el-input
                v-model="queryParams.filter"
                placeholder="输入关键字搜索"
                clearable
                size="small"
                @keyup.enter.native="handleQuery"
              />
            </el-form-item>
          </el-form>
          <el-table
            v-loading="loading"
            :data="jobsList"
            @selection-change="handleSelectionChange"
            @sort-change="handleSortChang"
          >
            <el-table-column type="selection" width="45" align="center" />
            <el-table-column label="岗位名称" align="left" prop="name" />
            <el-table-column
              label="关联用户"
              align="center"
              prop="userCnt"
              sortable="custom"
            >
              <template slot-scope="scope">
                <span
                  @click="clickUserCnt(scope.row.id)"
                  style="color: #1e5aff; cursor: pointer"
                  >{{ scope.row.userCnt }}</span
                >
              </template>
            </el-table-column>
            <el-table-column
              label="创建时间"
              align="left"
              prop="createdTime"
              :formatter="parseTime"
              sortable="custom"
            >
              <template slot-scope="scope">
                <span>{{ parseTime(scope.row.createdTime) }}</span>
              </template>
            </el-table-column>
            <el-table-column
              label="操作"
              align="left"
              width="125"
              class-name="small-padding fixed-width"
            >
              <template slot-scope="scope">
                <!-- <el-button
                  size="mini"
                  type="text"
                  icon="el-icon-edit"
                  @click="handleUpdate(scope.row)"
                  >编辑
                </el-button>
                <el-button
                  v-if="scope.row.userCnt == 0"
                  size="mini"
                  type="text"
                  icon="el-icon-delete"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                > -->
                <el-button
                  size="mini"
                  type="text"
                  @click="handleUpdate(scope.row)"
                  >编辑
                </el-button>
                <el-button
                  v-if="scope.row.userCnt == 0"
                  size="mini"
                  type="text"
                  @click="handleDelete(scope.row)"
                  >删除</el-button
                >
                <el-tooltip
                  v-else
                  effect="dark"
                  content="该岗位已有关联用户，不允许删除"
                  placement="bottom"
                >
                  <span style="margin-left: 10px">
                    <el-button
                      size="mini"
                      type="text"
                      @click="handleDelete(scope.row)"
                      :disabled="true"
                      >删除</el-button
                    >
                  </span>
                </el-tooltip>
              </template>
            </el-table-column>
          </el-table>

          <el-row
            :gutter="24"
            class="mb8 mt10"
            justify="space-between"
            type="flex"
          >
            <el-col :span="12">
              <el-button size="mini" :disabled="multiple" @click="handleDelete"
                >删除
              </el-button>
            </el-col>
            <el-col :span="12" style="justify-content: end">
              <pagination
                v-show="total > 0"
                :total="total"
                :page.sync="pageIndex"
                :limit.sync="queryParams.limit"
                @pagination="getList"
              />
            </el-col>
          </el-row>

          <!-- 添加或修改对话框 -->
          <el-dialog
            v-dialogDrag
            :visible.sync="open"
            width="700px"
            append-to-body
            :close-on-click-modal="false"
          >
            <div slot="title" class="dialog-title">
              <div class="dialog-icon mr20"></div>
              <span class="dialog-tip mr20">{{ title }}</span>
            </div>
            <div>
              <div style="margin: 0 auto; width: 400px">
                <el-row :gutter="10" class="mb10">
                  <el-col :span="19" :xs="24"
                    ><i style="color: #ff4949; margin-right: 4px">*</i
                    >岗位名称（必填）</el-col
                  >
                  <el-col v-if="isEdit == false" :span="4" :xs="24"
                    >操作</el-col
                  >
                </el-row>
                <el-form ref="form" :model="form">
                  <div v-for="(val, index) in form.occupationList" :key="index">
                    <el-form-item
                      label=""
                      :prop="'occupationList.' + 0 + '.name'"
                      :rules="{
                        required: true,
                        message: '岗位名称不能为空',
                        trigger: 'blur',
                      }"
                    >
                      <el-row :gutter="10">
                        <el-col :span="19" :xs="24">
                          <el-input v-model="val.name" placeholder="岗位名称" />
                        </el-col>
                        <el-col :span="4" :xs="24">
                          <el-button
                            v-if="isEdit == false"
                            type="text"
                            style="font-size: 12px"
                            @click.prevent="removeVal(val)"
                            >移除</el-button
                          >
                        </el-col>
                      </el-row>
                    </el-form-item>
                  </div>
                  <el-form-item v-if="isEdit == false">
                    <el-row>
                      <el-col :span="12" :xs="24">
                        <span
                          @click="addVal"
                          style="
                            color: #1e5aff;
                            font-size: 12px;
                            display: block;
                            cursor: pointer;
                          "
                          ><i class="el-icon-circle-plus-outline"></i>
                          添加一条</span
                        >
                      </el-col>
                    </el-row>
                  </el-form-item>
                </el-form>
              </div>
            </div>
            <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitForm" size="small"
                >确 定</el-button
              >
              <el-button @click="cancelForm" size="small">取 消</el-button>
            </div>
          </el-dialog>

          <!-- 关联用户 -->
          <el-dialog
            v-dialogDrag
            :visible.sync="assoOpen"
            width="700px"
            append-to-body
            :close-on-click-modal="false"
          >
            <div slot="title" class="dialog-title">
              <div class="dialog-icon mr20"></div>
              <span class="dialog-tip mr20">关联用户</span>
            </div>
            <div>
              <el-row
                :gutter="10"
                class="mb16"
                justify="space-between"
                type="flex"
              >
                <el-col :span="1.5" class="mb8">
                  <el-button
                    type="primary"
                    icon="el-icon-plus"
                    @click="handleAddUser"
                    size="mini"
                    >添加用户
                  </el-button>
                </el-col>
                <el-col :span="10" class="mb8">
                  <el-row :gutter="55" justify="space-between" type="flex">
                    <el-col :span="4">
                      <el-button
                        icon="el-icon-refresh"
                        @click="getOccUserList"
                        size="mini"
                      ></el-button>
                    </el-col>
                    <el-col :span="20">
                      <el-input
                        prefix-icon="el-icon-search"
                        v-model="queryParamsUser.filter"
                        size="mini"
                        clearable
                        placeholder="输入关键字搜索"
                        @keyup.enter.native="getOccUserList"
                      ></el-input>
                    </el-col>
                  </el-row>
                </el-col>
              </el-row>
            </div>
            <el-table
              v-loading="loading"
              :data="userList"
              @sort-change="handleSortChangUser"
              max-height="350"
            >
              <el-table-column label="用户名" align="left" prop="phone" />
              <el-table-column label="姓名" align="left" prop="name">
              </el-table-column>
              <el-table-column label="组织" align="left" prop="deptNameList">
                <template slot-scope="scope">
                  <div v-for="(v, k) in scope.row.deptNameList" :key="k">
                    {{ v }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column label="岗位" align="left" prop="occNameList">
                <template slot-scope="scope">
                  <div v-for="(val, key) in scope.row.occNameList" :key="key">
                    {{ val }}
                  </div>
                </template>
              </el-table-column>
              <el-table-column
                label="关联时间"
                align="left"
                prop="linkedTime"
                :formatter="parseTime"
                sortable="custom"
              >
                <template slot-scope="scope">
                  <span>{{ parseTime(scope.row.linkedTime) }}</span>
                </template>
              </el-table-column>
            </el-table>

            <pagination
              v-show="total > 0"
              :total="userTotal"
              :page.sync="pageuserIndex"
              :limit.sync="queryParamsUser.limit"
              @pagination="getOccUserList"
            />

            <!-- <div slot="footer" class="dialog-footer">
              <el-button type="primary" @click="submitFormUser" size="small"
                >确 定</el-button
              >
              <el-button @click="cancelFormUser" size="small">取 消</el-button>
            </div> -->
          </el-dialog>

          <!-- 添加用户穿梭框 -->
          <div class="choosebox">
            <el-dialog
              v-dialogDrag
              title="选择用户"
              :visible.sync="userOpen"
              width="750px"
              append-to-body
              :close-on-click-modal="false"
              :before-close="handleDialogCloseUser"
            >
              <div slot="title" class="dialog-title">
                <div class="dialog-icon mr20"></div>
                <span class="dialog-tip mr20">选择用户</span>
              </div>
              <div class="dialog_box">
                <el-row :gutter="10">
                  <el-col :span="12">
                    <h3>选择:</h3>
                    <div class="side_left">
                      <div class="mb10">
                        <el-input
                          prefix-icon="el-icon-search"
                          v-model="queryUser.filter"
                          placeholder="输入关键字搜索"
                          clearable
                          @keyup.enter.native="searchUser()"
                        ></el-input>
                      </div>
                      <div class="mb10">
                        <el-breadcrumb class="breadcrumb" separator="/">
                          <el-breadcrumb-item
                            style="cursor: pointer"
                            @click.native="breadcrumbAll"
                          >
                            一级组织
                          </el-breadcrumb-item>
                          <el-breadcrumb-item
                            v-for="(item, index) in breadArr"
                            :key="index"
                            style="cursor: pointer"
                            @click.native="breadcrumb(item)"
                          >
                            {{ item.name }}
                          </el-breadcrumb-item>
                        </el-breadcrumb>
                      </div>
                      <div class="leftData mb10">
                        <div>
                          <el-checkbox
                            :indeterminate="isIndeterminate"
                            v-model="allchecked"
                            @change="handleCheckAllChange"
                            >全选</el-checkbox
                          >
                        </div>
                        <ul v-if="root.children != null">
                          <li
                            class="flexDiv"
                            v-for="(v, k) in root.children"
                            :key="k"
                          >
                            <div style="cursor: pointer" @click="showLower(v)">
                              <i class="iconfont icon-wenjianjia-shouqi"></i
                              >{{ v.name }}
                            </div>
                            <!-- <div>
                              <el-checkbox-group
                                v-model="checkedList"
                                @change="handleCheckedUserChange"
                              >
                                <el-checkbox
                                  v-for="(user, key) in root.managerList"
                                  :label="user"
                                  :key="key"
                                  ><i class="iconfont icon-portrait"></i
                                  >{{ user.name }}({{
                                    user.phone
                                  }})</el-checkbox
                                >
                              </el-checkbox-group>
                            </div> -->
                            <!-- <div v-if="v.children != null">
                              <el-button type="text" @click="showLower(v)"
                                ><i class="iconfont icon-organization"></i
                                >下级</el-button
                              >
                            </div> -->
                          </li>
                        </ul>
                        <div v-if="depUserList != null">
                          <div
                            v-for="user in depUserList"
                            :key="user.deptID"
                            style="text-overflow: ellipsis; overflow: hidden"
                          >
                            <el-checkbox-group
                              v-model="checkedList"
                              @change="handleCheckedUserChange"
                            >
                              <el-checkbox
                                v-for="u in user.users"
                                :label="u"
                                :key="u.id"
                                ><i class="iconfont icon-portrait"></i
                                >{{ u.name }} ({{ u.phone }})</el-checkbox
                              >
                            </el-checkbox-group>
                          </div>
                        </div>
                        <!-- <div
                          v-if="
                            (depUserList == null || depUserList.length == 0) &&
                            root.children == null
                          "
                        >
                          该部门下暂无人员
                        </div> -->
                      </div>
                    </div>
                  </el-col>
                  <el-col :span="12">
                    <h3>己选:</h3>
                    <div class="side_right">
                      <ul v-if="toData.length != 0">
                        <li v-for="n in toData" :key="n.id">
                          <div class="userlist">
                            <div>{{ n.name }}</div>
                            <div @click="removeUser(n.id)">
                              <i class="el-icon-error"></i>
                            </div>
                          </div>
                        </li>
                      </ul>
                    </div>
                  </el-col>
                </el-row>
              </div>
              <!-- <tree-transfer
                :title="title"
                :from_data="root"
                :to_data="toData"
                :defaultProps="{ label: 'label' }"
                @addBtn="add"
                @removeBtn="remove"
                :mode="mode"
                height="540px"
                filter
                openAll
              >
              </tree-transfer> -->

              <div slot="footer" class="dialog-footer">
                <el-button type="primary" @click="handelUserAndOcc" size="small"
                  >确 定</el-button
                >
                <el-button @click="cancelUserAndOcc" size="small"
                  >取 消</el-button
                >
              </div>
            </el-dialog>
          </div>
        </el-card>
      </template>
    </BasicLayout>
  </div>
</template>

<script>
import {
  listJobs,
  addJobs,
  updateJobs,
  delJobs,
  listOccUser,
  userAndOcc,
  listDepartments,
  departmentsUsers, //获取部门下的用户
  listUser, //员工列表
} from "@/api/jobs";
export default {
  name: "Config",
  data() {
    return {
      userTotal: 0,
      isIndeterminate: true,
      //选中用户列表
      checkedList: [],
      breadArr: [],
      allchecked: false,
      depUserList: null, //部门下的用户
      value4: [1],
      root: {
        children: [],
      },
      toData: [],
      colData: [
        { title: "全选", istrue: false },
        { title: "岗位名称", istrue: false },
        { title: "关联用户", istrue: false },
        { title: "创建时间", istrue: false },
        { title: "操作", istrue: false },
      ],
      // 设置选中的列的复选框
      colSelect: ["全选", "岗位名称", "关联用户", "创建时间", "操作"],
      // 遮罩层
      loading: false,
      id: 0,
      // 选中数组
      ids: [],
      // 非单个禁用
      single: true,
      // 非多个禁用
      multiple: true,
      // 总条数
      total: 0,
      // 弹出层标题
      title: "",
      // 是否显示弹出层
      open: false,
      isEdit: false,
      // 类型数据字典
      typeOptions: [],
      jobsList: [],
      clusterLogList: [],
      // 查询参数
      queryParams: {
        filter: "",
        orderBy: "createdTime", //时间字段
        order: "desc",
        offset: 0,
        limit: 10,
      },
      queryParamsUser: {
        filter: "",
        orderBy: "linkedTime", //时间字段
        order: "desc",
        offset: 0,
        limit: 10,
      },
      pageIndex: 1,
      pageuserIndex: 1,
      dateRange: [],
      // 表单参数
      form: {
        occupationList: [
          {
            name: "",
          },
        ],
      },
      //关联用户弹出层
      assoOpen: false,
      //关联用户列表，用于点击关联用户弹窗内
      userList: [],
      //岗位id
      occId: "",
      //添加用户穿梭框弹窗
      userOpen: false,
      commandFlag: true,
      //所有组织数据
      departments: [],
      items: [],
      //选择用户id；
      userIds: [],
      queryUser: {
        filter: "",
        orderBy: "id", //时间字段
        order: "desc",
        offset: 0,
        limit: 5000,
        deptID: "",
        occID: "",
      },
      userCheckList: [],
      // 表单校验
      // rules: {
      //   name: [
      //     { required: true, message: "岗位名称不能为空", trigger: "blur" },
      //   ],
      // },
    };
  },
  created() {
    this.getList();
    let _this = this;
    //mock进行测试
    // this.$http.get("/api/v3/parameter/query").then((res) => {
    //   console.log(res, "dddd");
    // });
  },
  watch: {
    matchedArr: {
      deep: true,
      handler: function (newV, oldV) {
        console.log("watch中：", newV);
      },
    },
  },
  methods: {
    //添加用户中的搜索
    searchUser() {
      console.log("a");
      listUser(this.queryUser).then((res) => {
        console.log(res, "搜索用户");
        this.depUserList[0].users = res.employees;
      });
    },
    // 全选
    handleCheckAllChange(val) {
      console.log(val, "全选");
      console.log(this.depUserList, "this.depUserList");
      console.log(this.depUserList[0], "this.depUserList[0]");
      if (this.depUserList[0] != undefined || this.depUserList[0] != null) {
        if (
          this.depUserList[0].users != undefined ||
          this.depUserList[0].users != null
        ) {
          this.checkedList = val ? this.depUserList[0].users : [];
          if (val == true) {
            this.toData = this.toData.concat(this.checkedList);
            if (this.toData.length != 0) {
              this.toData = this.toData.concat(this.checkedList);
              let deWeightThree = () => {
                let map = new Map();
                for (let item of this.toData) {
                  if (!map.has(item.id)) {
                    map.set(item.id, item);
                  }
                }
                return [...map.values()];
              };
              this.toData = deWeightThree();
            } else {
              this.toData = this.toData.concat(this.checkedList);
            }
          } else {
            if (this.toData.length != 0) {
              this.toData = this.toData.filter(
                (x) =>
                  !this.depUserList[0].users.some((item) => x.id === item.id)
              );
            } else {
              this.toData = this.checkedList;
            }
          }
          this.userIds = this.toData.map((item) => item.id);
          this.isIndeterminate = false;
        }
      }
      console.log("全选结尾");
    },
    handleCheckedUserChange(val) {
      console.log(val, "点击选择框");
      console.log(this.toData, "刚开始的toData");
      let checkedCount = val.length;
      console.log(checkedCount, "checkedCount");
      this.allchecked = checkedCount >= this.depUserList[0].users.length;
      this.isIndeterminate =
        checkedCount > 0 && checkedCount < this.depUserList[0].users.length;

      var list = this.depUserList[0].users.filter(
        //没有选中的元素；
        (x) => !val.some((item) => x.id === item.id)
      );
      if (this.toData.length != 0) {
        this.toData = this.toData.concat(val);

        let deWeightThree = () => {
          let map = new Map();
          for (let item of this.toData) {
            if (!map.has(item.id)) {
              map.set(item.id, item);
            }
          }
          return [...map.values()];
        };
        this.toData = deWeightThree();
        if (list.length != 0) {
          this.toData = this.toData.filter(
            //没有选中的元素；
            (x) => !list.some((item) => x.id === item.id)
          );
        }
      } else {
        this.toData = this.toData.concat(val);
      }

      if (this.toData.length != 0) {
        this.userIds = this.toData.map((item) => item.id);
      }
    },
    //右侧移除用户
    removeUser(id) {
      this.toData = this.toData.filter((item) => {
        return item.id != id;
      });
      console.log(this.userIds);
      this.userIds = this.userIds.filter((name) => {
        console.log(id, "userid");
        return name != id;
      });
      this.checkedList = this.checkedList.filter((item) => {
        return item.id != id;
      });
      if (this.checkedList.length != this.depUserList[0].users.length) {
        this.isIndeterminate = true;
        this.allchecked = false;
      } else {
        this.isIndeterminate = false;
        this.allchecked = true;
      }
      console.log(this.toData, this.userIds, "点击移除操作");
    },
    //关联用户弹窗，点击面包屑导航组织架构
    breadcrumbAll() {
      //获取全部组件数据
      this.getListDepartments();
      this.depUserList = [];
      this.breadArr = [];
      // this.checkedList = [];
      this.allchecked = false;
      this.isIndeterminate = false;
    },
    //关联用户弹窗，点击面包屑导航
    breadcrumb(item) {
      console.log(item, "面包屑导航点击");
      // this.userCheckList = this.checkedList;
      const id = item.id;
      this.root.children = item.children;
      this.depUserList = [];
      // this.checkedList = [];
      this.allchecked = false;
      this.isIndeterminate = false;
      this.queryUser.deptID = item.id;
      // let arr = this.getTreeData(this.root.children, item.id);
      // console.log(arr, "组织");
      console.log(this.breadArr);
      let index = this.breadArr
        .map(function (e) {
          return e.id;
        })
        .indexOf(item.id);
      console.log(index);
      this.breadArr.splice(index + 1);
    },
    //根据id获取数据；
    getTreeData(list, id) {
      let _this = this;
      for (let i = 0; i < list.length; i++) {
        let a = list[i];
        if (a.id === id) {
          return a.children;
        } else {
          if (a.children && a.children.length > 0) {
            let res = _this.getTreeData(a.children, id);
            if (res) {
              return res;
            }
          }
        }
      }
    },
    //点击下级
    showLower(item) {
      console.log(item.id);
      // if (item.children == null) {
      //   this.msgWarning("该部门下暂无人员");
      //   return false;
      // } else {
      this.root.children = item.children;
      // this.root.managerList = item.managerList;

      this.isIndeterminate = true;
      this.allchecked = false;
      this.breadArr.push(item);
      this.queryUser.deptID = item.id;
      this.getDepartmentsUsers(item.id);
    },
    //获取所有组织
    getListDepartments() {
      this.root.children = [];
      listDepartments().then((res) => {
        console.log(res, "所有组织");
        // this.root.children.push(res.root);
        this.root.children = res.root.children;
        console.log(this.root);
      });
    },
    //获取部门下的员工
    getDepartmentsUsers(id) {
      this.depUserList = [];
      let query = {
        deptID: id,
      };
      departmentsUsers(query).then((res) => {
        console.log(res, "部门下的员工");
        if (res.departments[0].users == null) {
          this.msgWarning("该部门下暂无人员");
        }
        this.depUserList = res.departments;
      });
    },
    //移除
    removeVal(item) {
      var index = this.form.occupationList.indexOf(item);
      if (index !== -1) {
        this.form.occupationList.splice(index, 1);
      }
    },
    //新增一条
    addVal() {
      this.form.occupationList.push({
        name: "",
      });
    },
    //点击关联用户
    clickUserCnt(id) {
      console.log(id, "点击关联用户的数字，获取当行的id");
      this.userList = [];
      this.assoOpen = true;
      this.occId = id;
      this.resetSearchForm();
      this.getOccUserList();
    },
    //获取关联用户列表
    getOccUserList() {
      // this.resetSearchForm();
      // this.queryParamsUser.orderBy = "linkedTime";
      this.queryParamsUser.offset =
        (this.pageuserIndex - 1) * this.queryParamsUser.limit;
      listOccUser(this.queryParamsUser, this.occId).then((res) => {
        console.log(res, "获取关联用户列表");
        if (res.users != null) {
          this.userList = res.users;
          this.userTotal = res.total;
        } else {
          this.userList = [];
          this.userTotal = 0;
        }
      });
    },
    //批量关联用户到某岗位,部门字段去掉
    handelUserAndOcc() {
      var obj = {
        deptIDList: [], //组织id
        employeeIDList: [], //员工id
        occupationIDList: [], //岗位id
      };
      obj.employeeIDList = this.userIds;
      obj.occupationIDList[0] = this.occId;
      console.log(obj, "数据occupationIDList");
      userAndOcc(obj).then((res) => {
        console.log(res, "批量关联用户到某岗位");
        this.userOpen = false;
        this.msgSuccess("关联用户成功");
        this.resetSearchForm();
        this.getOccUserList();
      });
    },
    handleDialogCloseUser() {
      this.userOpen = false;
      this.getList();
    },
    cancelUserAndOcc() {
      this.userOpen = false;
    },
    //添加用户
    handleAddUser() {
      this.depUserList = [];
      this.root.children = [];
      this.breadArr = [];
      this.userOpen = true;
      this.checkedList = [];
      this.isIndeterminate = false;
      this.allchecked = false;
      this.toData = [];
      this.getListDepartments();
    },
    //添加用户确定操作
    submitFormUser() {
      this.assoOpen = false;
      // userAndOcc().then((res) => {
      //   console.log(res);
      // });
    },
    //添加用户取消操作
    cancelFormUser() {
      this.assoOpen = false;
    },
    //重置查询表单
    resetSearchForm() {
      this.queryParams = {
        filter: "",
        orderBy: "createdTime",
        order: "desc",
        offset: 0,
        limit: 10,
      };
    },
    /** 排序回调函数 */
    handleSortChang(column, prop, order) {
      prop = column.prop;
      order = column.order;
      console.log(prop, order);
      this.queryParams.orderBy = prop;
      if (order === "descending") {
        this.queryParams.order = "desc";
      } else if (order === "ascending") {
        this.queryParams.order = "asc";
      } else {
        this.queryParams.order = "desc";
      }
      this.getList();
    },
    // 关联用户排序
    handleSortChangUser(column, prop, order) {
      prop = column.prop;
      order = column.order;
      console.log(prop, order);
      this.queryParamsUser.orderBy = prop;
      if (order === "descending") {
        this.queryParamsUser.order = "desc";
      } else if (order === "ascending") {
        this.queryParamsUser.order = "asc";
      } else {
        this.queryParamsUser.order = "desc";
      }
      this.getOccUserList();
    },
    //控制列的显示和隐藏
    columnChange(val) {
      this.colData.filter((i) => {
        if (this.colSelect.indexOf(i.title) !== -1) {
          i.istrue = true;
        } else {
          i.istrue = false;
        }
      });
    },
    /** 查询参数列表 */
    getList() {
      this.loading = true;
      this.queryParams.offset = (this.pageIndex - 1) * this.queryParams.limit;
      listJobs(this.queryParams).then((response) => {
        console.log(response.occupationItems, "list");
        this.jobsList = response.occupationItems;
        this.total = response.total;
        this.loading = false;
      });
    },
    // 新增和修改弹窗取消按钮
    cancelForm() {
      this.open = false;
      this.reset();
    },

    // 取消按钮
    cancel() {
      this.updateLogOpen = false;
      // this.reset()
    },

    // 表单重置
    reset() {
      (this.form = {
        occupationList: [
          {
            name: "",
          },
        ],
      }),
        this.resetForm("form");
    },

    /** 搜索按钮操作 */
    handleQuery() {
      this.pageIndex = 1;
      this.queryParams.offset = (this.pageIndex - 1) * this.queryParams.limit;
      this.getList();
    },
    /** 重置按钮操作 */
    resetQuery() {
      this.dateRange = [];
      this.resetForm("queryForm");
      this.handleQuery();
    },
    /** 新增按钮操作 */
    handleAdd() {
      this.reset();
      this.open = true;
      this.title = "添加岗位";
      this.isEdit = false;
    },
    // 多选框选中数据
    handleSelectionChange(selection) {
      console.log(selection);
      this.ids = selection.map((item) => item.id);
      this.items = selection;
      console.log(this.items);
      this.single = selection.length !== 1;
      this.multiple = !selection.length;
    },
    //数组去重
    unique(arr) {
      return arr.filter(function (item, index, arr) {
        //当前元素，在原始数组中的第一个索引==当前索引值，否则返回当前元素
        return arr.indexOf(item, 0) === index;
      });
    },
    /** 修改按钮操作 */
    handleUpdate(row) {
      this.reset();
      this.form = {
        occupationList: [
          {
            name: "",
          },
        ],
      };
      this.codeFlag = false;
      const Id = row.id || this.ids;
      this.form.id = row.id;
      this.form.occupationList[0].name = row.name;
      this.open = true;
      this.title = "修改岗位";
      this.isEdit = true;
    },
    /** 提交按钮 */
    submitForm: function () {
      console.log(this.form);
      this.$refs["form"].validate((valid) => {
        if (valid) {
          if (this.form.id !== undefined) {
            updateJobs(this.form.occupationList[0], this.form.id).then(
              (response) => {
                this.msgSuccess("修改成功");
                this.open = false;
                this.getList();
              }
            );
          } else {
            this.form.occupationList = this.form.occupationList.filter(
              function (item) {
                return item.name != "";
              }
            );
            console.log(this.form, "新增中的this.form");
            addJobs(this.form)
              .then((response) => {
                if (response.code && response.code != 0) {
                  this.msgError(response.msg);
                } else {
                  this.msgSuccess("新增成功");
                  this.open = false;
                  this.getList();
                }
              })
              .catch(function () {});
          }
        }
      });
    },
    /** 删除按钮操作 */
    handleDelete(row) {
      var Id = (row.id && [row.id]) || this.ids;
      Id = Id.toString();
      let Items = this.items.length != 0 ? this.items : [row];
      var obj = {
        occID: Id,
      };
      console.log(obj);
      var _this = this;
      var flag = Items.every((item) => {
        return item.userCnt == 0;
      });
      var names = Items.filter((item) => {
        if (item.userCnt > 0) return item.name;
      });
      var name = names.map((item) => item.name);
      this.$confirm("此操作将永久删除此岗位，是否继续?", "警告", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
        customClass: "message-delete",
      })
        .then(function () {
          if (flag == true) {
            delJobs(obj).then((res) => {
              console.log(res);
              _this.getList();
              _this.msgSuccess("删除成功");
            });
          } else {
            _this.getList();
            _this.msgWarning("岗位【" + name + "】已有关联用户，不允许删除");
          }
        })
        // .then(() => {
        //   if (flag == false) {
        //     this.getList();
        //     this.msgSuccess("删除成功");
        //   } else {
        //     this.getList();
        //     _this.msgSuccess("其中已有关联用户岗位，不允许删除");
        //   }
        // })
        .catch(function () {});
    },
    handleLog() {
      this.$router.push({ name: "job_log", params: {} });
    },
    //时间改变
    startTimeChange(data) {
      console.log(data);
      this.form.startTime = data / 1000;
    },
  },
};
</script>
<style lang="scss" scoped>
@import "~@/styles/variables.scss";
.center-box {
  width: 636px;
  padding-bottom: 16px;
  border-bottom: 1px solid #e9e9e9;
  margin-bottom: 32px;
  .dialog-tip {
    font-size: 16px;
    font-family: PingFang SC;
    font-weight: 500;
    line-height: 24px;
    color: rgba(0, 0, 0, 0.85);
  }
}
.org_header {
  border-bottom: 1px solid #dcdfe6;
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 32px;
  margin-left: -32px;
  margin-right: -32px;
  margin-top: -26px;
}
.subject {
  color: $titleBlue;
  font-weight: bold;
}
.header_btn_box {
  padding: 10px 0 10px;
  display: flex;
}
.el-flex {
  background-color: #fff;
  padding: 24px 32px;
}
.selectOrg {
  display: flex;
}
.input_width {
  width: 468px;
}
.select_width {
  width: 136px;
}
.chooseBox ::v-deep .el-dialog__body {
  padding: 10px 20px !important;
}
::v-deep .el-date-editor.el-input,
.el-date-editor.el-input__inner {
  width: 192px;
}
::v-deep .dialog-footer {
  text-align: center;
}
.side_left,
.side_right {
  background: #f2f6fc;
  padding: 15px;
  height: 350px;
  box-sizing: border-box;
  // overflow-y: scroll;
}
.side_right {
  overflow-y: scroll;
}
.leftData {
  height: 250px;
  overflow-y: scroll;
}
.el-breadcrumb {
  line-height: 1.8;
}
.flexDiv {
  width: 100%;
  height: 30px;
  display: -webkit-box;
  display: -ms-flexbox;
  display: flex;
  -webkit-box-align: center;
  -ms-flex-align: center;
  align-items: center;
  -webkit-box-pack: justify;
  -ms-flex-pack: justify;
  justify-content: space-between;
  font-size: 14px;
  padding-right: 8px;
}
.choosebox ::v-deep .el-checkbox {
}
.el-checkbox {
  display: block !important;
  height: 30px;
  line-height: 30px;
}
ul,
li {
  list-style: none;
  padding-inline-start: 0;
  margin-block-start: 0;
  margin-block-end: 0;
}
li {
  height: 30px;
  line-height: 30px;
}
.userlist {
  display: flex;
  justify-content: space-between;
}

// .choosebox ::v-deep .el-dialog__body {
//   padding: 10px 20px !important;
// }
// ::v-deep .el-date-editor.el-input,
// .el-date-editor.el-input__inner {
//   width: 192px;
// }
// ::v-deep .dialog-footer {
//   text-align: center;
// }

@media only screen and (max-width: 470px) {
  .message-delete {
    width: 300px;
  }
  .el-message {
    min-width: 300px;
  }
  .el-dialog {
    margin-top: 54vh !important;
  }
}
</style>
