{include file="default/header" title="工单详情"/}
    <style>    
        .jhhost {
            display: flex;
                        padding: 20px;
            background-color: #fff;
            border-radius: 8px;
            box-shadow: 0 0 10px rgba(0, 0, 0, 0.1);
                                    margin-bottom:20px;
                        flex-direction: column;
        }
        .cont {
            display: flex;
            flex-direction: row;

        }
        .user-image {
            width: 60px;
            height: 60px;
            border-radius: 50%;
            margin-right: 10px;            
            transform: rotate(0deg);
        }

        .user-details {
            display: flex;
            flex-direction: column;
        }

        .user-details div {
            margin-bottom: 5px;
        }
        .roll{
        height:500px;
        overflow: auto;
        padding: 5px;
        }
        </style>
    <main class="lyear-layout-content">	
      <div class="container-fluid">
        <div class="row">
<div class="col-lg-12">
      <div class="card">
        <header class="card-header">
<div class="card-title">工单详情</div>
</header>
        <div class="card-body">

                        <div class="block-content">
<p>标题:{$tickets.title}</p>
<div class="roll">
{foreach $tickets.content as $tc}

{if $tc.personnel=="1"}

                            <div class="jhhost">
                            <div class="cont">
        <img src="http://q1.qlogo.cn/g?b=qq&nk={$user.qq}&s=100" class="img-thumbnail user-image" id="user-image">
        <div class="user-details">
       
            <div><span class="text-success">{$tc.time|date="Y-m-d H:i:s",###}</span></div>
            <div><span class="text-success">你:{$user.name}</span></div>
</div>
</div>

                            <div class="jhhost" style="                        margin-top:20px;width: fit-content;">
{$tc.content}
</div>
 </div>
 
{elseif $tc.personnel=="2"}

                            <div class="jhhost">
                            <div class="cont">
        <img src="http://q1.qlogo.cn/g?b=qq&nk={$tickets.userqq}&s=100" class="img-thumbnail user-image" id="user-image">
        <div class="user-details">
       
            <div><span class="text-primary">{$tc.time|date="Y-m-d H:i:s",###}</span></div>
            <div><span class="text-primary">用户ID:{$tickets.userid},{$tickets.username}</span></div>
</div>
</div>

                            <div class="jhhost" style="                        margin-top:20px;width: fit-content;">
{$tc.content}
</div>
 </div>

 
 
 
 
{/if}

{/foreach}
</div>
状态:
{if $tickets.state=="1"}
<span class="btn btn-warning btn-round btn-sm">待您回复</span>
{/if}
{if $tickets.state=="2"}
<span class="btn btn-warning btn-round btn-sm">等待您回复</span>
{/if}
{if $tickets.state=="3"}
<span class="btn btn-success btn-round btn-sm">您已回复</span>
{/if}
{if $tickets.state=="4"}
<span class="btn btn-danger btn-round btn-sm">已关闭</span>
{/if}
<br/><br>
操作:
 <button type="button" onclick="end();" class="btn btn-primary">关闭此工单</button>
<br/><br/>
   
                          <form>                                        
<div class="form-group row">
                                            <label class="col-12">回复</label>
                                            <div class="col-12">
                                             	<textarea class="form-control" name="content" rows="10" placeholder="请输入回复内容"></textarea>
                                            </div>
                                        </div>
<br/>
                                        <div class="form-group row">
                                            <div class="col-12">
                                                <button type="submit" class="btn btn-primary btn-block">提交</button>
                                            </div>
                                        </div>
                          </form>


</div>

</div>

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


  {include file="default/footer" /}
  <script>
    const dialog = document.querySelector('.roll');
    dialog.scrollTop = dialog.scrollHeight;
  </script>
<script>
    $("form").submit(function (){
        var load = layer.msg('提交中，请稍后...',{icon:16,time:false});

        var content = $("textarea[name='content']").val();


        if( content.length < 1 ){
            layer.alert('提交的信息不可为空',{icon:2});
            return false;
        }

        $.ajax({
            type:'POST',
            url:'',
            data:{
                act:"submit",
                content:content,
            },
            dataType:'json',
            success:function (data){
                layer.close(load);
                if(data.code == "1"){
setTimeout(function (){
                   location.href = ''
},1000);
                    layer.alert(data.msg,{icon:1});
                }else{
                    layer.alert(data.msg,{icon:2});
                }
            }
        });
        return false;
    });

function end(){
        layer.confirm('确定要关闭此工单吗！', {icon:3}, function (){
            end1();
        });
    }

function end1(){
var load = layer.msg('提交中，请稍后...',{icon:16,time:false});

        $.ajax({
            type:'POST',
            url:'',
            data:{
                act:"end",
            },
            dataType:'json',
            success:function (data){
                layer.close(load);
                if(data.code == "1"){
setTimeout(function (){
                   location.href = ''
},1000);
                    layer.alert(data.msg,{icon:1});
                }else{
                    layer.alert(data.msg,{icon:2});
                }
            }
        });
}
</script>