{extend name="Hustbe/common/base" /}
{block name="title"}工单系统{/block}
{block name="main"}
<main class="content">
	<link rel="stylesheet" type="text/css" href="{$TemplateStatic}/css/user.css">
	<div id="content-container" class="container">
		<div class="row">
			<div class="col-md-3">
				<div class="sidenav">
					<!-- 引入用户中心菜单 -->
					{include file="Hustbe/common/user_menu"}
				</div>
			</div>
			<div class="col-md-9">
				<div class="panel panel-default panel-page">
					<div class="panel-heading">
						<h2 class="pull-left">工单系统</h2>
						<div class="pull-right">
							<form action="" method="get" class="nice-validator n-default" novalidate="novalidate">
								<input type="text" class="form-control" name="q" value="{$Request.get.q}" size="40"
									placeholder="输入工单号进行搜索">
							</form>
						</div>
						<div style="clear:both;"></div>
					</div>
					<div class="panel-body p-0">
						<div class="col-lg-12 table-responsive">
							<table class="table table-striped">
								<thead>
									<tr>
										<th>工单号</th>
										<th>类型</th>
										<th>标题</th>
										<!-- <th>内容</th> -->
										<th>时间</th>
										<th>状态</th>
										<th>操作</th>
									</tr>
								</thead>
								<tbody>
									<!-- 工单列表 -->
									{volist name="supportList" id="s"}
									<tr>
										<th scope="row">{$s.sid}</th>
										<td>{$s.type}</td>
										<td>{$s.title}</td>
										<!-- <td>{$s.content}</td> -->
										<td>{$s.createtime}</td>
										<td>{$s.status}</td>
										<td><a href="{:url('index/support/supportInfo',['sid'=>$s.sid])}">查看工单</a></td>
									</tr>
									{/volist}
								</tbody>
							</table>
							<nav class="paging">
								{$supportList->render()}
							</nav>
						</div>
						<!-- 新建工单 -->
						<div class="col-lg-12">
							<div class="panel">
								<div class="panel-heading">
									<center>
										<h4>创建工单</h4>
									</center>
								</div>
								<div class="panel-body">
									<form id="build_form" data-url="{:url('index/support/build')}">
										<input type="hidden" name="file_url" id="file_url">
										<div class="form-group">
											<select class="form-control" name="type" id="type">
												<option value="1">主机相关</option>
												<option value="2">域名相关</option>
												<option value="3">费用相关</option>
												<option value="4">账号相关</option>
												<option value="5">Bug反馈</option>
												<option value="6">其他问题</option>
											</select>
										</div>
										<div class="form-group">
											<input type="text" name="title" id="title" class="form-control"
												placeholder="标题">
										</div>
										<div class="form-group">
											<textarea class="form-control" name="content" id="content" rows="5"
												required="" placeholder="内容"></textarea>
										</div>

										<div class="form-group">
											<button class="btn btn-success btn-embossed" lay-filter="edit" id="build"><i
													class="fa fa-check"></i> 回复</button>
											<button class="btn btn-info btn-embossed" id="image_file"
												onclick="file.click()"><i class="fa fa-image"></i> 图片上传</button>
											<span id="update_msg"></span>
										</div>
									</form>
									<form id="image_file_form">
										{:token()}
										<div class="upload-drag" id="upload-drag" title="点击上传图片">
											<input type="file" id="file" name="file" onchange="supportImgup();" style="display:none"
												accept="image/*">
										</div>
									</form>
								</div>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
	</div>
</main>
<script type="text/javascript">
	$('#image_file').click(function () {
		return false;
	})


	function supportImgup() {
		var animateimg = $("#file").val();
		var imgarr = animateimg.split('\\');
		var myimg = imgarr[imgarr.length - 1];
		var houzui = myimg.lastIndexOf('.');
		var ext = myimg.substring(houzui, myimg.length).toUpperCase();
		var file = $('#file').get(0).files[0];
		var fileSize = file.size;
		var maxSize = 209715;
		if (ext != '.PNG' && ext != '.GIF' && ext != '.JPG' && ext != '.JPEG') {
			layer.alert('文件类型错误,请上传图片类型');
			return false;
		} else if (parseInt(fileSize) >= parseInt(maxSize)) {
			layer.alert('上传的文件不能超过200KB');
			return false;
		} else {
			$('#image_file').attr('disabled', 'disabled');
			$('#image_file').html('正在上传……');
			var data = new FormData($('#image_file_form')[0]);
			console.log(data);
			layer.load(2);
			$.ajax({
					url: '{:url("index/ajax/upload")}',
					type: 'POST',
					data: data,
					dataType: 'JSON',
					processData: false,
					contentType: false,
				})
				.done(function (ret) {
					if (ret['code'] == '1' && ret['data']['url']) {
						$('#image_file').html('上传完成');
						$('#file_url').val(ret['data']['url']);
						layer.msg(ret['msg']);
					} else {
						$('#image_file').html('上传失败');
						layer.alert('error:' + ret['msg']);
					}
				})
				.fail(function () {
					$('#image_file').html('连接服务器失败，请稍后重试');
				})
				.always(function () {
					layer.closeAll('loading');
					console.log("complete");
				});
			return false;
		}
	}
</script>
{/block}