<template>
  <div class="store-admin-list">
    <div class="store-role-list">
      <p class="no-data" v-if="roleList.length == 0">暂无数据</p>
      <div v-for="el in roleList" :key="el.enterpriseId">
        <h3 class="role-title">
          <i class="iconfont iconshanghu role-title-icon"></i>
          <p class="role-title-text">{{ el.enterpriseName }}</p>
        </h3>
        <role-list
          :role-list="el.roleList"
          :active-role-id="activeRoleId"
          @edit-role="onEditRole"
          @change-role="onChangeRole"></role-list>
      </div>
    </div>
    <div class="admin-list">
      <h3 class="admin-list-title">门店成员列表</h3>
      <el-input
        style="width: 238px"
        placeholder="请输入姓名/账号/手机号码"
        prefix-icon="el-icon-search"
        clearable
        v-model.trim="search"
        @change="onSearch"></el-input>
      <el-alert
        type="info"
        title="拥有门店的权限，能进行一些门店日常业务，如打标签，完成话务等。必须是导购账号 ，不可添加删除门店成员。"
        :closable="false"
        show-icon
        style="float:right;width:720px;"></el-alert>
      <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 || '--'"></el-table-column>
        <el-table-column label="手机号码" prop="phoneNumber" :formatter="(row, col, val) => val || '--'"></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"
        @current-change="onCurrentChange"
        @size-change="onSizeChange"></dm-pagination>
    </div>
  </div>
</template>

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

const { enterpriseList, roleList, roleAdminList } = api;

export default {
  name: 'StoreAdminList',
  components: { RoleList },
  data() {
    return {
      // 角色列表
      roleList: [],
      activeRoleId: '',
      enterpriseId: '',
      adminList: [],
      search: '',
      pager: {
        total: 0,
        pageSizes: [ 20, 40, 60, 80 ],
        pageSize: 20,
        currentPage: 1
      }
    };
  },
  created() {
    this.$emit('showTab', '/store-admin-list');
    this.getRoleList();
  },
  methods: {
    /**
     * @description: 获取角色数据
     * @author: 无尘
     */
    getRoleList() {
      const haoBanUser = JSON.parse(localStorage.getItem('haoBanUser') || '{}');
      const wxEnterpriseId = haoBanUser.wxEnterpriseId;
      const prom = [];
      if (!wxEnterpriseId) return;
      enterpriseList({ wxEnterpriseId }).then(res => {
        const result = res.result || [];
        this.roleList = result.map(el => {
          const { enterpriseId, enterpriseName } = el;
          return { enterpriseId, enterpriseName, roleList: [] };
        });
        if (this.roleList.length == 0) return;
        this.roleList.forEach(el => {
          prom.push(roleList({ enterpriseId: el.enterpriseId, roleType: 1 }).then(res => {
            el.roleList = res.result || [];
          }));
        });
        Promise.all(prom).then(() => {
          if (!this.activeRoleId) {
            this.roleList.some(el => {
              if (el.roleList.length > 0) {
                this.activeRoleId = el.roleList[0].roleId;
                this.enterpriseId = el.roleList[0].enterpriseId;
              }
              return el.roleList.length > 0;
            });
          }
          if (this.activeRoleId) {
            this.getAdminList();
          }
        });
      });
    },
    /**
     * @description: 获取管理员数据
     * @author: 无尘
     */
    getAdminList() {
      const params = {
        roleId: this.activeRoleId,
        enterpriseId: this.enterpriseId,
        search: this.search,
        pageNum: this.pager.currentPage,
        pageSize: this.pager.pageSize
      };
      roleAdminList(params).then(res => {
        const { totalCount, result } = res.result || {};
        this.pager.total = totalCount || 0;
        this.adminList = result || [];
      });
    },
    /**
     * @description: 切换角色菜单
     * @param {Object} roleData
     * @author: 无尘
     */
    onChangeRole(roleData) {
      const { roleId, enterpriseId } = roleData;
      this.activeRoleId = roleId;
      this.enterpriseId = enterpriseId;
      this.search = '';
      this.pager.currentPage = 1;
      this.getAdminList();
    },
    /**
     * @description: 编辑角色菜单
     * @param {Object} roleData
     * @author: 无尘
     */
    onEditRole(roleData) {
      this.$router.push(`/edit-store-role?roleId=${roleData.roleId}`);
    },
    /**
     * @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();
    }
  }
};
</script>

<style lang="less" scoped>
.store-admin-list {
  display: flex;
  justify-content: flex-start;
  align-items: stretch;
  min-height: 100%;
  background-color: #fff;
  .store-role-list {
    padding: 17px 0;
    flex-shrink: 0;
    width: 194px;
    border-right: 1px solid #E4E7ED;
    .role-title {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      padding: 0 20px;
      margin-bottom: 13px;
      font-size: 14px;
      font-weight: 700;
      color: @gray01;
      line-height: 20px;
      .role-title-icon {
        margin-right: 10px;
        font-size: 14px;
        color: @gray01;
      }
      .role-title-text {
        width: 100%;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }
    }
    .no-data {
      padding-top: 50px;
      text-align: center;
      color: @gray03;
    }
  }
  .admin-list {
    padding: 20px;
    width: calc(100% - 194px);
    .admin-list-title {
      margin-bottom: 18px;
      font-size: 14px;
      font-weight: 700;
      color: @gray01;
      line-height: 20px;
    }
  }
}
</style>
