<template>
<!-- 店铺账号设置 -->
  <div class="con-box">
    <div class="box-tit">{{$t('ucPassword.storeAccountSettings')}}</div>
    <div :class="['box-content','account',this.$store.state.locale == 'en'?'en':'']">

      <!-- 设置店铺账号 -->
      <div class="setup-accout" v-if="!isSetPassword">
        <div :class="['item',errorTips==1? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{$t('ucPassword.loginAccount')}}：
          </div>
          <input type="text" @blur="checkSetInput(1)" class="text" :placeholder="$t('ucPassword.enterNumber')" v-model="dataForm.phoneNumber" />
          <div class="error-text" v-if="errorTips==1">{{$t('ucPassword.enterNumberTips')}}</div>
        </div>
        <div :class="['item',errorTips==2? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{$t('ucPassword.verificationCode')}}：
          </div>
          <div class="validcode-box">
            <div class="code-int-box">
              <input type="text" @blur="checkSetInput(2)" class="code-int" :placeholder="$t('ucPassword.pleaseEnter')" v-model="dataForm.validCode" />
              <div class="send-code" v-if="show" @click="getValidCode">{{$t('ucPassword.getCode')}}</div>
              <div v-if="!show" class="send-code" style="cursor: not-allowed;">{{count}} s</div>
            </div>
          </div>
          <div class="error-text" v-if="errorTips==2">{{$t('ucPassword.CaptchaEmpty')}}</div>
        </div>
        <div :class="['item',errorTips==3? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{$t('ucPassword.setPassword')}}：
          </div>
          <input type="password" @blur="checkSetInput(3)" class="text" :placeholder="$t('ucPassword.setPasswordTips')" v-model="dataForm.password" />
          <div class="error-text" v-if="errorTips==3">{{$t('ucPassword.setPasswordTips')}}</div>
        </div>
        <div :class="['item',errorTips==4 || errorTips==5? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{$t('ucPassword.confirmPassword')}}：
          </div>
          <input type="password" @blur="checkSetInput(4)" class="text" :placeholder="$t('ucPassword.enterLoginAgain')" v-model="dataForm.confirmPassword" />
          <div class="error-text" v-if="errorTips==4">{{$t('ucPassword.enterLoginAgain')}}</div>
          <div class="error-text" v-if="errorTips==5">{{$t('ucPassword.notEnteredPassword')}}</div>
        </div>
      </div>

      <!-- 修改店铺登录密码 -->
      <div class="setup-accout" v-if="isSetPassword">
        <div :class="['item',errorTips==6? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{$t('ucPassword.originalPassword')}}：
          </div>
          <input type="password" @blur="checkChangeInput(6)" class="text" :placeholder="$t('ucPassword.enterOriginalPassword')" v-model="dataForm.oldPassword" />
          <div class="error-text" v-if="errorTips==6">{{$t('ucPassword.originalNotEmpty')}}</div>
        </div>
        <div :class="['item',errorTips==7? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{$t('ucPassword.newPassword')}}：
          </div>
          <input type="password" @blur="checkChangeInput(7)" class="text" :placeholder="$t('ucPassword.PleaseEnterNewPassword')" v-model="dataForm.newPassword" />
          <div class="error-text" v-if="errorTips==7">{{$t('ucPassword.setPasswordTips')}}</div>
        </div>
        <div :class="['item',errorTips==8 || errorTips == 9 ? 'error':'']">
          <div class="tit">
            <span class="asterisk">*</span>{{$t('ucPassword.confirmPassword')}}：
          </div>
          <input type="password" @blur="checkChangeInput(8)" class="text" :placeholder="$t('ucPassword.enterNewAgain')" v-model="dataForm.confirmNewPassword" />
          <div class="error-text" v-if="errorTips==8">{{$t('ucPassword.enterNewAgain')}}</div>
          <div class="error-text" v-if="errorTips==9">{{$t('ucPassword.newNotMatch')}}</div>
        </div>
      </div>
      
      <div class="item">
        <div class="tit">&nbsp;</div>
        <a href="javascript:void(0)" class="btn" @click="preserveInfo()">{{$t('ucPassword.saveAccountInformation')}}</a>
      </div>
      <div class="tips">{{$t('tips')}}：{{$t('ucPassword.passwordTips')}} <a href="http://b2b2c-multishop.gz-yami.com">http://b2b2c-multishop.gz-yami.com</a></div>
    </div>
  </div>
</template>

