<template>
  <view class="page">
    <view class="body">
      <scroll-view scroll-y class="scroll">
        <view class="form-wrap">
          <form-template v-if="items.length" ref="formRef" :items="items" :form="form" :rule="rules" @change="onChange" />
        </view>
      </scroll-view>

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

<script setup>
import { reactive, ref } from 'vue';
import { onLoad } from '@dcloudio/uni-app';
import FormTemplate from '@/components/form-template/index.vue';

const BASE_KEY = 'patient-create-base';
const INNER_KEY = 'patient-create-inner';

const formRef = ref(null);

const form = reactive({
  customerSource: '',
  firstVisitDate: '',
  diseaseTag: '',
  remark: ''
});

const items = [
  { title: 'customerSource', name: '患者来源', type: 'select', operateType: 'formCell', required: false, range: ['线上咨询', '同事推荐', '客户推荐', '其他'] },
  { title: 'firstVisitDate', name: '首次就诊日期', type: 'date', operateType: 'formCell', required: false },
  { title: 'diseaseTag', name: '慢病标签', type: 'select', operateType: 'formCell', required: false, range: ['糖尿病', '高血压', '冠心病', '慢阻肺'] },
  { title: 'remark', name: '备注', type: 'textarea', operateType: 'formCell', required: false, wordLimit: 200 }
];

const rules = {};

onLoad(() => {
  const base = uni.getStorageSync(BASE_KEY);
  if (!base || typeof base !== 'object') {
    uni.showToast({ title: '请先填写基础信息', icon: 'none' });
    uni.navigateBack();
    return;
  }

  const cached = uni.getStorageSync(INNER_KEY);
  if (cached && typeof cached === 'object') {
    Object.assign(form, cached);
  }
});

function onChange({ title, value }) {
  form[title] = value;
}

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

function save() {
  if (formRef.value?.verify && !formRef.value.verify()) return;

  const base = uni.getStorageSync(BASE_KEY) || {};
  const payload = { ...base, ...form };

  uni.setStorageSync(INNER_KEY, { ...form });

  // 这里后续对接真实新增接口：payload 即最终提交数据
  uni.showModal({
    title: '提示',
    content: '已完成新增（mock）。后续将对接真实建档接口。',
    showCancel: false,
    success: () => {
      uni.removeStorageSync(BASE_KEY);
      uni.removeStorageSync(INNER_KEY);
      // 返回到病例列表
      uni.navigateBack({ delta: 2 });
    }
  });
}
</script>

<style lang="scss" scoped>
.page {
  height: 100vh;
  background: #f6f6f6;
}

.body {
  height: 100vh;
  display: flex;
  flex-direction: column;
}

.scroll {
  flex: 1;
}


.form-wrap {
  background: #fff;
}

.footer {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  background: #fff;
  padding: 12px 16px 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: #666;
  border: 1px solid #ddd;
}

.btn.primary {
  background: #5d8aff;
  color: #fff;
}
</style>
