<template>
  <el-tabs v-model="activeName">
    <el-tab-pane label="修改密码" name="first">
      <div style="width:500px;">
      <el-form ref="ruleForm" :model="ruleForm" :rules="rules" label-width="200px" class="ruleForm">
        <el-form-item label="用户名">
          <span>{{ merchantsName }}</span>
        </el-form-item>
        <!-- <el-form-item label="旧密码" prop="oldPassword">
          <el-input v-model="ruleForm.oldPassword" />
        </el-form-item> -->
         <el-tooltip v-model="capsTooltip0" content="大写锁定已打开" placement="right-end" manual effect="dark">
          <el-form-item label="旧密码" prop="oldPassword">
              <el-input
                :key="passwordType0"
                ref="password0"
                v-model="ruleForm.oldPassword"
                :type="passwordType0"
                placeholder="请输入旧密码"
                name="password0"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock($event,0)"
                @blur="capsTooltip0 = false"
                maxlength="16"
                @keyup.enter.native="submitForm('ruleForm')"
              />
              <span class="show-pwd" @click="showPwd(0)">
                <svg-icon :icon-class="passwordType0 === 'password' ? 'eye' : 'eye-open'" />
              </span>
          </el-form-item>
        </el-tooltip>


        <!-- <el-form-item label="新密码" prop="newPassword">
          <el-input v-model="ruleForm.newPassword" />
        </el-form-item> -->
        <el-tooltip v-model="capsTooltip1" content="大写锁定已打开" placement="right-end" manual effect="dark">
          <el-form-item label="新密码" prop="newPassword">
              <el-input
                :key="passwordType1"
                ref="password1"
                v-model="ruleForm.newPassword"
                :type="passwordType1"
                placeholder="请输入新密码"
                name="password1"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock($event,1)"
                @blur="capsTooltip1 = false"
                maxlength="16"
                @keyup.enter.native="submitForm('ruleForm')"
              />
              <span class="show-pwd" @click="showPwd(1)">
                <svg-icon :icon-class="passwordType1 === 'password' ? 'eye' : 'eye-open'" />
              </span>
          </el-form-item>
        </el-tooltip>

        <!-- <el-form-item label="确认密码" prop="newPassword1">
          <el-input v-model="ruleForm.newPassword1" />
        </el-form-item> -->
        <el-tooltip v-model="capsTooltip2" content="大写锁定已打开" placement="right-end" manual effect="dark">
          <el-form-item label="确认密码" prop="newPassword1">
              <el-input
                :key="passwordType2"
                ref="password2"
                v-model="ruleForm.newPassword1"
                :type="passwordType2"
                placeholder="请输入确认密码"
                name="password2"
                tabindex="2"
                autocomplete="on"
                @keyup.native="checkCapslock($event,2)"
                @blur="capsTooltip2 = false"
                maxlength="16"
                @keyup.enter.native="submitForm('ruleForm')"
              />
              <span class="show-pwd" @click="showPwd(2)">
                <svg-icon :icon-class="passwordType2 === 'password' ? 'eye' : 'eye-open'" />
              </span>
          </el-form-item>
        </el-tooltip>
        <el-form-item>
          <el-button
            :loading="loading"
            class="login-btn"
            type="primary"
            @click.native.prevent="submitForm('ruleForm')"
          >
            确定
          </el-button>
        </el-form-item>
      </el-form>
      </div>
    </el-tab-pane>
  </el-tabs>
</template>
<script>
import { isPassword } from '@/utils/validate'
import { mapGetters } from 'vuex'
export default {
  data() {
    const validateoldpaw = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码格式由字母、数字和下划线组成，长度为6-16位'))
      } else {
        callback()
      }
    }
    const validatenewpaw = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码格式由字母、数字和下划线组成，长度为6-16位'))
      } else {
        callback()
      }
    }
    const validateoldpaw1 = (rule, value, callback) => {
      if (!isPassword(value)) {
        callback(new Error('密码格式由字母、数字和下划线组成，长度为6-16位'))
      } else if (this.ruleForm.newPassword !== this.ruleForm.newPassword1) {
        callback(new Error('两个密码不一致'))
      } else {
        callback()
      }
    }
    return {
      activeName: 'first',
      loading: false,
      name: '',
      ruleForm: {
        merchantsAdminId: '',
        oldPassword: '',
        newPassword: '',
        newPassword1: ''
      },
      passwordType0: 'password',
      capsTooltip0: false,
      passwordType1: 'password',
      capsTooltip1: false,
      passwordType2: 'password',
      capsTooltip2: false,
      rules: {
        oldPassword: [
          { required: true, trigger: 'blur', validator: validateoldpaw }
        ],
        newPassword: [
          { required: true, trigger: 'blur', validator: validatenewpaw }
        ],
        newPassword1: [
          { required: true, trigger: 'blur', validator: validateoldpaw1 }
        ]
      }
    }
  },
  computed: {
    ...mapGetters(['merchantsName', 'merchantsAdminId'])
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        if (valid) {
          this.loading = true
          this.changePassword()
        } else {
          this.loading = false
          return false
        }
      })
    },
    checkCapslock(e,type) {
      const { key } = e
      this[`capsTooltip${type}`] = key && key.length === 1 && (key >= 'A' && key <= 'Z')
      console.log(this[`capsTooltip${type}`])
    },
    showPwd(i) {
      this[`passwordType${i}`]= this[`passwordType${i}`]==='password'?'':'password'
      this.$nextTick(() => {
         this.$refs[`password${i}`].focus()
      })
    },
    changePassword() {
      const params = Object.assign({}, {
        type: 'modiPassword',
        data: {
          merchantsAdminId: this.merchantsAdminId,
          oldPassword: this.ruleForm.oldPassword,
          newPassword: this.ruleForm.newPassword
        }
      })
      this.$store
        .dispatch('user/changepaw', params)
        .then((response) => {
          if (!response) {
            sessionStorage.removeItem('merchantsId')
            sessionStorage.removeItem('userName')
            this.$message({
              type: 'success',
              message: '修改密码成功,请重新登录!'
            })
            setTimeout(() => {
              this.listLoading = false
              this.$router.push({ path: '/login' })
            }, 500)
            
          //  this.$baseMessage('修改成功', 'success')
            // setTimeout(() => {
            //   this.$router.push({ path: '/' })
            // }, 1000)
            //  setTimeout(() => {
            //     this.listLoading = false
            //     this.$router.push({ path: '/login' })
            //   }, 500)
          }
          this.loading = false
        })
        .catch(() => {
          this.loading = false
        })
    }
  }
}
</script>
<style lang="scss" scoped>
::v-deep{
  .el-form-item__content{
    display: flex;
    .el-input{
    flex: 1!important;
    }
  }
}
.show-pwd{
      position: absolute;
      top: 0px;
      right: 15px;
      z-index:999;
      font-size: 16px;
      color: #d7dee3;
      cursor: pointer;
      user-select: none;
    }
</style>
