<template>
  <div class="role" v-if="tool.checkAuth($route.name,'read')">
    <div class="top">
      <p>角色管理</p>
      <el-button type="primary" @click="addRole()" v-if="tool.checkAuth($route.name,'insert')">
        <img src="@/assets/add.png" alt style="vertical-align:middle" />
        新建角色
      </el-button>
    </div>
    <role-item :roleData="roleData" v-if="tool.checkAuth($route.name,'read') && roleData.length != 0">
      <template v-slot:icon="scope">
        <img src="@/assets/edit.png" alt @click="roleEdit(scope.data)" v-if="tool.checkAuth($route.name,'update')" />
      </template>
      <template v-slot:remove="scope">
        <remove-role :roleData="scope.data" v-if="tool.checkAuth($route.name,'delete')"></remove-role>
      </template>
    </role-item>
    <el-empty description="暂无数据" v-else></el-empty>
  </div>
</template>

<script>
import RoleItem from '@/SManagement/user/role-manage/components/RoleItem'
import removeRole from '@/SManagement/user/role-manage/components/removeRole'
export default {
  name: 'RoleManage',
  data () {
    return {
      param: {
        "classname": "sale.role.role",
        "method": "query_roleList",
        "content": {
          "nocache": true,
          "pageNumber": 1,
          "pageSize": 9999999,
          "where": {
            "condition": ""
          }
        }
      },
      roleData: []
    }
  },
  props: [],
  components: {
    RoleItem,
    removeRole
  },
  computed: {
  },
  watch: {
  },
  created () {
    this.getRoleData()
  },
  methods: {
    getRoleData () {
      this.$api.requested(this.param).then(res => {
        this.roleData = res.data
      })
    },
    //角色编辑
    roleEdit (data) {
      window.sessionStorage.setItem('currentEditRole', JSON.stringify(data))
      this.$router.push({
        name: 'roleEdit',
        params: {
          data
        }
      })
    },
    addRole () {
      window.sessionStorage.setItem('currentEditRole', 0)
      window.sessionStorage.setItem('currentPath', '/role_managent')
      this.$router.push({
        path: 'role_edit',
        query: {
          id: 0
        }
      })
    },
  },
};
</script>

<style scoped>
* {
  box-sizing: border-box;
}
.role {
  width: 100%;
  min-height: 100%;
  background: #ffffff;
}
.role .top {
  display: flex;
  justify-content: space-between;
  padding: 16px 16px 9px 0;
  margin-left: 16px;
  border-bottom: 1px solid #dddddd;
  align-items: center;
}
.role .top p {
  font-size: 16px;
  font-weight: bold;
  color: #333333;
}
.el-empty {
  position: absolute;
  left: 50%;
  top: 50%;
  transform: translate(-50%, -50%);
}
</style>
