<script lang="ts" setup>
import { computed } from 'vue';

import { useVbenModal } from '@vben/common-ui';

import { Button, Card, Col, Row, Textarea } from 'ant-design-vue';

import DiagnosisModal from '#/views/doctor/doctor-reception/components/DiagnosisModal.vue';
import DoctorOrderModal from '#/views/doctor/doctor-reception/components/DoctorOrderModal.vue';

/** 预选诊断、预选医嘱（与接诊开方交互一致） */
const clinicalDiagnose = defineModel<string>('clinicalDiagnose', { default: '' });
const doctorOrder = defineModel<string>('doctorOrder', { default: '' });

const [DiagnosisModals, DiagnosisModalApi] = useVbenModal({
  connectedComponent: DiagnosisModal,
});

const [DoctorOrderModals, DoctorOrderModalApi] = useVbenModal({
  connectedComponent: DoctorOrderModal,
});

/** 打开常用诊断弹窗 */
function openDiagnosisModal() {
  DiagnosisModalApi.setData({
    values: clinicalDiagnose.value,
    updateDiagnosis,
  });
  DiagnosisModalApi.open();
}

/** 常用诊断弹窗回调：写回预选诊断 */
function updateDiagnosis(values: string) {
  clinicalDiagnose.value = values;
}

/** 打开常用医嘱弹窗 */
function openDoctorOrderModal() {
  DoctorOrderModalApi.setData({
    values: doctorOrder.value,
    updateDoctorOrder,
  });
  DoctorOrderModalApi.open();
}

/** 常用医嘱弹窗回调：写回预选医嘱 */
function updateDoctorOrder(values: string) {
  doctorOrder.value = values;
}

/** 供父组件读取当前值 */
const payload = computed(() => ({
  clinical_diagnose: clinicalDiagnose.value || '',
  doctor_order: doctorOrder.value || '',
}));

defineExpose({
  getDiagnosisOrderPayload: () => payload.value,
});
</script>

<template>
  <Row :gutter="[12, 12]" class="prescription-meta-row mb-3">
    <Col :xs="24" :md="12">
      <Card size="small" class="chinese-drug-card prescription-meta-card">
        <div class="prescription-meta-card__title">预选诊断</div>
        <Button type="primary" class="mb-2" @click="openDiagnosisModal">
          常用诊断
        </Button>
        <Textarea
          v-model:value="clinicalDiagnose"
          placeholder="输入诊断结果..."
          :rows="3"
        />
      </Card>
    </Col>
    <Col :xs="24" :md="12">
      <Card size="small" class="chinese-drug-card prescription-meta-card">
        <div class="prescription-meta-card__title">预选医嘱</div>
        <Button type="primary" class="mb-2" @click="openDoctorOrderModal">
          常用医嘱
        </Button>
        <Textarea
          v-model:value="doctorOrder"
          placeholder="输入医嘱..."
          :rows="3"
        />
      </Card>
    </Col>
  </Row>
  <DiagnosisModals />
  <DoctorOrderModals />
</template>

<style lang="scss" scoped>
.chinese-drug-card {
  position: relative;

  :deep(.ant-card-body) {
    padding: 12px;
  }
}

.prescription-meta-card {
  min-height: 140px;

  :deep(.ant-card-body) {
    padding: 16px;
  }
}

.prescription-meta-card__title {
  margin-bottom: 8px;
  font-size: 14px;
  font-weight: 600;
}

.prescription-meta-row :deep(textarea) {
  width: 100%;
  min-height: 72px;
  padding: 8px;
  border: 1px solid hsl(var(--border));
  border-radius: 4px;
  resize: vertical;
}
</style>
