<template>
  <div class="content-container">
    <title-bar titleName="新增角色">
      <template slot="tool">
        <span class="tool">
          <el-button class="el-button-reset" @click="goBack">返回</el-button>
          <el-button type="primary" class="el-button-reset" @click="save">保存</el-button>
        </span>
      </template>
    </title-bar>
    <div class="form-list">
      <el-form ref="form" label-position="right" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="角色名称:" prop="name">
          <el-input v-model="form.name" placeholder="请输入" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="角色描述:">
          <el-input v-model="form.remarks" placeholder="请输入" style="width: 420px;"></el-input>
        </el-form-item>
        <el-form-item label="分配人员:" label-width="90px">
          <div class="person-area">
            <button class="add-person--btn" @click.stop="reporterFn"><i class="el-icon-plus add-person--btn-icon"></i>人员</button>
            <div :class="['selected-person', (index + 1) % 5 === 0 ? 'selected-person--no-left' : '', index >= 4 ? 'selected-person--has-top' : '']"
              :key="people.userId"
              v-for="(people, index) in form.users">
              <span :title="people.userName">{{people.userName}}</span>
              <i class="el-icon-close selected-person--icon" @click="deleteSelectedPerson(people.userId)"></i>
            </div>
          </div>
        </el-form-item>
        <el-form-item label="权限配置:" label-width="90px">
          <div class="menu-tree">
            <div class="menu-tree-title">
              <el-checkbox v-model="checked" class="menu-tree-checkbox" @change="selectedRoleChanged">菜单列表</el-checkbox>
              <span class="menu-tree-title--selected-count">{{selectedCount}}/{{allCount}}</span>
            </div>
            <el-tree
              class="menu-tree-data"
              style="width: 420px;"
              :data="roleTree"
              ref="menuTree"
              show-checkbox
              default-expand-all
              @check-change="menuTreeDataChange"
              node-key="id"
              :default-checked-keys="form.perms"
              :props="defaultProps">
            </el-tree>
          </div>
        </el-form-item>
      </el-form>
    </div>
    <vue-selected-user-or-org ref="newtree"></vue-selected-user-or-org>
  </div>
</template>

<script>
import roleMixins from '@/pages/role/mixins/roleMixin';
import 'vue-selected-user-or-org/dist/css/vue-selected-user-or-org.min.css';

export default {
  name: 'RoleAdd',

  mixins: [
    roleMixins,
  ],

  mounted() {
    this.selectedCount = this.form.perms ? this.form.perms.length : 0;
    this.checked = this.selectedCount === this.allCount;
  },
};

</script>

<style scoped>
 @import '../../../common/common.css';
</style>

<style>
.form-list .el-form-item__label {
  width: 90px !important;
}
</style>
