<template>
  <div class="container1">
    <div class="title">
      <!-- 安全验证 -->
      {{ $t('setting.l24') }}
      <van-icon @click="cancel" name="cross" />
    </div>
    <el-form class="trade" :rules="rules" :model="form" ref="trade">
      <el-form-item prop="phoneCode" v-if="getPhoneVerifyCodeSign">
        <div class="row send-box" :class="sendDisable && 'disabled'">
          <label for="">{{$t('password.lab1')}}</label>
          <el-input type="number" v-model="form.phoneCode" :placeholder="$t('password.lab2')">
            <template slot="append">
              <div class="send-btn" @click="sendMsg(false)">{{ sendText }}{{isNaN(Number(sendText)) ? '' : 's'}}</div>
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item prop="emailCode" v-if="getEmailVerifyCodeSign">
        <div class="row send-box" :class="sendDisable1 && 'disabled'">
          <label for="">{{$t('password.lab3')}}</label>
          <el-input type="number" v-model="form.emailCode" :placeholder="$t('password.lab2')">
            <template slot="append">
              <div class="send-btn" @click="sendMsg1(false)">{{ sendText1 }}{{isNaN(Number(sendText1)) ? '' : 's'}}</div>
            </template>
          </el-input>
        </div>
      </el-form-item>
      <el-form-item prop="password" v-if="passwordSign">
        <label for="">
          <!-- 交易密码 -->
          {{ $t('setting.l5') }}
        </label>
        <div>
          <payPassword ref="test" @blur="passwordBlur"/>
        </div>
      </el-form-item>
    </el-form>
    <div class="btn-box">
      <div class="submit-btn" :loading="loading" @click="submit">
        <!-- 确认 -->
        {{ $t('common.l3') }}
      </div>
    </div>
    <div class="forget">
      <span @click="$router.replace('/update/reset-deal-password')">{{$t('setting.btn6')}}</span>
    </div>
  </div>
</template>
<script>
import { getVerifyCode } from '@/api/login'
import { mapGetters } from 'vuex'
import payPassword from '../pay-password/index'
export default {
  components: {
    payPassword,
  },
  props: {
    getPhoneVerifyCodeSign: {
      default: false,
    },
    getEmailVerifyCodeSign: {
      default: false,
    },
    passwordSign: {
      default: true,
    },
    action: {
      default: '',
    },
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (rule.field == 'password') {
        if (value.trim().length < 6) {
          callback(new Error(this.$t('setting.valid1')))
        } else {
          callback()
        }
      }
      if (this.getPhoneVerifyCodeSign && rule.field == 'phoneCode') {
        if (value.trim() === '') {
          callback(new Error(this.$t('login.empty')))
        }
      }
      if (this.getEmailVerifyCodeSign && rule.field == 'emailCode') {
        if (value.trim() === '') {
          callback(new Error(this.$t('login.empty')))
        }
      }
      callback()
    }
    return {
      form: {
        password: '',
        phoneCode: '',
        emailCode: '',
      },
      timer: null,
      timer1: null,
      loading: false,
      sendDisable: false,
      sendDisable1: false,
      sendText: this.$t('register.send'),
      sendText1: this.$t('register.send'),
      rules: {
        password: [
          { validator: validatePass, trigger: 'blur' },
        ],
        emailCode: [
          { validator: validatePass, trigger: 'blur' },
        ],
        phoneCode: [
          { validator: validatePass, trigger: 'blur' },
        ],
      },
    }
  },
  computed: {
    ...mapGetters(['userInfo', 'language']),
    readed() {
      return this.getPhoneVerifyCodeSign || this.getEmailVerifyCodeSign
    },
    getAllCode() {
      return (this.getPhoneVerifyCodeSign && this.getEmailVerifyCodeSign) ? 'all' : ''
    }
  },
  beforeDestroy() {
    this.timer && clearInterval(this.timer)
    this.timer1 && clearInterval(this.timer1)
  },
  methods: {
    sendMsg(sign) {
      if (this.sendDisable) {
        return
      }
      if (this.getAllCode && !sign) {
        this.sendMsg1(true)
      }
      getVerifyCode({
        type: 'phone',
        account: this.userInfo.phone,
        action: this.action,
        language: this.language
      }).then((res) => {
        this.timerStart()
      }).catch(() => {
      })
    },
    sendMsg1(sign) {
      if (this.sendDisable1) {
        return
      }
      if (this.getAllCode && !sign) {
        this.sendMsg(true)
      }
      getVerifyCode({
        type: 'email',
        account: this.userInfo.email,
        action: this.action,
        language: this.language
      }).then((res) => {
        this.timerStart1()
      }).catch(() => {
      })
    },
    timerStart1() {
      this.sendDisable1 = true
      this.sendText1 = 60
      this.timer1 = setInterval(() => {
        if (this.sendText1 <= 1) {
          this.sendText1 = this.$t('register.send')
          this.sendDisable1 = false
          clearInterval(this.timer1)
          this.timer1 = null
        } else {
          this.sendText1--
        }
      }, 1000)
    },
    timerStart() {
      this.sendDisable = true
      this.sendText = 60
      this.timer = setInterval(() => {
        if (this.sendText <= 1) {
          this.sendText = this.$t('register.send')
          this.sendDisable = false
          clearInterval(this.timer)
          this.timer = null
        } else {
          this.sendText--
        }
      }, 1000)
    },
    submit() {
      if (this.passwordSign) {
        this.form.password = this.$refs.test.val
      }
      this.$refs['trade'].validate((valid) => {
        if (valid) {
          this.$emit('success', this.form)
        } else {
          return false
        }
      })
    },
    passwordBlur() {
      this.form.password = this.$refs.test.val
      this.$nextTick(() => {
        this.$refs['trade'].validateField('password')
      })
    },
    cancel() {
      this.$emit('cancel')
    }
  },
}
</script>
<style lang="less" scoped>
.container1 {
  padding: 0 20px;
  min-height: 100vh;
}
.title {
  font-size: 16px;
  text-align: center;
  line-height: 50px;
  font-weight: 600;
  position: relative;
  .van-icon {
    position: absolute;
    right: 0;
    top: 50%;
    transform: translateY(-50%);
  }
}
.submit-btn {
  line-height: 50px;
  text-align: center;
  border-radius: 4px;
  background: var(--color-);
  margin-top: 25px;
  font-size: 18px;
  color: #fff;
  cursor: pointer;
}

.forget {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  font-size: 13px;
  line-height: 16px;
  color: #68727e;
  margin-top: 12px;
  span {
    cursor: pointer;
  }
}


/deep/ .el-form-item {
  label {
    margin-bottom: 4px;
    display: inline-block;
    color: var(--font-color1-);
  }
  .el-form-item__content {
    line-height: 18px;
  }
  .send-box {
    &.disabled {
      .el-input-group__append {
        background-color: #F4F8F9;
      }
      .send-btn {
        background-color: #F4F8F9;
        color: #7C7C7C;
      }
    }
    .el-input-group__append {
      width: 130px;
      background-color: var(--color-green-);
      border-radius: 4px;
    }
    .send-btn {
      color: #fff;
      background-color: var(--color-green-);
      font-size: 16px;
      text-align: center;
    }
  }
}
</style>