<wrapper>
  <view class="result-root {{ 'root-' + result.status }}">
    <!-- 预约成功 -->
    <block a:if="{{ result.status === 1 }}">
      <view class="result-block">
        <view class="result-block-top">
          <view class="result-block-row center">
            <icon type="success" size="40" color="#22b35e"/>
            <text class="result-block-success">已完成</text>
          </view>

          <view class="result-block-row" a:for="{{ viewItem.slice(0, 4) }}" key="{{ index }}">
            <view class="result-form-label">{{ item.label }}</view>

            <view class="result-form-val" a:if="{{ item.key === 'date' }}">{{ result.registeredDate}}</view>
            <view class="result-form-val" a:elif="{{ item.key === 'time' }}">
              <text a:if="{{ result.timeRange }}">{{ result.timeRange }}</text>
              <text a:if="{{ result.queueNum }}" style="margin-left: 20rpx;">{{ result.queueNum }}号</text>
            </view>
            <view class="result-form-val" a:else >{{ result[item.key] || '-' }}</view>
          </view>
        </view>

        <view class="result-block-dashed" />

        <view class="result-card">
          <view class="result-card-row" a:for="{{ viewItem.slice(4) }}" key="{{ index }}">
            <block a:if="{{ item.key === 'price' }}">
              <view class="result-card-label">{{ item.label }}</view>
              <view class="result-card-val">
                <text class="{{ result.payType === '就诊时支付' ? 'light' : '' }}">
                  <text a:if="{{ result.payType === '就诊时支付' }}"></text>
                  <text a:else>（已支付）</text>
                  <text>￥{{ result.amount }}</text>
                </text>
              </view>
            </block>

            <block a:elif="{{ item.key === 'name' }}">
              <view class="result-card-label">{{ item.label }}</view>
              <view class="result-card-val">
                {{ result.userName }}
                <text a:if="{{ result.sex }}">，{{ result.sex }}</text>
                <text a:if="{{ result.age }}">，{{ result.age }}岁</text>
              </view>
            </block>

            <block a:elif="{{ item.key === 'doctor' }}">
              <view class="result-card-label">{{ item.label }}</view>
              <view class="result-card-val">{{ result.level ? result.level + ' | ' + result.doctorName : result.doctorName }}</view>
            </block>

            <block a:elif="{{ item.key === 'card' }}">
              <block a:if="{{ result.cardNum }}">
                <view class="result-card-label">{{ item.label }}</view>
                <view class="result-card-val">
                  <view>{{ result.cardNum }}</view>
                </view>
              </block>
              <view a:else class="result-card-support">
                <icon class="icon" type="warn" size="12" color="#ff6430"></icon>
                <text>该就诊人还未办理医院就诊卡，就诊当天请先去窗口/自助机凭身份证/医保卡办理就诊卡</text>
              </view>
            </block>

            <block a:else>
              <view class="result-card-label">{{ item.label }}</view>
              <view class="result-card-val">{{ result[item.key] || '--' }}</view>
            </block>
          </view>
        </view>
      </view>
      <!-- 底部路线按钮隐藏 -->
      <!-- <static-block /> -->
      <view class="footer-container">
        <view class="back-to-home" onTap="toBackHome">回到首页</view>
        <view class="result-button" onTap="onCancel"><text class="txt">{{ result.amount > 0 ? '取消预约' : ''}}</text></view>
      </view>
    </block>

    <!-- 叫号中 -->
    <block a:if="{{ result.status === 2 }}">
      <!-- <view class="result-block result-center">
        <view class="result-block-big">
          <text class="theme line">88号</text>
          <text>前面就诊 <text class="theme">{{ result.num }}</text> 位</text>
        </view>
        <view class="theme result-tip">排队中</view>
        <view class="result-gray">请不要走远，过号后将顺延3人</view>
      </view> -->
      <view class="result-block result-center">
        <view class="result-block-row center">
          <icon type="success" size="40" color="#22b35e"/>
          <text class="result-block-success">{{ result.statusStr}}</text>
        </view>
      </view>
      
      <template is="from" data="{{ viewItem, result }}" />

      <!-- <view class="result-block">
        <view class="result-block-title">
          <view>如何就诊</view>
        </view>

        <view>取号后请到门诊4楼403眼科门诊候诊</view>
        <view class="result-block-btn">
          <text class="result-block-t" onTap="toH5" data-url="https://hospitalupgrade-dev.alipay-eco.com/page/hospital-navigation.html">查看路线</text>
          <text onTap="hrefTo">刷医保</text>
        </view>
      </view> -->

      <!-- <view class="result-block">
        <view class="result-block-title">
          <view>注意事项</view>
        </view>

        <view>1. 请严格按照提示时段就诊，过时作废</view>
        <view>2. 就诊时需携带本人身份证</view>
        <view>3. 就诊时必须携带口罩并请提前准备好健康码</view>
      </view> -->
      <view class="footer-container">
        <view class="back-to-home" onTap="toBackHome">回到首页</view>
        <view class="result-button" onTap="onCancel"><text class="txt">{{ result.amount > 0 ? '取消预约' : ''}}</text></view>
      </view>
    </block>

    <!-- 待支付/已就诊/预期未就诊/取消预约 -->
    <block a:if="{{ result.status === 0 || result.status === 7 || result.status === 8 || result.status === 9 || result.status === 17 || result.status === 11  }}">
      <block a:if="{{ result.status === 0 }}">
      </block>
      <view class="result-block result-block-cansel" a:if="{{ result.status === 0 }}">
        <icon type="waiting" size="32" color="#ff6330"/>
        <view class="result-block-waiting">待支付</view>
        <!-- <view class="result-block-tip">15分钟未支付，订单将自动取消</view> -->
      </view>
      <view class="result-block result-block-cansel success" a:elif="{{ result.status === 7 }}">
        <icon type="success" size="32" color="#22b35e"></icon>
        <view>已就诊</view>
      </view>
      <view class="result-block result-block-cansel" a:elif="{{ result.status === 8 }}">
        <icon type="cancel" size="32" color="#ff3141"></icon>
        <view>逾期未就诊</view>
      </view>
      <view class="result-block result-block-cansel cansel" a:elif="{{ result.status === 9 }}">
        <icon type="cancel" size="32" color="#999"></icon>
        <view>已取消</view>
      </view>
      <view class="result-block result-block-cansel cansel" a:elif="{{ result.status === 17 || result.status === 11 }}">
        <icon type="cancel" size="32" color="#999"></icon>
        <view>已退款</view>
      </view>

      <template is="from" data="{{ viewItem, result }}" />

      <!-- <view class="result-block" a:if="{{ result.status === 8 || result.status === 9 }}">
        <view class="result-block-title">
          <view>关于退款</view>
        </view>

        <view>预约时间前24小时取消预约，已支付金额将会原路退还至支付账户</view>
        <view class="result-block-flex">
          <image a:for="{{ refund }}" key="{{ index }}" class="result-block-image" src="{{ item }}" />
        </view>
      </view> -->

      <view a:if="{{ result.status === 0 }}" class="order-button-wrap">
        <view class="order-pay-tip">暂不支持医保支付，如有需要请去人工窗口/自助机缴费</view>

        <view class="order-button-f">
          <view>挂号费<text class="coder-pay-price">￥{{ result.amount }}</text></view>
          <button type="primary" class="button" onTap="onPay">支付</button>
        </view>
      </view>
      <!-- <view a:else class="result-button" onTap="reAppoint"><text class="txt">再次预约</text></view> -->
    </block>
  </view>

  <modal
    show="{{ modalOpened }}"
    showClose="{{ false }}"
    onButtonClick="onButtonClick"
    buttons="{{ buttons }}"
    zIndex="10"
  >
    <view slot="header">确认取消预约？</view>
    预约来之不易，取消后需重新预约
  </modal>
