<template>
  <Panel :title="'病例'">
    <template #tools>
      <div class="content">
        <div class="model-selector">
          <el-select v-model="formDate.diagType">
            <el-option label="西医模板" :value="0"/>
            <el-option label="中医模板" :value="1"/>
            <el-option label="口腔模板" :value="2"/>
          </el-select>

        </div>
      </div>
    </template>
    <div class="container">
      <el-form :model="formDate" label-width="auto" ref="formRef">
        <el-form-item label="主诉">
          <PopoverInput v-model="formDate.mainAppeal" :list="mainAppealList"/>
        </el-form-item>
        <el-form-item label="诊断">
          <DiagnosisSearchInput
              :request-api="diagnosisSearchApi"
              :show-config="diagnosisShowConfig"
              @selectedCallBack="diagnosisSelect"
              :show-header="false">
          </DiagnosisSearchInput>
        </el-form-item>
        <el-form-item label="现病史">
          <PopoverInput v-model="formDate.nowMedicalHistory" :list="nowMedicalHistoryList"/>
        </el-form-item>
        <el-form-item label="既往史">
          <PopoverInput v-model="formDate.beforeMedicalHistory" :list="beforeMedicalHistoryList"/>
        </el-form-item>
        <el-form-item label="过敏史">
          <PopoverInput v-model="formDate.allergyHistory" :list="allergyHistoryList"/>
        </el-form-item>
        <el-form-item label="体格检查">
          <PhysiqueExamInuput v-model="formDate.exam" :list="physiqueExamList"/>
        </el-form-item>
        <el-form-item label="望闻问切" v-if="modelType==1">
          <PopoverInput v-model="formDate.chinaAdjunctCheck" :list="chinaAdjunctCheckList"/>
        </el-form-item>
        <el-form-item label="治法" v-if="modelType==1">
          <el-input v-model="formDate.chinaDeal"></el-input>
        </el-form-item>
        <el-form-item label="口腔检查" v-if="modelType==2">
          <el-input v-model="formDate.mouthCheck"></el-input>
        </el-form-item>
        <el-form-item label="辅助检查" v-if="modelType==2 || modelType ==0">
          <el-input v-model="formDate.adjunctCheck"></el-input>
        </el-form-item>
        <el-form-item label="处置" v-if="modelType==0 || modelType ==2">
          <el-input v-model="formDate.deal"></el-input>
        </el-form-item>
      </el-form>
    </div>

  </Panel>
</template>
<script setup lang="ts">
import {ref} from "vue";
import {
  mainAppealList,
  nowMedicalHistoryList,
  beforeMedicalHistoryList,
  chinaAdjunctCheckList,
  allergyHistoryList, physiqueExamList
} from "@/assets/config/constants.ts";
import Panel from "@/components/common/Panel.vue";
import PopoverInput from "@/components/PopoverInput.vue";
import DiagnosisSearchInput from "@/components/outpatient/DiagnosisSearchInput.vue";
import PhysiqueExamInuput from "@/components/outpatient/PhysiqueExamInuput.vue";

const formDate = defineModel<any>();
const modelType = ref(0)

interface ShowConfig {
  label: string;
  prop: string;
}

const diagnosisSearchApi = "social/diagnose/search"
const diagnosisShowConfig: ShowConfig[] = [
  {
    label: "诊断名称",
    prop: "name",
  },
  {
    label: "诊断编码",
    prop: "code",
  }
]
const diagnosisSelect = (list: any) => {
  const diagnosisNames = list.map((item: any) => item.name).join(',')
  formDate.value.diagnosisDetail = JSON.stringify(list)
  formDate.value.diagnosisSummary = diagnosisNames
}
</script>
<style scoped lang="scss">
.content {
  display: flex;

  .model-selector {
    width: 100px;
  }

}

.container {
  margin: 24px;
}
</style>