<template>
  <uni-popup ref="popup" type="center">
    <view class="c-wrapper" :style="{ '--v-primary': calcThemeColor() }">
      <view class="c-title">添加支付备注</view>
      <view class="remarks-content">
        <textarea class="remarks-input" v-model="pageData.remarkText" placeholder="请输入备注信息" @input="inputChange" maxlength="120" />
      </view>
      <view class="conf-but" @tap="close">确认</view>
    </view>
  </uni-popup>
</template>

<script setup>
import { ref,reactive } from "vue"
import { calcThemeColor } from "@/util/member.js"
const props = defineProps({
  value: ''
})
const emits = defineEmits(['update:value'])
const pageData = reactive({
    remarkText: props.value
})
const popup = ref(null)
const open = (amount) => {
  popup.value.open()
}
const close = () => popup.value.close()
const inputChange = (e) => {
  emits('update:value', e.detail.value)
}
defineExpose({ open })
</script>

<style lang="scss" scoped>
.c-wrapper {
  width: calc(100vw - 60rpx);
  padding: 30rpx;
  box-sizing: border-box;
  background-color: #fff;
  border-radius: 20rpx;

  .c-title {
    margin-bottom: 30rpx;
    font-weight: bold;
    text-align: center;

  }

  .remarks-content {
    width: 100%;
    min-height: 160rpx;

    .remarks-input {
      width: 100%;
      height: 100rpx;
    }
  }

  .conf-but {
    display: flex;
    justify-content: center;
    align-items: center;
    margin: 0 30rpx;
    margin-top: 30rpx;
    height: 90rpx;
    background-color: var(--v-primary);
    border-radius: 15rpx;
    color: #fff;
  }
}
</style>