<template>
  <view>
    <uni-nav-bar left-icon="left" background-color="#fff" :border="false" title="患者详情" @clickRight="onClickRight">
      <template v-slot:right>
        <view class="flex nav-right">
          切换至概览 <u-image class="icon-change" src="@/static/images/change-dark.png" mode="aspectFill"></u-image>
        </view>
      </template>
    </uni-nav-bar>

    <view class="flex u-m-40 u-m-r-40 align-top content" v-if="currentPatient">
      <view class="flex-1 u-m-r-20 column">
        <uni-section type="line" title="患者信息" titleFontSize="16px">
          <template v-slot:right>
            <view class="u-tips-color">
              <text class="u-m-r-20">{{ currentPatient?.patientName }}</text>
              <text class="u-m-r-20">{{ GET_GENDER_TEXT_BY_CODE(currentPatient!.patientGender) }}</text>
              <text>{{ currentPatient?.patientAge }}</text>
            </view>
          </template>
        </uni-section>

        <!-- 患者基本信息 -->
        <view class="item-card uni-pa-10 u-m-r-20 bg-white border-success" @click="showMode = 'base'">
          <view class="flex">
            <view class="flex-1">
              <view class=" font-bold flex-1 u-tips-color u-m-b-20">
                <text class="u-m-r-20">患者基本信息</text>
              </view>
              <view>
                <u-tag class="u-m-r-20 u-m-b-12" text="姓名" type="success" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="性别" type="success" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="民族" type="success" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="身份证" type="success" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="来院方式" type="success" size="mini" />
              </view>
            </view>
            <uni-icons type="right" color="#999" size="16" />
          </view>
        </view>

        <!-- 急救信息记录 -->
        <view class="item-card u-m-r-20 u-m-t-30 bg-primary" @click="showMode = 'record'">
          <view class="flex count-wrap" v-if="nextNode?.nextStepName">
            {{ nextNode.nextStepName }}

            <view class="flex-1 flex justify-end">
              <view class="time-item">{{ leftTime.hours }}</view> :
              <view class="time-item">{{ leftTime.minutes }}</view> :
              <view class="time-item">{{ leftTime.seconds }}</view>
            </view>
          </view>
          <view class="flex bg-white item-card-content">
            <view class="flex-1">
              <view class=" font-bold flex-1 u-tips-color u-m-b-20">
                <text class="u-m-r-20">急救信息记录</text>
              </view>
              <view>
                <u-tag class="u-m-r-20 u-m-b-12" text="身高" type="primary" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="体重" type="primary" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="BMI" type="primary" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="脉搏" type="primary" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="mRS" type="primary" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="NIHSS" type="primary" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="知情同意书" type="primary" size="mini" />
                <u-tag class="u-m-r-20 u-m-b-12" text="静脉溶栓" type="primary" size="mini" />
              </view>
            </view>
            <uni-icons type="right" color="#999" size="16" />
          </view>
        </view>

        <view class="btn-create" @click="openThrombolysisRecord">
          <image class="icon-plus" src="@/static/images/plus-white.png" mode="scaleToFill" />
          急诊溶栓记录
        </view>
      </view>

      <!-- right -->
      <view class="flex-3">
        <!-- 患者基本信息 -->
        <DetailBase ref="baseRef" v-if="showMode === 'base'" />

        <!-- 患者急救记录 -->
        <DetailAidRecord ref="recordRef" v-else />
      </view>
    </view>
  </view>
</template>

<script lang="ts" setup>
import { useServiceStore } from '@/store/modules/service';
import { computed, ref, provide } from 'vue';
import { GET_GENDER_TEXT_BY_CODE } from '@/config/service';
import { useNextNode } from '@/hooks/useNextNode'
import { useGetFirstAidId } from '@/hooks/useGetFirstAidId';
import { onBackPress } from '@dcloudio/uni-app'

const serviceStore = useServiceStore()
const { nextNode, intervalGetNextCode, leftTime } = useNextNode()
const { firstAidId } = useGetFirstAidId(getAidInfo)

const baseRef = ref()
const recordRef = ref()
const showMode = ref('base') // 当前显示的模块 base 基本信息, record急救记录
const currentPatient = computed(() => serviceStore.currentPatient)

provide('firstAidId', firstAidId)


// 查病历数据
async function getAidInfo(firstAidId: string) {
  try {
    const data = await uni.$u.api.getAidInfo(firstAidId)
    serviceStore.setCurrentPatient(data)
    baseRef.value?.init()
    recordRef.value?.init()
  } catch (error) {
    serviceStore.setCurrentPatient(null)
    baseRef.value?.init()
    recordRef.value?.init()
    uni.$u.alertError(error)
  }
}

function onClickRight() {
  uni.$u.openPage('detail1', true, `firstAidId=${firstAidId.value}`)
}
// 打开急诊溶栓记录
function openThrombolysisRecord() {
  uni.$u.openPage('thrombolysisRecord', false, `firstAidId=${firstAidId.value}`)
}

onBackPress(() => {
  console.log('back');

  uni.$u.openPage('patient-list', true)
  return true
})

intervalGetNextCode()

</script>

<style lang="scss" scoped>
:deep(.uni-navbar__header-btns) {
  width: 200rpx !important;
}

.icon-change {
  width: 40rpx !important;
  height: 40rpx !important;
  margin-left: 0.5em;
  opacity: .9 !important;
}

.item-card {
  // padding-left: 10rpx;
  border-radius: 20rpx;
  background-color: #fff;

  .item-card-content {
    margin-left: 0.5em;
    border-radius: 10px;
    padding: 1em;
  }

  .count-wrap {
    color: #fff;
    padding: 1em;
    font-weight: bold;

    .time-item {
      background-color: #fff;
      color: $u-type-primary;
      padding: 0 2px;
      border-radius: 4px;
      margin: 0 3px;
    }
  }

}

.head {
  height: 140rpx;
  padding: 0 20px;
}

.btn-create {
  @extend .bg-main;
  height: 3em;
  margin: 2em;
  // padding: 0 2em;
  display: flex;
  justify-content: center;
  align-items: center;
  border-radius: 1.5em;
  color: #fff;

  .icon-plus {
    width: 32rpx;
    height: 32rpx;
    margin-right: 0.5em;
  }
}

.icon-doctor {
  position: relative;
  z-index: 0;
  width: 140rpx;
  height: 140rpx;
  transform: scale(1.1) translate3d(-50%, 24%, 0);
}

.content {
  position: relative;
  z-index: 99;
}
</style>
