<!--
 * @Author: jiangzaicheng jiangzaicheng_jzc@163.com
 * @Date: 2022-07-07 16:13:13
 * @LastEditors: jiangzaicheng jiangzaicheng_jzc@163.com
 * @LastEditTime: 2022-07-22 16:58:52
 * @FilePath: \mcep-h5\src\components\common\Bottom.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->

<template>
  <div>

    <div class="rarle">
      <tatle-bar :tatle="tatleName"  style="background: #0B54E0"  ></tatle-bar>
    </div>
    <van-row type="flex" class="iconImg">
      <van-col span="24">
        <svg class="icon" aria-hidden="true">
          <use xlink:href="#icon-touxiang"></use>
        </svg>
      </van-col>
    </van-row>
<!--      <van-divider :style="{ margin: 0 ,border: 10}"></van-divider>-->
    <van-row type="flex" style="margin-top: 10%">
      <van-col span="24">
        <van-field :type="passwordType" v-model="password" label="原密码"  :border="true" placeholder="请输入原密码" >
              <template slot="right-icon">
              <span class="solts" @click="switchPasswordType">

              <van-icon name="closed-eye" v-if="passwordType === 'password'" />
                <van-icon name="eye" v-else/>
            </span>
          </template>
        </van-field>

      </van-col>
    </van-row>
    <van-row type="flex">
      <van-col span="24">
        <van-field v-model="newPassword" :type="passwordTypeA" label="新密码" :border="true" placeholder="请输入新密码">
             <template slot="right-icon">
              <span class="solts" @click="switchPasswordTypeA">
                <van-icon name="closed-eye" v-if="passwordTypeA === 'password'" />
              <van-icon name="eye" v-else/>

            </span>
          </template>

        </van-field>
      </van-col>


    </van-row>

     <van-row type="flex">
      <van-col span="24">
        <van-field v-model="rePassword" :type="passwordTypeB" label="确认新密码" :border="true" placeholder="请再次输入新密码">
              <template slot="right-icon">
              <span class="solts" @click="switchPasswordTypeB">

              <van-icon name="closed-eye" v-if="passwordTypeB === 'password'" />
                <van-icon name="eye" v-else/>
            </span>
          </template>

        </van-field>


      </van-col>
    </van-row>
    <!-- <div style="margin: 16px; margin-top: 10%">
      <van-button @click="modifyInfo" round  block type="info" native-type="button">保存</van-button>


    </div> -->

            <van-row type="flex">
      <van-col span="24">
        <van-button  native-type="button"
      style="width: 92%; margin:10px 4%; background-color: #3672F1;border-radius: 5px; border-color: #3672F1"
       type="primary" block @click="modifyInfo">保存</van-button>
      </van-col>
    </van-row>

  </div>
</template>

<script lang="ts">
import { Component, Vue, Prop, Watch, Emit } from "vue-property-decorator";
/*
* title
*/
@Component({
  name: "modifyPassword"
})
export default class PersonLod extends Vue {
  tatleName="修改密码"//个人信息
  name: string = ""//姓名
  IdCard: string = ""//身份证号
  phone: string = ""//手机号
  liveAdress: string = ""//居住地址
  password : String =""//原始密码
  newPassword : String =""//原始密码

  passwordType :string= "password";
  passwordTypeA = "password";
  passwordTypeB = "password";
    switchPasswordType() {
    this.passwordType = this.passwordType === 'password' ? 'text' : 'password'
  }
  switchPasswordTypeA() {
    this.passwordTypeA = this.passwordTypeA === 'password' ? 'text' : 'password'
  }
  switchPasswordTypeB() {
    this.passwordTypeB = this.passwordTypeB === 'password' ? 'text' : 'password'
  }
  modifyInfo(){
      this.$router.back();
  }

    //    onClickReturn(){
    //    this.$router.back();
    //  }
}
</script>
<style scoped lang="scss">
.iconImg{
  text-align: center;
  margin-top: 2%;
  margin-bottom: 2%;
}
.icon {
  width: 80px;
  height: 80px;
}
</style>