<template>
  <div>
    <list ref="list" @onRowClick="onRowClick" @deleteClick="deleteClick">
      <add v-if="tool.checkAuth($route.name,'insert')" style="margin-bottom:10px" slot="add" @onSuccess="onSuccess"> </add>
      <role-details ref="roledetails" slot="details">
        <template v-slot:edit="scope">
          <edit v-if="tool.checkAuth($route.name,'update')" style="margin-right:10px" :data="scope.data" @onSuccess="onSuccess"></edit>
        </template>
        <template v-slot:del="scope">
          <role-del v-if="tool.checkAuth($route.name,'delete')" :data="scope.data" @onSuccess="onSuccess"></role-del>
        </template>
        <template v-slot:auth="scope">
          <authList v-if="tool.checkAuth($route.name,'auth')" :data="scope.data" @onSuccess="refreshRoleMain"></authList>
        </template>
        <template v-slot:cancelAuth="scope">
          <cancelAuth v-if="tool.checkAuth($route.name,'auth')" :data="scope.data" @onSuccess="refreshRoleMain"></cancelAuth>
        </template>
      </role-details>
    </list>
  </div>
</template>

<script>
import list from './modules/list.vue'
import roleDetails from './modules/role_details.vue'
import add from './modules/add_role.vue'
import edit from './modules/edit_role.vue'
import roleDel from './modules/delete_role.vue'
import authList from './modules/auth_list.vue'
import cancelAuth from './modules/cancel_auth.vue'

export default {
  components:{
    list,
    roleDetails,
    add,
    edit,
    roleDel,
    authList,
    cancelAuth
  },
  data () {
    return {
      row:{}
    }
  },
  methods:{
    onRowClick (row) {
      this.row = row
      this.$refs.roledetails.detailData(row)
    },
    onSuccess () {
      this.$refs.list.listData()
    },
    deleteClick (row) {
      this.row = row
    },
    refreshRoleMain () {
      this.$refs.roledetails.detailData(this.row)
      this.$refs.roledetails.dialogTableVisible = false
    },
  },
  mounted () {
  }
}

</script>
<style>
</style>