<?
viewPlugins("bootstrap");
viewLoad("public/header_person");
switch ($rang) {
    case 'week':
        $activeWeek = 'active';
        break;
    case 'month':
        $activeMonth = 'active';
        break;
    case 'year':
        $activeYear = 'active';
        break;
    default:
        $active = 'active';
}
?>
<style>
#header {
    background-color: #2BA1C7;
    padding: 0;
    position: fixed;
    top: 0;
    width: 100%;
    text-align: center;
    font-size:1rem;
    color:#FAFAFA;
    z-index: 99;
}
#content {
    margin-top: 70px; /* 考虑到固定在上面的 header 高度 */
    background-color: #fafafa;
    padding-left: 0.25rem;
    padding-right: 0.25rem;
    margin-left: 0px;
    margin-right: 0px;
    z-index: 1;
}
a.nav-link{color:#eee}
.nav-tabs .nav-link {
    border: 1px solid transparent;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}
.nav-link {
    display: block;
    padding: 0.5rem 1.5rem;
}

.pane-table {width:100%}
.pane-table td{vertical-align: middle;height:3rem;text-align:left}


.sptable1{width:100%}

.sptable1 thead, .sptable1 tr {
border-top-width: 1px;
border-top-style: solid;
border-top-color: rgb(189, 189, 189);
}
.sptable1 {
border-bottom-width: 1px;
border-bottom-style: solid;
border-bottom-color: rgb(189, 189, 230);
}
.sptable1 thead th{
background-color: #2BA1C7;
color: #FAFAFA;
text-align: left;
} 
 
/* Padding and font style */

.sptable1 td, .sptable1 th {
font-size: 0.8rem;
padding: 0.1rem 0 0.1rem 0.3rem;
font-family: Verdana;
color: #797DA3;
}


 
/* Alternating background colors */
.sptable1 tr:nth-child(even) {
background: #F2F6FA
}
.sptable1 tr:nth-child(odd) {
background: #FFF
}

.sptable1 .col0{width:5em;border-right:1px solid rgb(189, 189, 189);}
.sptable1 .col1{width:3em;border-right:1px solid rgb(189, 189, 189);}
.sptable1 .col2{width:1em;border-right:1px solid rgb(189, 189, 189);}
.sptable1 .col3{width:5em;border-right:1px solid rgb(189, 189, 189);}
.sptable1 .col4{width:5em;border-right:1px solid rgb(189, 189, 189);}
.sptable1 .col5{width:5em;border-right:1px solid rgb(189, 189, 189);}
.sptable1 .col6{width:5em;border-right:1px solid rgb(189, 189, 189);}
.sptable1 .col7{width:5em;border-right:1px solid rgb(189, 189, 189);}
</style>
<style>
/* -------------------------------- 
Modules - reusable parts of our design

-------------------------------- */
#cd-table .cd-unchecked span, #cd-table .cd-checked span {
  display: block;
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
}

/* -------------------------------- 

Main components 

-------------------------------- */
#cd-table {
  position: relative;
  width: 100%;
  max-width: 1200px;
  font-size: 12px;
  /* you may remove this border in case of dark backgrounds if it's annoying */
  border-right: 1px solid #e6e7f1;
}
#cd-table::after {
  /* clearfix */
  content: '';
  display: table;
  clear: both;
}
#cd-table::before {
  /* White color gradient on the right */
  content: '';
  position: absolute;
  top: 0;
  right: -1px;
  height: 100%;
  width: 35px;
  background: -webkit-linear-gradient( right , white 10%, rgba(255, 255, 255, 0));
  background: linear-gradient(to left, white 10%, rgba(255, 255, 255, 0));
  z-index: 5;
  pointer-events: none;
}
.no-cssgradients #cd-table::before {
  /* remove the gradient using modernizr if css gradients are not supported */
  display: none;
}
#cd-table.table-end::before {
  /* the gradient disappears when user is at the end of the table */
  display: none;
}
#cd-table .cd-table-container {
  position: relative;
  width: 100%;
  overflow-x: auto;
  /* smooth scrolling on touch devices */
  -webkit-overflow-scrolling: touch;
}
#cd-table .cd-table-wrapper {
  width: 1100px;
  padding-left: 6.2rem; /*左侧*/
}
#cd-table .cd-table-column {
  width: 150px;
  float: left;
  border: 1px solid #e6e7f1;
  margin-left: -1px;
}
#cd-table .cd-table-column:last-child {
  border-right: none;
}
#cd-table h2, #cd-table ul > li {
  position: relative;
  text-align: left;
  padding: 0 0 0 0.2rem;
  border-bottom: 1px solid #e6e7f1;
  height: 32px;
  line-height: 32px;
  background-color: white;
}
#cd-table h2 {
  font-size: 12px;
  text-transform: uppercase;
  font-weight: bold;
  color: #606272;
}
#cd-table ul > li {
  color: #787a8d;
}
#cd-table ul > li:nth-child(odd) {
  background-color: #f6f7fa;
}
#cd-table ul > li:last-child {
  border-bottom: none;
}
#cd-table .cd-table-container ul > li {
  font-size:0.6rem;
}
#cd-table .cd-unchecked span, #cd-table .cd-checked span {
  position: absolute;
  width: 16px;
  height: 16px;
  background-image: url("../img/yes-no.svg");
  background-repeat: no-repeat;
  background-position: 0 0;
  background-size: 32px 16px;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
