<template>
  <div class="from-clues">
    <div class="from-clues-header">
      <el-form ref="ruleForm" :model="form" label-width="100px">
        <el-form-item v-if="BASE_API.THEME == 'jg'">
          <Breadcrumb />
        </el-form-item>
        <el-row class="mb-5">
          <el-col :span="4">
            <el-form-item label="用户名" prop="loginName">
              <el-input v-model.trim="form.loginName" class="width100" clearable placeholder="用户名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="姓名" prop="name">
              <el-input v-model.trim="form.name" class="width100" clearable placeholder="姓名"></el-input>
            </el-form-item>
          </el-col>
          <el-col :span="4">
            <el-form-item label="工号" prop="code">
              <el-input v-model.trim="form.code" class="width100" clearable placeholder="工号"></el-input>
            </el-form-item>
          </el-col>
          <!-- 操作按钮 -->
          <el-col :span="12" class="btnColRight">
            <btn nativeType="cx" @click="getTableList">查询</btn>
            <btn nativeType="cx" @click="handleAdd">添加人员</btn>
          </el-col>
        </el-row>
      </el-form>
    </div>
    <div class="from-clues-content">
      <lb-table :pagination="false" @size-change="handleSizeChange" @p-current-change="handleCurrentChange"
        :column="tableData.columns" :calcHeight="BASE_API.calcHeight" :data="tableData.data" :expand-row-keys="keyList"
        row-key="dictid">
      </lb-table>
    </div>
    <EditDialog ref="dialogForm" v-model="isDialog" @ok="reloadTableData" />
  </div>
