<?xml version="1.0"?>
<labeltemplate>
   <label>
    <![CDATA[
	       <style type="text/css">
		    .commentlist .percent{font-size:50px;color:red;font-weight:bold}
		    .commentlist .gray{color:#999}
			.barbox .barleft{width:65px;float:left}
			.barbox .barright{width:150px;float:right;height:11px;background:#fff;background:#eee;}
			.barbox .red{background:url(/Home/images/shop/bg11.png);height:11px;}
			
			.cmttop{width:100%;margin:0 auto;background:#f1f1f1;height:30px;line-height:30px;border-top:2px solid #ccc}
			.cmtlist{}
			.cmtlist li{float:left;width:24%;text-align:center;cursor:pointer;}
			.cmtlistcurr{font-weight:bold;border-top:2px solid #e44747; position:relative;margin-top:-2px;background:#fff;}
			.cmtlistnormal{}
			
			.cmtcontent{padding:10px;}
			
			.pagelist{clear:both;}
			.pageList a{margin:5px 4px 0 0; color:#2E2828;background:#f5f5f5; display:inline-table; border:1px solid #ddd; float:left; text-align:center;height:18px;line-height:18px;padding:0px 10px;border-radius: 3px}
            .pageList a.curr{color:brown;}
			
			.cmtcontentlist{clear:both;width:100%;margin-bottom:15px}
			.cmtcontentlist .cmttitle{height:30px;line-height:30px;}
			.cmtcontentlist .cmttitle span{float:right;color:#999;}
			.cmtcontentlist .userinfo{width:70px;float:left;text-align:center;margin-top:10px;}
			.cmtcontentlist .userinfo img{ margin-bottom:8px;padding:3px;border:1px solid #ddd;}
			.cmtcontentlist .cmtcontent{float:right;width:782px; line-height:20px;color:#555}
			.cmtcontentlist .cmtcontent a{color:#069; padding:0px 3px}
			 .cmtbox{padding:4px;border:1px solid #ccc;}
			 .cmt{display:none;padding-left:5px;border:1px solid #efefef;color:#999;margin-bottom:20px;padding:14px;}
			.cmt .cmtbox span{float:right}
			.cmt span.num{color:brown}
			.cmt textarea{padding:3px;color:#888;width:100%;height:30px;border:1px solid #ccc;overflow:auto;}
			.cmt .cmtlist ul{margin:0px;padding:0px;}
			.cmt .cmtlist ul.page{text-align:right}
			.cmt .cmtlist .page a{margin:5px 4px 0 0; color:#2E2828;background:#fff; display:inline-table; border:1px solid #efefef; float:left; text-align:center;height:20px;line-height:20px;min-width:20px;}
			.cmt .cmtlist .page a.curr{color:brown;}
			dd,dt{margin:0px;padding:0px;}
			.cmt .cmtlist dd{cursor:default;margin-bottom:5px;width:99%;word-break:break-all;border:0px;border-bottom:1px dotted #efefef;background:#fff;text-align:left;font-size:12px;color:#666;line-height:30px;}
			.cmt .cmtlist dd img{margin-right:10px;border:1px solid #efefef;padding:1px;}
			.cmt .cmtlist dd span{padding-left:10px;color:#999;}
			.cmt .cmtlist dd a.cname{font-weight:bold;color:brown;}
			.cmtBtn{width:100px;height:26px; background:#E64444;border:1px solid #ddd;border-radius: 2px;}
		   </style>

            <script>
			 jQuery(document).ready(function(){
			   jQuery.getScript('{M:HomeDir}Shop/ProComment.ashx?action=getcommentinfo&proid={KS:Current:ItemID}',function(){
			    var goodNum=parseInt(comment.goodNum);
				var averageNum=parseInt(comment.averageNum);
				var badNum=parseInt(comment.badNum);
				var totalNum=goodNum+averageNum+badNum;
				$("#totalReview").html(totalNum);
				var goodPercent=goodNum/totalNum*100;
				var averagePercent=averageNum/totalNum*100;
				var badPercent=badNum/totalNum*100;
				if (isNaN(goodPercent)) goodPercent=0;
				if (isNaN(averagePercent)) averagePercent=0;
				if (isNaN(badPercent)) badPercent=0;
			    $("#goodPercent").html(goodPercent+"%");
				$("#percent1").html(goodPercent);
				$("#percent2").html(averagePercent);
				$("#percent3").html(badPercent);
				$("#bar1").attr("style","width:"+goodPercent+"%").attr("title",goodPercent+"%");
				$("#bar2").attr("style","width:"+averagePercent+"%").attr("title",averagePercent+"%");
				$("#bar3").attr("style","width:"+badPercent+"%").attr("title",badPercent+"%");
				$("#commentnum0").html(totalNum);
				$("#commentnum1").html(goodNum);
				$("#commentnum2").html(averageNum);
				$("#commentnum3").html(badNum);
				
				loadCmtContent(1,-1);
			   });
			 });
			 function loadCmt(obj,cmtType){
			  $(".cmtlist").find("li").attr("class","cmtlistnormal");
			  obj.className='cmtlistcurr';
			  loadCmtContent(1,cmtType);
			 }
			 function loadCmtContent(page,cmtType){
				  jQuery.ajax({
				   type: "POST",
				   url: "{M:HomeDir}Shop/ProComment.ashx",
				   data: "proid={KS:Current:ItemID}&page="+page+"&action=GetCmtList&cmtType="+cmtType,
				   success: function(data){
						$("#cmtcontent").html(data);
				   }
				});
			 }
			 function cmtSupport(id){
			  jQuery.ajax({
				   type: "POST",
				   url: "{M:HomeDir}Shop/ProComment.ashx",
				   data: "id="+id+"&action=SupportCmt",
				   success: function(data){
				     if (data=="nologin"){
            location.href='{M:HomeDir}Login.aspx';
					 }else if (data.indexOf('error:')!=-1){
					  KesionJS.Alert(data.split(':')[1]);
					 }else{
						$("#support"+id).html(data);
						}
				   }
				});
			 }
			 
			  //评论
			function quickreply(id, page) {
				var c = $("#c" + id).val();
				if (id == '') return;
				$.ajax({
				url: '{M:HomeDir}Shop/ProComment.ashx?page=' + page + '&id=' + id + '&action=ShowCmt',
					success: function(data) {
						if (page != undefined) {
							$("#cmt" + id).html(data);
						} else {
							$("#cmt" + id).toggle('fast').html(data);
						}
					},
					cache: false
				});
			}
			//开始提交评论
    function dopostcmt(id) {
        var c = $("#c" + id).val();
        if (c == '' || c == '我也说一句...') {
            $.dialog.tips('你也懒了点吧,要输入评论内容哦^-^', 2, 'error.gif', function() {
                $("#c" + id).focus();
            });
            return false;
        }

        $.post("{M:HomeDir}Shop/ProComment.ashx", { action: 'CmtSave', id: id, Content: c }, function(d) {
            if (d == "success") {
                $.dialog.tips('恭喜，评论成功！', 1, 'success.gif', function() { quickreply(id,1);  });
            } else {
                $.dialog.tips(unescape(d), 1, 'error.gif', function() { });
            }
        });
    }
	function ThisFocus(id) { if ($("#c" + id).val() == '我也说一句...') { $("#c" + id).val(''); } }
    function ThisBlur(id) { if ($("#c" + id).val() == '') { $("#c" + id).val('我也说一句...'); } }

			</script>
	      
	       <strong>商品评价</strong>
		   <table width="100%" class="commentlist" cellspacing="0" cellpadding="0">
		    <tr>
			 <td style="width:100px;text-align:center">
			   <span class="percent" id="goodPercent" style="font-weight:normal;color:#e64444;font-size:40px;">0%</span>
			   <br/>
			   <span class="gray">好评率</span>
			 </td>
			 <td>
			   <div class="barbox">
			    <div class="barleft">好评(<span id="percent1">0</span>%)</div>
			    <div class="barright"><div class="red" id="bar1"></div></div>
			   </div>
			   <div style="clear:both;height:4px; overflow:hidden"></div>
			   <div class="barbox">
			    <div class="barleft">中评(<span id="percent2">0</span>%)</div>
			    <div class="barright"><div class="red" id="bar2"></div></div>
			   </div>
			    <div style="clear:both;height:4px; overflow:hidden"></div>
			   <div class="barbox">
			    <div class="barleft">差评(<span id="percent3">0</span>%)</div>
			    <div class="barright"><div class="red" id="bar3"></div></div>
			   </div>
			  
			 </td>
			 <td style="width:30%;text-align:center;background:#F4F7FF;padding:0 5px;">
			   <div class="gray">您可对已购商品进行评价</div>
               <br/><input type="button" value="发表评价" onclick="window.open('{M:SiteYuName}{M:HomeDir}Shop/MyCommentShop.aspx')" class="cmtBtn" />
			 </td>
			</tr>
		   </table>
		   <br/><br/>
		   
		  <div class="cmttop"> 
		   <div class="cmtlist">
		   <ul>
		     <li class="cmtlistcurr" onclick="loadCmt(this,-1)">全部(<span id="commentnum0">0</span>)</li>
			 <li class="cmtlistnormal" onclick="loadCmt(this,0)">好评(<span id="commentnum1">0</span>)</li>
			 <li class="cmtlistnormal" onclick="loadCmt(this,1)">中评(<span id="commentnum2">0</span>)</li>
			 <li class="cmtlistnormal" onclick="loadCmt(this,2)">差评(<span id="commentnum3">0</span>)</li>
		   </ul>
		   
		   </div>
		</div>
		<div class="cmtcontent" id="cmtcontent">loading...</div>

	]]>
   </label>
   
   <loopitem>
    <![CDATA[
	 <div class="cmtcontentlist">
	   <div class="userinfo">
	     <img src="{$UserFace}" width="60" height="60" /><br />
	     {$UserName}
	   </div>
	   <div class="cmtcontent">
	     <div class="cmttitle"><span style="color:#999">用户IP：{$UserIP} 时间：{$AddDate}</span><img  align="absbottom" src="{M:HomeDir}images/star/star-{$StarNum}.jpg" /></div>
		 <div style="margin-top:-10px">
		 评价等级：{$CmtRank}<br/>
		 评价内容：{$Content}<br/>
		 购买时间：{$BuyDate}<br/>
		 <div style="text-align:right">
		 <a href="javascript:;" onclick="cmtSupport({$ID});">有用(<span id="support{$ID}">{$Support}</span>)</a> <a href="javascript:;" onclick="quickreply({$ID});">回复({$CmtNum})</a></div>
		 </div>
		 
		 <div class="cmt" id='cmt{$ID}'>
          发表回复：
          <input type="text"  class="cmtbox" style="width:350px" id="rcontent{$ID}" />
          <input type="button" class="button" value="提交" onclick="doReply({$ID});" />
          
          </div>
		 
	   </div>
	 </div>
	]]>
   </loopitem>
</labeltemplate>