<template>
  <a-modal
    :visible="value"
    title="新建账号"
    @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>

      <a-form-item
        label="角色"
        v-bind="formItemLayout"
      >
        <a-select
          mode="multiple"
          v-decorator="[
            'roles',
            {
              rules: [{ required: true, message: '请选择角色' }]
            }
          ]"
        >
          <a-select-option
            v-for="role in roleList"
            :key="role.id"
            :value="role.id"
          >
            {{ role.nick_name }}
          </a-select-option>
        </a-select>
      </a-form-item>

      <a-form-item
        label="电话"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'phone',
            {
              rules: [
                { required: true, message: '请输入电话号码' },
                {pattern:/^1(3|4|5|7|8|9)\d{9}$/, message:'请输入正确的手机号码'}
              ]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="密码"
        v-bind="formItemLayout"
      >
        <a-input
          type="password"
          v-decorator="[
            'password',
            {
              rules: [
                { required: true, message: '请输入密码' },
                { validator: validateToNextPassword}
              ]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="确认密码"
        v-bind="formItemLayout"
      >
        <a-input
          type="password"
          v-decorator="[
            'confirm',
            {
              rules: [
                { required: true, message: '请再次输入密码' },
                { validator: compareToFirstPassword}
              ]
            }
          ]"
          @blur="handleConfirmBlur"
        ></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script>
import { addAccount } from '@/api/systemSetting/account'
import accountMixin from './accountMixin.js'

export default {
  mixins: [accountMixin],
  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          values.roles = values.roles.map(item => {
            return {
              id: item
            }
          })

          // console.log('Received values of form: ', values)
          addAccount(values).then(res => {
            this.$message.success('添加成功。')
            this.form.resetFields()
            this.$emit('input', false)
            this.$emit('update')
          })
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
