<template>
  <div>
    <el-dialog
      :visible.sync="dialogVisible"
      width="358px"
      :close-on-click-modal="false"
      :before-close="handleClose"
      :show-close="false"
    >
      <template #title>
        <el-button class="color myBtn" type="text" icon="el-icon-arrow-left" @click="handleClose">返回</el-button>
      </template>
      <el-form ref="findForm" class="findForm" :model="findForm" :rules="rules" label-width="0px" label-position="top">
        <el-form-item label="手机号码" prop="mobile">
          <el-input
            ref="mobile"
            v-model="findForm.mobile"
            placeholder="请输入手机号"
            name="mobile"
            type="text"
            tabindex="1"
            auto-complete="on"
            autocomplete="off"
          />
        </el-form-item>
        <el-form-item label="验证码" prop="codeValue">
          <div class="flex">
            <el-input
              ref="codeValue"
              v-model="findForm.codeValue"
              placeholder="请输入验证码"
              name="codeValue"
              type="text"
              tabindex="2"
              auto-complete="on"
              autocomplete="off"
            />
            <!-- <div >获取验证码</div> -->
            <el-button class="newcode color" type="text" :disabled="countDown != 60" @click="getImgVerifi">{{
              countDown == 60 ? getCodeText : '重新获取(' + countDown + 's)'
            }}</el-button>
          </div>
        </el-form-item>
        <el-form-item label="设置新密码" prop="newPassword">
          <el-input
            ref="newPassword"
            v-model="findForm.newPassword"
            placeholder="设置新密码"
            name="newPassword"
            :type="newPasswordType"
            tabindex="3"
            auto-complete="new-password"
          />
          <span class="newcode" @click="showPwd('newPassword')">
            <svg-icon :icon-class="newPasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <el-form-item label="新密码" prop="verifiPassword">
          <el-input
            ref="verifiPassword"
            v-model="findForm.verifiPassword"
            class="no_autofill_pwd"
            placeholder="请输入新密码"
            name="verifiPassword"
            :type="verifiPasswordType"
            tabindex="4"
            auto-complete="new-password"
          />
          <span class="newcode" @click="showPwd('verifiPassword')">
            <svg-icon :icon-class="verifiPasswordType === 'password' ? 'eye' : 'eye-open'" />
          </span>
        </el-form-item>
        <div style="text-align: center">
          <el-button class="btn" type="primary" @click="handleFindPassword">确定</el-button>
        </div>
      </el-form>
    </el-dialog>
    <el-dialog class="myDia" :visible.sync="isImgVerifi" width="340px" :close-on-click-modal="false">
      <ImgVerifi v-if="isImgVerifi" ref="imgVer" @end="end" />
    </el-dialog>
  </div>
</template>

<script>
import { getAdminUserSmsCode, setPassword } from '@/api/user'
import ImgVerifi from '@/components/tzyz/imgVerifi.vue'
export default {
  components: {
    ImgVerifi
  },
  props: {
    show: {
      type: Boolean,
      default: false,
      require: true
    }
  },
  data() {
    var validatePass = (rule, value, callback) => {
      if (value === '') {
        callback(new Error('请再次输入密码'))
      } else if (value !== this.findForm.newPassword) {
        callback(new Error('两次输入密码不一致!'))
      } else {
        callback()
      }
    }
    return {
      isImgVerifi: false,
      dialogVisible: false,
      getCodeText: '获取验证码',
      countDown: 60,
      timer: null,
      findForm: {
        codeValue: '',
        mobile: '',
        newPassword: '',
        verifiPassword: ''
      },
      key: '',
      long: '',
      code: '',
      rules: {
        mobile: [
          { required: true, message: '请输入手机号', trigger: 'blur' },
          { min: 11, max: 11, message: '输入手机号有误', trigger: 'blur' }
        ],
        codeValue: [
          { required: true, message: '请输验证号', trigger: 'blur' },
          { min: 6, max: 6, message: '输入验证号有误', trigger: 'blur' }
        ],
        newPassword: [
          { required: true, message: '请输入新密码', trigger: 'blur' },
          { min: 6, message: '密码长度最少为6位', trigger: 'blur' }
        ],
        verifiPassword: [{ required: true, validator: validatePass, trigger: 'blur' }]
      },
      newPasswordType: 'password',
      verifiPasswordType: 'password'
    }
  },
  watch: {
    show(val, oval) {
      this.dialogVisible = val
    }
  },
  methods: {
    // 关闭窗口
    handleClose() {
      this.$refs.findForm.resetFields()
      this.$emit('close', !this.dialogVisible)
    },
    // 打开图片验证
    getImgVerifi() {
      if (!this.findForm.mobile) {
        this.$refs.findForm.validateField('mobile')
      } else {
        this.isImgVerifi = true
      }
    },
    // 图片验证
    end({ value, long, success, fail }) {
      this.key = long
      this.long = value.key
      success()
      this.getSmsCode(success)
    },
    // 获取短信验证码
    async getSmsCode(callback) {
      try {
        await getAdminUserSmsCode({
          mobile: this.findForm.mobile,
          codeValue: this.key,
          code: this.long
        })
        callback()
        this.$successMsg('短信已发送')
        this.isDisabled = true
        this.countDown--
        this.timer = setInterval(() => {
          this.countDown--
          if (this.countDown == 0) {
            this.countDown = 60
            this.getCodeText = '重新获取'
            clearInterval(this.timer)
          }
        }, 1000)
        setTimeout(() => {
          this.isImgVerifi = false
        }, 500)
      } catch (error) {
        console.log(error)
        setTimeout(() => {
          this.isImgVerifi = false
        }, 500)
      }
    },
    // 找回密码
    handleFindPassword() {
      this.$refs.findForm.validate(valid => {
        if (valid) {
          setPassword({
            ...this.findForm
          }).then(res => {
            this.$successMsg('设置成功')
            this.handleClose()
          })
        } else {
          console.log('error submit!!')
          return false
        }
      })
    },
    // 显示隐藏密码
    showPwd(value) {
      if (this[value + 'Type'] === 'password') {
        this[value + 'Type'] = ''
      } else {
        this[value + 'Type'] = 'password'
      }
      this.$nextTick(() => {
        this.$refs[value].focus()
      })
    }
  }
}
</script>

<style lang="scss" scoped>
::v-deep input {
  border: none !important;
}
.findForm {
  ::v-deep .el-form-item__content {
    position: relative;
  }
  ::v-deep .el-form-item__label {
    padding: 0;
    line-height: 0;
  }
  ::v-deep .el-input {
    width: 100%;
    height: 28px;
  }
  ::v-deep .el-form-item__content .el-input input {
    padding: 0 !important;
    padding: 0 10px;
    border-bottom: 1px solid rgba(237, 238, 242, 1) !important;
  }
  ::v-deep .el-form-item__content {
    flex-direction: column;
    align-items: normal;
  }
  .newcode {
    position: absolute;
    right: 0;
    // width: 90px;
    cursor: pointer;
  }
}

::v-deep .myDia .el-dialog__header{

  padding: 30px 20px 10px;

}
.color {
  color: #4684f4;
}
.btn {
  width: 100%;
  background: #4684f4;
}
.tip {
  font-size: 12px;
  color: #f00;
}
::v-deep .myBtn{
  padding: 0;
}
</style>
