<template>
  <a-modal
    :visible="value"
    title="编辑账号"
    @ok="handleOk"
    @cancel="handleCancel"
  >
    <a-form
      :form="form"
      v-if="formData"
    >
      <a-form-item
        label="账号"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'name',
            {
              initialValue:formData.name,
              rules: [{ required: true, message: '请输入账号' }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="昵称"
        v-bind="formItemLayout"
      >
        <a-input
          v-decorator="[
            'nick_name',
            {
              initialValue:formData.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',
            {
              initialValue:formData.roles.map(i=>i.id),
              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',
            {
              initialValue:formData.phone,
              rules: [
                { required: true, message: '请输入手机号' }
              ]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="密码"
        v-bind="formItemLayout"
      >
        <a-input
          type="password"
          v-decorator="[
            'password',
            {
              rules: [{
                validator: validateToNextPassword
              }]
            }
          ]"
        ></a-input>
      </a-form-item>
      <a-form-item
        label="确认密码"
        v-bind="formItemLayout"
      >
        <a-input
          type="password"
          v-decorator="[
            'confirm',
            {
              rules: [{
                validator: compareToFirstPassword,
              }]
            }
          ]"
          @blur="handleConfirmBlur"
        ></a-input>
      </a-form-item>
    </a-form>
  </a-modal>
</template>

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

export default {
  mixins: [accountMixin],
  props: {
    formData: {
      type: Object,
      default: () => null
    }
  },
  methods: {
    handleOk (e) {
      e.preventDefault()
      this.form.validateFields((err, values) => {
        if (!err) {
          !values.password && delete values.password

          values.roles = values.roles.map(item => {
            return {
              id: item
            }
          })

          values.id = this.formData.id

          updateAccount(values).then(res => {
            this.$message.success('修改成功。')
          })

          this.form.resetFields()
          this.$emit('input', false)

          // 数据更新有延迟
          setTimeout(() => {
            this.$emit('update')
          }, 500)
        }
      })
    }
  }
}
</script>

<style scoped>

</style>
