<template>
  <v-page>
    <v-header class="nav-tab" :title="$t('safe.b0')">
        <template #right>
            <view class="per-bot p-y-md p-x-sm d-flex align-center">
              <!-- <img :src="$localImgUrl('Page6.png')" alt="" class="h-20 m-r-xs" /> -->
              <span class="color-light">
                <v-lang
                  @change="changeLang"
                ></v-lang>
                <i class="iconfont m-l-xs fn-sm">&#xe6e9;</i>
              </span>
            </view>
        </template>
    </v-header>
    <!-- <v-header :title="$t('safe.b0')"></v-header> -->
    <main class="layout-main" style="background-color: #121212;padding-top: 30rpx;">
      <view class="m-md overflow-hidden">
				<view class="d-flex m-b-lg">
				  <view class="item transition-3 fn-26 color-light">{{$t('safe.e5')}}
					</view>
				</view>
        <view class="form-item m-b-lg p-b-xs color-light">
          <view class="label m-b-xs">{{$t('safe.a2')}}</view>
          <view class="input">
            <v-input v-model="form.account" :placeholder="`${$t('safe.a4')}`" @blur="checkAccount"></v-input>
          </view>
        </view>
        <view class="form-item m-b-lg p-b-xs color-light">
          <view class="label m-b-xs">{{$t('safe.b3')}}</view>
          <view class="input">
            <v-input type="password" v-model="form.password" :placeholder="$t('safe.b4')"></v-input>
          </view>
        </view>
        <view class="form-item m-b-lg p-b-xs color-light">
          <view class="label m-b-xs">{{$t('safe.b5')}}</view>
          <view class="input">
            <v-input type="password" v-model="form.password_confirmation" :placeholder="$t('safe.b6')"></v-input>
          </view>
        </view>
				<!--图形验证码-->
				<view class="form-item m-b-lg p-b-xs color-light">
					<view class="label m-b-xs">{{$t('common.GraphicValidation')}}</view>
					<v-input class="" v-model="form.gc_code" :placeholder="$t('common.GraphicValidation')">
						<template #right>
							<img :src="Graph_che" @click="gett_gc_code" v-if="!hideImg" style="margin-left: 20rpx;">
						</template>
					</v-input>
				</view>
        <view class="form-item m-b-lg p-b-xs" v-if="checkData.phone_status==1&&show">
          <view class="label m-b-xs">SMS{{$t('safe.a7')}}</view>
          <view class="input color-light">
            <v-input v-model="form.sms_code" :placeholder="$t('safe.a6')">
              <template #right>
                <v-code
                  url="/user/sendSmsCodeForgetPassword"
                  :data="{country_code:checkData.country_code,phone:form.account}"
                ></v-code>
              </template>
            </v-input>
          </view>
        </view>
        <view class="form-item m-b-lg p-b-xs color-light" v-if="checkData.email_status==1||1">
          <view class="label m-b-xs">{{$t('safe.a5')}}</view>
          <view class="input">
            <v-input v-model="form.email_code" :placeholder="$t('safe.a6')">
              <template #right>
                <v-code url="/user/sendEmailCodeForgetPassword" :data="{email:form.account,gc_code: form.gc_code, gc_key: form.gc_key}"
									@reGetGraphChe="reGetGraphChe"></v-code>
              </template>
            </v-input>
          </view>
        </view>
        <view class="form-item m-b-lg p-b-xs" v-if="checkData.google_status==1">
          <view class="label m-b-xs">google{{$t('safe.a7')}}</view>
          <view class="input color-light">
            <v-input v-model="form.google_code" :placeholder="$t('safe.a6')"></v-input>
          </view>
        </view>
      </view>
			<view class="p-md">
			  <v-button class="w-max rounded-lg" block ref="btn" type="white" @click="submit">{{$t('common.submit')}}</v-button>
			</view>
			<view class="">
				
			</view>
			<view class="m-x-lg p-x-lg">
			  <view class="p-b-xl fn-center p-t-xs">
					{{$t('safe.Remembered')}}
			    <v-link class="color-light" to="/pages/login/index">{{$t('login.a4')}}</v-link>
			  </view>
			</view>
    </main>
    
    <van-toast id="van-toast" />
  </v-page>
</template>
<script>
import Setting from "@/api/setting";
import Member from "@/api/member";
export default {
  data() {
    return {
      country_id: 1,
      form: {
        account: "",
        sms_code: "",
        email_code: "",
        google_code: "",
        password: "",
        password_confirmation: "",
        show:false,
				gc_code: '',
				gc_key: '',// tuxiangyanzheng key
      },
      checkData: {},
			Graph_che:'',
			hideImg: false
    };
  },
  computed: {
  },
  watch:{
      'form.account':{
           handler(newVal){
              if(newVal.indexOf('@')!=-1){
                  this.show=false
              }else{
                  this.show=true
              }
          },
      }
  },
  methods: {
    checkAccount() {
      Setting.forgetPasswordAttempt({ account: this.form.account })
        .then((res) => {
          this.checkData = res.data;
        })
        .catch(() => {
          this.checkData = {};
          if (this.form.account) {
            this.$toast(this.$t('safe.b8'));
          }
        });
    },
    submit() {
        if(this.form.account==''){
            this.$toast(this.$t('safe.b2')+'/'+this.$t('safe.a3'))
            return
        }
        if(this.form.password==''){
            this.$toast(this.$t('safe.b4'))
            return
        }
        if(this.form.password_confirmation==''){
            this.$toast(this.$t('safe.b6'))
            return
        }
      Setting.forgetPassword(this.form, { btn: this.$refs.btn })
        .then((res) => {
          if(res.code==200){
						this.$back();
					}else{
						this.reGetGraphChe();
					}
        })
        .catch(() => {
					this.reGetGraphChe();
				});
    },
		// 重新请求图形验证码
		reGetGraphChe(){
			this.hideImg = true;
			this.gett_gc_code();
		},
		gett_gc_code(){
			Member.Graph_che().then((res)=>{
				if(res.code==200){
					this.hideImg = false;
				}
			  console.log("gc",res.data.img)
			  this.Graph_che = res.data.img;
			  this.form.gc_key= res.data.key;
			});
		},
		changeLang(){
			
		}
  },
	mounted() {
    this.gett_gc_code();
  },
};
</script>
<style lang="scss" scoped>
</style>