{extend name="table"}

{block name="button"}
<button type="button" class="layui-btn layui-btn-sm layui-btn-primary" data-open='{:url("my")}' data-title="我审核的">我审核的</button>
<!--{if auth("add")}-->
<button type="button" class="layui-btn layui-btn-sm" data-modal='{:url("add")}' data-title="添加工单">添加工单</button>
<!--{/if}-->
<!--{if auth("import")}-->
<a class="layui-btn layui-btn-sm layui-btn-active" target="_blank" href="/static/ticket_import_template.xlsx">下载导入模板</a>
<button class='layui-btn layui-btn-sm layui-btn-success' data-file data-type="xlsx,xls" data-uptype='local' data-field="ticket_excel">导入工单</button>
<!--{/if}-->
{/block}

{block name="content"}
<div class="layui-tab">
    <div class="layui-row">
        <div class="layui-col">
            <div class="article_list think-bg-white">
                {include file='ticket/index_search'}
                <table class="layui-hide" data-url="{$request->url()}" data-target-search="form.form-search" id="ticketTable" lay-filter="ticketTable"></table>
            </div>
        </div>
    </div>
</div>
<script type="text/html" id="toolbar">
    <!--{if auth("detail")}-->
    <a data-modal="{:url('detail')}?id={{ d.id }}" data-height="90%" data-width="60%" class="layui-btn layui-btn-xs layui-btn-normal" title="详情">详情</a>
    <!--{/if}-->
    {{# if (d.user_shares && d.user_shares.length > 0) { }}
    <!--{if auth("comment")}-->
    <a data-modal="{:url('comment')}?id={{ d.id }}" data-height="80%" data-width="80%" class="layui-btn layui-btn-xs layui-btn-normal" title="反馈信息">反馈信息</a>
    <!--{/if}-->
    {{# } }}
    <!--{if auth("edit")}-->
    <a data-modal="{:url('edit')}?id={{ d.id }}" data-height="80%" data-width="80%" class="layui-btn layui-btn-xs layui-btn-danger" title="修改工单">修改</a>
    <!--{/if}-->
</script>
{/block}

{block name='style'}
<style>
</style>
{/block}

{block name='script'}
<script>
    $(function () {
        $('#ticketTable').layTable({
            height: 'full-250',
            toolbar: true,
            sort: {field: 'create_at', type: 'desc'},
            title: '工单列表',
            cols: [[
                {field:'create_at', title: '工单创建时间', width: 160, sort: true},
                {field:'source_type_name', title:'工单来源', width:120},
                {field:'type_name', title:'工单类型', width:160},
                {field:'content', title:'工单内容', minWidth:120},
                {field:'ticket_address', title:'工单地址', width:200, templet:function(item){
                    if (item.ticket_address) {
                        return `${item.ticket_region} ${item.ticket_address}`;
                    } else {
                        return '';
                    }
                    }},
                {field: 'imgs', title: '工单图片', width: 100, templet:function(item){
                        if (item.imgs) {
                            return item.imgs.split("|").map((img) => {
                                return laytpl('<a target="_blank" data-tips-hover data-tips-image="{{d}}"><i class="layui-icon layui-icon-picture"></i></a>').render(img)
                            }).concat(' ')
                        } else {
                            return '';
                        }
                    }},
                {field:'status', title:'状态', width:80, templet:function(item){
                    if (item.status === 0) {
                        /** {if auth("move")} */
                        return `<a data-modal="{:url('move')}?id=${ item.id }" data-height="80%" data-width="80%" class="layui-btn layui-btn-xs" title="分配">分配</a>`
                        /** {else} */
                        return `<span style="color: red">待分配</span>`
                         /** {/if} */
                    } else {
                        if (item.state === 2) {
                            return `<span style="color: green">外部工单</span>`
                        } else {
                            return `<span style="color: green">内部工单</span>`
                        }
                    }
                    }},
                {fixed: 'right', title:'操作', toolbar: '#toolbar', width:200}
            ]],
            page: true
        })
        /*！文件上传过程及事件处理 */
        $('[data-file]').on('upload.choose', function (files) {
            // 文件选择后的事件
        }).on('upload.hash', function (event, file) {
            // file 当前文件对象
        }).on('upload.progress', function (event, obj) {
            // obj.file 当前文件对象
            // obj.event 文件上传进度事件
            // obj.number 当前上传进度值
        }).on('upload.done', function (event, obj) {
            // obj.file 当前完成的文件对象，每个文件上传成功将会调用
            // obj.data 当前文件上传后服务端返回的内容，部分云上传不会返回数据

            // obj.file 当前完成的文件对象
            // obj.data 当前文件上传后服务端返回的内容
            console.log(obj.file);
            console.log(obj.data);
            /*! 提交数据并返回结果 */
            if(obj.file.xurl) $.form.load('{:url("import")}', {file: obj.file.xurl}, 'post');
        }).on('upload.complete', function (event) {
            // 全部文件上传成功
        });
    })
</script>
{/block}