<template>
  <div class="loginpsw-container">
    <div class="contenttitle">
      <span>设置新的密码</span>
    </div>
    <div class="contentbody">
      <a-form :form="form" hideRequiredMark class="login-form" @submit="userhandleSubmit">
        <a-form-item label="原密码" style="text-align: left">
          <a-input v-decorator="[
									'password',
									{
										rules: [
											{
												required: true,
												message: '请输入密码',
											},
										],
										validateTrigger: 'submit',
									},
								]" type="password" placeholder="请输入原密码">
            <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
          </a-input>
          <div class="forgetPsw" @click="loginShow = true" style="cursor:pointer">忘记原密码</div>
        </a-form-item>
        <a-form-item label="新密码" style="text-align: left">
          <!-- @input="getpassword"  -->
          <a-input v-decorator="[
                  'newpassword',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请输入新密码',
                      },
                    ],
                    validateTrigger: 'submit',
                  },
                ]" type="password" placeholder="请输入密码">
            <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
          </a-input>
        </a-form-item>
        <a-form-item label="确认密码" style="text-align: left">
          <a-input v-decorator="[
                  'repassword',
                  {
                    rules: [
                      {
                        required: true,
                        message: '请再次输入新密码',
                      },
                      {
                        validator: replacepassword,
                      },
                    ],
                    validateTrigger: 'submit',
                    validateFirst: true,
                  },
                ]" type="password" placeholder="请再次输入密码">
            <!-- <i slot="prefix" class="iconfont icon-mima" /> -->
          </a-input>
        </a-form-item>
        <a-form-item style="text-align: left">
          <a-button type="primary sureBtn" html-type="submit">确定</a-button>
        </a-form-item>
        <!-- <div class="username">
          <div>用户名</div>
          <input type="text" :value="username" :disabled="true" />
        </div>
        <div class="password">
          <div>密码</div>
          <input type="password" v-model.trim="password" class="passwordInp" />
          <i class="iconfont icon-biyan1" style="font-size: 12px" @click="changeStatus" v-if="inputStatus == 0"></i>
          <i class="iconfont icon-zhengyan1" style="font-size: 16px; margin-top: -5px; margin-right: -3px" @click="changeStatus" v-else></i>
        </div>-->
      </a-form>
      <a-modal title="找回密码" :width="760" footer :visible="loginShow" class="modal" @cancel="handleCancel" :maskClosable="false" okText="提交" cancelText="取消" :destroyOnClose="true">
        <updatepsw></updatepsw>
      </a-modal>
    </div>
  </div>
</template>

