<template>
<div>
  <div class="content-layer header">
    <p>{{$t('admin_permission_settings')}}</p>
  </div>
  <!--权限分配-->
  <div class="content-layer">
    <p class="title">
      {{$t('permission_assignment')}}
      <span class="desc">{{$t('permission_assignment_desc_admin')}}</span>
    </p>
    <member-permission
    :project="projectName"
    :columnsList="member_table_title"
    :dataList="member_table_data"
    :token="token"
    @refresh="refresh"
    >
    </member-permission>
    <p class="tips">{{$t('permission_assignment_tips')}}</p>
  </div>
  <!--列表操作-->
  <div class="content-layer">
    <p class="title">
      {{$t('operation_list')}}
      <span class="desc">{{$t('add_op_desc_platform')}}</span>
    </p>
    <operation-permission
    :project="projectName"
    :columnsList="operation_table_title"
    :dataList="operation_table_data"
    :token="token"
    :memberType="member_table_data"
    @refresh="refresh"
    ></operation-permission>
  </div>
</div>
</template>

<script>
import mixin from './mixin.js'
export default {
  mixins: [ mixin ],
  data () {
    return {
      projectName: 'admin',
      member_table_title: [
        {
          title: this.$t('manager_level'),
          key: 'level'
        },
        {
          title: this.$t('manager_type'),
          key: 'name'
        },
        {
          title: this.$t('op_count'),
          slot: 'counting'
        },
        {
          title: this.$t('operation'),
          slot: 'operation'
        }
      ]
    }
  }
}
</script>

<style scoped lang="less">
.content-layer {
  margin-bottom: 20px;

  .title {
    height: 50px;
    margin: 0 -20px;
    margin-top: -20px;
    padding: 14px 30px;
    display: flex;
    align-items: baseline;
    border-bottom: 1px solid #E9E9E9;
    font-size: 14px;
    font-weight: 600;

    .desc {
      font-size: 12px;
      margin-left: 20px;
      color: #666;
      font-weight: 500;
    }
  }
}
.content-layer:nth-last-child(1) {
  margin-bottom: 0px;
}
</style>
