<template>
  <d2-container class="page">
    <!-- 用户权限 -->
    <p>当前用户权限如下：</p>
    <section class="user-permission">
      <ai-tag
        class="user-permission-item"
        v-for="(p,index) in userPermission"
        :key="index"
      >{{p}}
      </ai-tag>
    </section>

    <!-- 展示代码 -->
    <p>使用 v-permission 进行按钮权限控制：</p>
    <section>
      <pre v-highlightA>
        <code >{{code}}</code>
      </pre>
    </section>

    <!-- 按钮权限展示 -->
    <p>显示界面如下：</p>
    <section>
      <ai-button v-permission:button="['AUTH_ROLE_ADD',]">新增</ai-button>
      <ai-button v-permission:button="['AUTH_ROLE_DELETE']">删除</ai-button>
      <ai-button v-permission:button="['AUTH_ROLE_EDIT']">编辑</ai-button>
      <ai-button v-permission:button="['AUTH_USER_DISABLED']">禁用</ai-button>
      <ai-button v-permission:button="['AUTH_USER_ENABLED']">启用</ai-button>
    </section>
  </d2-container>
</template>

<script>
import store from "@/store/index";

export default {
  name: "PermissionButton",
  components: {},
  data() {
    return {
      code: `
      <ai-button v-permission:button="['AUTH_ROLE_ADD',]">新增</ai-button>
      <ai-button v-permission:button="['AUTH_ROLE_DELETE']">删除</ai-button>
      <ai-button v-permission:button="['AUTH_ROLE_EDIT']">编辑</ai-button>
      <ai-button v-permission:button="['AUTH_USER_DISABLED']">禁用</ai-button>
      <ai-button v-permission:button="['AUTH_USER_ENABLED']">启用</ai-button>
      `
    };
  },
  computed: {
    userPermission() {
      let permission = store.state.d2admin.permission.buttons;
      return permission;
    }
  }
};
</script>

<style lang="less" scoped>
.user-permission {
  .user-permission-item {
    margin: 0px 10px 10px 0px;
  }
}
</style>
