<template>
  <view class="page">
    <scroll-view scroll-y class="scroll">
      <view class="section">
        <view class="title">阳性发现</view>
        <textarea
          v-model="category"
          class="textarea"
          placeholder="请输入阳性发现"
          placeholder-class="placeholder"
          :maxlength="200"
        />
      </view>

      <view class="section">
        <view class="title">处理意见</view>
        <textarea
          v-model="opinion"
          class="textarea"
          placeholder="请输入处理意见"
          placeholder-class="placeholder"
          :maxlength="500"
        />
      </view>

      <view style="height: 240rpx;"></view>
    </scroll-view>

    <view class="footer">
      <button class="btn plain" @click="cancel">取消</button>
      <button class="btn primary" @click="save">保存</button>
    </view>
  </view>
</template>

<script setup>
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue';
import { toast } from '@/utils/widget';

const category = ref('');
const opinion = ref('');
const eventName = ref('');

onLoad((opt) => {
  eventName.value = String(opt?.eventName || '');
  if (opt?.title) {
    let title = String(opt.title);
    try {
      title = decodeURIComponent(title);
    } catch {
      title = String(opt.title);
    }
    uni.setNavigationBarTitle({ title: title || '阳性发现及处理意见' });
  } else {
    uni.setNavigationBarTitle({ title: '阳性发现及处理意见' });
  }
  const data = uni.getStorageSync('current-positive-find') || {};
  category.value = typeof data?.category === 'string' ? data.category : '';
  opinion.value = typeof data?.opinion === 'string' ? data.opinion : '';
});

function cancel() {
  uni.navigateBack();
}

function save() {
  if (!String(category.value || '').trim()) return toast('请输入阳性发现');
  if (!String(opinion.value || '').trim()) return toast('请输入处理意见');
  if (eventName.value) {
    uni.$emit(eventName.value, { category: String(category.value).trim(), opinion: String(opinion.value).trim() });
  }
  uni.navigateBack();
}
</script>

<style scoped>
.page {
  min-height: 100vh;
  background: #fff;
  padding-bottom: calc(152rpx + env(safe-area-inset-bottom));
}
.scroll {
  height: 100vh;
}
.section {
  padding: 32rpx 28rpx 0;
}
.title {
  font-size: 32rpx;
  font-weight: 700;
  color: #111827;
  margin-bottom: 20rpx;
}
.textarea {
  width: 100%;
  min-height: 240rpx;
  border: 2rpx solid #e5e7eb;
  border-radius: 16rpx;
  padding: 20rpx;
  box-sizing: border-box;
  font-size: 30rpx;
  color: #111827;
}
.placeholder {
  color: #9aa0a6;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 24rpx 28rpx calc(24rpx + env(safe-area-inset-bottom));
  display: flex;
  gap: 24rpx;
  box-shadow: 0 -8rpx 24rpx rgba(0, 0, 0, 0.06);
}
.btn {
  flex: 1;
  height: 88rpx;
  line-height: 88rpx;
  border-radius: 12rpx;
  font-size: 32rpx;
}
.btn::after {
  border: none;
}
.btn.plain {
  background: #fff;
  color: #0877F1;
  border: 2rpx solid #0877F1;
}
.btn.primary {
  background: #0877F1;
  color: #fff;
}
</style>
