<template>
  <div class="page">
    <div class="content">
      <p class="text">积分收入方</p>
      <img :src="userInfo.avatarUrl" alt="" v-if="userInfo.avatarUrl">
      <img src="https://cdn.cunwuyun.cn/dvcp/myFamily/tx.png" alt="" v-else>
      <p class="user-name">{{userInfo.nickName}}</p>
      <u-input v-model="num" type="number" placeholder="请输入积分数量" :maxlength="11" :border="true" input-align="center" border-color="#ddd" height="76" class="input-num" />
      <p class="num-text">剩余积分余额：{{total}}</p>
      <div class="btn" @click="confirm">确认转出</div>
    </div>
  </div>
</template>
<script>
import {mapState} from 'vuex'

export default {
  appName: "我的家庭",
  computed: {
    ...mapState(['user', 'token'])
  },
  data() {
    return {
      num: '',
      total: '',
      userInfo: {}
    }
  },
  onLoad(options) {
    this.userInfo = {...options}
    this.getIntegral()
  },
  methods: {
    getIntegral() {
      this.$instance.post(`/app/appintegraluser/girdDetail?id=${this.user.openId}`).then(res => {
        if (res.code === 0) {
          this.total = res.data.integral || 0
        }
      })
    },
    confirm() {
      if (!/^(([1-9]{1}\d*)|(0{1}))(\.\d{1,2})?$/g.test(this.num)) {
        this.num = ''
        return this.$message.error('积分数量最多只保留两位小数点')
      }
      if (this.num > this.total) {
        return this.$u.toast('转出积分不能大于剩余积分')
      }
      this.$instance.post(`/app/appintegraluser/transferIntegral`,{
        fromId: this.user.openId,
        ids: [this.userInfo.openId],
        integral: this.num,
        integralUserType: '3',
        integralCalcType: '1'
      }).then(res => {
        if (res.code === 0) {
          this.$u.toast('积分转出成功！')
          setTimeout(() => {
            uni.navigateBack()
          }, 600)
        }
      })
    }
  }
}
</script>
<style scoped lang="scss">
@import "~dvcp-wui/common";
.page {
  width: 100%;
  height: 100%;
  height: 100vh;
  padding: 32px 32px 96px 32px;
  box-sizing: border-box;
  background-color: #f3f6f9;
  .content {
    width: 100%;
    height: 100%;
    background-color: #fff;
    border-radius: 8px;
    text-align: center;
    .text {
      padding-top: 96px;
      line-height: 40px;
      font-family: PingFangSC-Regular;
      font-size: 28px;
      color: #999;
      margin-bottom: 26px;
    }
    img {
      width: 176px;
      height: 176px;
      border-radius: 88px;
      margin: 0 auto 24px auto;
    }
    .user-name {
      margin-bottom: 100px;
      line-height: 42px;
      font-family: PingFangSC-Regular;
      font-weight: 400;
      font-size: 36px;
      color: #333;
    }
    .input-num {
      width: calc(100% - 144px);
      margin: 0 0 16px 72px;
    }
    .num-text {
      color: #222;
      font-size: 28px;
      font-family: PingFangSC;
      font-weight: 400;
      line-height: 40px;
      margin-bottom: 82px;
    }
    .btn {
      width: 400px;
      height: 80px;
      text-align: center;
      line-height: 80px;
      background: #4181FF;
      border-radius: 44px;
      font-family: PingFangSC-Medium;
      font-weight: 500;
      font-size: 34px;
      color: #FFF;
      margin: 0 auto;
    }
  }
}
</style>
