<template>
  <view class="">
    <nav-shadow></nav-shadow>
    <view class="px-45rpx pt-20rpx">
      <cu-form :model="form" ref="uForm" :error-type="['toast']">
        <u-form-item prop="password">
          <view class="flex items-center w-full">
            <view class="w-60rpx flex items-center">
              <image class="w-48rpx h-48rpx" src="/static/images/user/pwd-icon.png" mode="scaleToFill" />
            </view>
            <u-input type="password" :clearable="false" v-model="form.password" class="w-full" placeholder="新密码" />
          </view>
        </u-form-item>
        <u-form-item prop="confirm_password" class="mt-20rpx">
          <view class="flex items-center w-full">
            <view class="w-60rpx flex items-center">
              <image class="w-48rpx h-48rpx" src="/static/images/user/pwd-icon.png" mode="scaleToFill" />
            </view>
            <u-input type="password" :clearable="false" v-model="form.confirm_password" class="w-full"
              placeholder="确认密码" />
          </view>
        </u-form-item>
        <u-form-item prop="phone" class="mt-20rpx">
          <view class="flex items-center">
            <view class="w-60rpx flex items-center">
              <image class="w-48rpx h-48rpx" src="/static/images/user/phone-icon.png" mode="scaleToFill" />
            </view>
            <u-input :clearable="false" v-model="form.phone" class="w-full" placeholder="手机号" />
          </view>
        </u-form-item>
        <u-form-item prop="verify_code" class="mt-20rpx">
          <view class="flex items-center w-full">
            <image class="w-48rpx h-48rpx" src="/static/images/user/code-icon.png" />
            <sms-input class="w-full" ref="smsRef" v-model="form.verify_code" :maxLength="6" @run="getCode"></sms-input>
          </view>
        </u-form-item>
      </cu-form>

      <view class="mt-70rpx">
        <view class="login-btn" @tap="onSubmit">
          {{ButtonTitle}}
        </view>
      </view>
    </view>
  </view>
</template>
<script>
  export default {
    data() {
      return {
        tips: '',
        type: '',
        form: {
          phone: '',
          password: '',
          confirm_password: '',
          verify_code: ''
        },
        rules: {
          phone: [{
              required: true,
              message: '请输入手机号',
              trigger: 'change',
            },
            {
              validator: (rule, value, callback) => {
                return this.$u.test.mobile(value);
              },
              message: '手机号码不正确',
              trigger: 'change',
            },
          ],
          confirm_password: [{
              required: true,
              message: '请再次输入密码',
              trigger: 'change',
            },
            {
              validator: (rule, value, callback) => {
                return value == this.form.password
              },
              message: '两次密码不一致',
              trigger: 'change',
            },
          ],
          password: [{
            required: true,
            message: '请输入密码',
            trigger: 'change',
          }, ],
          verify_code: [{
            required: true,
            message: '请输入验证码',
            trigger: 'change',
          }, ],
        },
      };
    },
    onLoad({
      type
    }) {
      // 动态设置导航栏标题
      if (type) {
        this.type = type
        uni.setNavigationBarTitle({
          title: '找回密码'
        });
      }
    },
    onReady() {
      this.$refs.uForm.setRules(this.rules);
    },
    computed: {
      ButtonTitle() {
        return this.type ? '提交' : '保存修改'
      }
    },
    methods: {
      //发送短信验证码
      async getCode() {
        this.$refs.uForm.validateField(['phone'], async (error) => {
          if (error.length == 0) {
            try {
              await this.$api.post('/v1/sms-codes', {
                phone: this.form.phone,
                type: '2'
              }, {
                custom: {
                  loading: true
                }
              });
             this.$refs.smsRef.start();
            } catch (error) {
            }
          }
        });
      },
      onSubmit() {
        this.$refs.uForm.validate(async (valid) => {
          if (valid) {
            let obj = {
              phone: this.form.phone,
              password: this.form.password,
              verify_code: this.form.verify_code,
            }

            try {
              let res = await this.$api.post('/v1/reset-password', obj, {
                custom: {
                  loading: true
                }
              });
              // this.$refs.uCode.start();
              uni.showToast({
                title: '修改成功',
                icon: 'none'
              })
              setTimeout(() => {
                // this.$u.route({
                //   type: 'redirectTo',
                //   url: '/pages/login/index'
                // })
                uni.navigateBack({
                  delta: 1
                })
              }, 1000)
              this.$refs.uForm.resetFields()

            } catch (error) {
              // console.log(error);
            } finally {}
          }
        });
      },

    }
  };
</script>
<style>
  page {
    background: #fff;
  }
</style>
