<template>
  <div class="timedTask 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="3" 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="200" :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>