<template>
  <a-drawer
    v-model:visible="vdata.visible"
    :mask-closable="false"
    title="调账"
    :body-style="{ paddingBottom: '80px' }"
    width="40%"
    class="drawer-width"
    @close="onClose"
  >
    <a-form v-if="vdata.visible" ref="infoFormModel" :model="vdata.reqObject" layout="vertical" :rules="vdata.rules">
      <a-row justify="space-between" type="flex">
        <a-col :span="10" style="position:relative">
          <p style="margin:10px">账户余额： {{ ( vdata.dbRecord.balance / 100 ).toFixed(2) }}元</p>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="24">
          <a-form-item label="调账方式" name="type">
            <a-radio-group v-model:value="vdata.reqObject.type">
              <a-radio :value="'add'"> 加款 （+） </a-radio>
              <a-radio :value="'sub'"> 减款（-） </a-radio>
            </a-radio-group>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="金额" name="changeAmount">
            <!-- 金额上限1亿 最低不能小于0 -->
            <a-input-number v-model:value="vdata.reqObject.changeAmount" :min="0.01" :max="1000000000" placeholder="请输入金额" style="width: 93%"><template #addonBefore>{{ vdata.reqObject.type == 'add' ? ' + ' : ' - ' }}</template><template #addonAfter>元</template></a-input-number>
          </a-form-item>
        </a-col>
      </a-row>

      <a-row justify="space-between" type="flex">
        <a-col :span="10">
          <a-form-item label="支付密码" name="currentPassword">
            <a-input v-model:value="vdata.reqObject.currentPassword" autocomplete="new-password" type="password" placeholder="请输入支付密码" />
          </a-form-item>
        </a-col>
      </a-row>
    </a-form>
    <div class="drawer-btn-center">
      <a-button :style="{ marginRight: '8px' }" style="margin-right:8px" @click="onClose"><close-outlined /> 取消 </a-button>
      <a-button type="primary" :loading="vdata.btnLoading" @click="handleOkFunc"><check-outlined /> 保存 </a-button>
    </div>
  </a-drawer>
</template>

<script lang="ts" setup>
import { API_URL_MEMBER_LIST, req, $memberChangeBalancePage } from '@/api/manage'
import { defineProps, reactive, ref, getCurrentInstance } from 'vue'
import ruleGenerator from '@/utils/ruleGenerator'
import { Base64 } from 'js-base64'

const { $infoBox, $access } = getCurrentInstance()!.appContext.config.globalProperties

 
    const props = defineProps({
    callbackFunc: { type: Function,default:null }
    })

  const infoFormModel = ref()
  const vdata : any = reactive({
    btnLoading: false,
    dbRecord: {}, // 数据对象
    recordId: null, // 更新对象ID
    visible: false, // 是否显示弹层/抽屉

    reqObject: { type: 'add', changeAmount: 0, currentPassword: '' }, //调账方式  add or sub

    rules: {
      
      type: [{ required: true, message: '请选择调账方式', trigger: 'blur' }],
      changeAmount: [ ruleGenerator.requiredInput('金额', 'number') ],
      currentPassword: [ ruleGenerator.requiredInput('支付密码')],
    }
  })

  function show (recordId) { // 弹层打开事件

    vdata.btnLoading = false
    vdata.recordId = recordId

    vdata.reqObject = { type: 'add' }

    if (infoFormModel.value != undefined) {
      infoFormModel.value.resetFields()
    }
    req.getById(API_URL_MEMBER_LIST, recordId).then(res => {
      vdata.dbRecord = res
    })
    vdata.visible = true // 立马展示弹层信息
  }
  function handleOkFunc () { // 点击【确认】按钮事件    
  
      infoFormModel.value.validate().then(valid =>{

        if (vdata.reqObject.changeAmount <= 0) {
          vdata.confirmLoading = false
          return $infoBox.message.error('调账金额不可为0')
        }

        vdata.btnLoading = true

        let realReqObject = Object.assign({}, vdata.reqObject)
        if(realReqObject.type != 'add'){
          realReqObject.changeAmount = 0 - realReqObject.changeAmount
        }

        // 密码加密
        realReqObject.currentPassword = Base64.encode(realReqObject.currentPassword)

        delete realReqObject.type

        $memberChangeBalancePage(vdata.recordId, realReqObject).then( (res) => {
          $infoBox.message.success('更新成功')
          props.callbackFunc() // 刷新列表
          vdata.visible = false

        }).finally(() => {
          vdata.btnLoading = false
        })

      })
          
  }
  function onClose () {
    vdata.visible = false
  }

defineExpose({
  show
})
</script>
<style lang="less">
</style>
