<template>
  <uni-popup ref="popup" type="center" mask-background-color="rgba(0,0,0,.5)">
    <view class="psw-wrapper">
      <view class="psw-top">
        <view class="close-wrapper">
          <view class="psw-close" @tap="close">
            <image src="/static/iconImg/icon-x.svg"></image>
          </view>
        </view>
        <view class="psw-title">请输入支付密码</view>
        <view class="sub-tips">会员调账</view>
        <view class="amount">{{ vdata.amount }}</view>
      </view>
      <view class="psw-input">
        <JPasswordInput ref="refPswInput" margin="0 20px" @inputChange="inputChange" />
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, reactive, onMounted } from "vue"
import infoBox from '@/commons/utils/infoBox.js';
import { $memberManual } from "@/http/apiManager"
import emit from '@/commons/utils/emit.js'
import go from '@/commons/utils/go.js'
import { Base64 } from "js-base64";
const refPswInput = ref(null)
const popup = ref(null)
const vdata = reactive({})
const open = (val) => {
  val.addOrRedUce
  vdata.amount = val.addOrRedUce == 'add' ? '+' + val.num : '-' + val.num
  vdata.memberId = val.mbrId
  popup.value.open()
}
const close = () => popup.value.close()

const inputChange = (e) => {
  if (e.length >= 6) return manual(e)
}
const manual = (pswd) => {
  $memberManual({ memberId: vdata.memberId, changeAmount: vdata.amount, currentPassword: Base64.encode(pswd) }).then(res => {
    infoBox.showToast('调账成功').then(r => {
      close()
	  emit.pageEmit(emit.ENAME_REF_MEMBER_LIST) // 更新列表
      go.back(1, emit.ENAME_REF_MEMBER_DETAIL) // 返回详情 && 更新详情
    })
  }).catch(err => {
    refPswInput.value.clearInput()
  })
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.psw-wrapper {
  display: flex;
  flex-direction: column;

  justify-content: space-between;
  width: 650rpx;
  height: 496rpx;
  border-radius: 32rpx;
  background-color: #fff;

  .psw-title {
    text-align: center;
    color: #000000ff;
    font-size: 30rpx;
    font-weight: 500;
  }

  .close-wrapper {
    .psw-close {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 106rpx;
      height: 106rpx;

      image {
        width: 80rpx;
        height: 80rpx;
      }
    }
  }

  .psw-input {
    margin-bottom: 50rpx;
    width: 650rpx;
  }

  .sub-tips {
    margin: 30rpx 0 20rpx 0;
    color: #808080ff;
    font-size: 30rpx;
    text-align: center;
  }

  .amount {
    text-align: center;
    color: #000000ff;
    font-size: 50rpx;
    font-weight: 500;
  }
}
</style>