<template>
  <a-modal
    width="800px"
    title="编辑角色"
    :visible="value"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
      v-if="currentRole"
    >
      <a-form-item
        label="角色名"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'name',
            {
              initialValue:currentRole.name,
              rules: [{ required: true, message: '请输入' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="昵称"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'nick_name',
            {
              initialValue:currentRole.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 width="100">
                {{ 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 }} <span v-if="isDev">[{{ k.permission }}]</span>
                  </a-checkbox>
                </a-checkbox-group>
              </td>
            </tr>
          </tbody>
        </table>
      </div>
    </a-form>
  </a-modal>
</template>

<script>
import { editRole } from '@/api/systemSetting/role'

import roleMixin from './roleMixin.js'

export default {
  props: {
    currentRole: {
      type: Object,
      default: () => {}
    }
  },
  data () {
    return {
      isDev: process.env.NODE_ENV === 'development' || localStorage.isTest
    }
  },
  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 = {
            id: this.currentRole.id,
            name: values.name,
            nick_name: values.nick_name,
            permissions: this.checkedPermissions.map(i => {
              return { id: i - 0 }
            })
          }
          editRole(params).then(res => {
            this.$message.success('修改成功。')
            this.$emit('update')
            this.handleCancel()
          })
        }
      })
    }
  },
  watch: {
    value (val) {
      if (!val) return
      this.permissions.forEach(item => {
        const checkedList = item.permissions.filter(i => {
          return this.currentRole.permissions.find(j => j.id - 0 === i.id - 0)
        }).map(i => i.id)

        this.$set(item, 'checkedList', checkedList)
        this.onChange(checkedList, item)
      })
    }
  }
}
</script>

<style scoped>
.ant-checkbox-wrapper + .ant-checkbox-wrapper{
  margin-left: 0; margin-right: 10px; margin-bottom: 5px;
}
</style>
