<template>
  <div v-loading.body.fullscreen="fullscreenLoading" element-loading-background="rgba(255, 255, 255, 0)">
    <!-- 设置交易密码 -->
    <BackBar
      :title="
        userInfo.password_transaction == '1'
          ? $t('setting.ti6')
          : $t('setting.ti7')
      "
    >
    </BackBar>
    <div class="container">
      <el-form class="content" :rules="rules" :model="user" ref="form">
        <el-form-item prop="newPassword">
          <!-- 新交易密码 -->
          <div class="label">{{ $t("setting.pla2") }}</div>
          <payPassword ref="test1" @blur="passwordBlur1" />
        </el-form-item>
        <!-- 验证码 -->
        <el-form-item prop="verifyCode" class="form-item">
          <div class="label" @click="tradeDialog = true">
            {{ type === "手机" ? $t("setting.l13") : $t("setting.l11")
            }}{{ $t("setting.l-code") }}<i class="el-icon-arrow-down"></i>
          </div>
          <div class="row flex">
            <!-- 验证码 -->
            <el-input
              type="number"
              v-model="user.verifyCode"
              @keyup.enter.native="submitClick"
              :placeholder="
                (type === '手机'
                  ? $t('setting.l13')
                  : $t('setting.l11')) + $t('setting.l-code')
              "
            >
            </el-input>
            <div class="send-btn" @click="sendMsg">
              {{ sendText }}{{ isNaN(Number(sendText)) ? "" : "s" }}
            </div>
          </div>
        </el-form-item>
      </el-form>
      <div class="btn-box">
        <div class="submit-btn" @click="submitClick">
          <!-- 确定 -->
          {{ $t('common.l50') }}
        </div>
      </div>
      <div class="chat">
        <!-- *如无法收到验证码,请及时联系 -->
        {{ $t("setting.l23") }}<span class="span" @click="$router.push('/chat')">
          <!-- 在线客服 -->
          {{ $t("tab.tab11") }}
        </span>
      </div>
    </div>
    <!-- 验证码接收方式 -->
    <van-popup round position="bottom" v-model="tradeDialog">
      <div class="pop-title">{{ $t("setting.ti8") }}</div>
      <div class="list">
        <!-- 手机 -->
        <div
          class="item"
          v-if="userInfo.phone"
          @click="
            type = '手机';
            tradeDialog = false;
          "
        >
          {{ $t("setting.l10") }}
          <van-icon name="passed" v-if="type === '手机'" color="#FE6F30" />
        </div>
        <!-- 邮箱 -->
        <div
          class="item"
          v-if="userInfo.email"
          @click="
            type = '邮箱';
            tradeDialog = false;
          "
        >
          {{ $t("setting.l11")}}
          <van-icon name="passed" v-if="type === '邮箱'" color="#FE6F30" />
        </div>
      </div>
    </van-popup>
  </div>
</template>
<script>
import BackBar from "@/components/backBar";
import payPassword from "@/components/pay-password/index";

