<!--管理员管理-->
<template>

  <div class="index-home">
    <div v-loading.fullscreen.lock="loadingFull" />
    <div class="search">
      <el-form
        ref="searchParams"
        :model="searchParams"
        label-width="80px"
      >
        <el-input
          v-model="searchParams.name"
          placeholder="姓名"
        ></el-input>
        <el-input
          v-model="searchParams.account"
          placeholder="账号"
        ></el-input>

        <el-button
          type="primary"
          @click="searchList" icon="el-icon-search"
        >搜索</el-button>
      </el-form>
    </div>
    <el-table
      :data="userTable"
      border
      style="width: 100%"
    >
      <el-table-column
        label="序号"
        type='index'
        width="55"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="account"
        label="账号"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="nickname"
        label="姓名"
        width="180"
        align="center"
      >
      </el-table-column>
      <el-table-column
        prop="organizations[0].name"
        label="所属支部"
        width="300"
      >
      </el-table-column>

      <el-table-column
        prop="is_admin_text"
        label="角色"
        align="center"
        width="150"
      >
      </el-table-column>
      <el-table-column
        prop=""
        label="操作"
        align="center"
      >
        <template slot-scope="{ row }">
          <el-button
            type="primary"
            plain
            size="mini"
            @click="getDetail(row.id)"
          >详情</el-button>
          <el-button
            type="success"
            plain
            size="mini"
            color="#e97993"
            @click="editAdmin(row)"
            v-if="row.is_admin==1"
          >编辑</el-button>
          <el-button
            type="success"
            plain
            v-if="row.is_admin==0"
            size="mini"
            @click="userPwd(row)"
          >修改密码</el-button>
          <el-button
            type="warning"
            plain
            size="mini"
            v-if="row.is_admin==0"
            @click="userRole(row)"
          >修改角色</el-button>
          <el-button
            type="danger"
            plain
            size="mini"
            v-if="row.is_admin==1"
            @click="deleteUser(row.id)"
          >删除管理员</el-button>
          <el-button
            type="danger"
            plain
            size="mini"
            v-else
            @click="stopUser(row.id)"
          >禁用</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!--分页-->
    <div class="paging">
      <el-pagination
        @size-change="handleSizeChange"
        @current-change="handleCurrentChange"
        :current-page="searchParams.page"
        background
        :page-sizes="[15,20,30,50,100,200]"
        layout="total, sizes, prev, pager, next, jumper"
        :total='totalPage'
      >
      </el-pagination>
    </div>
  
   
    <!--修改用户密码和身份-->
    <el-dialog
      :title=" type==0  ? '修改密码' : '修改角色'"
      :visible.sync="passwordVisible"
      width="50%"
      center
    >
      <el-form
        :model="editPassword"
        :rules="rules"
        ref="editPassword"
        label-width="100px"
        class="demo-ruleForm"
      >
        <el-form-item
          label="姓名"
          prop="name"
        >
          <el-input v-model="editPassword.name"></el-input>
        </el-form-item>
        <el-form-item
          label="账号"
          prop="account"
        >
          <el-input v-model="editPassword.account"></el-input>

        </el-form-item>
        <el-form-item
          v-if="type==0"
          label="密码"
          prop="password"
        >
          <el-input v-model="editPassword.password"></el-input>

        </el-form-item>
        <el-form-item
          v-else
          label="角色"
          prop="role"
        >
          <el-radio-group
            v-for="(item,index) in roles"
            :key="index"
            v-model="editPassword.role"
          >
            <el-radio
              :label="index"
              style="margin-right:20px;"
            >{{item}}</el-radio>
          </el-radio-group>
        </el-form-item>
      </el-form>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button @click="passwordVisible = false">取 消</el-button>
        <el-button
          type="primary"
          v-if="type==0"
          @click="surePwd('creatForm')"
        >确 定</el-button>
        <el-button
          type="primary"
          v-else
          @click="sureRole('creatForm')"
        >确 定</el-button>
      </span>
    </el-dialog>
    <el-dialog
      title="详情"
      :visible.sync="detailVisible"
      width="30%"
      center
    >
      <div class='detail1'>
        <div>账号：{{detailList.account}}</div>
        <div>昵称：{{detailList.nickname}}</div>
        <div>身份：{{detailList.is_admin_text}}</div>
        <div v-if="detailList.staff">
          <div>姓名：{{detailList.staff.true_name}}</div>
          <div>学号：{{detailList.staff.no}}</div>
          <div>班级：{{detailList.staff.class}}</div>
        </div>
      </div>
      <span
        slot="footer"
        class="dialog-footer"
      >
        <el-button
          type="primary"
          @click="detailVisible = false"
        >关闭</el-button>

      </span>
    </el-dialog>
  </div>
</template>
<script>
import {
  usersLists,
  addUsers,
  deleteUsers,
  putUsers,
  changeUserPwd,
  changeUserRole,
  usersDetail
} from "@/api/administrator/index";
import { fatherLists } from "@/api/organizationList/index";

