<template>
  <div class="users_list">
    <apass-list
      @list-action="listAction"
      search-placeholder="请输入关键字"
      :list-total="listTotal"
    >
      <el-breadcrumb separator="/" slot="breadcrumb">
        <el-breadcrumb-item to="/authority">权限管理</el-breadcrumb-item>
        <el-breadcrumb-item to="/authority/users">用户管理</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>
      <el-table slot="list" :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.account"></span>
          </template>
        </el-table-column>
        <el-table-column label="业务系统名称">
          <template slot-scope="scope">
            <span v-text="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column label="用户类型" align="center" width="160">
          <template slot-scope="scope">
            <span v-text="scope.row.role"></span>
          </template>
        </el-table-column>
        <el-table-column label="所属组织">
          <template slot-scope="scope">
            <span v-text="scope.row.organization"></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_time"></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.id}`)"
              >
                详情
              </a>
              <span class="interval_line">|</span>
              <a class="btn" @click="setRole(scope.row)">
                分配角色
              </a>
              <span class="interval_line">|</span>
              <a
                class="btn"
                :class="{ warn: scope.row.state === 1 }"
                @click="setState(scope.row)"
              >
                {{ scope.row.state === 0 ? "启用" : "禁用" }}
              </a>
            </div>
          </template>
        </el-table-column>
      </el-table>
    </apass-list>

    <apass-dialog ref="dialog" width="590px" title="分配角色">
      <el-table
        slot="content"
        :border="false"
        :data="roleData"
        @selection-change="dialogSelectionChange"
      >
        <el-table-column type="selection" width="60" align="right">
        </el-table-column>
        <el-table-column label="角色">
          <template slot-scope="scope">
            <span v-text="scope.row.name"></span>
          </template>
        </el-table-column>
        <el-table-column label="说明">
          <template slot-scope="scope">
            <span v-text="scope.row.description"></span>
          </template>
        </el-table-column>
      </el-table>
      <template slot="action">
        <el-button type="defalut" size="mini" @click="dialogHide">
          取消
        </el-button>
        <el-button type="primary" size="mini" @click="dialogSubmit">
          确定
        </el-button>
      </template>
    </apass-dialog>
  </div>
</template>

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

export default {
  components: { apassList, apassDialog },
  data: () => ({
    listTotal: 300,
    listData: [
      {
        id: "012344",
        account: "012344",
        name: "贵阳机关事务大数据平台",
        role: "普通用户",
        organization: "贵阳市水利局",
        state: 0,
        update_time: "2020-04-27 13:24:19",
      },
      {
        id: "012345",
        account: "012345",
        name: "贵州省水利厅",
        role: "普通用户",
        organization: "贵阳市水利局",
        state: 1,
        update_time: "2020-04-27 13:24:19",
      },
      {
        id: "012346",
        account: "012346",
        name: "贵州省公安厅",
        role: "普通用户",
        organization: "贵阳市水利局",
        state: 1,
        update_time: "2020-04-27 13:24:19",
      },
      {
        id: "012347",
        account: "012347",
        name: "贵阳机关事务大数据平台",
        role: "普通用户",
        organization: "贵阳市水利局",
        state: 1,
        update_time: "2020-04-27 13:24:19",
      },
      {
        id: "012348",
        account: "012348",
        name: "长兴县应急指挥平台",
        role: "普通用户",
        organization: "贵阳市水利局",
        state: 1,
        update_time: "2020-04-27 13:24:19",
      },
    ],
    roleData: [
      {
        name: "超级管理员",
        description: "拥有所有权限",
      },
      {
        name: "组织管理员",
        description: "拥有对应组织的权限",
      },
      {
        name: "普通用户",
        description: "普通权限用户",
      },
      {
        name: "普通用户-开发者",
        description: "基于普通用户多一些开发的选项",
      },
    ],
    showDialog: false,
  }),
  methods: {
    listAction(value) {
      console.log(value);
    },
    setRole(item) {
      console.log("setRole " + item.name);
      this.dialogShow();
    },
    setState(item) {
      console.log("setState " + item.name);
    },
    dialogSelectionChange(values) {
      console.log(values);
    },
    dialogShow() {
      this.$refs.dialog.show();
    },
    dialogHide() {
      this.$refs.dialog.hide();
    },
    dialogSubmit() {
      console.log("dialog submit");
      this.dialogHide();
    },
  },
};
</script>

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