<template>
  <div class="container">
    <el-row :gutter="40">
      <el-col :span="12" style="border-right:1px solid #ccc;min-height:calc(100vh - 160px)">
        <list v-if="tool.checkAuth($route.name,'read')" ref="list" @rowClick="rowClick">
          <add v-if="tool.checkAuth($route.name,'insert')" slot="add" @onSuccess="onSuccess"></add>
        </list>
      </el-col>
      <el-col :span="12">
        <account-detail ref="detail">
          <template v-slot:edit="scope">
            <account-edit v-if="tool.checkAuth($route.name,'update')" :data="scope.data" @onSuccess="onSuccess" style="margin-right:10px"></account-edit>
          </template>
          <template v-slot:del="scope">
            <account-del v-if="tool.checkAuth($route.name,'delete')" :data="scope.data" @onSuccess="onSuccess"></account-del>
          </template>
          <template v-slot:role="scope">
            <role v-if="tool.checkAuth($route.name,'edit_role')" :data="scope.data" @onSuccess="onSuccess"></role>
          </template>
        </account-detail>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import list from './modules/list.vue'
import add from './modules/account_add.vue'
import accountDel from './modules/account_delete.vue'
import accountEdit from './modules/account_edit.vue'
import role from './modules/set_account_role.vue'
import accountDetail from './modules/account_detail.vue'

export default {
  components:{
    list,
    add,
    accountDel,
    accountEdit,
    accountDetail,
    role
  },
  methods:{
    onSuccess () {
      this.$refs.list.listData()
    },
    rowClick (row) {
      this.$refs.detail.queryAccountMain(row)
    },
    onSuccess (row) {
      this.$refs.detail.queryAccountMain(row)
    },
  }
}

</script>
<style>
</style>
<style scoped>
.container{
  padding:20px
}
.borderRight{
  border-right: 1px solid #ccc;
}
</style>