<script>
import Cookie from 'js-cookie'
import util from '../../plugins/util'
export default {
  data () {
    return {
      dataForm: {
        phoneNumber: '',  //登录手机号
        validCode: '',  //验证码
        password: '',  //登录密码
        confirmPassword: '', //确认密码

        oldPassword: '',  //原登录密码
        newPassword: '',  //新登录密码
        confirmNewPassword: '',  //确认新登录密码
      },
      // 验证码相关
      show: true,
      count: '',
      timer: null,
      hadGotCode: false,  //是否已经点击了获取验证码

      errorTips: 0,
      isSetPassword: (this.$route.query.isSetPassword=='false' || this.$route.query.isSetPassword ==false) ? false : true,  //是否已经设置过密码  true修改密码  false设置密码
    }
  },
  components: {

  },
  mounted () {
    // 设置网页标题
    document.title = this.$i18n.t('userCenter.changeStorePassword')
    // this.auth = { Authorization: Cookie.get('token') }
  },
  methods: {
    /**
     * 输入框失去焦点时
     */
    checkSetInput(sts) {
      // 设置
      if(sts == 1 && (!util.checkPhoneNumber(this.dataForm.phoneNumber))) {
        this.errorTips = 1
      }else if(sts == 2 && (this.dataForm.validCode.length == 0)) {
        this.errorTips = 2
      }else if (sts == 3 && (this.dataForm.password.trim().length < 6 || this.dataForm.password.trim().length > 12)) {
        this.errorTips = 3
      } else if (sts == 4 && (this.dataForm.confirmPassword.length == 0)) {
        this.errorTips = 4
      } else if (sts == 4 && (this.dataForm.confirmPassword != this.dataForm.password)) {
        this.errorTips = 5
      } else {
        this.errorTips = 0
      }
    },
    checkChangeInput(sts) {
      // 修改
      if (sts == 6 && (this.dataForm.oldPassword.length == 0)) {
        this.errorTips = 6
      } else if (sts == 7 && (this.dataForm.newPassword.length == 0)) {
        this.errorTips = 7
      } else if (sts == 8 && (this.dataForm.confirmNewPassword.length == 0)) {
        this.errorTips = 8
      } else if (sts == 8 && (this.dataForm.confirmNewPassword != this.dataForm.newPassword)) {
        this.errorTips = 9
      } else {
        this.errorTips = 0
      }
    },
    /**
     * 获取验证码
     */
    getValidCode () {
      if (!util.checkPhoneNumber(this.dataForm.phoneNumber)) {
        this.errorTips = 1
        return
      }
      if(this.hadGotCode){
        return
      }
      this.errorTips = 0
      let sendSmsParam = {
        mobile: this.dataForm.phoneNumber,
        shopAccount : 1
      }
      this.$axios.post('/p/shop/sendCode', sendSmsParam).then(({ data }) => {
          this.hadGotCode = true
          const timeCount = 60;
          if (!this.timer) {
            this.count = timeCount;
            this.show = false;
            this.timer = setInterval(() => {
              if (this.count > 0 && this.count <= timeCount) {
                this.count--;
              } else {
                this.show = true;
                clearInterval(this.timer);
                this.timer = null;
                this.hadGotCode = false
              }
            }, 1000)
          }
        })
    },

    /**
     * 保存账号信息
     */
    preserveInfo () {
      if(!this.isSetPassword) {  //设置
        this.accountSettingsSubmit()
      }else{
        this.updateShopPassword()
      }
    },



  /**
   * 设置店铺账号
   */
  accountSettingsSubmit () {
    if (!util.checkPhoneNumber(this.dataForm.phoneNumber)){
      this.errorTips = 1
      return
    } else if (this.dataForm.validCode.length == 0) {
      this.errorTips = 2
      return
    } else if (this.dataForm.password.trim().length < 6 || this.dataForm.password.trim().length > 12) {
      this.errorTips = 3
      return
    } else if (this.dataForm.confirmPassword.length == 0) {
      this.errorTips = 4
      return
    } else if (this.dataForm.confirmPassword != this.dataForm.password) {
      this.errorTips = 5
      return
    } else {
      this.errorTips = 0
      var sendSmsParam = {
        username: this.dataForm.phoneNumber.trim(),
        password: this.dataForm.password.trim(),
        code: this.dataForm.validCode.trim()
      }
      this.$axios.post('/p/shop/saveUsernameAndPassword', sendSmsParam)
        .then(({ data }) => {
          this.$message({
            message: this.$i18n.t('ucPassword.AccountSuccessfully'),
            type: 'success'
          });
          this.$router.push({ path: '/user-center' })
          this.$emit('userCenterInfo');
        })
    }
  },


  /**
   * 修改密码
   */
  updateShopPassword: function() {
    if (this.dataForm.oldPassword.length == 0) {
      this.errorTips = 6
      return
    } else if (this.dataForm.newPassword.length == 0) {
      this.errorTips = 7
      return
    } else if (this.dataForm.confirmNewPassword.length == 0) {
      this.errorTips = 8
      return
    } else if (this.dataForm.confirmNewPassword!= this.dataForm.newPassword) {
      this.errorTips = 9
      return
    } else {
      var sendSmsParam = {
        password: this.dataForm.oldPassword,
        newPassword: this.dataForm.newPassword,
      }
      this.$axios.post('/p/shop/updatePassword', sendSmsParam)
        .then(({ data }) => {
          this.$message({
            message: this.$i18n.t('ucPassword.PasswordSuccessfully'),
            type: 'success'
          });
          this.$router.push({ path: '/user-center' })
          this.$emit('userCenterInfo');
        })
    }
  },
    
  }
}
</script>

<style scoped src='~/assets/css/user-center.css'></style>
<style scoped src='~/assets/css/uc-edit.css'></style>
