<script setup>
import { ref, reactive } from 'vue';
import tab2 from '@/pages/zl-station/menjizhenItem-tabs/tab2.vue';
import tab3 from '@/pages/zl-station/menjizhenItem-tabs/tab3.vue';
import tab4 from '@/pages/zl-station/menjizhenItem-tabs/tab4.vue';
import tab5 from "@/pages/zl-station/menjizhenItem-tabs/tab5.vue";
// 病人候选下拉框
const value1 = ref('');
const value2 = ref('');
const value3 = ref('');
const value4 = ref('');
const items = [
  { value: '510123456789012345', name: '张三' },
  { value: '510123456789012342', name: '李四' },
  { value: '510123456789012346', name: '王五' },
  { value: '510123456789012347', name: '赵六' },
  { value: '510123456789012348', name: '田七' },
  { value: '510123456789012349', name: '周八' },
  { value: '510123456789012350', name: '吴九' },
  { value: '510123456789012351', name: '郑十' },
  { value: '510123456789012352', name: '冯十一' },
  { value: '510123456789012353', name: '陈十二' },
  { value: '510123456789012354', name: '褚十三' },
  { value: '510123456789012355', name: '卫十四' },
  { value: '510123456789012356', name: '蒋十五' },
  { value: '510123456789012357', name: '沈十六' },
  { value: '510123456789012358', name: '韩十七' },
  { value: '510123456789012359', name: '杨十八' },
  { value: '510123456789012360', name: '朱十九' },
  { value: '510123456789012361', name: '秦二十' },
  { value: '510123456789012362', name: '尤二十一' },
  { value: '510123456789012363', name: '许二十二' },
  { value: '510123456789012364', name: '何二十三' },
  { value: '510123456789012365', name: '吕二十四' },
];
const items2 = [
  { value: '510123456789012366', name: '施二十五' },
  { value: '510123456789012367', name: '张二十六' },
  { value: '510123456789012368', name: '孙二十七' },
  { value: '510123456789012369', name: '曹二十八' },
  { value: '510123456789012370', name: '严二十九' },
  { value: '510123456789012371', name: '华三十' },
  { value: '510123456789012372', name: '邱三十一' },
  { value: '510123456789012373', name: '高三十二' },
  { value: '510123456789012374', name: '林三十三' },
];
const options = reactive({
  data: items,
});
const options2 = reactive({
  data: items2,
});
//单选框分组
const groupFilterList1 = ref(['全天', '上午', '下午']);
let groupFilterChoose1 = ref('全天');

// 分割器
const collapsed = ref(false);
const disableBarSize = '2px';

const sizeChange = (size) => {
  console.log(size);
};

// tab切换
const id = ref('tab1');

//X-EMR-VUE

const patient = ref({})

var editor = null
//加载编辑器
const onLoad = (e) => {
  editor =  e.target.contentWindow.editor

  setTimeout(()=>{
    //异步加载文档
    editor.loadUrl('/mock/bind_data.html').then(()=>{
      patient.value = editor.getBindObject()
    })
    //文档输入后表单值随着变化
    editor.document.addEventListener('input', ()=>{
      patient.value = editor.getBindObject()
    })
  }, 0)

}

//表单数据改变
const bindData = () => {
  editor.setBindObject(patient.value)
}


const getNameByValue = (value) => {
  const item = items.find((item) => item.value === value);
  if(item){
    return item.name;
  }
  else{
    const item = items2.find((item) => item.value === value);
    if(item){
      return item.name;
    }else{
      return null;
    }
  }
};

const handleInput = (value) => {
  console.log(value1["value"]);
  console.log(getNameByValue(value1["value"]))
  patient.value.pat_name = getNameByValue(value1["value"]);
  editor.setBindObject(patient.value)
}
</script>

