<template>
  <div class="admin">
    <div class="role-list">
      <div class="add-role">
        <el-button @click="onEditRole()"><i class="iconfont icontianjiajiahaowubiankuang"></i> 新建管理角色</el-button>
      </div>
      <role-list
        :role-list="roleList"
        :active-role-id="activeRoleId"
        show-del-role-button
        @del-role-succ="onDelRoleSucc"
        @edit-role="onEditRole"
        @change-role="onChangeRole"></role-list>
    </div>
    <div class="admin-list">
      <h3 class="admin-list-title">管理员列表</h3>
      <el-input
        placeholder="请输入姓名/账号/手机号码"
        prefix-icon="el-icon-search"
        style="width: 277px"
        clearable
        v-model.trim="search"
        @change="onSearch"></el-input>
      <el-button style="float: right" type="primary" @click="toEditAdmin">添加管理员</el-button>
      <el-table style="margin-top: 20px" :data="adminList">
        <el-table-column label="姓名" prop="staffName" :formatter="(row, col, val) => val || '--'"></el-table-column>
        <el-table-column label="账号" prop="wxUserId" :formatter="(row, col, val) => val || '--'" show-overflow-tooltip></el-table-column>
        <el-table-column label="手机号码" prop="phoneNumber" :formatter="(row, col, val) => val || '--'"></el-table-column>
        <el-table-column label="操作">
          <template slot-scope="{ row }">
            <el-button type="text" @click="toEditAdmin(row)">管辖范围</el-button>
            <el-button type="text" @click="onDelAdmin(row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <dm-pagination
        v-if="pager.total > 0"
        style="text-align: right"
        background
        layout="total,sizes,prev,pager,next"
        :total="pager.total"
        :page-sizes="pager.pageSizes"
        :page-size="pager.pageSize"
        :current-page="pager.currentPage"
        @size-change="onSizeChange"
        @current-change="onCurrentChange"></dm-pagination>
    </div>
  </div>
</template>

<script>
import RoleList from './admin-list/role-list.vue';
import api from '@/api/admin-list.js';

// 角色菜单
//    添加角色跳转 done
//    编辑角色跳转 done
//    删除角色 done
//    切换角色菜单 done
// 管理员列表
//    搜索 done
//    分页查询 done
//    删除管理员 done
//    管辖范围跳转 done
//    添加管理员跳转 done

const { roleList, roleAdminList, delAdmin } = api;

export default {
  name: 'AdminList',
  components: { RoleList },
  data() {
    return {
      // 选中的角色id
      activeRoleId: '',
      // 角色菜单
      roleList: [],
      search: '',
      // 管理员列表翻页相关的数据
      pager: {
        total: 0,
        pageSizes: [ 20, 40, 60, 80 ],
        pageSize: 20,
        currentPage: 1
      },
      // 管理员列表数据
      adminList: [],
    };
  },
  created() {
    this.$emit('showTab', '/admin-list');
    this.getRoleList();
  },
  methods: {
    /**
     * @description: 获取角色列表
     * @author: 无尘
     */
    getRoleList() {
      // roleType 1门店角色2管理员角色
      roleList({ roleType: 2 }).then(res => {
        this.roleList = res.result || [];
        // 如果没有选中的角色id而且角色列表有数据，就默认选中第一个角色
        if (this.roleList.length > 0 && !this.activeRoleId) {
          this.activeRoleId = this.roleList[0].roleId;
          this.getAdminList();
        }
      });
    },
    /**
     * @description: 新建角色、编辑角色跳转
     * @param {Object} roleData
     * @author: 无尘
     */
    onEditRole(roleData) {
      const { roleId } = roleData || {};
      this.$router.push(`/edit-role${roleId ? `?roleId=${roleId}` : ''}`);
    },
    /**
     * @description: 切换角色菜单
     * @param {Object} roleData
     * @author: 无尘
     */
    onChangeRole(roleData) {
      this.activeRoleId = roleData.roleId;
      this.getAdminList();
    },
    onDelRoleSucc(resetActiveRoleId) {
      if (resetActiveRoleId) {
        this.activeRoleId = '';
      }
      this.getRoleList();
    },
    /**
     * @description: 获取选中的角色下的管理员列表
     * @author: 无尘
     */
    getAdminList() {
      const { currentPage, pageSize } = this.pager;
      const params = {
        roleId: this.activeRoleId,
        search: this.search,
        pageNum: currentPage,
        pageSize
      };
      roleAdminList(params).then(res => {
        const { totalCount, result } = res.result || {};
        this.pager.total = totalCount;
        this.adminList = result || [];
      });
    },
    /**
     * @description: 搜索
     * @author: 无尘
     */
    onSearch() {
      this.pager.currentPage = 1;
      this.getAdminList();
    },
    /**
     * @description: 分页
     * @param {Number} pageSize
     * @author: 无尘
     */
    onSizeChange(pageSize) {
      this.pager.pageSize = pageSize;
      this.onSearch();
    },
    onCurrentChange(currentPage) {
      this.pager.currentPage = currentPage;
      this.getAdminList();
    },
    /**
     * @description: 添加管理员、管辖范围跳转
     * @param {Object} adminData
     * @author: 无尘
     */
    toEditAdmin(adminData) {
      const { staffId, staffName } = adminData || {};
      this.$router.push(`/edit-admin?roleId=${this.activeRoleId}${staffName ? `&staffName=${staffName}` : ''}${staffId ? `&staffId=${staffId}` : ''}`);
    },
    /**
     * @description: 删除管理员
     * @param {Object} adminData
     * @author: 无尘
     */
    onDelAdmin(adminData) {
      const { staffName, staffId } = adminData;
      this.$confirm(`确定删除【 ${staffName} 】吗？`, '提示', { type: 'warning' }).then(() => {
        const params = { staffId, roleId: this.activeRoleId };
        delAdmin(params).then(res => {
          if (res.code == '0000') {
            this.$message.success('删除成功！');
            if (this.pager.currentPage > 1 && this.adminList.length == 1) {
              this.pager.currentPage--;
            }
            this.getAdminList();
          }
        });
      });
    }
  },
};
</script>

<style lang="less" scoped>
.admin {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  background-color: #fff;
  min-height: 100%;
  .role-list {
    flex-shrink: 0;
    width: 194px;
    border-right: 1px solid #E4E7ED;
    .add-role {
      padding: 20px;
      .el-button {
        width: 100%;
        border-style: dashed;
      }
    }
  }
  .admin-list {
    padding: 20px;
    width: calc(100% - 194px);
    .admin-list-title {
      margin-bottom: 20px;
      font-size: 14px;
      font-weight: 700;
      color: @gray01;
      line-height: 20px;
    }
  }
}
</style>
