<!-- pages/followUp/index.wxml -->
<view class="follow-up">
  <view class="user-info">
    <t-input bindchange="onInput" data-mode="username" placeholder="请输入姓名" align="right" value="{{form.username}}" status="{{isName ? '' : 'error'}}" tips="{{isName ? '' : '请输入姓名'}}">
      <view slot="label" class="custom-label">姓名</view>
    </t-input>
    <t-input bindchange="onInput" data-mode="mmp_7" placeholder="请输入MMP-7检测值" align="right" type="digit" value="{{form.mmp_7}}" status="{{isMmp ? '' : 'error'}}" tips="{{isMmp ? '' : '请输入MMP-7'}}">
      <view slot="label" class="custom-label">MMP-7 (ng/m)</view>
    </t-input>
    <t-input bindchange="onInput" data-mode="day" placeholder="请输入日龄" align="right" type="number" value="{{form.day}}" status="{{isDay ? '' : 'error'}}" tips="{{isDay ? '' : '请输入日龄'}}">
      <view slot="label" class="custom-label">日龄 (天)</view>
    </t-input>
    <t-input bindchange="onInput" data-mode="mobile" placeholder="请输入手机号" align="right" type="number" value="{{form.mobile}}" status="{{isMobile ? '' : 'error'}}" tips="{{isMobile ? '' : '请输入手机号'}}">
      <view slot="label" class="custom-label">手机号</view>
    </t-input>
  </view>
  <view class="follow-item">
    <view class="custom-label">胆囊</view>
    <view class="wrapper">
      <view class="input-example">
        <view class="input-example__label">请裁剪原始超声图像，使胆囊在画面中尽可能充满整个图像,如右图所示</view>
      </view>
      <t-row gutter="16">
        <t-col span="8">
          <view wx:if="{{!form.gallbladder_image}}" class="improt-file" data-mode="gallbladder_image" bind:tap="handleUpload">
            <view class="upload-flow">
              <text class="iconfont icon-xiangji"></text>
              <view>拍照导入</view>
            </view>
          </view>
          <view wx:else class="report-image" data-mode="gallbladder_image" bind:tap="handleImagePreview">
            <image class="image" src="{{form.gallbladder_image}}" mode=""></image>
            <view class="delete-btn" data-mode="gallbladder_image" catchtap="handleDelete">
              <text class="iconfont icon-x"></text>
            </view>
          </view>
        </t-col>
        <t-col span="16">
          <view class="example-image">
            <image class="image" src="https://image-fudan.oss-cn-beijing.aliyuncs.com/mini_images/mmp_7/img1.png" mode="aspectFill"></image>
          </view>
        </t-col>
      </t-row>
      <view class="tips-err" wx:if="{{!isGallbladder}}">请上传胆囊照片</view>
    </view>
  </view>
  <view class="follow-item">
    <view class="custom-label">门静脉左右分支</view>
    <view class="wrapper">
      <view class="input-example">
        <view class="input-example__label">
          请裁剪原始超声图像，使门静脉（cord sign）的左右分支或其潜在区域在画面中最大化填充,如右图所示
        </view>
      </view>
      <t-row gutter="16">
        <t-col span="8">
          <view wx:if="{{!form.portal_vein_branch_image}}" class="improt-file" data-mode="portal_vein_branch_image" bind:tap="handleUpload">
            <view class="upload-flow">
              <text class="iconfont icon-xiangji"></text>
              <view>拍照导入</view>
            </view>
          </view>
          <view wx:else class="report-image" data-mode="portal_vein_branch_image" bind:tap="handleImagePreview">
            <image class="image" src="{{form.portal_vein_branch_image}}" mode=""></image>
            <view class="delete-btn" data-mode="portal_vein_branch_image" catchtap="handleDelete">
              <text class="iconfont icon-x"></text>
            </view>
          </view>
        </t-col>
        <t-col span="16">
          <view class="example-image">
            <image class="image" src="https://image-fudan.oss-cn-beijing.aliyuncs.com/mini_images/mmp_7/img2.png" mode="aspectFill"></image>
          </view>
        </t-col>
      </t-row>
      <view class="tips-err" wx:if="{{!isPortalVeinBranch}}">请上传门静脉左右分支照片</view>
    </view>
  </view>
  <view class="follow-item">
    <view class="custom-label">门静脉右支横截</view>
    <view class="wrapper">
      <view class="input-example">
        <view class="input-example__label">请裁剪原始超声图像，使肝门区（cord sign）的横切面或其潜在区域在画面中最大化填充,如右图所示</view>
      </view>
      <t-row gutter="16">
        <t-col span="8">
          <view wx:if="{{!form.portal_vein_cross_image}}" class="improt-file" data-mode="portal_vein_cross_image" bind:tap="handleUpload">
            <view class="upload-flow">
              <text class="iconfont icon-xiangji"></text>
              <view>拍照导入</view>
            </view>
          </view>
          <view wx:else class="report-image" data-mode="portal_vein_cross_image" bind:tap="handleImagePreview">
            <image class="image" src="{{form.portal_vein_cross_image}}" mode=""></image>
            <view class="delete-btn" data-mode="portal_vein_cross_image" catchtap="handleDelete">
              <text class="iconfont icon-x"></text>
            </view>
          </view>
        </t-col>
        <t-col span="16">
          <view class="example-image">
            <image class="image" src="https://image-fudan.oss-cn-beijing.aliyuncs.com/mini_images/mmp_7/img3.png" mode="aspectFill"></image>
          </view>
        </t-col>
      </t-row>
      <view class="tips-err" wx:if="{{!isPortalVeinCross}}">请上传门静脉右支横截照片</view>
    </view>
  </view>
  <t-button bindtap="clockIn" theme="primary" block bindtap="toQuestionnaire">提交</t-button>
  <t-image-viewer usingCustomNavbar deleteBtn="{{false}}" closeBtn="{{true}}" showIndex="{{false}}" initial-index="{{imageIndex}}" visible="{{imageVisible}}" images="{{imageList}}" bind:change="onChange" bind:delete="onDelete" bind:close="onClose"></t-image-viewer>
  <t-popup visible="{{visible}}" usingCustomNavbar bind:visible-change="onVisibleChange" placement="center">
    <view class="popup-block">
      <view class="popup-title">
        识别结果：
        <text class="popup-title-text">{{msg}}</text>
      </view>
      <view class="custom-btn" bindtap="confirm">确定</view>
    </view>
  </t-popup>
</view>