<template>
  <a-modal
    :visible="true"
    :title="$t('个人信息')"
    @cancel="handcancel(thethis)"
    :width="800"
    :footer="null"
  >
    <a-form :form="form" @submit="on_Submit" class="userInfo" label-align="right">
      <a-form-model-item v-bind="formItemLayout" required :label="$t('编号')">
        <a-input v-model="form.no" disabled />
      </a-form-model-item>
      <a-form-model-item required :label="$t('真实名字')" v-bind="formItemLayout">
        <a-input v-model="form.realName" disabled />
      </a-form-model-item>
      <a-form-model-item :label="$t('昵称')" v-bind="formItemLayout">
        <a-input v-model="form.nickName" />
      </a-form-model-item>
      <!--   <a-form-model-item
        required
        label="生日："
        :defaultValue="moment(form.birthday, 'YYYY-MM-DD')"
        placeholder="请选择生日"
        v-bind="formItemLayout"
      >
        <a-date-picker @change="onChange" />
      </a-form-model-item> -->
      <a-form-model-item :label="$t('生日')" prop="birthday" v-bind="formItemLayout">
        <a-date-picker
          :placeholder="$t('生日')"
          v-model="form.birthday"
          format="YYYY-MM-DD"
        />
      </a-form-model-item>
      <a-form-model-item :label="$t('加入时间')" v-bind="formItemLayout">
        <a-input v-model="form.entryTime" disabled />
      </a-form-model-item>
      <a-form-model-item required :label="$t('邮箱')" v-bind="formItemLayout">
        <a-input v-model="form.email" />
      </a-form-model-item>
      <a-form-item v-bind="formItemLayout" :label="$t('手机号')">
        <a-input style="width: 100%" v-model="form.mobile">
          <a-select
            slot="addonBefore"
            v-model="form.mobileArea"
            style="width: 70px"
          >
            <a-select-option value="86">
              +86
            </a-select-option>
            <a-select-option value="87">
              +87
            </a-select-option>
          </a-select>
        </a-input>
      </a-form-item>
      <!-- 提交和重置 -->
      <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
        <a-button type="primary" @click="on_Submit"> {{ $t('提交') }} </a-button>
      </a-form-model-item>
    </a-form>
  </a-modal>
</template>
<script>
import {
  formLayout,
  rules,
  isHaveData,
  handcancel,
  LimitLength,
} from '@/common/components/Commonality/Form/js/form.js'
import { getUserInfo, mondifyUserInfo } from '@/homeComponents/api/user.js'
import moment from 'moment'
export default {
  props: ['data', 'that', 'refresh'],
  mounted () {
    this.getInfo()
  },
  data () {
    this.thethis = this
    return {
      isModify: false,
      // 布局
      formLayout,
      // 表单初始格式
      form: {
        no: '',
        realName: '',
        nickName: '',
        birthday: '',
        entryTime: '',
        email: '',
        mobileArea: '',
        mobile: '',
      },
      formItemLayout: {
        labelCol: {
          xs: { span: 24 },
          sm: { span: 5 },
        },
        wrapperCol: {
          xs: { span: 24 },
          sm: { span: 16 },
        },
      },
      tailFormItemLayout: {
        wrapperCol: {
          xs: {
            span: 24,
            offset: 0,
          },
          sm: {
            span: 16,
            offset: 8,
          },
        },
      },
      // 验证规则
      rules: {
        userName: [rules.required, rules.LimitLength(0, 64)],
        password: [rules.required, rules.required, rules.LimitLength(0, 30)],
        loginType: [rules.required],
        status: [rules.required],
      },
    }
  },

  methods: {
    moment,
    // 获取用户信息
    getInfo () {
      getUserInfo('v1').then(res => {
        if (res) {
          this.form = res.data
          console.log(this.form)
        }
      })
    },
    // 重置表单元素
    clearInfo () {
      this.form = {
        id: this.form.id,
        memberId: this.form.memberId,
        userName: '',
        password: '',
        loginType: undefined,
        status: undefined,
      }
    },
    handcancel,
    // 时间修改
    onChange (date, dateString) {
      this.form.birthday = dateString
      console.log(date, dateString)
    },
    // 提交（更改）表单
    on_Submit (type) {
      var that = this
      // 提示框确认
      that.info = { ...that.form }
      mondifyUserInfo(that.info).then(res => {
        that.$message.success('操作成功')
        that.$emit('refresh')
        that.handcancel(that)
      })
    },
  },
  components: {
    moment,
  },
}
</script>
<style lang="less" scoped>
.userInfo {
  input {
    border-radius: 5px;
  }
}
</style>
