<%@ page language="java" import="java.util.*" pageEncoding="UTF-8"%>
<%@ include file="/WEB-INF/jsp/commons/include.inc.jsp" %>
<%@include file="/WEB-INF/jsp/commons/jstl_message_tld.jsp"%>
<%
String path = request.getContextPath();
String basePath = request.getScheme()+"://"+request.getServerName()+":"+request.getServerPort()+path+"/";
%>
<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath%>">
    <meta charset="UTF-8">
    <title><fmt:message key="app.name" bundle="${commonBundle}"/></title>
    <meta name="viewport" content="width=device-width,initial-scale=1,user-scalable=0,viewport-fit=cover">
	<link href="https://res.wx.qq.com/open/libs/weui/1.1.2/weui-for-work.min.css" rel="stylesheet" type="text/css"/>
	<link href="resource/css/weixin-work/public.css" rel="stylesheet" type="text/css"/>
</head>
<body ontouchstart>
	<div class="page__bd">
		<div class="weui-cells__title" id="pagetitle" style="text-align:center;font-weight: bold;"></div>
        <div class="weui-cells weui-cells_form">
            <div class="weui-cell">
                <div class="weui-cell__hd"><label class="weui-label">任务名称</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" placeholder="请输入任务名称" type="text" id="name" maxlength="100" disabled>
                </div>
            </div>
            
   			<div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">开始时间</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" value="" placeholder="" type="datetime-local" id="startTime" errmsg="开始时间不能为空">
                </div>
            </div>
            <div class="weui-cell">
                <div class="weui-cell__hd"><label for="" class="weui-label">结束时间</label></div>
                <div class="weui-cell__bd">
                    <input class="weui-input" value="" placeholder="" type="datetime-local" id="endTime" errmsg="结束时间不能为空">
                </div>
            </div>
            
            <div class="weui-cells__title">任务进度</div>
	        <div class="weui-cells weui-cells_form">
		        <div class="weui-slider-box" style="padding: 10px;">
		            <div class="weui-slider">
		                <div id="sliderInner" class="weui-slider__inner">
		                    <div id="sliderTrack" style="width: 50%;" class="weui-slider__track"></div>
		                    <div id="sliderHandler" style="left: 50%;" class="weui-slider__handler"></div>
		                </div>
		            </div>
		            <div id="sliderValue" class="weui-slider-box__value">50%</div>
		        </div>
	        </div>
			
			<div class="weui-cells__title">进度说明</div>
	        <div class="weui-cells weui-cells_form">
	            <div class="weui-cell">
	                <div class="weui-cell__bd">
	                    <textarea class="weui-textarea" placeholder="请输入进度说明" rows="3" id="content" errmsg="进度说明不能为空" maxlength="200"></textarea>
	                    <div class="weui-textarea-counter"><span>0</span>/200</div>
	                </div>
	            </div>
	        </div>
			
	        <div class="weui-btn-area">
	            <a class="weui-btn weui-btn_primary" href="javascript:" id="btn_submit">确 定</a>
	       		<a class="weui-btn weui-btn_default" href="javascript:history.back();">返 回</a>
	   		</div>
	        
    	</div><!-- .weui-cells_form -->
	</div><!-- .page__bd -->

<script type="text/javascript" src="https://lib.baomitu.com/jquery/3.3.1/jquery.min.js"></script>
<script type="text/javascript" src="https://lib.baomitu.com/zepto/1.2.0/zepto.min.js"></script>
<script>window.$$=window.Zepto = Zepto</script><!-- 解决jquery与zepto冲突,需要用到zepto的代码使用$$代替 -->
<script type="text/javascript" src="https://res.wx.qq.com/open/js/jweixin-1.2.0.js"></script>
<script type="text/javascript" src="resource/js/weixin-work/public.js"></script>
<script type="text/javascript" src="resource/js/weixin-work/example.js"></script>
<script type="text/javascript">
var pid = null, taskname = null;

// 新建任务日志
function saveAction(){
	var params = {};
	var pass = true;
	$('.weui-cells_form input, .weui-cells_form select, .weui-cells_form textarea').each(function(){
		var id = $(this).attr('id');
		var value = $(this).val();
		if(id == 'id'){
			params[id]=value;
			return true;
		}
		if(value == null || $.trim(value)==''){
			toastMsg($(this).attr('errmsg'));
			pass = false;
			return false;
		}
		if(id == 'startTime' || id == 'endTime'){
			value = value.replace("T", " ").replace("/", "-");
			if(value.length > 19){ // IOS格式：2018-07-23 15:22:40.340
				value = value.substring(0, 19);
			}
		}
		params[id]=value;
	});
	if(!pass)return;
	
	params['projectTaskId']=pid;
	params['speed']=trimToEmpty($('#sliderValue').text()).replaceAll('%','');
	var posturl = 'projectTask/journal/add.do';
	showLoading('提交中...');
	$.post(posturl, params, function(result){
		hideLoading();
		var data = JSON.parse(JSON.stringify(result).trim());
		if(data.statusCode == 200){
			toastMsg('保存成功！', 1);
			setTimeout(function() {
				if(debugMode){
					window.location.href = getSysBaseUrl()+'/pages/weixin-work/project/task/my_list.jsp';
				}else{
					window.location.href = getSysBaseUrl()+'/wxwork/pages/project/task/my_list.do';
				}
			}, 1200);
		}else{
			toastMsg(data.message);
		}
	}, 'json');
}

$(function(){
	getJsConfig();
	pid = getQueryString('pid');
	taskname=getQueryString('taskname');
	taskname=decodeURIComponent(taskname);
	$('#name').val(trimToEmpty(taskname));
	
	$('#btn_submit').click(function(){
		saveAction();
	});
	
});

// 设置滑块百分比
function setSlider(percent){
	$('#sliderTrack').css('width', percent + '%');
	$('#sliderHandler').css('left', percent + '%');
	$('#sliderValue').text(percent+'%');
}

// 滑块事件,这里必须使用zepto, 用jquery无效
$(function(){
    var totalLen = $$('#sliderInner').width(),
        startLeft = 0,
        startX = 0;

    $$('#sliderHandler')
        .on('touchstart', function (e) {
        	var left1 = parseInt($$('#sliderHandler').css('left'));
            startLeft = left1 * totalLen / 100;
            startX = e.changedTouches[0].clientX;
            console.log('left1='+left1+', startLeft='+startLeft+', startX='+startX);
        })
		.on('touchmove', function(e){
            var dist = startLeft + e.changedTouches[0].clientX - startX, percent;
            dist = dist < 0 ? 0 : dist > totalLen ? totalLen : dist;
            percent =  parseInt(dist / totalLen * 100);
            console.log('dist='+dist+', percent='+percent);
            setSlider(percent);
            e.preventDefault();
		});
});

</script>
</body>
</html>
