<template>
  <div class="trial-myinfo-right">
    <div class="trial-myinfo-right-box">
      <div class="trial-myinfo-head">
        <!-- 账号信息 -->
        {{ $t("trials:trials-myinfo:title:accountInfo") }}
      </div>
      <el-form label-position="right" label-width="100px">
        <!-- 用户名 -->
        <el-form-item
          :label="$t('trials:trials-myinfo:form:userName')"
          style="margin-bottom: 5px"
          prop="UserName"
        >
          <span>{{ user.UserName }}</span>
        </el-form-item>
        <el-form-item label="" style="position: relative" prop="UserName">
          <el-input
            v-model="userForm.UserName"
            :placeholder="$t('trials:trials-myinfo:form:userName')"
          />
          <!-- 修改 -->
          <el-button
            :disabled="!userForm.UserName"
            class="saveBtn"
            type="primary"
            size="small"
            @click="setNewUserName"
          >
            {{ $t("trials:trials-myinfo:button:update") }}
          </el-button>
        </el-form-item>
        <!-- 校验码 -->
        <el-form-item
          :label="$t('trials:researchForm:form:checkCode')"
          style="margin-bottom: 5px"
          prop="CheckCode"
        >
          <!-- <span>{{ user.UserName }}</span> -->
        </el-form-item>
        <el-form-item label="" style="position: relative" prop="CheckCode">
          <el-input
            v-model="userForm.CheckCode"
            :placeholder="$t('trials:researchForm:form:checkCode')"
            :maxlength="10"
            type="number"
          />
          <!-- 修改 -->
          <el-button
            :disabled="!userForm.CheckCode"
            class="saveBtn"
            type="primary"
            size="small"
            @click.stop="setNewUserCheckCode"
          >
            {{ $t("trials:trials-myinfo:button:update") }}
          </el-button>
        </el-form-item>
        <!-- 电话 -->
        <el-form-item
          :label="$t('trials:trials-myinfo:form:phone')"
          style="margin-bottom: 5px"
          prop="UserName"
        >
          <span>{{ user.Phone }}</span>
        </el-form-item>
        <el-form-item label="" style="position: relative" prop="UserName">
          <el-input
            v-model="userForm.Phone"
            :placeholder="$t('trials:trials-myinfo:form:phone')"
          />
          <!-- 修改 -->
          <el-button
            :disabled="!userForm.Phone"
            class="saveBtn"
            type="primary"
            size="small"
            @click="setNewPhone"
          >
            {{ $t("trials:trials-myinfo:button:update") }}
          </el-button>
        </el-form-item>
        <!-- 邮箱 -->
        <el-form-item
          :label="$t('trials:trials-myinfo:form:email')"
          style="margin-bottom: 5px"
          prop="UserName"
        >
          <span>{{ user.EMail }}</span>
        </el-form-item>
        <el-form-item
          label=""
          style="margin-bottom: 10px; position: relative"
          prop="EMail"
          v-if="IsCanConnectInternet"
        >
          <el-input
            v-model="userForm.EMail"
            @input="handleEmailChange"
            :placeholder="$t('trials:trials-myinfo:form:email')"
          />
          <el-button
            class="sendCode"
            :disabled="sendDisabled"
            type="primary"
            size="mini"
            @click="sendVerificationCode"
            >{{ sendTitle }}</el-button
          >
        </el-form-item>
        <el-form-item
          label=""
          style="position: relative"
          prop="VerificationCode"
          v-if="IsCanConnectInternet"
        >
          <el-input
            v-model="userForm.VerificationCode"
            :placeholder="$t('trials:researchForm:form:verifyCode')"
          />
          <!-- 修改 -->
          <el-button
            :disabled="
              !userForm.EMail || !userForm.VerificationCode || sendDisabled
            "
            class="saveBtn"
            type="primary"
            size="small"
            @click="setNewEmail"
          >
            {{ $t("trials:trials-myinfo:button:update") }}
          </el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>
<script>
import {
  sendVerificationCode,
  setNewEmail,
  setNewPhone,
  setNewUserName,
  SetNewCheckCode,
} from "@/api/system/user.js";
var timer = "";
var countdown = 60;
export default {
  name: "account",
  props: {
    user: {
      required: true,
      default: () => {
        return {};
      },
    },
    IsCanConnectInternet: {
      required: true,
      default: true,
    },
  },
  data() {
    return {
      userForm: {},
      sendDisabled: true,
      sendTitle: this.$t("trials:trials-myinfo:button:getVCode"),
    };
  },
  methods: {
    // 修改校验码
    async setNewUserCheckCode() {
      try {
        let res = await SetNewCheckCode(this.userForm.CheckCode);
        if (res.IsSuccess) {
          this.userForm.CheckCode = "";
          this.$message.success(
            this.$t("trials:trials-myinfo:message:updateSuccessfully")
          );
          this.$emit("getUserInfo");
        }
      } catch (err) {
        console.log(err);
      }
    },
    setNewEmail() {
      setNewEmail(this.userForm.EMail, this.userForm.VerificationCode).then(
        () => {
          this.userForm.EMail = "";
          this.userForm.VerificationCode = "";
          this.$message.success(
            this.$t("trials:trials-myinfo:message:updateSuccessfully")
          );
          this.$emit("getUserInfo");
        }
      );
    },
    setNewUserName() {
      setNewUserName(this.userForm.UserName).then(() => {
        this.userForm.UserName = "";
        this.$message.success(
          this.$t("trials:trials-myinfo:message:updateSuccessfully")
        );
        this.$emit("getUserInfo");
        this.logout();
      });
    },
    setNewPhone() {
      setNewPhone(this.userForm.Phone).then(() => {
        this.userForm.Phone = "";
        this.$message.success(
          this.$t("trials:trials-myinfo:message:updateSuccessfully")
        );
        this.$emit("getUserInfo");
      });
    },
    handleEmailChange() {
      var reg =
        /^[A-Za-z0-9]+([_\.][A-Za-z0-9]+)*@([A-Za-z0-9\-]+\.)+[A-Za-z]{2,6}$/;
      if (this.userForm.EMail && reg.test(this.userForm.EMail)) {
        this.sendDisabled = false;
      } else {
        this.sendDisabled = true;
      }
    },
    sendVerificationCode() {
      sendVerificationCode(this.userForm.EMail).then(() => {
        this.settime(this);
        // 发送成功
        this.$message.success(
          this.$t("trials:trials-myinfo:message:sendSuccessfully")
        );
      });
    },
    settime(obj) {
      if (countdown === 0) {
        obj.sendDisabled = false;
        obj.sendTitle = this.$t("trials:trials-myinfo:button:getVCode"); // '获取验证码'
        countdown = 60;
        clearTimeout(timer);
        return;
      } else {
        obj.sendDisabled = true;
        obj.sendTitle = `${this.$t(
          "trials:trials-myinfo:button:wait"
        )}(${countdown}s)`;
        countdown--;
        // eslint-disable-next-line no-self-assign
        countdown = countdown;
        timer = setTimeout(function () {
          obj.settime(obj);
        }, 1000);
      }
    },
    async logout() {
      /* eslint-disable */
      var loginType = zzSessionStorage.getItem("loginType");
      await this.$store.dispatch("user/logout");
      if (loginType) {
        this.$router.push(`/login?loginType=${loginType}`);
      } else {
        this.$router.push(`/login`);
      }
      this.$i18n.locale = "zh";
      this.setLanguage("zh");
      this.$updateDictionary();
    },
  },
};
</script>