<template>
  
  <div class="modal-conent clearfix">
      
      <Form :form="form" :label-width="75">
        <FormItem label="手机号码">
          <Input class="form-input" v-model="form.phoneNum" size="large" disabled />
        </FormItem>
        <FormItem label="验证码">
          <template>
            <Input class="form-input form-input-small" v-model="form.msgAuthCode" size="large" />
            <Button size="large" type="primary" class="form-btn" ghost @click="sendCode">{{ sendCodeSecend ? `${sendCodeSecend}s后重试` : '获取'}}</Button>
          </template>
        </FormItem>
        <FormItem label="新密码">
          <input class="hidden-input" > 
          <input class="hidden-input" type="password" name="password1"  />
          <Input type="password"  v-model="form.password"  class="form-input" size="large" />
        </FormItem>
        <FormItem label="确认密码">
          <Input type="password" v-model="form.confirmPwd"  class="form-input" size="large" />
        </FormItem>
      </Form>
      <div class="btn-w fr">
        <Button ghost size="large" @click="changeShow(false)">取消</Button>
        <Button type="primary" size="large" class="submit-btn" @click="submit">提交</Button>
      </div>
    </div>
</template>

<script>
import { changePassword, getCode } from 'api'
import encode from '@/utils/encode'
import { getAdmin } from 'libs/token'
export default {
  props: {
    show: Boolean
  },
  data () {
    return {
      sendCodeSecend: 0,
      form: {
        confirmPwd: '',
        phoneNum: getAdmin().phone,
        msgAuthCode: '',
        password: '',
        country: '中国',
        randomcode: '',
        rememberMe: true,
        nickname: ''
      }
    }
  },
  methods: {
    sendCode () {
      if (this.sendCodeSecend) return
      getCode({ phone_num: this.form.phoneNum }).then(
        res => {
          this.$Message.info({
            content: '验证码发送成功',
            background: true
          })
          this.sendCodeSecend = 60
          let timer
          timer = setInterval(() => {
            if (this.sendCodeSecend <= 1) {
              clearInterval(timer)
            }
            this.sendCodeSecend = this.sendCodeSecend - 1
          }, 1000)
          // this.loginForm.code = res.data
        }
      )
    },
    submit () {
      let form = Object.assign({}, this.form)
      if (form.password !== form.confirmPwd) {
        this.$Message.error({
          content: '两次输入的密码不一致'
        })
        return
      }
      form.password = encode(form.password)
      form.confirmPwd = form.password
      changePassword(form).then(res => {
        if (res.code == 0) {
          this.$Message.success({
            content: '修改密码成功',
            onClose: () => {
              this.$router.push('/login')
            }
          })
        }
      }).catch(err => {
        console.log(err)
        this.$Message.error({
          content: '修改失败'
        })
      })
    },
    changeShow (show) {
      this.$emit('change', show)
    }
  }
}
</script>

<style lang="less">
.edit-modal {
  .modal-header {
    font-size: 16px;
    line-height: 55px;
    padding-left: 20px;
  }
  .form-input {
    width: 300px;
  }
  .form-input-small {
    width: 187px;
    margin-right: 15px;
  }
  .form-btn {
    width: 98px;
    padding: 0;
    text-align: center;
  }
  .submit-btn {
    margin: 0 15px;
    width: 98px;
  }
}

</style>