<template>
  <div class="users_list">
    <apass-list
      search-placeholder="请输入关键字"
      :list-total="listTotal"
      @list-action="initDatas"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
        <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      </el-breadcrumb>
      <template slot="header-left">
        <el-button type="primary" @click="$router.push('/authority/users/add')">
          新建用户
        </el-button>
        <el-button @click="$router.push('/authority/users/permission')">
          权限审批
        </el-button>
      </template>
      <div class="apass_table" slot="list">
        <el-table :border="false" :data="listData">
          <el-table-column label="" width="40"></el-table-column>
          <el-table-column label="账号" width="160">
            <template slot-scope="scope">
              <span v-text="scope.row.user_id"></span>
            </template>
          </el-table-column>
          <el-table-column label="业务系统名称">
            <template slot-scope="scope">
              <span v-text="scope.row.system_name"></span>
            </template>
          </el-table-column>
          <el-table-column label="用户类型" align="center" width="160">
            <template slot-scope="scope">
              <span
                v-text="
                  ['-', '超级管理员', '组织管理员', '普通用户', '开发者'][
                    scope.row.is_admin || 0
                  ]
                "
              ></span>
            </template>
          </el-table-column>
          <el-table-column label="所属组织">
            <template slot-scope="scope">
              <span v-text="scope.row.department"></span>
            </template>
          </el-table-column>
          <el-table-column label="账号状态" align="center" width="240">
            <template slot-scope="scope">
              <span v-text="scope.row.state === 0 ? '禁用' : '启用'"></span>
            </template>
          </el-table-column>
          <el-table-column label="上次操作修改时间" align="center" width="200">
            <template slot-scope="scope">
              <span v-text="scope.row.update_date"></span>
            </template>
          </el-table-column>
          <el-table-column label="操作" align="center" width="300">
            <template slot-scope="scope">
              <div class="row_action">
                <a
                  class="btn"
                  @click="
                    $router.push(`/authority/users/detail/${scope.row.user_id}`)
                  "
                >
                  详情
                </a>
                <span class="interval_line">|</span>
                <a
                  class="btn"
                  @click="
                    $router.push(`/authority/users/roles/${scope.row.user_id}`)
                  "
                >
                  分配角色
                </a>
                <span class="interval_line">|</span>
                <a
                  class="btn"
                  :class="{ warn: scope.row.state === 1 }"
                  @click="changeState(scope.row)"
                >
                  {{ scope.row.state === 0 ? "启用" : "禁用" }}
                </a>
              </div>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </apass-list>
  </div>
</template>

<script>
import apassList from "@/components/apass-list";
import apassDialog from "@/components/apass-dialog";

export default {
  components: { apassList, apassDialog },
  data: () => ({
    listTotal: 0,
    listData: [],
    showDialog: false,
    tempFilter: null,
  }),
  methods: {
    initDatas(filters) {
      this.tempFilter = filters;

      this.$http
        .get("/apaas/backmgt/user/list", {
          params: {
            search: filters.keyword,
            page: filters.page,
            limit: filters.size,
          },
        })
        .then(({ data }) => {
          // console.log(data.data);
          this.listTotal = data.total;
          this.listData = data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    changeState(item) {
      console.log(item);

      this.$http
        .put(
          "/apaas/backmgt/user/status",
          {},
          {
            params: {
              user_id: item.user_id,
              status: item.state == 0 ? 1 : 0,
            },
          }
        )
        .then(({ data }) => {
          this.$message({
            message: `${item.state == 0 ? "已启用" : "已禁用"}${item.user_name}.`,
            type: "success",
          });
          this.initDatas(this.tempFilter);
        })
        .catch((error) => {
          this.$message({
            message: `${item.state == 0 ? "启用" : "禁用"}${item.user_name}失败.`,
            type: "warning",
          });
        });
    },
  },
};
</script>

<style scoped>
.users_list {
  height: 100%;
}
</style>