</wrapper>

<subscribe-msg ref="saveRef" />

<template name="from">
  <view class="result-block tmp">
    <view class="result-block-title">
      <view>挂号信息</view>
    </view>

    <view class="result-card">
      <view class="result-card-row" a:for="{{ viewItem }}" key="{{ index }}">
        <block a:if="{{ item.key === 'price' }}">
          <view class="result-card-label">{{ item.label }}</view>
          <view class="result-card-val">
            <text class="{{ result.payType === '就诊时支付' ? 'light' : '' }}">
              <!-- <text a:if="{{ result.payType === '就诊时支付' }}">（就诊时支付）</text>
              <text a:else>（已支付）</text> -->
              <text>￥{{ result.amount }}</text>
            </text>
          </view>
        </block>

        <block a:elif="{{ item.key === 'date' }}">
          <view class="result-card-label">{{ item.label }}</view>
          <view class="result-card-val">{{ result.registeredDate }}</view>
        </block>

        <block a:elif="{{ item.key === 'time' }}">
          <view class="result-card-label">{{ item.label }}</view>
          <view class="result-card-val">{{ result.timeRange }}</view>
        </block>

        <block a:elif="{{ item.key === 'name' }}">
          <view class="result-card-label">{{ item.label }}</view>
          <view class="result-card-val">
            {{ result.userName }}
            <text a:if="{{ result.sex }}">，{{ result.sex }}</text>
            <text a:if="{{ result.age }}">，{{ result.age }}岁</text>
          </view>
        </block>

        <block a:elif="{{ item.key === 'doctor' }}">
          <view class="result-card-label">{{ item.label }}</view>
          <view class="result-card-val">{{ result.level ? result.doctorName + ' | ' + result.level : result.doctorName }}</view>
        </block>

        <block a:elif="{{ item.key === 'card' }}">
          <block a:if="{{ result.cardNum }}">
            <view class="result-card-label">{{ item.label }}</view>
            <view class="result-card-val">
              <view>{{ result.hisPatientId }}</view>
            </view>
          </block>
          <view a:else class="result-card-support">
            <icon class="icon" type="warn" size="12" color="#ff6430"></icon>
            <text>该就诊人还未办理医院就诊卡，就诊当天请先去窗口/自助机凭身份证/医保卡办理就诊卡</text>
          </view>
        </block>

        <block a:else>
          <view class="result-card-label">{{ item.label }}</view>
          <view class="result-card-val">{{ result[item.key] || '--' }}</view>
        </block>
      </view>
    </view>
  </view>
</template>