<script>
import { setUserPswApi } from '../../../../api/userinfo'
import updatepsw from '../../../Login/updatepsw.vue'
export default {
  // 组件名称
  name: 'loginpsw',
  // 局部注册的组件
  components: {
    updatepsw,
  },
  // 组件参数 接收来自父组件的数据
  props: {
    userinfo: {
      require: true,
    },
  },
  // 组件状态值
  data() {
    return {
      username: '',
      password: null,
      inputStatus: 0,
      form: this.$form.createForm(this),
      loginShow: false,
    }
  },
  // 计算属性
  computed: {},
  // 侦听器
  watch: {
    userinfo() {
      this.$nextTick(() => {
        console.log(this.userinfo)

        // this.username = this.userinfo.tel;
        console.log(this.username)
      })
    },
  },
  // 生命周期钩子   注：没用到的钩子请自行删除
  /**
   * 组件实例创建完成，属性已绑定，但DOM还未生成，$ el属性还不存在
   */
  created() {
    // this.username = this.userinfo.userName || this.userinfo.nickName || this.userinfo.tel
  },
  /**
   * el 被新创建的 vm.el 替换，并挂载到实例上去之后调用该钩子。
   * 如果 root 实例挂载了一个文档内元素，当 mounted 被调用时 vm.el 也在文档内。
   */
  mounted() {},
  // 组件方法
  methods: {
    userhandleSubmit(e) {
      // 用户名登录提交
      e.preventDefault()
      let params
      this.form.validateFields(async (err, values) => {
        console.log(values)
        if (!err) {
        } else {
        }
      })
    },
    async submit() {
      if (this.password === null || this.password.length === 0) {
        this.$message.warning('请输入密码')
      } else {
        try {
          const { data } = await setUserPswApi({ password: this.password })
          console.log(data)
          if (data.status === 200) {
            this.$message.success('密码修改成功')
          }
        } catch (error) {
          console.log(error)
        }
      }
      console.log(this.password)
    },
    changeStatus(e) {
      // console.log(e);
      let pas = document.querySelector('.passwordInp')
      // console.dir(pas);
      if (e.target.className == 'iconfont icon-biyan1') {
        this.inputStatus = 1
        // e.target.className = "iconfont icon-zhengyan1";
        pas.attributes[1].nodeValue = 'text'
      } else {
        this.inputStatus = 0
        // e.target.className = "iconfont icon-biyan1";
        pas.attributes[1].nodeValue = 'password'
      }
    },
    showModal() {
      console.log('modal')
      this.loginShow = true
    },
    /**
     * 关闭忘记密码弹窗
     *
     *
     */
    handleCancel() {
      this.loginShow = false
    },
    /**
     * 检验密码不一致的回调
     *
     *
     */
    replacepassword(rule, value, callback) {
      console.log(rule)
      console.log(value)
      console.log(this.form.getFieldValue('newpassword'))
      let newpassword = this.form.getFieldValue('newpassword')
      if (newpassword !== value) {
        callback('两次密码不一致')
      }
      callback()

      // console.log(callback);
    },
  },
}
</script>

<style scoped lang="less">
/deep/ .login-form {
  // width: 430px;
  .ant-form-item-control {
    width: 430px !important;
  }
  .ant-form-item-label {
    line-height: 28px;
    label {
      font-size: 16px;
    }
    .ant-form-item-children {
    }
  }
  .ant-input {
    height: 40px;
    width: 430px;
    text-indent: 15px;
    font-size: 16px;
    padding: 0 !important;
    border-radius: 0;
    border: 1px solid #dddddd;
    &:hover {
      border-color: #ff4400;
    }
    &:focus {
      box-shadow: none;
    }
    &::placeholder {
      opacity: 0.4;
      color: #4d575e;
      font-size: 16px;
      text-indent: 15px;
    }
  }
}
.forgetPsw {
  height: 10px;
  font-size: 16px;
  color: #666666;
  text-align: right;
  text-decoration: underline;
}
.ant-btn-primary {
  width: 64px;
  height: 32px;
  // margin-top: 21px;
  background: #ff4400;
  border-radius: 0px;
  border: none;
  font-size: 14px;
  color: #fff;
  &:hover {
    background-color: #ff4400cc;
  }
  &::selection {
    background: #ff4400;
  }
  &:focus {
    background: #ff4400;
  }
  &:active {
    background: #ff4400;
  }
}
// .loginpsw-container {
//   .contentbody {
//     .username,
//     .password {
//       margin-top: 16px;
//       div {
//         font-size: 16px;
//         line-height: 16px;
//         margin-bottom: 8px;
//       }
//       input {
//         outline: none;
//         width: 430px;
//         height: 40px;
//         text-indent: 10px;
//         font-size: 16px;
//         background: #f0f0f0;
//         border: 1px solid #ededed;
//         border-radius: 0px;
//       }
//     }
//     .password {
//       position: relative;
//       input {
//         background-color: #fff;
//       }
//       .iconfont {
//         position: absolute;
//         font-size: 14px;
//         right: 48%;
//         top: 38px;
//       }
//     }
//     button {
//       width: 64px;
//       height: 32px;
//       margin-top: 21px;
//       background: #ff4400;
//       border-radius: 0px;
//       border: none;
//       font-size: 14px;
//       color: #fff;
//       &:hover {
//         background-color: #ff4400cc;
//       }
//     }
//   }
// }
</style>
