<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: 120px;"></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) uni.setNavigationBarTitle({ title: String(opt.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(76px + env(safe-area-inset-bottom));
}
.scroll {
  height: 100vh;
}
.section {
  padding: 16px 14px 0;
}
.title {
  font-size: 15px;
  font-weight: 700;
  color: #111827;
  margin-bottom: 10px;
}
.textarea {
  width: 100%;
  min-height: 120px;
  border: 1px solid #e5e7eb;
  border-radius: 8px;
  padding: 10px;
  box-sizing: border-box;
  font-size: 14px;
  color: #111827;
}
.placeholder {
  color: #9aa0a6;
}
.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 12px 14px calc(12px + env(safe-area-inset-bottom));
  display: flex;
  gap: 12px;
  box-shadow: 0 -4px 12px rgba(0, 0, 0, 0.06);
}
.btn {
  flex: 1;
  height: 44px;
  line-height: 44px;
  border-radius: 6px;
  font-size: 15px;
}
.btn::after {
  border: none;
}
.btn.plain {
  background: #fff;
  color: #4f6ef7;
  border: 1px solid #4f6ef7;
}
.btn.primary {
  background: #4f6ef7;
  color: #fff;
}
</style>
