<!DOCTYPE html>
<html lang="zh">
<head>
	<th:block th:include="include :: header('表格搜索')" />
	<th:block th:include="include :: bootstrap-select-css" />
</head>
<body class="gray-bg">
    <div class="container-div">
		<div class="row">
			<div class="col-sm-12 search-collapse">
			    <p class="select-title"><B>展示指标查询</B></p>
				<form id="form0">
					<div class="select-list">
						<ul>
							<li>
								公司：<select name="platformId" id="platform">
								<option th:value="${p.ID}" th:each="p:${platforms}" th:text="${p.PlatformName}" th:selected="${platformId == (p.ID+'')}"></option>
							</select>
							</li>
							<li>
								项目：<select name="projectId" id="project">
								<option value="">全部</option>
								<option th:value="${p.ID}" th:each="p:${projects}" th:text="${p.ProjectName}" th:selected="${projectId == (p.ID+'')}"></option>
							</select>
							</li>
							<li>
							指标：<select name="index" id="ii">
									<option value=""></option>
									<option th:value="${i.id}" th:each="i : ${indexs}" th:selected="${i.id==indexId}" th:year="${i.year}">[[${i.name}]]</option>
								</select>
							</li>
							<li id="year" th:style="${v!=null&&v.year==1?'':'display:none'}">
							年度：<select name="year"  th:with="type=${@dict.getType('sys_year')}">
							          <option th:each="dict : ${type}" th:text="${dict.dictLabel}" th:value="${dict.dictValue}" th:selected="${(year+'')==dict.dictValue}"></option>
								</select>
							</li>
							<li>
								<a class="btn btn-primary btn-rounded btn-sm" onclick="dosum();"><i class="fa fa-search"></i>&nbsp;查看</a>
							    <a class="btn btn-warning btn-rounded btn-sm" onclick="$.form.reset()"><i class="fa fa-refresh"></i>&nbsp;重置</a>
							</li>
						</ul>
					</div>
				</form>
			</div>

			<div class="col-sm-12 search-collapse" th:if="${v!= null}">
			    <p class="select-title"><B>[[${v.name}]]：[[${value}]]&nbsp;[[${v.unit}]]</B></p>
			    <div class="panel panel-primary">
                <div class="panel-heading">
                指标说明
                </div>
                <div class="panel-body">
                    <p th:text="${v.illustration}"></p>
                </div>
            </div>
			    <div class="panel panel-primary">
	            <div class="panel-heading">
	            指标公式
	            </div>
	            <div class="panel-body">
	            <p th:text="${v.formula0}"></p>
	            </div>
	        </div>
			   
            
		    <div class="panel panel-primary">
            <div class="panel-heading">
            备注
            </div>
            <div class="panel-body">
            <p th:text="${v.remark}"></p>
            </div>
        </div>
		    
			    <p class="select-title"><B>基础指标：</B></p>
			    <div class="table-responsive">
                <table class="table table-bordered table-striped">
                    <thead>
                        <tr>
                            <th>基础指标名称</th>

                            <th>
                                说明
                            </th>
                                <th style="text-align:right">
                                基础指标值
                                </th>
                                <th>
                                举例
                                </th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr th:each="s:${sList}">
                            <th class="text-nowrap" th:text="${s.name}" th:style="${s.delFlag=='1'?'color:#C88':''}"></th>
                            <td th:text="${s.remark}" th:style="${s.delFlag=='1'?'color:#C88':''}"></td>
                            <td th:text="${s.sum+' '+s.unit}" th:style="${s.delFlag=='1'?'color:#C88;text-align:right':'text-align:right'}"></td>
                            <td><a href="#" data-toggle="modal" th:data-target="${'#myModal'+s.id}" th:if="${!#strings.isEmpty(s.sample)}">查看</a></td>
                        </tr>
                      
                       
                    </tbody>
                </table>
            </div>
            <p class="select-title"><B>底层数据：</B><a class="btn btn-primary btn-sm" onclick="exportsum();"><i class="fa fa-download"></i>&nbsp;导出</a></p>

        
        <div class="col-sm-12">
        <div class="tabs-container">
            <ul class="nav nav-tabs">
                <li th:each="s:${sList}" th:class="${sList[0].id==s.id?'active':''}"><a data-toggle="tab" th:href="${'#tab-'+s.id}" th:aria-expanded="${sList[0].id==s.id}" th:text="${s.name}" th:style="${s.delFlag=='1'?'color:#C88':''}"></a>
                </li>
            </ul>
            <div class="tab-content">
                <div th:each="s:${sList}" th:id="${'tab-'+s.id}" th:class="${sList[0].id==s.id?'tab-pane active':'tab-pane'}">
                    <div class="panel-body">
        		    <div class="table-responsive">
        		    <div class="pull-right">
        		    [[${s.detail.size()}]]条
        	        </div>
                    <table class="table table-bordered table-striped" th:id="${'table'+s.id}">
        		    </table>
                </div>
                    </div>
                </div>
                
             

            
                
                
            </div>


        </div>
    </div>
			
			</div>

			
		</div>
	</div>
	
	
    <div class="modal inmodal fade" th:id="${'myModal'+s.id}" tabindex="-1" role="dialog" aria-hidden="true" th:each="s:${sList}">
    <div class="modal-dialog modal-lg" style="width:1400px">
        <div class="modal-content">
            <div class="modal-header">
                <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">&times;</span><span class="sr-only">Close</span>
                </button>
                <h4 class="modal-title" th:text="${s.name}"></h4>
            </div>
            <div class="modal-body" th:utext="${s.sample}">
            </div>

            <div class="modal-footer">
                <button type="button" class="btn btn-white" data-dismiss="modal">关闭</button>
            </div>
        </div>
    </div>
