<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">
      <role-compile-list :data="row" :is-edit="isEdit"></role-compile-list>
    </div>
  </div>
</template>

<script>

  import RoleCompileList from './RoleCompileList'
  import RoleList from './RoleList'
  import {HttpResetClass} from 'vue-client'

  let validateIsEditGen = async function (self, obj) {
    // 获取当前登录人所在组织下的角色，
    let http = new HttpResetClass()
    let getAllRoles = await http.load('POST', '/rs/search',{source:"this.getParentByType($organization$).getAllChildrens().where(row.getType() == $role$)",userid:self.$login.f.id}, {resolveMsg:null, rejectMsg: '获取所在组织下的角色出错！！'})
    console.log('获取到组织下所有的角色', getAllRoles)
    if (getAllRoles.data.length > 0) {
      self.isEdit = false
      getAllRoles.data.forEach((res) => {
        console.log('对比id', res.id, obj.id, res.id === obj.id)
        if (res.id === obj.id) {
          self.isEdit = true
          return
        }
      })
    }

  }


  export default {
    title: '角色管理',
    components: {
      RoleList, RoleCompileList
    },
    props: ['data'],
    data () {
      return {
        row: null,
        isChange: false,

        // 控制是否可编辑
        isEdit: true
      }
    },
    methods: {
      async selected (obj) {
        this.row = obj.val
        await validateIsEditGen(this, obj.val)
        this.isChange = true
      }
    },
    events: {
      'addrole' () {
        this.row = null
        this.isChange = true
      },
      'search' () {
        this.isChange = false
      },
      'refresh' () {
        this.row = null
        this.isChange = false
        this.$refs.list.$refs.paged.$refs.cri.search()
      }
    }
  }

</script>