<template>
  <section>
    <d-splitter style="height: 1000px" class="splitter-border" orientation="vertical" :disableBarSize="disableBarSize">
      <template v-slot:DSplitterPane>
        <d-splitter-pane size="30px" minSize="30px" maxSize="50px" :collapsed="collapsed" :collapsible="true" @sizeChange="sizeChange">
          <div class="pane-content">
            <d-radio-group class="mb-2 patient" direction="row" v-model="groupFilterChoose1" >
              <d-radio v-for="item in groupFilterList1" :key="item" :value="item">
                {{ item }}
              </d-radio>
            </d-radio-group>
            <d-select size="sm" class="mb-2 patient patient-select" v-model="value1" overview="underlined" placeholder="请选择患者" :allow-clear="true" filter @value-change="handleInput">
              <d-option-group label="待诊病人">
                <d-option v-for="(item, index) in options.data" :key="index" :value="item.value" :name="item.name"></d-option>
              </d-option-group>
              <d-option-group label="已诊病人">
                <d-option v-for="(item, index) in options2.data" :key="index" :value="item.value" :name="item.name"></d-option>
              </d-option-group>
            </d-select>
            <d-button size="sm" class="patient">患者管理</d-button>
          </div>
        </d-splitter-pane>
        <d-splitter-pane style="overflow: hidden">
          <div class="pane-content">
            <d-tabs v-model="id" custom-width="100px">
              <d-tab id="tab1" title="门诊病历">
                <d-row>
                  <d-col :span="16">
                    <Editor @load="onLoad" style="margin: 10px 0;"></Editor>
                  </d-col>
                  <d-col :span="8">
                    <d-card style="margin: 10px;">
                      <d-form  @change="bindData()" label-width="auto">
                        <d-form-item label="姓名">
                          <d-input v-model="patient.pat_name" ></d-input>
                        </d-form-item>
                        <d-form-item label="性别">
                          <d-input v-model="patient.pat_sex"></d-input>
                        </d-form-item>
                        <d-form-item label="年龄">
                          <d-input v-model="patient.pat_age"></d-input>
                        </d-form-item>
                        <d-form-item label="就诊科室">
                          <d-input v-model="patient.visit_dept"></d-input>
                        </d-form-item>
                        <d-form-item label="就诊号">
                          <d-input v-model="patient.pat_id"></d-input>
                        </d-form-item>
                        <d-form-item label="就诊时间">
                          <d-date-picker-pro v-model="patient.visit_time" format="YYYY-MM-DD hh:mm"></d-date-picker-pro>
                          <d-radio-group v-model="patient.firstcall" style="margin-left: 10px;">
                            <d-radio value="1">初诊</d-radio>
                            <d-radio value="2">复诊</d-radio>
                          </d-radio-group>
                        </d-form-item>
                        <d-form-item label="联系电话">
                          <d-input v-model="patient.pat_phone"></d-input>
                        </d-form-item>
                        <d-form-item label=" 家庭住址">
                          <d-input v-model="patient.pat_address"></d-input>
                        </d-form-item>
                        <d-form-item label=" 主诉">
                          <d-input v-model="patient.pat_appeal"></d-input>
                        </d-form-item>
                        <d-form-item label=" 现病史">
                          <d-input v-model="patient.pat_now_history"></d-input>
                        </d-form-item>
                        <d-form-item label=" 既往史">
                          <d-input v-model="patient.pat_past_history"></d-input>
                        </d-form-item>
                        <d-form-item label=" 过敏史">
                          <d-input v-model="patient.pat_allergy_history"></d-input>
                        </d-form-item>
                        <d-form-item label=" 诊断">
                          <d-input v-model="patient.diagnosis"></d-input>
                        </d-form-item>
                        <d-form-item label=" 处方">
                          <d-input v-model="patient.presc" type="textarea"></d-input>
                        </d-form-item>
                        <d-form-item label=" 建议">
                          <d-input v-model="patient.advice"></d-input>
                        </d-form-item>
                        <d-form-item label=" 医生签字">
                          <d-input v-model="patient.doctor_name"></d-input>
                        </d-form-item>
                      </d-form>
                    </d-card>
                  </d-col>
                </d-row>
              </d-tab>
              <d-tab id="tab2" title="门诊诊断">
                <tab2></tab2>
              </d-tab>
              <d-tab id="tab3" title="处方管理">
                <tab3></tab3>
              </d-tab>
              <d-tab id="tab4" title="申请单">
                <tab4></tab4>
              </d-tab>
              <d-tab id="tab5" title="历史病历">
                <tab5></tab5>
              </d-tab>
            </d-tabs>
          </div>
        </d-splitter-pane>
<!--        <d-splitter-pane size="150px" :resizable="false" :collapsible="true">-->
<!--          <div class="pane-content">-->
<!--            <h2>Bottom</h2>-->
<!--            <div>height: 150px, resizable: false</div>-->
<!--          </div>-->
<!--        </d-splitter-pane>-->
      </template>
    </d-splitter>
  </section>

</template>

<style scoped>
.patient-select {
  width: auto;
}
.patient {
  position: relative;
  bottom: 0;
  margin-right: 16px;
  float: left;
}

.pane-content {
  padding: 0 12px;
}
</style>