<route lang="yaml">
  # 用户管理
  name: userManagement
</route>

<template>
  <div class="container_wrap full flex">
    <!-- 侧边tree组件 start -->
    <div class="aside_wrap">
      <div class="aside_title">{{ '企业组织列表' }}</div>
      <Tree :treeInfo="treeInfo" @nodeClick="nodeClick" />
    </div>
    <!-- 侧边tree组件 end -->
    <!-- 列表区域 start -->
    <div class="main_wrap">
      <!-- 头部搜索和工具栏 -->
      <div class="table_tool_wrap">
        <div class="aside_title">
          {{ title }}
        </div>
        <TableTools :searchItems="searchItemList" :searchId="'user-manage-search'" @search="toSearch" :init="false" />
        <div class="tools_btns">
          <el-button type="primary" @click="handleCreate">新增用户</el-button>
        </div>
      </div>
      <!-- 表格展示 -->
      <div class="table_panel_wrap">
        <Table :tableInfo="tableInfo" @tablePageChange="tablePageChange" />
      </div>
    </div>
    <!-- 列表区域 end -->
  </div>
</template>

<script lang="ts" setup name="userManagement">

import { ref, computed } from "vue";
import TableTools from "@/components/Tools/table_tools.vue";
import { TableColumnWidth } from "@/utils/enum";
import { commonPageConfig } from '@/components/PageNav/index';
import useGetData from '@/hooks/useGetData'
import {
  getStaff,
  removeStaff,
  resetPwd2,
} from '@/api/modules/dataBasic';
import Moment from 'moment';
import useUserStore from "@/store/modules/user";
import useDataBasicStore from "@/store/modules/dataBasic";

const userStore = useUserStore();
const userData = JSON.parse(userStore.userData)
const dataBasicStore = useDataBasicStore();

const { getOrganisationTree } = useGetData()
const route = useRoute();
const router = useRouter();

const { proxy } = getCurrentInstance() as any;

const tenantGuid = computed(() => userData.tenantGuid)
const tenantName = computed(() => userData.tenantName)

// 搜索配置
const searchItemList = ref([
  {
    type: "input",
    label: "",
    field: "staffName",
    default: "",
    placeholder: "姓名",
    maxlength: 50,
    clearable: true,
  },
  {
    type: "input",
    label: "",
    field: "mobileNo",
    default: "",
    placeholder: "手机号",
    maxlength: 50,
    clearable: true,
  },
  {
    type: "select",
    label: "",
    field: "bizState",
    default: "",
    options: [{
      value: 'Y',
      label: '启用'
    }, {
      value: 'S',
      label: '停用'
    }],
    placeholder: "启用状态",
    clearable: true,
  }
]);

// 分页配置
const page = ref({
  ...commonPageConfig,
  staffName: '',
  mobileNo: '',
  bizState: ''
});

const currentRow: any = ref({});

// 表格配置
const tableInfo = ref({
  id: 'user-table',
  rowKey: 'guid',
  fields: [
    { label: "序号", type: "index", width: TableColumnWidth.INDEX, align: "center" },
    { label: "姓名", field: "staffName", width: 120 },
    { label: "手机号", field: "mobileNo", width: 140 },
    { label: "员工编号", field: "staffNo", width: 140 },
    {
      label: "所属部门",
      field: "organisationNameList",
      width: 180,
      getName: (scope) => {
        const cellValue = scope.row.organisationNameList;
        return Array.isArray(cellValue) && cellValue.length > 0 ? cellValue.join('、') : '-';
      }
    },
    {
      label: "权限模板",
      field: "funcPermissionTemplateJson",
      width: 180,
      getName: (scope) => {
        const cellValue = scope.row.funcPermissionTemplateJson;
        return Array.isArray(cellValue) && cellValue.length > 0 ? cellValue.map(item => item.name).join('、') : '-';
      }
    },
    {
      label: "状态",
      field: "bizState",
      width: TableColumnWidth.STATE,
      align: 'center',
      type: "tag",
      getName: (scope) => {
        return scope.row.bizState === 'Y' ? '启用' : '停用';
      }
    },
    { label: "创建人", field: "createUserName", width: 140 },
    {
      label: "创建时间",
      field: "createTime",
      width: TableColumnWidth.DATETIME,
      getName: (scope) => {
        return scope.row.createTime ? Moment(scope.row.createTime).format('YYYY-MM-DD HH:mm:ss') : '--';
      }
    },
  ],
  data: [],
  page: {
    type: "normal",
    rows: 0,
    ...page.value,
  },
  loading: false,
  actionInfo: {
    label: "操作",
    type: "btn",
    width: 210,
    fixed: 'right',
    btns: (scope) => {
      return [
        { label: "详情", value: "detail", click: toDetail },
        { label: "编辑", value: "edit", click: toEdit },
        { label: "重置密码", value: "resetPwd", click: resetPassword },
        { label: "删除", value: "delete", click: toDelete }
      ];
    }
  }
})

const title = computed(() => {
  return currentRow.value.name ? `${currentRow.value.name}(${tableInfo.value.data.length}人)` : ''
})

const organisationGuidList = ref<any[]>([])

// 搜索方法
const toSearch = (val: any = {}, clear: boolean = false) => {
  if (clear) {
    searchItemList.value.map(item => (item.default = ""));
    page.value.staffName = '';
    page.value.mobileNo = '';
    page.value.bizState = '';
  } else {
    page.value.staffName = val.staffName || '';
    page.value.mobileNo = val.mobileNo || '';
    page.value.bizState = val.bizState || '';
  }
  getTableData();
};

