<template>
  <a-modal
    :visible="true"
    :width="800"
    :title="$t('member.form.成员信息')"
    @cancel="handcancel(thethis)"
    :footer="null"
  >
    <a-spin :spinning="false">
      <a-form-model ref="ruleForm" :model="form" v-bind="formLayout" :rules="rules">
        <a-form-model-item style="display: none">
          <a-input
            allow-clear
            autocomplete="off"
            v-decorator="['operateType']"
            type="hidden"
          />
          <a-input allow-clear autocomplete="off" v-model="form.memberId" type="hidden" />
        </a-form-model-item>
        <a-row class="form-row" :gutter="[16, 0]">
          <!-- 编号 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('member.form.编号')" prop="no">
              <a-input :placeholder="$t('member.form.编号')" v-model="form.no" />
            </a-form-model-item>
          </a-col>

          <!-- 姓名 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('member.form.姓名')" prop="realName">
              <a-input :placeholder="$t('member.form.姓名')" v-model="form.realName" />
            </a-form-model-item>
          </a-col>

          <!-- 昵称 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('member.form.昵称')" prop="nickName">
              <a-input :placeholder="$t('member.form.昵称')" v-model="form.nickName" />
            </a-form-model-item>
          </a-col>

          <!-- 生日 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('member.form.生日')" prop="birthday">
              <a-date-picker
                :placeholder="$t('member.form.生日')"
                v-model="form.birthday"
                format="YYYY-MM-DD"
                v-decorator="[
                  'birthday',
                  {
                    initialValue: !this.form.birthday
                      ? null
                      : moment(this.form.birthday, 'YYYY-MM-DD'),
                  },
                ]"
              />
            </a-form-model-item>
          </a-col>

          <!-- 加入时间 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('member.form.加入时间')" prop="entryTime">
              <a-date-picker
                :placeholder="$t('member.form.加入时间')"
                v-model="form.entryTime"
                :show-time="{ format: 'HH:mm' }"
                format="YYYY-MM-DD HH:mm"
                :disabled="isModify"
                v-decorator="[
                  'entryTime',
                  {
                    initialValue: !this.form.entryTime
                      ? null
                      : moment(this.form.entryTime, 'YYYY-MM-DD HH:mm:ss'),
                  },
                ]"
              />
            </a-form-model-item>
          </a-col>

          <!-- 邮件 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('member.form.邮件')" prop="email">
              <a-input :placeholder="$t('member.form.邮件')" v-model="form.email" />
            </a-form-model-item>
          </a-col>

          <!-- 手机号码 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-item :label="$t('member.form.手机号码')" prop="mobile">
              <a-input-group compact>
                <a-select
                  :placeholder="$t('member.form.区号')"
                  style="width: 38%"
                  v-model="form.mobileArea"
                >
                  <a-select-option
                    v-for="item in accountMobileArea"
                    :key="item.value"
                    :value="item.value"
                  >
                    {{ item.name }}
                  </a-select-option>
                </a-select>
                <a-input
                  :placeholder="$t('member.form.手机号码')"
                  v-model="form.mobile"
                  style="width: 55%"
                />
              </a-input-group>
            </a-form-item>
          </a-col>

          <!-- 提交和重置 -->
          <a-col :lg="24" :md="24" :sm="24">
            <a-form-model-item :wrapper-col="{ span: 14, offset: 4 }">
              <a-button type="primary" @click="on_Submit">{{ $t("提交") }}</a-button>
              <a-button
                style="margin-left: 10px"
                @click="clearInfo(thethis)"
                v-if="!isModify"
              >
                {{ $t("重置") }}
              </a-button>
            </a-form-model-item>
          </a-col>
        </a-row>
      </a-form-model>
    </a-spin>
  </a-modal>
</template>
<script>
import {
  formLayout,
  rules,
  isHaveData,
  handcancel,
  LimitLength,
} from "@/common/components/Commonality/Form/js/form.js";
import { getModify, modify } from "@/baseConfigComponents/api/member.js";
import { getModify as getModifyTel } from "@/baseConfigComponents/api/enum";

import moment from "moment";
export default {
  props: ["data", "that", "refresh"],
  mounted() {
    getModifyTel(1).then((res) => {
      //  console.log(res.data);
      this.accountMobileArea = res.data.valueList;
    });
    if (this.data) {
      this.form.status = !this.form.status;
      getModify(this.data).then((res) => {
        if (res) {
          this.isModify = true;
          this.form = res.data;
        }
      });
    } else {
      this.isModify = false;
    }
  },
  data() {
    this.thethis = this;
    return {
      accountMobileArea: undefined,
      isModify: false,
      // 布局
      formLayout,
      // 表单初始格式
      form: {
        memberId: 0,
        no: "",
        realName: "",
        nickName: "",
        state: undefined,
        birthday: undefined,
        entryTime: undefined,
        email: "",
        mobileArea: undefined,
        mobile: "",
      },
      // 验证规则
      rules: {
        no: [rules.required],
        realName: [rules.required],
        nickName: [rules.required],
        entryTime: [rules.required],
        email: [rules.LimitLength(0, 512)],
      },
    };
  },

  methods: {
    moment,
    // 重置表单元素
    clearInfo() {
      this.form = {
        memberId: this.form.memberId,
        no: "",
        realName: "",
        nickName: "",
        state: this.form.state,
        birthday: undefined,
        entryTime: this.form.entryTime,
        email: "",
        mobileArea: "",
        mobile: "",
      };
    },
    // 关闭
    handcancel,
    // 提交（更改）表单
    on_Submit(type) {
      var that = this;
      // 提示框确认
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.info = { ...that.form };
          modify(that.info.memberId, that.info).then((res) => {
            that.$message.success("操作成功");
            that.$emit("refresh");
            that.handcancel(that);
          });
        }
      });
    },
  },
  components: {
    moment,
  },
};
</script>
