<template>
  <!-- 全屏遮罩层 -->
  <view v-if="show" class="mask" @click="maskClose">
    <!-- 底部弹窗主体 -->
    <view class="popup-wrap" @click.stop>
      <view class="desc-container">
        <view class="title">
          <view @click="show = false">
            <up-icon name="close" color="#fff" size="20"></up-icon>
          </view>
          <text class="titleName">动作备注</text>
          <view class="btn" @click="saveNoteContent">保存</view>
        </view>
        <view class="area-box">
          <!-- <up-textarea v-model="tempNoteContent" placeholder="此处填写个人备注" class="noteConten"
            customStyle="border-radius:12rpx; padding:20rpx;background: #242424;" /> -->
          <textarea class="textarea" v-model="tempNoteContent" placeholder="此处填写个人备注" />
        </view>
      </view>
    </view>
  </view>
</template>

<script setup>
import { ref } from 'vue';

const show = ref(false);
const tempNoteContent = ref(''); // 临时编辑的备注内容

const emit = defineEmits(['saveSuccess']);

const props = defineProps({
  oldNote: {
    type: String,
    default: ''
  }
})


// 保存备注
const saveNoteContent = async () => {
  const content = tempNoteContent.value.trim();
  if (!content) {
    uni.showToast({ title: '备注不能为空', icon: 'none' });
    return;
  }
  emit('saveSuccess', content);
  show.value = false;
};

// 打开弹窗
const open = () => {
  tempNoteContent.value = props.oldNote
  show.value = true;
};

// 遮罩点击关闭
const maskClose = () => {
  show.value = false;
};

defineExpose({ open });
</script>

<style lang="scss" scoped>
// 全屏灰色遮罩
.mask {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 999;
  display: flex;
  flex-direction: column;
  justify-content: flex-end;
}

// 底部弹窗容器，控制弹出动画、圆角、背景
.popup-wrap {
  width: 100%;
  border-radius: 16rpx 16rpx 0 0; // 对应原来 round="16"
  overflow: hidden;
  // 弹出动画可选，不需要可删除
  animation: popUp 0.24s ease-out;
}

@keyframes popUp {
  from {
    transform: translateY(100%);
  }

  to {
    transform: translateY(0);
  }
}

.desc-container {
  background-color: #1a1a1a; // 这里直接改弹窗背景色，非常方便
  padding: 40rpx 30rpx 40rpx;
  height: 75vh;

  .title {
    display: flex;
    justify-content: space-between;
    align-items: center;
    font-weight: 500;
    text-align: center;
    color: #fff;
    font-size: 32rpx;
    margin-bottom: 40rpx;
  }

  .titleName {
    flex: 1;
    text-align: center;
  }

  .area-box {
    .textarea {
      width: 95%;
      height: 300rpx;
      background: #444;
      color: #fff;
      border-radius: 16rpx;
      padding: 20rpx;
      font-size: 30rpx;
      border: 0;
    }
  }

  .btn {
    width: 100rpx;
    height: 50rpx;
    background-color: #fedc1f;
    color: #000;
    border-radius: 30rpx;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 28rpx;
  }
}
</style>