<!--module/health/components/report-health-index/report-health-index.wxml-->
<view wx:if="{{i18n.healthIndex.__show__}}">
  <view class="card-wrapper constitution-container">
    <view class="card-header constitution-box">
      <block slot="title">
        <t-loading wx:if="{{loading}}" theme="spinner" size="20px" class="loading" />
        <view class="card-title">
          <view>
            <image src="../../assets/icon/icon_index@2x.png" class="icon-title" />
          </view>
          <view class="text-title">{{i18n.healthIndex.title}}</view>
        </view>
      </block>


      <block slot="right-icon">
        <slot name="extra"></slot>
      </block>

    </view>
    <view class="nodata-box" wx:if="{{!loading && !dataset.length}}">
      <view slot="description" wx:if="{{!loading && !dataset.length}}">暂无数据</view>
    </view>
  </view>

  <t-cell wx:for="{{dataset}}" t-class="card-body health-index cell-border-gradient" t-class-title="health-index__title" t-class-description="health-index__slider">
    <block slot="title">
      <text>{{item.name}}</text>
      <text style="font-size: 12px;">({{item.unit}})</text>
    </block>
    <block slot="description">
      <view class="value {{item.valueType}}" style="left: {{item.valueOffset}};">
        <text>{{item.value}}</text>
        <text class="description">{{item.description}}</text>
      </view>
      <view class="track track__bg"></view>
      <view class="track track__value" style="left: {{item.valueOffsetLeft}};right: {{item.valueOffsetRight}};"></view>
      <view class="track track__scope" style="left: {{item.scopeOffsetLeft}};right: {{item.scopeOffsetRight}};"></view>
      <view class="track track__point {{item.valueType}}" style="left: {{item.valueOffset}};"></view>
      <view class="point point__left" style="left: {{item.scopeOffsetLeft}};">{{item.min}}</view>
      <view class="point point__right" style="right: {{item.scopeOffsetRight}};">{{item.max}}</view>
    </block>
  </t-cell>

  <t-empty wx:if="{{message}}" t-class="empty-wrapper error" icon="info-circle" description="{{message}}" />
</view>