<template>
  <!-- Modal -->
  <a-modal
    v-model:visible="modalVisible"
    fullscreen
    :title="'问诊详情'"
    title-align="start"
    :auto-label-width="true"
    :footer="false"
    @cancel="handleClose"
  >
    <div class="titlebox">
      <div class="bar"></div>
      <div class="name">订单信息</div>
    </div>
    <a-form :model="modalForm" ref="modalFormRef" :auto-label-width="true">
      <a-row :gutter="24" style="margin-top: 35px">
        <a-col :span="12">
          <a-form-item field="inquiry_no" label="订单编号：">
            <span>{{ modalForm.inquiry_no }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="order_product_status" label="订单状态：">
            <span>{{ formatInquiryStatus(modalForm.inquiry_status) }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item field="user.created_at" label="支付时间：">
            <span v-if="parseTime(modalForm.pay_time)">{{
              parseTime(modalForm.pay_time)
            }}</span>
            <span v-else>-</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="reception_time" label="接诊时间：">
            <span v-if="parseTime(modalForm.reception_time)">{{
              parseTime(modalForm.reception_time)
            }}</span>
            <span v-else>-</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24">
        <a-col :span="12">
          <a-form-item field="inquiry_type" label="问诊类型：">
            <span>{{ formatInquiryType(modalForm.inquiry_type) }}</span>
          </a-form-item>
        </a-col>
        <a-col :span="12">
          <a-form-item field="inquiry_mode" label="问诊类型：">
            <span>{{ formatMode(modalForm.inquiry_mode) }}</span>
          </a-form-item>
        </a-col>
      </a-row>
     
      <a-divider />
      <div class="titlebox" v-if="modalForm.user_doctor">
        <div class="bar"></div>
        <div class="name">医生信息</div>
        <a-space
          style="
            margin-right: 8px;
            flex: 1;
            display: flex;
            justify-content: flex-end;
          "
        >
          <a-button type="primary" @click="openDcotor"
            >查看医生完整信息</a-button
          >
        </a-space>
      </div>
      <a-row :gutter="24" style="margin-top: 35px">
        <a-col :span="24">
          <a-form-item field="license_cert" :hide-label="true">
            <div class="doctorInfo" v-if="modalForm.user_doctor">
              <a-space size="large">
                <a-image
                  width="80"
                  height="80"
                  class="headImg"
                  :src="modalForm.user_doctor.avatar"
                  v-if="modalForm.user_doctor.avatar"
                >
                </a-image>
                <a-image
                  width="80"
                  height="80"
                  class="headImg"
                  src="https://img.applets.igandanyiyuan.com/basic/file/doctor_avatar.png"
                  v-else
                >
                </a-image>
              </a-space>
              <div class="infobox">
                <div class="name">
                  {{ modalForm.user_doctor.user_name }}&nbsp;&nbsp;{{
                    formatDoctorTitle(modalForm.user_doctor.doctor_title)
                  }}
                </div>
                <div class="hospital">
                  {{
                    modalForm.user_doctor.hospital.hospital_name
                  }}&nbsp;&nbsp;{{
                    modalForm.user_doctor.department_custom_name
                  }}
                </div>
              </div>
            </div>
            <div class="doctorInfo" v-else>暂未分配到医生</div>
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider v-if="modalForm.user_doctor" />
      <div class="titlebox">
        <div class="bar"></div>
        <div class="name">就诊人信息</div>
        <a-space
          style="
            margin-right: 8px;
            flex: 1;
            display: flex;
            justify-content: flex-end;
          "
        >
          <a-button type="primary" status="warning" @click="openPatient"
            >查看就诊人完整信息</a-button
          >
        </a-space>
      </div>
      <a-row
        :gutter="24"
        style="margin-top: 35px"
        v-if="modalForm.order_inquiry_case"
      >
        <a-col :span="24">
          <a-form-item label="就诊人姓名：">
            <span
              >{{ modalForm.order_inquiry_case.name }}&nbsp;&nbsp;（{{
                modalForm.order_inquiry_case.sex == 1 ? '男' : '女'
              }}&nbsp;&nbsp;{{ modalForm.order_inquiry_case.age }}岁）</span
            >
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.order_inquiry_case">
        <a-col :span="24">
          <a-form-item field="inquiry_no" label="病情描述：">
            <span>{{ modalForm.order_inquiry_case.disease_desc }}</span>
          </a-form-item>
        </a-col>
      </a-row>
      <a-row :gutter="24" v-if="modalForm.order_inquiry_case">
        <a-col :span="24">
          <a-form-item field="inquiry_no" label="确诊疾病：">
            <span
              >{{
                modalForm.order_inquiry_case.disease_class_name
              }}&nbsp;&nbsp;{{
                modalForm.user_doctor.department_custom_name
              }}</span
            >
          </a-form-item>
        </a-col>
      </a-row>
      <a-divider />
    </a-form>
    <div class="titlebox">
      <div class="bar"></div>
      <div class="name">聊天记录</div>
    </div>
    <a-form-item field="license_cert" :hide-label="true">
      <chatRecord :id="modalForm.order_inquiry_id" :user_doctor="modalForm.user_doctor"></chatRecord>
    </a-form-item>
    <a-divider />
    <div class="titlebox">
      <div class="bar"></div>
      <div class="name">操作</div>
    </div>
    <a-row :gutter="24" style="margin-top: 35px">
      <a-col :span="24">
        <a-form-item field="" label="" no-style>
          <a-space
            style="margin-right: 8px"
            v-if="
              modalForm.report_pre_status == 2 &&
              modalForm.refund_status != 2 &&
              modalForm.refund_status != 3
            "
          >
            <a-button
              type="primary"
              v-has="'admin:sysProductList:report'"
              @click="
                () => {
                  isVisible = true;
                  order_product_id = modalForm.order_product_id;
                }
              "
              >上报处方平台</a-button
            >
          </a-space>
          <!-- 订单状态=2退款状态=4，5支付状态=2上报状态!=1 -->
          <a-space
            style="margin-right: 8px"
            v-if="
              modalForm.order_product_status == 2 &&
              modalForm.pay_status == 2 &&
              (modalForm.refund_status == 4 ||
                modalForm.refund_status == 5 ||
                modalForm.refund_status == 0) &&
              modalForm.report_pre_status != 1
            "
          >
            <a-button
              type="primary"
              v-has="'admin:sysProductList:cancel'"
              status="danger"
              @click="
                () => {
                  okVisible = true;
                  cur_product_id = modalForm.order_product_id;
                }
              "
              >取消药品订单</a-button
            >
          </a-space>
        </a-form-item>
      </a-col>
    </a-row>
  </a-modal>
  <!-- 医生详情弹框 -->
  <doctorModal
    :doctorVisible="doctorVisible"
    :doctor_id="doctor_id"
    @doctorVisibleChange="
      () => {
        doctorVisible = false;
        doctor_id = '';
      }
    "
  ></doctorModal>
  <!-- 患者详情弹窗 -->
  <patientModal
    :patientVisible="patientVisible"
    :data="patientData"
    @patientVisibleChange="
      () => {
        patientVisible = false;
      }
    "
  ></patientModal>
</template>
<script setup>
import { ref, toRefs, reactive, watch,nextTick } from 'vue';
import { formatDoctorTitle } from '@/utils/format';
import { parseTime } from '@/utils/parseTime';
import { inquiryCase} from '@/api/order/list';
import { formatInquiryType, formatInquiryStatus,formatMode } from '@/utils/format';
const emits = defineEmits(['inquiryVisibleChange']);
const props = defineProps({
  // 是否显示
  modalVisible: {
    type: Boolean,
    default: false,
  },
  modalForm: {
    type: Object,
    default:{
      order_inquiry_case:{
        inquiry_case_id:''
      }
    }
  },
});
const doctorVisible = ref(false);
const doctor_id = ref('');
const patientVisible = ref(false);

const patientData = reactive({});
const { modalVisible, modalForm } = toRefs(props);
const openPatient = () => {
  patientVisible.value = true;
};
const order_inquiry_id=ref('');
watch(() => props.modalForm,() => {
    if (
      props.modalForm.order_inquiry_case &&
      props.modalForm.order_inquiry_case.inquiry_case_id
    ) {
      let id = props.modalForm.order_inquiry_case.inquiry_case_id;
      inquiryCase(id).then((data) => {
        Object.assign(patientData, data.data);
      });
    }
    // if(props.modalForm.order_inquiry_id){
    //     order_inquiry_id.value=props.modalForm.order_inquiry_id;
    //   }
  },{ immediate: true, deep: true })
const openDcotor = () => {
  doctor_id.value = props.modalForm.doctor_id;
  doctorVisible.value = true;
};
const handleClose = () => {
  emits('inquiryVisibleChange', (modalVisible.value = false));
};

</script>
<style scoped>
.headImg {
  margin-right: 20px;
  border-radius: 50%;
  width: 80px;
  height: 80px;
}
.doctorInfo {
  display: flex;
  align-items: center;
}
.infobox {
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

</style>