<template>
  <div id="unit" class="flex-row">
    <role-list @select-changed="selected"  style="width:auto;" v-ref:list></role-list>
    <div class="flex" style="margin-left: 10px; width: 40%;" v-if="isChange">
      <add-role :parentid="data.id" :data="row"></add-role>
    </div>
  </div>
</template>

<script>

  import RoleList from './RoleList'
  import AddRole from './AddRole'

  export default {
    title: '角色管理',
    components: {
      RoleList, AddRole
    },
    props: ['data'],
    data () {
      return {
        row: null,
        isChange: false
      }
    },
    methods: {
      selected (obj) {
        this.row = obj.val
        this.isChange = true
      }
    },
    events: {
      'addrole' () {
        this.row = null
        this.isChange = true
      },
      'refresh' () {
        this.row = null
        this.isChange = false
        this.$refs.list.$refs.paged.$refs.cri.search()
      }
    }
  }

</script>