import { mapGetters } from "vuex";
import { getVerifyCode } from "@/api/login";
import { updateTransactionPassword } from "@/api/user";
export default {
  components: {
    BackBar,
    payPassword,
  },
  computed: {
    ...mapGetters(["userInfo", "language"]),
  },
  data() {
    var validatePass = (rule, value, callback) => {
      var passReg = /^[0-9]{6}$/;
      if (
        rule.field === "oldPassword" &&
        this.userInfo.password_transaction == "0"
      ) {
        callback();
      }
      if (!passReg.test(value) && rule.field !== "verifyCode") {
        // 请输入6位数字
        callback(new Error(this.$t("setting.valid1")));
      }
      if (rule.field === "verifyCode" && value === "") {
        callback(new Error(this.$t("login.empty")));
      }
      callback();
    };
    return {
      user: {
        oldPassword: "",
        verifyCode: "",
        newPassword: "",
      },
      readed: true,
      tradeDialog: false,
      // '发送验证码'
      sendText: this.$t("common.l57"),
      sendDisable: false,
      timer: null,
      type: "手机",
      rules: {
        verifyCode: [{ validator: validatePass, trigger: "blur" }],
        oldPassword: [{ validator: validatePass, trigger: "blur" }],
        newPassword: [{ validator: validatePass, trigger: "blur" }],
      },
    };
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer);
  },
  mounted() {
    this.type = this.userInfo.phone ? "手机" : "邮箱";
  },
  methods: {
    sendMsg() {
      if (this.sendDisable) {
        return;
      }
      getVerifyCode({
        type: this.type == "手机" ? "phone" : "email",
        action: "updateTransactionPassword",
        language: this.language,
        account:
          this.type === "手机" ? this.userInfo.phone : this.userInfo.email,
      })
        .then((res) => {
          this.timerStart();
        })
        .catch(() => {});
    },
    timerStart() {
      this.sendDisable = true;
      this.sendText = 60;
      this.timer = setInterval(() => {
        if (this.sendText <= 1) {
          // '发送'
          this.sendText = this.$t("common.l57");
          this.sendDisable = false;
          clearInterval(this.timer);
          this.timer = null;
        } else {
          this.sendText--;
        }
      }, 1000);
    },
    submitClick() {
      this.$refs["form"].validate((valid) => {
        if (!valid) return false;
        this.updateTransactionPassword();
      });
    },
    passwordBlur() {
      this.user.oldPassword = this.$refs.test.val;
      this.$nextTick(() => {
        this.$refs["form"].validateField("oldPassword");
      });
    },
    passwordBlur1() {
      this.user.newPassword = this.$refs.test1.val;
      this.$nextTick(() => {
        this.$refs["form"].validateField("newPassword");
      });
    },
    updateTransactionPassword() {
      var data = {
        password: this.user.newPassword,
        verifyCode: this.user.verifyCode,
      };
      this.fullscreenLoading = true
      updateTransactionPassword(data)
        .then((res) => {
          this.$notify({
            message: this.$t("setting.alter3"),
            type: "success",
          });
          this.$store.dispatch("getUserInfo");
          this.$router.back();
        })
        .catch(() => {})
        .finally(() => {
          this.fullscreenLoading = false;
        });
    },
  },
};
</script>
<style lang="less" scoped>
.container {
  padding: 20px 17px;
}
.row {
  .el-input {
    flex: 1;
    min-width: 10%;
    max-width: 100%;
  }
  .send-btn {
    line-height: 36px;
    min-width: 73px;
    padding: 0 4px;
    text-align: center;
    font-weight: 600;
    color: var(--color-);
    border-radius: 6px;
    border: 1px solid #dddddd;
    cursor: pointer;
  }
}
.chat {
  text-align: center;
  color: #c0c0c0;
  font-size: 12px;
  .span {
    color: var(--color-);
    cursor: pointer;
  }
}
.label {
  font-size: 18px;
  font-weight: 600;
  color: #1b1b1b;
  line-height: 1;
  margin-bottom: 3px;
}
.btn-box {
  padding-top: 12px;
  padding-bottom: 25px;
}
.submit-btn {
  line-height: 44px;
  text-align: center;
  border-radius: 6px;
  background: var(--color-);
  font-size: 16px;
  color: #fff;
}
.form-item {
  border-bottom: 1px solid #ededed;
}
/deep/ .el-form-item {
  margin-bottom: 28px;
  .el-input__inner {
    padding: 0;
    border: none;
    height: 54px;
    font-size: 16px;
    line-height: 52px;
  }
}
.name {
  font-size: 14px;
  line-height: 1;
  color: rgb(24, 25, 30);
  font-weight: 500;
  margin-bottom: 15px;
}
.verify-code {
  font-size: 14px;
  line-height: 1;
  margin-bottom: 15px;
  color: rgb(24, 25, 30);
  cursor: pointer;
  font-weight: 500;
  .el-icon-arrow-down {
    margin-left: 4px;
  }
}
.pop-title {
  padding: 20px 15px 10px;
  font-size: 18px;
  line-height: 24px;
  text-align: center;
}
.list {
  padding: 0 15px 20px;
  .item {
    height: 46px;
    font-size: 16px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .el-icon-check {
      color: var(--color-);
      font-size: 20px;
      font-weight: bold;
    }
  }
}
</style>