<template>
  <view>
    <!-- 设置钱包密码 -->
    <view class="password">
      <view class="prompt">请设置6位数字密码。建议不要使用连续的数字。</view>
      <view class="group">
        <view class="inputs">
          <label>密码</label>
          <input type="digit" v-model="password" maxlength="6" placeholder="请设置密码" />
        </view>
        <view class="inputs">
          <label>确认密码</label>
          <input type="digit" v-model="verify" maxlength="6" placeholder="请确认密码" />
        </view>
      </view>
    </view>
    <!-- 按钮 -->
    <view class="buttons">
      <button type="default" form-type="submit" @click="createWallet">确认</button>
    </view>
  </view>
</template>

<script>
  import {
    security
  } from '@/apis/interfaces/wallet'
  export default {
    data() {
      return {
        password: '',
        verify: ''
      }
    },
    methods: {
      // 激活钱包
      createWallet() {
        if (this.password === '' || this.verify === '') {
          uni.showToast({
            icon: 'none',
            title: '请设置密码'
          })
          return
        }
        if (this.password !== this.verify) {
          uni.showToast({
            icon: 'none',
            title: '两次输入密码不一致'
          })
          return
        }
        security({
          code: this.password
        }).then(res => {
          uni.navigateBack()
        }).catch(err => {
          uni.showToast({
            icon: 'none',
            title: err.message
          })
        })
      }
    }
  }
</script>

<style lang="scss" scoped>
  // 副标题
  .sub-title {
    color: $text-gray;
    text-align: center;
    margin: $margin * 2 $margin;
    font-size: $title-size-m;
  }

  // 设置密码
  .password {
    padding: 0 $padding * 2;

    .prompt {
      margin-top: $margin * 2;
      font-size: $title-size-m;
      color: $mian-color;
    }

    .group {
      margin-top: $margin;
      border-radius: $radius-m;
      box-shadow: 0 0 4rpx 4rpx rgba($color: $text-color, $alpha: .02);
      background-color: white;

      .inputs {
        padding: $padding $padding + 10;
        border-bottom: solid 1rpx $border-color;

        &:last-child {
          border-bottom: none;
        }

        label {
          color: $text-gray;
          font-size: $title-size-m;
        }

        input {
          height: 70rpx;
          line-height: 70rpx;
          font-size: $title-size;
        }
      }
    }
  }

  // 按钮
  .buttons {
    padding: $padding * 2;

    .text {
      text-align: center;
      line-height: 90rpx;
      height: 90rpx;
      margin-bottom: $margin * 2;
      font-size: $title-size-lg;
      color: $mian-color;
      font-weight: bold;
    }

    button {
      height: 90rpx;
      line-height: 90rpx;
      background-color: $mian-color;
      border-radius: $radius-lg;
      color: white;
      font-weight: bold;
      font-size: $title-size;
    }
  }
</style>