export default {
  data() {
    return {
      loadingFull: false,
      dialogVisible: false,
      editDialogVisible: false,
      passwordVisible: false, //修改
      detailVisible: false,
      detailList: "",
      userTable: [],
      type: "",
      creatForm: {
        name: "",
        account: "",
        status: 1,
        password: "",
        organization_ids: [],
        role: "2"
      },
      editPassword: {
        name: "",
        account: "",
        password: ""
      },
      organizationIds: "",
      roles: [],
      status: [
        {
          value: 0,
          name: "暂停"
        },
        {
          value: 1,
          name: "正常"
        }
      ],
      searchParams: {
        name: "",
        account: "",
        is_admin: 0,
        limit: 15, //每页显示条数
        page: 1 //当前页码
      }, //搜索框数据
      totalPage: 0, //总页码
      isAdmin: [
        {
          value: "",
          label: "全部"
        },
        {
          value: 0,
          label: "学生"
        },
        {
          value: 1,
          label: "管理员"
        },
        {
          value: 2,
          label: "超级管理员"
        }
      ],
      treeList: [
        {
          pid: 0,
          id: 0,
          name: "未选择"
        }
      ], //支部列表
      rules: {
        name: [{ required: true, message: "请输入姓名", trigger: "blur" }],
        account: [{ required: true, message: "请输入账号", trigger: "blur" }],
        password: [{ required: true, message: "请输入密码", trigger: "blur" }],
        organization_ids: [
          { required: true, message: "请选择组织", trigger: "change" }
        ],
        role: [{ required: true, message: "请选择角色", trigger: "change" }]
      }
    };
  },
  created() {
    this.usersLists(this.searchParams);
    let allStatus = JSON.parse(sessionStorage.getItem("status"));
    this.roles = { 2: "管理员", 3: "超级管理员" };
    //获取父级组织列表
    fatherLists().then(res => {
      console.log(res, "llllll");
      this.treeList = res.data;

      console.log("opopop");
    });
  },
  methods: {
    searchList() {
      this.usersLists(this.searchParams);
    },
    //管理员列表
    async usersLists(params) {
      this.loadingFull = true;
      await usersLists(params)
        .then(res => {
          console.log(res, "人员列表");
          this.userTable = res.data.data;
          this.loadingFull = false;
          this.totalPage = res.data.meta.pagination.total;
        })
        .catch(err => {
          this.loadingFull = false;
        });
    },
    //查看详情
    getDetail(id) {
      this.loadingFull = true;
      usersDetail(id)
        .then(res => {
          this.detailList = res.data;
          this.detailVisible = true;
          this.loadingFull = false;
        })
        .catch(err => {
          this.loadingFull = false;
        });
    },
  
    //删除管理员
    deleteUser(id) {
      this.$confirm("此操作将删除管理员账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          deleteUsers(id).then(res => {
            if (!res.code) {
              this.$message({
                type: "success",
                message: "删除成功!"
              });
              this.usersLists(this.searchParams);
            } else {
              this.$message({
                type: "error",
                message: "删除失败!"
              });
            }
          });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //禁用账号
    stopUser(id) {
      this.$confirm("此操作将禁用该账号, 是否继续?", "提示", {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning"
      })
        .then(() => {
          const data = {
            id: id,
            status: 0
          };
          putUsers(data)
            .then(res => {
              this.$message({
                type: "success",
                message: "禁用成功!"
              });
              this.usersLists(this.searchParams);
            })
            .catch(err => {
              this.$message({
                type: "error",
                message: "禁用失败!"
              });
              this.usersLists(this.searchParams);
            });
        })
        .catch(() => {
          this.$message({
            type: "info",
            message: "已取消删除"
          });
        });
    },
    //编辑管理员信息
    editAdmin(row) {
      (this.organizationIds = Number(row.organization_ids[0])),
        console.log(row);
      this.editDialogVisible = true;
      this.creatForm = {
        name: row.nickname,
        account: row.account,
        status: 1,
        password: row.password,
        organization_ids: this.organizationIds,
        role: "2"
      };
    },
    //修改密码
    userPwd(row) {
      this.passwordVisible = true;
      this.type = 0;
      this.editPassword = {
        id: row.id,
        name: row.nickname,
        account: row.account,
        password: ""
      };
    },
    //修改用户角色
    userRole(row) {
      this.passwordVisible = true;
      this.type = 1;
      this.editPassword = {
        id: row.id,
        name: row.nickname,
        account: row.account,
        role: ""
      };
      if (row.is_admin == 0) {
        this.editPassword.role = "1";
      } else {
        this.editPassword.role = "2";
      }
    },
    sureRole() {
      changeUserRole(this.editPassword)
        .then(res => {
          this.$message({
            type: "success",
            message: "身份修改成功"
          });
          this.usersLists(this.searchParams);
          this.passwordVisible = false;
        })
        .catch(err => {
          this.$message({
            type: "error",
            message: "修改失败"
          });
          this.passwordVisible = false;
        });
    },
    surePwd() {
      changeUserPwd(this.editPassword)
        .then(res => {
          this.$message({
            type: "success",
            message: "密码修改成功"
          });
          this.usersLists(this.searchParams);
          this.passwordVisible = false;
        })
        .catch(err => {
          this.$message({
            type: "error",
            message: "修改失败"
          });
          this.passwordVisible = false;
        });
    },
    //切换页码
    handleSizeChange(e) {
      console.log(e, "切换页码");
      this.searchParams.limit = e;
      const data = this.searchParams;
      this.usersLists(data);
    },
    //切换每页显示数量
    handleCurrentChange(e) {
      console.log(e, "当前页码");
      this.searchParams.page = e;
      const data = this.searchParams;
      this.usersLists(data);
    }
  }
};
</script>
<style lang="scss" scoped>
@import "@/assets/styles/content.scss";
.demo-ruleForm {
  width: 50%;
  margin: 0 auto;
}
.detail1 {
  width: 80%;
  margin: 0 auto;
  padding-bottom: 30px;
  div {
    height: 30px;
    line-height: 30px;
  }
}
</style>