<template>
  <a-modal
    width="800px"
    title="新增角色"
    :visible="value"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form :form="form">
      <a-form-item
        label="角色名"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'name',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="昵称"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'nick_name',
            {
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        ></a-input>
      </a-form-item>

      <h3>权限列表</h3>
      <div class="ant-table ant-table-default">
        <table>
          <tbody class="ant-table-tbody">
            <tr
              v-for="(item,index) in permissions"
              :key="index"
            >
              <td>
                {{ item.module_name }}
                <a-checkbox
                  :indeterminate="!!item.indeterminate"
                  @change="onCheckAllChange($event,item)"
                  :checked="item.checkAll"
                >
                </a-checkbox>
              </td>
              <td>
                <a-checkbox-group
                  v-model="item.checkedList"
                  @change="onChange($event,item)"
                >
                  <a-checkbox
                    :value="k.id"
                    v-for="(k,i) in item.permissions"
                    :key="i"
                  >
                    {{ k.permission_name }}
                  </a-checkbox>
                </a-checkbox-group>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </a-form>
  </a-modal>
</template>

<script>
import { addRole } from '@/api/systemSetting/role'
import roleMixin from './roleMixin.js'

export default {
  mixins: [roleMixin],
  methods: {
    handleOk (e) {
      e.preventDefault()

      if (this.checkedPermissions.length === 0) {
        this.$message.error('请至少选择一项权限')
        return
      }

      this.form.validateFields((err, values) => {
        if (!err) {
          const params = {
            name: values.name,
            nick_name: values.nick_name,
            permissions: this.checkedPermissions.map(i => {
              return { id: i - 0 }
            })
          }
          addRole(params).then(res => {
            this.$message.success('添加成功。')
            this.$emit('update')
            this.handleCancel()
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
