<template>
  <uni-popup ref="popup" type="center">
    <view class="c-wrapper" :style="{ '--v-primary': calcThemeColor() }">
      <view class="c-title">会员余额支付</view>
      <view class="c-amount">
        <text>金额</text>
        ￥{{ vdata.amount }}
      </view>
      <view class="but-wrapper">
        <view class="cancel" @tap="close">取消</view>
        <view class="confirm" @tap="confirm">确认支付</view>
      </view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref, reactive } from "vue"
import { calcThemeColor } from "@/util/member.js"
const vdata = reactive({})
const popup = ref(null)
const emits = defineEmits(['pay'])
const open = (amount) => {
  vdata.amount = amount
  popup.value.open()
}
const close = () => popup.value.close()
const confirm = () => {
  emits('pay')
}
defineExpose({ open, close })
</script>  

<style lang="scss" scoped>
.c-wrapper {
  width: 650rpx;
  height: 508rpx;
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20rpx;

  .c-title {
    margin: 50rpx 0 70rpx 0;
    font-weight: bold;
    text-align: center;
  }

  .remarks-content {
    margin: 30rpx 0;
  }

  .c-amount {
    display: flex;
    align-items: center;
    flex-direction: column;
    color: #000000ff;
    font-size: 50rpx;
    font-weight: 500;

    text {
      margin-bottom: 20rpx;
      color: #808080ff;
      font-size: 30rpx;
    }
  }

  .but-wrapper {
    display: flex;
    margin-top: 50rpx;
    justify-content: space-between;
    view {
      flex: 0 0 45%;
      display: flex;
      justify-content: center;
      align-items: center;
      height: 90rpx;
      color: #fff;
      border-radius: 15rpx;
    }

    .cancel {
      color: #808080ff;
    }
    .confirm {
      width: 350rpx;
      height: 110rpx;
      border-radius: 20rpx;
      background-color: var(--v-primary);
    }
  }
}
</style>