<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.id"
            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="userName">
              <a-input :placeholder="$t('member.form.用户名')" v-model="form.userName" />
            </a-form-model-item>
          </a-col>

          <!-- 密码 -->
          <a-col
            :lg="12"
            :md="12"
            :sm="24"
            v-if="!isModify"
          >
            <a-form-model-item :label="$t('member.form.密码')" prop="password">
              <a-input-password
                :placeholder="$t('member.form.密码')"
                type="password"
                v-model="form.password"
              />
            </a-form-model-item>
          </a-col>

          <!-- 状态 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('member.form.状态')" prop="status">
              <a-radio-group v-model="form.status">
                <a-radio :value="1"> {{$t('member.form.正常')}} </a-radio>
                <a-radio :value="2"> {{$t('member.form.禁用')}} </a-radio>
              </a-radio-group>
            </a-form-model-item>
          </a-col>

          <!-- 登录方式 -->
          <a-col :lg="12" :md="12" :sm="24">
            <a-form-model-item :label="$t('member.form.登录方式')" prop="loginType">
              <a-radio-group v-model="form.loginType">
                <a-radio :value="1"> {{$t('member.form.本地账号')}} </a-radio>
                <a-radio :value="2"> {{$t('member.form.域账号')}} </a-radio>
              </a-radio-group>
            </a-form-model-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-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 { modifyAccount, getAccountInfo, createPassword } from "@/baseConfigComponents/api/member.js";
export default {
  props: ["data", "that", "refresh"],
  mounted() {
    if (this.data && this.data.isModify) {
      this.form.status = !this.form.status;
      getAccountInfo(this.data.memberId).then((res) => {
        if (res) {
          this.form = res.data;
          this.isModify = true;
        }
      });
    } else {
      this.isModify = false;
      this.form.memberId = this.data.memberId;
      this.form.password = createPassword();
    }
  },
  data() {
    this.thethis = this;
    return {
      isModify: false,
      // 布局
      formLayout,
      // 表单初始格式
      form: {
        id: 0,
        memberId: 0,
        userName: "",
        password: "",
        loginType: undefined,
        status: undefined,
      },
      // 验证规则
      rules: {
        userName: [rules.required, rules.LimitLength(0, 64)],
        password: [rules.required, rules.required, rules.LimitLength(0, 30)],
        loginType: [rules.required],
        status: [rules.required],
      },
    };
  },

  methods: {
    // 重置表单元素
    clearInfo() {
      this.form = {
        id: this.form.id,
        memberId: this.form.memberId,
        userName: "",
        password: "",
        loginType: undefined,
        status: undefined,
      };
    },
    // 关闭
    handcancel,
    // 提交（更改）表单
    on_Submit(type) {
      var that = this;
      // 提示框确认
      this.$refs.ruleForm.validate((valid) => {
        if (valid) {
          that.info = { ...that.form };
          modifyAccount(that.info.memberId, that.info).then((res) => {
            that.$message.success("操作成功");
            that.$emit("refresh");
            that.handcancel(that);
          });
        }
      });
    },
  },
  components: {},
};
</script>