</div>
	
	
	<th:block th:include="include :: footer" />
	<th:block th:include="include :: bootstrap-select-js" />
	<th:block th:include="include :: jquery-cxselect-js" />

	<script th:inline="javascript">
    var prefix = ctx + "index/v";
    function loadProject() {
		var p =document.getElementById("project");
		p.options.length=0;
		if ($('#platform').val()!='' && $('#platform').val()!=null) {
	     $.post(prefix+"/listProject",
	    	{
	    	platformId:$('#platform').val()
	        },
	    	function(result){
        		p.options.add(new Option("全部",""));
	        	for (var project of result) {
	        		p.options.add(new Option(project.ProjectName,project.ID));
	        	}
	        	
	    });
		
    }
    }
    function showYear() {
    	if ($("option:selected[year]").attr("year")==1) {
    		$("#year").show();
    	} else {
    		$("#year").hide();
    	}
    }
    

    $("#platform").change(function(){
    	loadProject();
    });
    
    $("#ii").change(function(){
        showYear();
    });
    
    function dosum() {
    	if ($('#ii').val()!='' && $('#ii').val()!=null) {
    		$('#form0').submit();
    	} else {
    		$.modal.alertError("请选择指标");
    	}
    }
    
    
    function exportsum() {
    $.modal.confirm("确定导出所有吗？", function() {
    	 $.modal.loading("正在导出数据，请稍候...");
    	    $.post(prefix+"/exportSum",
    	       {
    	    	platformId:[[${platformId}]],
    	    	projectId:[[${projectId}]],
    	    	year:[[${year}]],
    	    	index:[[${v!=null?v.id:null}]],
    	        },
              function(result) {
      		  if (result.code == web_status.SUCCESS) {
                  window.location.href = ctx + "common/download?fileName=" + encodeURI(result.msg) + "&delete=" + true;
              } else if (result.code == web_status.WARNING) {
                  $.modal.alertWarning(result.msg);
              } else {
                  $.modal.alertError(result.msg);
              }
    		  $.modal.closeLoading();
    	    });
    	 
    	
    	
    	
    });
    }
    showYear();
    </script>
	<script th:inline="javascript" th:each="s:${sList}">    
	$([['#table'+${s.id}]]).bootstrapTable({ 
	    striped: true, //是否显示行间隔色
	    cache: false,
	    search: true,
	    searchAlign:"left",
	    data:[[${s.detail}]],
	    columns: [
	              {
	            	  title:'序号',
	            	  formatter: function (value, row, index) {
	            		  return index+1;
	            	  }
	              },
[# th:each="n:${s.keySet}"]
	              {
			field : [[${n}]],
			title : [[${n}]],
			align : [[${s.getIsNum[n+'']?'right':'left'}]],

			formatter: function (value, row, index) {
				if (value != null) {
					[# th:if="${s.getIsNum[n+'']}"]
					var s=value.toString().split('.');
				return s[0].replace(/\d{1,3}(?=(\d{3})+(\.\d*)?$)/g,'$&,')+(s.length>1?'.'+s[1]:'');
				[/]
				[# th:if="${!s.getIsNum[n+'']}"]
						return "<span style='word-break:break-all'>"+value+"</span>";
			     [/]
				} return null;
			},
			sortable: true
		},
	              [/]

]
});
        
    </script>
</body>
</html>