#cd-table .cd-unchecked span {
  background-position: -16px 0;
}
#cd-table .cd-select {
  display: block;
  height: 100%;
  width: 100%;
  font-weight: bold;
}
#cd-table header.cd-table-column {
  position: absolute;
  width: 120px;
  height: 100%;
  left: 0;
  top: 0;
  z-index: 10;
  background: rgba(121, 130, 153, 0.95);
  margin-left: 0;
  border-color: #6b758d;
  box-shadow: 2px 0 0 rgba(0, 0, 0, 0.1);
  pointer-events: none;
}
#cd-table header.cd-table-column h2, #cd-table header.cd-table-column li {
  background-color: transparent;
  text-align: left;
  color: #edeef1;
  text-shadow: 0 1px 1px rgba(0, 0, 0, 0.1);
  border-bottom-color: #6b758d;
}
#cd-table header.cd-table-column h2 {
  color: #edeef1;
}
#cd-table header.cd-table-column li:nth-child(odd) {
  background-color: rgba(107, 117, 141, 0.95);
}
#cd-table header.cd-table-column li:last-child {
  border-bottom: 1px solid #6b758d;
}
#cd-table .cd-scroll-right {
  /* small right arrow that indicates it's possible to scroll right */
  display: block;
  width: 16px;
  height: 16px;
  position: absolute;
  right: 0;
  top: 50%;
  margin-top: -8px;
  background: url("../img/small-arrow.svg") no-repeat center center;
  z-index: 6;
  -webkit-animation: cd-scroll-right 1.5s infinite;
  -moz-animation: cd-scroll-right 1.5s infinite;
  animation: cd-scroll-right 1.5s infinite;
}

li i{
color: #D53F3E;
}
@media only screen and (min-width: 870px) {
  #cd-table {
    border-right: none;
  }
  #cd-table::before {
    display: none;
  }
  #cd-table .cd-table-wrapper {
    width: 100%;
  }
  #cd-table .cd-table-column {
    width: 20%;
    float: left;
  }
  #cd-table .cd-table-column:last-child {
    border-right: 1px solid #e6e7f1;
  }
  #cd-table header.cd-table-column {
    width: 16.66667%;
    float: left;
    background: #798299;
    box-shadow: none;
    pointer-events: auto;
  }
  #cd-table .cd-scroll-right {
    display: none;
  }
}
@media only screen and (min-width: 1170px) {
  #cd-table {
    margin: 0.2em auto;
  }
}

@-webkit-keyframes cd-scroll-right {
  0%, 100% {
    -webkit-transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(3px);
  }
}
@-moz-keyframes cd-scroll-right {
  0%, 100% {
    -moz-transform: translateX(0);
  }

  50% {
    -moz-transform: translateX(3px);
  }
}
@keyframes cd-scroll-right {
  0%, 100% {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }

  50% {
    -webkit-transform: translateX(3px);
    -moz-transform: translateX(3px);
    -ms-transform: translateX(3px);
    -o-transform: translateX(3px);
    transform: translateX(3px);
  }
}
#cd-table ul > li.li-night:nth-child(odd){background-color:rgba(107, 117, 141, 0.25);color:#333}
#cd-table ul > li.li-night{background-color:rgba(121, 130, 153, 0.20);color:#333}
</style>
<script>
$(document).ready(function (){
    $('#base-tab a').bind("click",function(e){
        let href = $(this).attr('href');
        if(href!=''){
    		window.location.href = href;
        }
	});
});
</script>
<div id="header">
    <h3 class="card-header"><?=$bigCate?> - 自测记录</h3>
    <nav>
      <div class="nav nav-tabs" id="base-tab" role="tablist">
        <a class="nav-link <?=$activeWeek?>" data="1" data-toggle="tab" href="<?=uUrl($USERID,'measureView','rang=week&bigCate='.urlencode($bigCate))?>" role="tab"><lg>一周内</lg></a>
    	<a class="nav-link <?=$activeMonth?>" data="2" data-toggle="tab" href="<?=uUrl($USERID,'measureView','rang=month&bigCate='.urlencode($bigCate))?>" role="tab"><lg>一月内</lg></a>
    	<a class="nav-link <?=$activeYear?>" dat="3" data-toggle="tab" href="<?=uUrl($USERID,'measureView','rang=year&bigCate='.urlencode($bigCate))?>" role="tab"><lg>一年内</lg></a>
    	<a class="nav-link <?=$active?>" data="4" data-toggle="tab" href="<?=uUrl($USERID,'measureView','rang=&bigCate='.urlencode($bigCate))?>" role="tab"><lg>全部</lg></a>
      </div>
    </nav>