</template>
<script>
import {
  getUuid,
  judgeSort,
  realMove,
  findParents,
  removeTreeListItem,
} from "@/utils/operation";
import {
  resetPassword,
  getUserList, getUserLists
} from "@/api/personnelManage";
import { api, deleteAction, getAction } from '@/api/manageApi'
import data from "./data";
import { deleteDomStr } from '@/utils/proDomStr'
import tableMixin from "@/mixins/tableMixin.js";
import EditDialog from "./edit-dialog.vue";
import { updateOrder } from "@/api/orders"
export default {
  name: "menus",
  mixins: [tableMixin],
  components: {
    EditDialog,
  },
  data () {
    return {
      isDialog: false,
      taskData: null,
      keyList: [],
      form: {
        loginName: "",
        name: "",
        code: "",
      },
      queryParam: {},
      selectType: "0",
      queryName: "",
      organizationId: "", // 组织机构ID
      departmentId: "", // 部门ID
      departmentList: [], // 部门列表
      levelList: [], // 职务级别
      sexList: [],
      typeOptions: [
        {
          value: "0",
          label: "姓名",
        },
        {
          value: "1",
          label: "工号",
        },
        {
          value: "2",
          label: "部门",
        },
        {
          value: "3",
          label: "机构",
        },
      ],

      selectionList: [],
      tableData: {
        columns: [
          {
            label: "序号",
            type: "index",
            width: "50",
            index: this.indexMethod,
          },
        ]
          .concat(data.columns())
          .concat([
            {
              label: "职位",
              render: (h, scope) => {
                return (
                  <div v-show={scope.row.jobLevel !== null}>{scope.row.jobLevel ? "干事" : "经理"}</div>
                )

              }
            },
            {
              label: "负责人",
              render: (h, scope) => {
                return (
                  <i v-show={scope.row.isDuty !== null} class="el-icon-check" />
                )
              }
            },
            {
              label: "排序",
              width: 300,
              render: (h, scope) => {
                return (
                  <div>
                    <el-button
                      type="text"
                      class='movebtnColor'
                      disabled={scope.row.isTop}
                      onClick={() => {
                        this.updateOrder(scope.row, 'TOP');
                      }}
                    >
                      置顶
                    </el-button>
                    <el-button
                      type="text"
                      class='movebtnColor'
                      disabled={scope.row.isTop}
                      onClick={() => {
                        this.updateOrder(scope.row, 'UP');
                      }}
                    >
                      上移
                    </el-button>
                    <el-button
                      type="text"
                      class='movebtnColor'
                      disabled={scope.row.isBottom}
                      onClick={() => {
                        this.updateOrder(scope.row, 'DOWN');
                      }}
                    >
                      下移
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class='movebtnColor'
                      disabled={scope.row.isBottom}
                      onClick={() => {
                        this.updateOrder(scope.row, 'BOTTOM');
                      }}
                    >
                      置底
                    </el-button>
                  </div>
                );
              },
            },
            {
              label: "操作",
              width: 380,
              render: (h, scope) => {
                return (
                  <div>
                    <el-button
                      type="text"
                      size="mini"
                      class='resetbtnColor'
                      onClick={() => {
                        this.resetPassword(scope.row.id);
                      }}
                    >
                      重置
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class='successColor'
                      onClick={() => {
                        this.handleEdit(scope.row);
                      }}
                    >
                      修改
                    </el-button>
                    <el-button
                      type="text"
                      size="mini"
                      class='delColor'
                      onClick={() => {
                        this.handleDelete(scope.row.id, scope.row.name);
                      }}
                    >
                      删除
                    </el-button>
                  </div>
                );
              },
            },
          ]),
        data: [],
      },
    };
  },
  created () {
    this.getTableList();
  },
  computed: {
    departmentid () {
      return this.$store.state.user.userInfo;
    },
  },
  methods: {
    handleAdd () {
      this.isDialog = true
      this.$refs.dialogForm.adds();
      this.$refs.dialogForm.title = "添加";
    },
    // 查询
    getTableList () {
      this.queryParam = {
        name: this.form.name,
        code: this.form.code,
        loginName: this.form.loginName,
      };
      getUserLists(this.queryParam).then((res) => {
        if (res.status === 1) {
          this.loading = false;
          this.tableData.data = res.content;
          this.tableData.data = judgeSort(this.tableData.data);
          let arr = []
          this.tableData.data.forEach((item) => {
            arr.push(item.departmentId)
          })
          this.getDepts(arr)
        } else {
          this.$message.error({ message: res.message, showClose: true })
        }
      })
    },
    // 获取组织机构
    getDepts (deptIdArr) {
      let params = {
        queryOptions: {
          conditionGroup: {
            conditions: [
              {
                property: "id",
                value: deptIdArr,
                operator: "IN",
              },
            ],
            queryRelation: "AND",
          },
          orderBys: [],
        },
      };
      getAction(api.departments, params).then(
        (res) => {
          let deptsList = res.content;
          deptsList.forEach((ele) => {
            this.tableData.data.forEach((item) => {
              if (ele.id == item.departmentId) {
                item.departmentName = ele.name
              }
            })
          })

        },
        (err) => {
          console.log("err :", err);
        }
      );
    },
    // getTableList () {
    //   this.loading = true;

    //   getUserList().then((res) => {
    //     if (res.status === 1) {
    //       console.log("res人员列表", res);
    //       this.loading = false;
    //       this.tableData.data = res.content;
    //       this.tableData.data = judgeSort(this.tableData.data);
    //     } else {
    //       this.$message.error({ message: res.message, showClose: true });
    //     }
    //   });
    // },

    // 重置用户密码
    resetPassword (data) {
      const ids = []
      if (data instanceof Array) {
        data.forEach((item) => {
          ids.push(item.id)
        })
      } else {
        ids.push(data)
      }
      if (ids.length === 0) {
        this.$message({
          message: '请选择需要重置密码的用户!',
          showClose: true
        })
        return
      }
      this.$confirm(
        `<div  class="customer-message-wrapper">
              <h5 class="title">确定要重置密码吗</h5>
               <p class="result">执行后，数据将
                 <span >无法恢复</span>
                </p>
        </div>`,
        '执行确认',
        {
          dangerouslyUseHTMLString: true,
          customClass: 'customer-delete',
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }
      )
        .then(() => {
          resetPassword(ids).then((res) => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
              this.getTableList()
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
          })
        })
        .catch(() => { })
    },
    //排序
    updateOrder (record, operate) {
      const findIndex = this.tableData.data.findIndex(item => item.id === record.id)
      let swapId = ''
      if (operate === 'UP') {
        swapId = this.tableData.data[findIndex - 1].id
      } else if (operate === 'DOWN') {
        swapId = this.tableData.data[findIndex + 1].id
      }
      updateOrder('/rest/users', record, operate, swapId).then(res => {
        if (res.status === 1) {
          this.$message.success({ message: res.message, showClose: true })
          this.getTableList();
        } else {
          this.$message.error({ message: res.message, showClose: true })
        }
      })
    },

    // 修改人员信息
    handleEdit (row) {
      console.log("rowwwww", row);
      this.isDialog = true
      this.$refs.dialogForm.edit(row);
      this.$refs.dialogForm.title = "修改";
    },
    // 删除
    handleDelete (id, content) {
      this.$confirm(deleteDomStr(content), '执行确认', {
        dangerouslyUseHTMLString: true,
        customClass: 'customer-delete',
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      })
        .then(() => {
          deleteAction(`${api.users}/${id}`).then((res) => {
            if (res.status === 1) {
              this.$message.success({ message: res.message, showClose: true })
            } else {
              this.$message.error({ message: res.message, showClose: true })
            }
            this.getTableList()
          })
        })
        .catch(() => { })
    },
    // 新增回显
    reloadTableData () {
      this.getTableList()
    },
  },
};
</script>
<style scoped lang="scss">
@import "~@/styles/mixin.scss";
</style>