{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">
						<div class="pull-right">
							Status：{$supportInfo.status}
						</div>
						<h2><a href="#">工单详情</a></h2>
					</div>
					<!-- 工单详情 -->
					<div class="panel-body p-0 support_content">
						<blockquote>
							<p>标题：{$supportInfo.title}</p>
							<p>
								内容：{$supportInfo.content}
								{notempty name="supportInfo['file_url']"}
								<i class="fa fa-image" file-url="{$supportInfo.file_url}" title="点击查看原图"></i>
								{/notempty}
							</p>
							<p class="text-right small">Time：{$supportInfo.createtime}</p>
						</blockquote>
						<div style="">
							<div class="col-md-12">
								<div class="panel panel-default">
									<div class="panel-body">
										{volist name="supportComment" id="support"}
										<div class="activity  terques {if $support.uid!='0'}alt{/if}">
											<span style="background: rgba(255,255,255,.15) !important;">
												<img src="{$support.avatar|default='/static/images/user_default.png'}"
													style="border-radius: 99px;width: 100%;height: 100%;"
													onerror="imgerrorfun();">
											</span>
											<div class="activity-desk">
												<div class="panel panel-default">
													<div class="support-content" style="padding: 5px;">
														<div class="{if $support.uid!='0'}arrow-alt{else/}arrow{/if}">
														</div>
														<h4 style="font-size: xx-small;">{$support.username} -
															{$support.createtime}</h4>
														<p class="text-default {if $support.uid!='0'}text-left{/if}"
															style="word-break: break-all;">
															{$support.content}
															{notempty name="support['file_url']"}
															<i class="fa fa-image" file-url="{$support.file_url}"
																title="点击查看原图"></i>
															{/notempty}
														</p>
													</div>
												</div>
											</div>
										</div>
										{/volist}
									</div>
								</div>
							</div>
							
							{if $supportStatus!=3}
							<!-- 结单后不允许回复工单 -->
							<div class="col-md-12">
								<div class="panel panel-default">
									<div class="panel-heading">
										<h3>回复工单</h3>
									</div>
									<div class="panel-body">
										<form id="replay_form">
											<input type="hidden" name="file_url" id="file_url">
											<input type="hidden" id="sid" name="sid" value="{$supportInfo.sid}">
											<div class="form-group">
												<textarea class="form-control" name="content" id="content" rows="5"
													required=""></textarea>
											</div>

											<div class="form-group">
												<button class="btn btn-success btn-embossed" lay-filter="edit"
													id="replay">回复</button>
												<button class="btn btn-info btn-embossed" id="image_file"
													onclick="file.click()"> 图片上传</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>
							{/if}
						</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}