<template>
  <div class="opBtn">
    <VaButton color="info" :round="false" size="small" class="mr-6 mb-2" icon="interests" @click="getRoleMenus">
      权限设置
    </VaButton>
    <VaModal
      :modelValue="showModal"
      :noDismiss="true"
      blur
      @ok="submit"
      @cancel="showModal = false"
      ok-text="提交"
      cancelText="取消"
    >
      <h3 class="va-h3">权限信息</h3>
      <permissionTree ref="permissionTree" class="permissionTree"></permissionTree>
    </VaModal>
  </div>
</template>

<script>
  import permissionTree from '../../module/permissionTree.vue'
  export default {
    name: 'permissionSetting',
    components: {
      permissionTree,
    },
    props: {
      params: {
        default: () => {},
      },
    },
    methods: {
      submit() {
        let params = {
          menuId: this.$refs.permissionTree.selectedNodes,
          roleId: this.params.id,
        }
        this.$api.roleMenuAdd(params).then((res) => {
          this.$toast.success({ message: res.message })
          this.showModal = false
          this.$emit('after-op')
        })
      },
      getRoleMenus() {
        this.showModal = true
        this.$api.getRoleMenus({ roleId: this.params.id }).then((res) => {
          this.$nextTick(() => {
            this.$refs.permissionTree.selectedNodes = res.result.menuId
          })
        })
      },
    },
    data() {
      return {
        showModal: false,
      }
    },
  }
</script>

<style scoped lang="less">
  .opBtn {
    display: inline-block;
  }
  .permissionTree {
    width: 500px;
  }
</style>
