<template>
  <!--<div class="app-botton" @click="back()">-->
  <!--<span class="glyphicon glyphicon-menu-left">返回</span>-->
  <!--</div>-->
  <div class="auto">
    <div class="row app-row">
      <div class="col-xs-4">
        <img src="../assets/姓名.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">账号</span>
      </div>
      <div class="col-xs-8 input-font">
        <input type="text" class="search_input input-font" v-model="model.ename" readonly/>
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4" style="margin-top: 8px">
        <img src="../assets/原始密码.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">原始密码</span>
      </div>
      <div class="col-xs-8">
        <input type="password" id="oldpassword" class="search_input input-font" v-model="model.oldpassword"
               placeholder="请输入原始密码"/>
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4" style="margin-top: 8px">
        <img src="../assets/密码.png" style="width: 20px;margin-bottom: 5px">
        <span class="text-left font">新密码</span>
      </div>
      <div class="col-xs-8">
        <input type="password" id="newpassword1" class="search_input input-font" v-model="model.password"
               :placeholder="weakPassword?'需要包含大小写字母符号数字':'请输入新密码'"/>
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4" style="margin-top: 8px">
        <img src="../assets/密码.png" style="width: 20px;margin-bottom: 5px" alt="">
        <span class="text-left font">确认密码</span>
      </div>
      <div class="col-xs-8">
        <input type="password" id="newpassword2" class="search_input input-font" v-model="model.newpassword"
               placeholder="请重新输入新密码"/>
      </div>
    </div>
    <div class="row app-row">
      <div class="col-xs-4" style="margin-top: 8px">
        <img src="../assets/选中.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="showpass" @click="showoff()">
        <img src="../assets/未选.png" style="width: 20px;margin-bottom: 5px" alt="" v-if="!showpass" @click="showon()">
        <span class="text-left font">显示密码</span>
      </div>
    </div>
    <div class="row app-row text-center">
      <button type="button" class="btn btn-lg btn-font btn-color" style="width: 45%;" @click="save()">提交</button>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'

let asyncCheck = async function (self, url) {
  try {
    let that = self
    let user = {
      ename: that.model.ename,
      newpassword: that.model.password,
      affirmpassword: that.model.newpassword,
      password: that.model.oldpassword
    }
    let res = await Vue.resetpost(`${url}/${Vue.isv4 ?'api/af-system':'rs'}/user/modifypwd`, {data: user}, {resolveMsg: null, rejectMsg: null})
    console.log("手机端验证登陆原始密码")
    console.log(res.data)
    if ((JSON.stringify(res.data).startsWith("{") || JSON.stringify(res.data).startsWith("[")) && res.data.code && res.data.msg) {
      if (res.data.code === 200) {
        that.$showMessage('修改密码成功！')
        if (that.sourse == 'login') {
          that.$emit('success', that.model.password)
          return
        }
        that.$back()
      } else {
        that.$showMessage('修改密码失败，请重新输入！' + res.data.msg)
        console.log(res.data)
        return
      }
    } else {
      if(res.data){
        that.$showMessage('修改密码成功！')
        if(that.sourse == 'login'){
          that.$emit('success',that.model.password)
          return
        }
        that.$back()
      }else {
        that.$showMessage('修改密码失败，请重新输入！')
        console.log(res.data)
        return
      }
    }
  } catch (error) {
    if (error.status == 500) {
      that.$showMessage('网络异常，请检查手机网络！')
    } else {
      throw error
    }
  }
}
import { validateStrongPasswordPhone } from '../plugins/validateStrongPasswordPhone.js'
export default {
  title: '修改密码',
  data() {
    return {
      model: {
        user: Vue.user.name,
        userid: Vue.user.id,
        ename: Vue.user.ename,
        oldpassword: '',
        password: '',
        newpassword: ''
      },
      showpass: false
    }
  },
  props: {
    sourse: '',
    weakPassword: false
  },
  ready() {

  },
  methods: {
    back() {
      let _this = this
      this.$showMessage('所填写内容将不可恢复！', ['confirm', 'cancel']).then((res) => {
        if (res === 'confirm') {
          _this.$back()
        }
      })
    },
    // showpass(){
    //   console.log('1')
    //   document.getElementById("oldpassword").type = "text"
    // },
    showon() {
      this.showpass = true
      document.getElementById("oldpassword").type = "text"
      document.getElementById("newpassword1").type = "text"
      document.getElementById("newpassword2").type = "text"
    },
    showoff() {
      this.showpass = false
      document.getElementById("oldpassword").type = "password"
      document.getElementById("newpassword1").type = "password"
      document.getElementById("newpassword2").type = "password"
    },
    save() {
      // 先对新密码和确认密码是否一致
      if (this.model.password != this.model.newpassword) {
        this.$showMessage('两次输入密码不一致！')
        return
      }
      // 弱口令验证
      if (this.weakPassword) {
        const pwdResult = validateStrongPasswordPhone(this.model.password)
        if (!pwdResult.isValid) {
          this.$showMessage('密码过于简单，' + (pwdResult.errors[0] || '请按照要求修改密码！！！'))
          return
        }
      }
      // 检验原始密码是否符合 并修改密码
      asyncCheck(this, this.$androidUtil.getProxyUrl())
    }
  }
}
</script>
<style>
.search_input {
  border: 0;
  outline: none;
}

.app-row {
  background-color: white;
  padding: 10px 10px 0 10px;
  border-bottom: 1px solid rgba(235, 235, 235, 0.5);
}

.font {
  font: 15px PingFang-SC-Medium;
}

.btn-font {
  font: 600 16px PingFang-SC-Bold;
  color: #499EDF;
}

.btn-color {
  background-color: #FFFFFF;
  border-radius: 10px;
  border: 1px solid #499EDF;
}

.input-font {
  font: 15px PingFang-SC-Medium;
  color: #333333;
}

.app-botton {
  position: fixed;
  background: #87b2dd;
  color: #FFF;
  padding: 8px;
  text-align: center;
  font-size: 1.2em;
  z-index: 10;
  opacity: 0.5;
  bottom: 50px;
  margin-top: -10px;
  height: 40px;
}
</style>
