<template>
  <div class="user-manager">
    <InPageLeftNav />
    <div
      class="table-area"
      :class="{
        'table-area-w': sidebar.opened,
        'table-area-ws': !sidebar.opened,
      }"
    >
      <SearchBarTop @emitFun="emitFun" />
      <!-- 列表 -->
      <base-table
        :page="queryParams.pageNo"
        :limit="queryParams.pageSize"
        :table-props="tableProps"
        :table-data="list"
        :max-height="tableH"
      >
        <method-btn
          v-if="tableBtn.length"
          slot="handleBtn"
          :width="120"
          label="操作"
          :method-list="tableBtn"
          @clickBtn="handleClick"
        />
      </base-table>
      <pagination
        :page.sync="queryParams.pageNo"
        :limit.sync="queryParams.pageSize"
        :total="total"
        @pagination="getList"
      />
    </div>
  </div>
</template>

<script>
import { mapGetters } from "vuex";
import InPageLeftNav from "./components/InPageLeftNav";
import SearchBarTop from "./components/SearchBarTop";
import tableHeightMixin from "@/mixins/tableHeightMixin";
import { listUser } from "@/api/system/user";
const tableProps = [
  {
    prop: "username",
    label: "用户名",
    minWidth: 120,
    showOverflowtooltip: true,
  },
  {
    prop: "email",
    label: "邮箱",
    minWidth: 150,
    showOverflowtooltip: true,
  },
  {
    prop: "mobile",
    label: "手机号",
    minWidth: 120,
  },
  {
    prop: "deptName",
    label: "组织",
    minWidth: 120,
  },
  {
    prop: "role",
    label: "角色名称",
  },
  {
    prop: "workno",
    label: "工号",
  },
  {
    prop: "status",
    label: "状态",
  },
  {
    prop: "remark",
    label: "备注",
    showOverflowtooltip: true,
  },
];
export default {
  name: "SystemPost",
  components: { InPageLeftNav, SearchBarTop },
  mixins: [tableHeightMixin],
  computed: {
    ...mapGetters(["sidebar"]),
  },
  data() {
    return {
      // 查询参数
      queryParams: {
        pageNo: 1,
        pageSize: 20,
        name: null,
        status: null,
        planFinishTime: [],
      },
      total: 0,
      tableProps,
      list: [{ username: "111" }],
      tableBtn: [
        {
          type: "authorization",
          btnName: "授权",
        },
        {
          type: "edit",
          btnName: "编辑",
        },
        {
          type: "delete",
          btnName: "删除",
        },
      ],
    };
  },
  created() {
    this.getList();
  },
  methods: {
    /** 查询用户列表 */
    getList() {
      listUser(this.queryParams).then((response) => {
        this.list = response.data.list;
        this.total = response.data.total;
      });
    },
    emitFun(val) {
      if (val.btn === "onSearch") {
        this.queryParams.pageNo = 1;
        this.getList();
      } else {
      }
    },
    handleClick() {},
  },
};
</script>
<style lang="scss" scoped>
.user-manager {
  display: flex;
  .table-area {
    display: inline-block;
    height: calc(100vh - 120px - 8px);
    background-color: #fff;
    margin-left: 8px;
    border-radius: 8px;
    padding: 8px;
  }
  .table-area-w {
    width: calc(100vw - 542px);
  }
  .table-area-ws {
    width: calc(100vw - 348px);
  }
}
</style>