<template>
  <div class="user_roles">
    <apass-list
      search-placeholder="请输入关键字"
      :list-total="roleTotal"
      @list-action="listAction"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
        <el-breadcrumb-item to="/authority/users">用户管理</el-breadcrumb-item>
        <el-breadcrumb-item>分配角色</el-breadcrumb-item>
      </el-breadcrumb>
      <template slot="header-left">
        <el-button type="primary" @click="setUserRoles">
          保存
        </el-button>
      </template>
      <div class="apass_table" slot="list">
        <el-table class="user_roles_table" :border="false" :data="roleData">
          <el-table-column width="60" align="right">
            <template slot-scope="scope">
              <el-checkbox
                v-model="scope.row.selected"
                @change="updateRoles"
              ></el-checkbox>
            </template>
          </el-table-column>
          <el-table-column label="角色">
            <template slot-scope="scope">
              <span v-text="scope.row.role_name"></span>
            </template>
          </el-table-column>
          <el-table-column label="说明">
            <template slot-scope="scope">
              <span v-text="scope.row.detail"></span>
            </template>
          </el-table-column>
        </el-table>
      </div>
    </apass-list>
  </div>
</template>

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

export default {
  components: { apassList },
  data: () => ({
    roleTotal: 0,
    roleData: [],
    showDialog: false,
    roles: null,
  }),
  computed: {
    roleIds() {
      return this.roleData.map((item) => item.role_id);
    },
  },
  methods: {
    listAction(filters) {
      // console.log(filters);

      if (this.roles === null) {
        this.getUserRoles(() => {
          this.getRoles(filters);
        });
      } else {
        this.getRoles(filters);
      }
    },
    getRoles(filters) {
      this.$http
        .get(`/apaas/backmgt/role/list`, {
          params: {
            search: filters.keyword,
            page: filters.page,
            limit: filters.size,
          },
        })
        .then(({ data }) => {
          data.data.forEach((item) => {
            item.selected = this.roles.indexOf(item.role_id) > -1;
          });

          this.roleTotal = data.total;
          this.roleData = data.data;
        })
        .catch((error) => {
          console.log(error);
        });
    },
    getUserRoles(callback) {
      this.$http
        .get(`/apaas/backmgt/user/roles/${this.$route.params.id}`)
        .then(({ data }) => {
          this.roles = data.data.map((item) => item.role_id);
          // console.log(this.roles);

          typeof callback === "function" && callback();
        })
        .catch((error) => {
          console.log(error);
        });
    },
    updateRoles() {
      this.roles = this.roles
        .filter((item) => {
          return this.roleIds.indexOf(item) === -1;
        })
        .concat(
          this.roleData
            .filter((item) => {
              return item.selected;
            })
            .map((item) => {
              return item.role_id;
            })
        );

      // console.log(this.roles);
    },
    setUserRoles() {
      if (this.roles.length > 0) {
        this.$http
          .post(`/apaas/backmgt/user/addRole`, {
            user_id: this.$route.params.id,
            role_id: this.roles,
          })
          .then(({ data }) => {
            this.$message({
              message: `分配角色成功.`,
              type: "success",
            });
            this.$router.push("/authority/users");
          })
          .catch((error) => {
            this.$message({
              message: "分配角色失败.",
              type: "warning",
            });
          });
      } else {
        this.$message({
          message: "用户角色不能为空！",
          type: "warning",
        });
      }
    },
  },
};
</script>

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