<template>
  <el-drawer v-loading="loading" :model-value="visible" title="问诊订单详情" size="70%" style="--el-drawer-padding-primary: 0"
    @close="close">
    <div class="h-full">
      <illness-summary v-if="order" :order="order">
        <template #head>
          <div class="py-10px text-14px leading-24px">
            <span class="text-16px" :style="{color:order.statusColor}">{{ order.statusText }}</span>
            <span v-if="order.reason" class="ml-10px text-gray-500">原因： {{ order.reason ||'' }} </span>
          </div>
        </template>
        <template #footer>
          <div v-if="showChatHistoryBtn || showRxBtn" class="text-center py-12px bg-white relative z-1"
            common-shadow--r>
            <el-button v-if="showChatHistoryBtn" plain class="w-100px" type="primary"
              @click="viewChatHistory()">聊天记录</el-button>
            <el-button v-if="showRxBtn && rx" plain class="w-100px" type="primary"
              @click="showRx()">关联处方订单</el-button>
          </div>
        </template>
      </illness-summary>
    </div>
  </el-drawer>
  <preview-drawer :record="rx" :order="order" :visible="previewVisible"  @viewPatient="viewArchive(record)"
    @close="previewVisible = false" @change="queryRxOrder"/>

</template>
<script setup>
import { computed, ref, watch } from 'vue';
import illnessSummary from "@/components/illness-summary/illness-summary.vue";
import { getOrderDiagnosis } from '@/api/hlw.js'

import MyLayout, { LayoutMain, LayoutItem } from "@/components/layout";
import previewDrawer from './preview-drawer.vue';

const emits = defineEmits(['close', 'viewChatHistory'])
const props = defineProps({
  visible: {
    type: Boolean,
    default: false
  },
  order: {
    type: Object,
    default: () => ({})
  },
  showChatHistoryBtn: {
    type: Boolean,
    default: false
  },
  showRxBtn: {
    type: Boolean,
    default: false
  },
})
const rx = ref(null)
const previewVisible = ref(false);

function close() {
  emits('close', false)
}

function viewChatHistory() {
  emits('viewChatHistory')
}

function showRx() {
 previewVisible.value = true;
}

async function queryRxOrder() {
  const { success, data, message } = await getOrderDiagnosis({ orderId: props.order.orderId, doctorNo: props.order.doctorCode });
  rx.value = data.data;
}

watch(() => props.visible, (val) => {
  rx.value = null
  if (val && props.showRxBtn) {
    queryRxOrder()
  }
});
</script>