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

    <view class="flex justify-between head">
      <view class="column text-white">
        <text class="u-font-xl font-bold">暴风眼质控</text>
        <text>高效 便捷 精准</text>
      </view>

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

    <view class="flex u-m-l-40 u-m-r-40 align-top content">
      <view class="flex-1 u-m-r-20 column">
        <view class="item-card u-m-r-20 bg-white">
          <view class="flex justify-between u-m-b-16">
            <view class="u-font-xl font-bold flex-1">
              <text class="u-m-r-20">{{ '脏兵' }}</text>
              <text class="u-m-r-20">{{ '男' }}</text>
              <text>{{ '24 ' }}</text>
            </view>
            <uni-icons type="compose" color="#888" size="24" />
          </view>
          <u-tag text="AS急性脑卒中" type="primary" size="mini" />
          <view class="u-tips-color u-font-sm u-p-t-20">
            身份证：<text>1222222222</text>
          </view>
        </view>

        <view class="item-card u-m-r-20 bg-white u-m-t-30">
          <view class="flex justify-between u-m-b-16">
            <view class="u-font-xl font-bold flex-1">
              <text class="u-m-r-20">{{ '脏兵' }}</text>
            </view>
            <uni-icons type="compose" color="#888" size="24" />
          </view>

          <view class="flex justify-between">
            <u-tag text="AS急性脑卒中" type="primary" size="mini" />
            <view class="u-tips-color">距发病时间 <text class="primary">194′′</text></view>
          </view>

          <view class="u-tips-color u-font-sm u-p-t-20 flex justify-between">
            <view>
              身份证：<text>1222222222</text>
            </view>
            <view>距CT25′′剩余9′′</view>
          </view>
        </view>


        <view class="item-card u-m-r-20 bg-white u-m-t-30">
          <view class="flex justify-between u-m-b-16">
            <view class="u-font-xl font-bold flex-1">
              mRS评分：<text class="u-m-r-20 primary">{{ '4' }}</text>
              NIHSS评分：<text class="u-m-r-20 primary">{{ '4' }}</text>
            </view>
            <uni-icons type="compose" color="#888" size="24" />
          </view>

          <view class="flex justify-between u-m-b-16">
            <view class="u-font-xl font-bold flex-1">
              舒张压/收缩压：<text class="u-m-r-20 primary">{{ '4' }}</text>
            </view>
          </view>

          <u-tag text="AS急性脑卒中" type="primary" size="mini" />

          <view class="u-tips-color u-font-sm u-p-t-20 flex ">
            身高：<text class="u-m-r-20">1222222222</text>
            体重：<text class="u-m-r-20">1222222222</text>
            BMI：<text class="u-m-r-20">1222222222</text>
          </view>

          <view class="u-tips-color u-font-sm u-p-t-20 flex ">
            脉搏：<text class="u-m-r-20">1222222222</text>
          </view>
        </view>
      </view>


      <!-- timeline -->
      <view class="flex-1 item-card">
        <u-time-line>
          <u-time-line-item node-top="4">
            <template v-slot:node>
              <uni-icons type="smallcircle" color="#00C767" size="16" />
            </template>
            <template v-slot:content>
              <view class="flex justify-between">
                <text class="font-xl font-bold">分诊</text>
                <text>结束</text>
              </view>
              <view class="u-m-t-20">时间</view>
            </template>
          </u-time-line-item>
          <u-time-line-item node-top="4">
            <template v-slot:node>
              <uni-icons type="smallcircle" color="#00C767" size="16" />
            </template>
            <template v-slot:content>
              <view class="flex justify-between">
                <text class="font-xl font-bold">分诊</text>
                <text>结束</text>
              </view>
              <view class="u-m-t-20">时间</view>
            </template>
          </u-time-line-item>
          <u-time-line-item node-top="4">
            <template v-slot:node>
              <uni-icons type="smallcircle" color="#00C767" size="16" />
            </template>
            <template v-slot:content>
              <view class="flex justify-between">
                <text class="font-xl font-bold">分诊</text>
                <text>结束</text>
              </view>
              <view class="u-m-t-20">时间</view>
            </template>
          </u-time-line-item>
        </u-time-line>
      </view>
    </view>

    <!-- 创建患者 -->
    <!-- <CreatePatient @on-scan="uploadImage" @on-cancel="onCancel" @on-confirm="onConfirm" /> -->

    <!-- float button -->
    <FloatButton />
  </view>
</template>

<script lang="ts" setup>
function onClickLeft() {

  console.log('left');

}

function onClickRight() {
  uni.$u.openPage('detail2')
}

function uploadImage() {
  uni.chooseImage({
    count: 1,
    sizeType: ['original'], // 可以指定是原图还是压缩图，默认二者都有
    sourceType: ['album', 'camera'], //从相册选择
    success: function (res) {
      console.log(JSON.stringify(res.tempFilePaths));
    }
  });
}
</script>

<style lang="scss" scoped>
.bg-main-r {
  height: 60vh;

  :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: 1em;
    border-radius: 6px;
    background-color: #fff;
  }
}



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

.btn-create {
  background-color: #fff;
  height: 3em;
  padding: 0 3em;
  display: flex;
  align-items: center;
  border-radius: 1.5em;

  .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>