</div>
<div id="content">
<?if($crefetxt):?>    
    <div class="alert alert-dismissible alert-light" style="margin:0.3rem">
      <strong>参考:</strong> <?if(strpos($crefetxt,'<br>')!==false) echo '<br>';?> <?=$crefetxt?>
    </div>
<?endif;?>    
<?if(!empty($rows)):?>    
    <section id="cd-table">
    	<header class="cd-table-column" style="width:6rem">
    		<h2></h2>
    		<ul>
    		    <? foreach($rows as $k=>$row):?>
        			<li><span><?=$row['fullname']?></span></li>
                <? 
                    endforeach;
                ?>
    		</ul>
    	</header>
    
    	<div class="cd-table-container">
    		<div class="cd-table-wrapper">
    			<div class="cd-table-column" style="width:3.8em">
    				<h2>家庭值</h2>
    				<ul>
            		    <? foreach($rows as $k=>$row):?>
            			    <li style="font-size:1rem"><?=$row['mea_value_home']?></li>
            			<? endforeach;?>
    				</ul>
    			</div> <!-- cd-table-column -->
    			
    			<div class="cd-table-column" style="width:5em">
    				<h2>医院值</h2>
    				<ul>
            		    <? foreach($rows as $k=>$row):?>
        		            <?if($row['checkRule']['err']!=0):?>
            		        <li style="font-size:1rem;background:#FAE8E6">
            		            <i style="font-size: 1rem;" class="fa fa-long-arrow-<?=$row['checkRule']['err']==-1 ? 'down' : 'up'?>"></i>
        		            <?else:?>
            		        <li style="font-size:1rem">
        		            <?endif;?>
                		        <? if($row['mea_value']):?>
                			        <?=$row['mea_value']?> <i style="color:#6b758d" class="fa fa-hotel"></i>
                			    <? elseif($row['hospital_value']):?>
                			        <?=$row['hospital_value']?>
                			    <? else:?>
                			        <?=$row['mea_value_home']?>
                			    <? endif;?>
            			    </li>
            			<? endforeach;?>
    				</ul>
    			</div> <!-- cd-table-column -->
    			
    			<div class="cd-table-column" style="width:10em">
    				<h2>日期时间</h2>
    				<ul>
            		    <? foreach($rows as $k=>$row):?>
            			    <li style="font-size:0.7rem"><?=$row['mea_date']?> <?=$row['mea_time']?></li>
            			<? endforeach;?>
    				</ul>
    			</div> <!-- cd-table-column -->
    			
    			<div class="cd-table-column" style="width:18em">
    				<h2>备注</h2>
    				<ul>
            		    <? foreach($rows as $k=>$row):?>
            			    <li><?=$row['mea_remark']?></li>
            			<? endforeach;?>
    				</ul>
    			</div> <!-- cd-table-column -->
    			
    			<div class="cd-table-column" style="width:15em">
    				<h2>自检设备</h2>
    				<ul>
            		    <? foreach($rows as $k=>$row):?>
            			    <li><?=$row['mead_name']?></li>
            			<? endforeach;?>
    				</ul>
    			</div> <!-- cd-table-column -->
    			
    			<div class="cd-table-column" style="width:15em">
    				<h2>检测机构</h2>
    				<ul>
            		    <? foreach($rows as $k=>$row):?>
            			    <li><?=$row['mea_address']?></li>
            			<? endforeach;?>
    				</ul>
    			</div> <!-- cd-table-column -->
    			
    			<div class="cd-table-column" style="width:4em">
    				<h2>相关性</h2>
    				<ul>
            		    <? foreach($rows as $k=>$row):?>
            			    <li style="font-size:0.8rem">
            			    <?
            			    if($row['correlation_coefficient']){
                			    if($row['correlation_coefficient']>0.8) {
                			        echo '高';
                			    }else if($row['correlation_coefficient']>=0.6) {
                			        echo '中';
                			    }else if($row['correlation_coefficient']>=0.4) {
                			        echo '低';
                			    }else{
                			        echo '弱';
                			    }
                			    echo ' ('.$row['correlation_coefficient'].')';
            			    }
            			    ?>
            			    </li>
            			<? endforeach;?>
    				</ul>
    			</div> <!-- cd-table-column -->
    			
    			<div class="cd-table-column" style="width:9em">
    				<h2>医院值计算</h2>
    				<ul>
            		    <? foreach($rows as $k=>$row):?>
            			    <li style="font-size:0.7rem"><?=$row['correlation_text']?><?if(empty($row['correlation_text']) && !empty($row['mea_value'])) echo '医院实测';?><?if(empty($row['correlation_text']) && empty($row['mea_value'])) echo '家庭值';?></li>
            			<? endforeach;?>
    				</ul>
    			</div> <!-- cd-table-column -->
    			
    		</div> <!-- cd-table-wrapper -->
    	</div> <!-- cd-table-container -->
    
    	<em class="cd-scroll-right"></em>
    </section> <!-- cd-table -->
<?endif;//!empty($rows)?>    
</div>
<? viewLoad("public/footer_person") ?>