// 获取表格数据
const getTableData = () => {
  tableInfo.value.loading = true;
  const params = {
    pageIndex: page.value.curr,
    pageSize: page.value.limit,
    staffName: page.value.staffName,
    mobileNo: page.value.mobileNo,
    bizState: page.value.bizState,
    organisationGuidList: organisationGuidList.value,
    tenantGuid: unref(tenantGuid),
  };
  getStaff(params).then((res: any) => {
    if (res?.code == proxy.$passCode) {
      const data = res.data || {};
      tableInfo.value.data = data.records ?? [];
      tableInfo.value.page.limit = data.pageSize
      tableInfo.value.page.curr = data.pageIndex
      tableInfo.value.page.rows = data.totalRows
      // 总数需要通过其他接口获取或者在返回数据中包含
    } else {
      proxy.$ElMessage({
        type: 'error',
        message: res?.msg || '获取数据失败',
      })
    }
    tableInfo.value.loading = false;
  }).catch((err) => {
    tableInfo.value.loading = false;
  });
}

// 分页变化
const tablePageChange = (info) => {
  page.value.curr = Number(info.curr);
  page.value.limit = Number(info.limit);
  tableInfo.value.page.curr = page.value.curr;
  tableInfo.value.page.limit = page.value.limit;
  getTableData();
};

// 操作方法
const toDetail = (scope) => {
  router.push({
    name: 'addUser',
    query: {
      guid: scope.row.guid,
      isDetail: 'isDetail',
      userName: scope.row.staffName
    }
  })
}

const toEdit = (scope) => {
  router.push({
    name: 'addUser',
    query: {
      guid: scope.row.guid,
      isEdit: 'isEdit',
      userName: scope.row.staffName
    }
  })
}

const resetPassword = (scope) => {
  proxy.$openMessageBox("确定是重置密码？", "warning", () => {
    resetPwd2([scope.row.userGuid]).then((res: any) => {
      if (res?.code === proxy.$passCode) {
        proxy.$ElMessage({
          type: 'success',
          message: '重置成功，密码为：YzU&+66w'
        })
      } else {
        proxy.$ElMessage({
          type: 'error',
          message: res?.msg || '重置密码失败',
        })
      }
    })
  })
}

const toDelete = (scope) => {
  proxy.$openMessageBox("数据删除后不可恢复，确定是否删除？", "warning", () => {
    removeStaff([scope.row.guid]).then((res: any) => {
      if (res?.code === proxy.$passCode) {
        proxy.$ElMessage({
          type: 'success',
          message: '删除成功'
        })
        getTableData();
      } else {
        proxy.$ElMessage({
          type: 'error',
          message: res?.msg || '删除失败',
        })
      }
    })
  })
}

// 新增用户
const handleCreate = () => {
  router.push({
    name: 'addUser',
    query: {}
  })
}

const expandedKey: any = ref([]);
const currentNodeKey = ref('');

// 获取公司部门树
const getTenantList = async () => {
  treeInfo.value.loading = true;
  let orgTree = await getOrganisationTree({
    useCache: false,
    tenantGuid: tenantGuid.value
  })
  treeInfo.value.loading = false;
  let tree = [{
    guid: tenantGuid.value,
    name: tenantName.value,
    id: tenantGuid.value,
    label: tenantName.value,
    nodeType: 'tenant',
    children: orgTree
  }]
  treeInfo.value.data = tree
  currentRow.value = tree[0] || {}
  expandedKey.value = expandedKey.value.length == 0 ? [tree[0].guid] : expandedKey.value
  currentNodeKey.value = currentNodeKey.value == '' ? tree[0].guid : currentNodeKey.value
  treeInfo.value.currentNodeKey = tree[0]?.guid;
  nextTick(() => {
    treeInfo.value.currentNodeKey = currentNodeKey.value
    treeInfo.value.expandedKey = expandedKey.value
  })
  toSearch({})
}

// 树节点点击
const nodeClick = (node) => {
  currentRow.value = node
  let children = node.children || []
  let guids = children.map(item => item.guid)
  guids.push(node.guid)
  organisationGuidList.value = node.$treeNodeId == 1 ? [] : guids
  page.value.curr = 1;
  toSearch({})
}

const treeInfo = ref<any>({
  filter: true,
  defaultExpandAll: true,
  queryValue: "",
  currentNodeKey: '',
  expandOnNodeClick: false,
  queryPlaceholder: "输入关键字搜索",
  props: {
    label: "name",
    value: "guid",
  },
  nodeKey: 'guid',
  expandedKey: [],
  data: [],
});

onActivated(() => {
  if (dataBasicStore.isUpdate) {//如果是首次加载，则不需要调用
    page.value.curr = 1;
    toSearch({})
    dataBasicStore.setIsUpdate(false);
  }
})

onMounted(() => {
  getTenantList()
});
</script>

<style lang="scss" scoped>
.container_wrap {
  .aside_wrap {
    width: 200px;
  }

  .main_wrap {
    width: calc(100% - 200px);

    .table_tool_wrap {
      width: 100%;
      //  height: 84px !important;
      //  padding: 0 8px;

      :deep(.tools_search) {
        padding: 0px;
      }

      .tools_btns {
        padding: 0px 0 8px;
      }
    }

    .table_panel_wrap {
      width: 100%;
      height: calc(100% - 112px);
      //   padding: 0px 8px 8px;
    }
  }

  .tree_panel {
    height: calc(100% - 36px);
    padding-top: 0;

    :deep(.el-tree) {
      margin: 0;
      overflow: hidden auto;
    }
  }
}

.aside_title {
  font-size: 14px;
  color: var(--el-color-regular);
  height: 36px;
  line-height: 36px;
  font-weight: 600;
}
</style>