<template>
  <view class="resetPassword">
    <u-navbar
      leftIconColor="#eee"
      :title="$lang.reset + $lang.password"
      bgColor="#0c0c0d"
      :placeholder="true"
      :fixed="true"
      height="60"
      @leftClick="back"
    >
    </u-navbar>

    <view class="content">
      <view class="logo">
        <u--image
          :showLoading="false"
          :src="require('static/images/ez-logo-login.png')"
          width="125px"
          height="119px"
          mode="scaleToFill"
        ></u--image>
      </view>
      <u-input
        class="input"
        v-model="password_now"
        :password="true"
        :placeholder="$lang.enterNowPassword"
      >
        <text class="text" slot="prefix">{{ $lang.nowPassword }}</text>
      </u-input>
      <u-input
        class="input"
        v-model="password_new"
        :password="true"
        :placeholder="$lang.enterNewPassword"
      >
        <text class="text" slot="prefix">{{ $lang.nwwPassword }}</text>
      </u-input>
      <u-input
        class="input"
        v-model="password_reply"
        :password="true"
        :placeholder="$lang.enterPasswordAgain"
      >
        <text class="text" slot="prefix">{{ $lang.confirmPassword }}</text>
      </u-input>
      <view class="btn-box">
        <view class="btn" @tap="reset()">{{ $lang.reset }}</view>
      </view>
    </view>
  </view>
</template>

<script>
import { mapState } from "vuex";
export default {
  data() {
    return {
      password_now: "",
      password_new: "",
      password_reply: "",
    };
  },
  computed: {
    ...mapState({
      userInfo: (state) => state.app.userInfo,
      $lang: (state) => state.app.lang[state.app.language],
    }),
  },
  onLoad() {},
  methods: {
    back() {
      uni.navigateBack();
    },
    reset() {
      const params = {
        password_now: this.password_now,
        password_new: this.password_new,
        password_reply: this.password_reply,
        user_id: this.userInfo.id,
        api_token: this.userInfo.api_token,
      };
      if (!params.password_now) {
        this.$toast({
          message: this.$lang.enterNowPassword,
          duration: 2000,
        });
      } else if (!params.password_new) {
        this.$toast({
          message: this.$lang.enterNewPassword,
          duration: 2000,
        });
      } else if (!params.password_reply) {
        this.$toast({
          message: this.$lang.enterPasswordAgain,
          duration: 2000,
        });
      } else {
        this.$toast({
          type: "loading",
          message: `${this.$lang.submit}...`,
          duration: 200000,
        });
        this.$api
          .updatePassword(params)
          .then((res) => {
            if (res.Success == 1) {
              this.$toast({
                type: "success",
                title: res.Msg,
                duration: 2000,
              });
            } else {
              this.$toast({
                title: res.Msg,
                duration: 2000,
              });
            }
          })
          .catch((err) => {
            console.log(err);
          })
          .finally(() => {
            this.$toastHide();
          });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
.resetPassword {
  /deep/.u-navbar__content__title {
    color: #eee;
    font-weight: 600;
  }
  .content {
    width: 280px;
    padding-bottom: 50px;
    margin: 0 auto;
    .logo {
      display: flex;
      align-items: center;
      justify-content: center;
      margin-bottom: 20px;
      margin-top: 20%;
    }
    .input {
      height: 30px;
      line-height: 30px;
      margin-bottom: 15px;
      background: #fff;
      border-radius: 8px;
      overflow: hidden;
    }
    .phone-code {
      min-width: 50px;
      text-align: center;
      border-right: 1px solid #ddd;
    }
    .text {
      padding-right: 5px;
    }
    .btn-box {
      margin-top: 20px;
      .btn {
        width: 100%;
        height: 48px;
        line-height: 48px;
        text-align: center;
        font-size: 16px;
        background: url("~@/static/images/btn_bg.png") no-repeat;
        background-size: 100% 100%;
        font-weight: 600;
        margin-top: 15px;
        &:active {
          opacity: 0.8;
        }
      }
    }
  }
}
</style>
