@extends('layouts.father')
@section('title', '广告图更新')
@section('style')
    <link href="/assets/lightbox/css/lightbox.css" rel="stylesheet">
@endsection
@section('body')

    <div class="x-body">
        <form class="layui-form">
            {{csrf_field()}}

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    <span class="x-red">*</span>套图名称
                </label>
                <div class="layui-input-inline">
                    <input type="text" id="name" name="name" value="{{ $name }}" required="" lay-verify="required" autocomplete="off" class="layui-input">
                    <input type="hidden" name="oldname" value="{{ $name }}" />
                </div>
            </div>

            <div class="layui-form-item">
                <label for="name" class="layui-form-label">
                    是否默认图
                </label>
                <div class="layui-input-inline">
                    <select name="default">
                        <option value="">请选择</option>
                        <option @if(isset($pic[0]->default) && $pic[0]->default == '是') selected @endif>是</option>
                        <option @if(isset($pic[0]->default) && $pic[0]->default == '否') selected @endif>否</option>
                    </select>
                </div>
            </div>

            <div class="layui-card layui-upload">
                <button type="button" class="layui-btn layui-btn-normal" id="upload-List">选择多文件</button>
                <div class="layui-upload-list">
                    <table class="layui-table">
                        <thead>
                        <tr><th>文件名</th>
                            <th>预览</th>
                            <th>排序</th>
                            <th>状态</th>
                            <th>操作</th>
                        </tr></thead>
                        <tbody id="upload-demoList">
                            @foreach($pic as $p)
                            <tr>
                                <td>{{ $p->title }}</td>
                                <td>
                                    <a href="{{env('OSS_HOST').$p->pic}}" data-lightbox="ad_img"  data-title="{{ $p->title }}">
                                        <img src="{{env('OSS_HOST').$p->pic}}" height="100px" alt="" >
                                    </a>
                                <td>
                                    <input type="text" name="sort[]" value="{{ $p->sort }}" style="width:50px;" class="layui-input">
                                </td>
                                <td><span style="color: #5FB878;">上传成功</span>
                                    <input type="hidden" name="picid[]" value="{{ $p->id }}">
                                    <input type="hidden" name="title[]" value="{{ $p->title }}">
                                    <input type="hidden" class="pic" name="pic[]" value="{{ $p->pic }}"></td>
                                <td>
                                    <a class="layui-btn layui-btn-mini upload-reload layui-hide">重传</a>
                                    <a class="layui-btn layui-btn-mini layui-btn-danger upload-delete">删除</a>
                                </td>
                            </tr>
                            @endforeach
                        </tbody>
                    </table>
                </div>
                <button type="button" class="layui-btn" id="upload-ListAction">开始上传</button>
            </div>


            <div class="layui-form-item">
                <label for="add" class="layui-form-label">
                </label>
                <button  id="add" class="layui-btn" lay-filter="add" lay-submit="">
                    保存
                </button>
            </div>
        </form>

    </div>
    <script src="/assets/lightbox/js/lightbox.js"></script>
    <script>

        layui.use(['layer','form','upload'], function(){
            $ = layui.jquery;//jquery
            form = layui.form;
            upload = layui.upload;

            var cnt = '{{ count($pic) }}';

            // 单个删除
            $('.upload-delete').on('click', function(){
                // 删除
                var obj = $(this).parent().parent();
                var url = "/admin/picDelete?path="+obj.find('.pic').val();

                layer.confirm('确认要删除吗？',function(index){
                    $.get(url, function (res) { //删除服务器上的图片
                        // 发异步，把数据提交给php
                        if (res.status == 1) {

                            //移除视图图片
                            obj.remove();

                            //发异步把用户状态进行更改
                            layer.msg(res.msg,{icon: 6,time:1000});

                        } else {

                            layer.alert(res.msg, {icon: 5});
                        }
                    });
                });
            });

            //多文件列表示例
            var demoListView = $('#upload-demoList')
                ,uploadListIns = upload.render({
                elem: '#upload-List'
                ,url: '/admin/adUpload'
                ,data:{
                    '_token':$("input[name=_token]").val(),
                }
                ,accept: 'file'
                ,multiple: true
                ,auto: false
                ,bindAction: '#upload-ListAction'
                ,choose: function(obj){
                    var files = this.files = obj.pushFile(); //将每次选择的文件追加到文件队列
                    //读取本地文件
                    obj.preview(function(index, file, result){

                        cnt++;
                        var tr = $(['<tr id="upload-'+ index +'">'
                            ,'<td>'+ file.name +'</td>'
                            ,'<td><a href="'+result+'" data-lightbox="ad_img"  data-title="'+ file.name +'"><img src="'+result+'" height="100px" /></a></td>'
                            ,'<td><input type="text" name="sort[]" value="'+cnt+'" style="width:50px;" class="layui-input"/></td>'
                            ,'<td>等待上传</td>'
                            ,'<td>'
                            ,'<a class="layui-btn layui-btn-mini upload-reload layui-hide">重传</a>'
                            ,'<a class="layui-btn layui-btn-mini layui-btn-danger upload-delete">删除</a>'
                            ,'</td>'
                            ,'</tr>'].join(''));

                        //单个重传
                        tr.find('.upload-reload').on('click', function(){
                            obj.upload(index, file);
                        });

                        //删除
                        tr.find('.upload-delete').on('click', function(){
                            delete files[index]; //删除对应的文件
                            tr.remove();
                            uploadListIns.config.elem.next()[0].value = ''; //清空 input file 值，以免删除后出现同名文件不可选
                        });

                        demoListView.append(tr);
                    });
                }
                ,done: function(res, index, upload){
                    if(res.data.code == 0){ //上传成功
                        var tr = demoListView.find('tr#upload-'+ index)
                            ,tds = tr.children();
                        tds.eq(3).html('<span style="color: #5FB878;">上传成功</span>' +
                            '<input type="hidden" name="picid[]" value="" />' +
                            '<input type="hidden" name="title[]" value="'+res.data.filename+'" />' +
                            '<input type="hidden" class="pic" name="pic[]" value="'+res.data.filepath+'" />');
                        return delete this.files[index]; //删除文件队列已经上传成功的文件
                    }
                    this.error(index, upload);
                }
                ,error: function(index, upload){
                    var tr = demoListView.find('tr#upload-'+ index)
                        ,tds = tr.children();
                    tds.eq(3).html('<span style="color: #FF5722;">上传失败</span>');
                    tds.eq(4).find('.upload-reload').removeClass('layui-hide'); //显示重传
                }
            });


            //监听提交
            form.on('submit(add)', function(data){

                url = "/admin/adpicUpdate?name={{$name}}";

                var index = parent.layer.getFrameIndex(window.name);
                var loadIndex = layer.load(); //打开加载loading
                //发异步，把数据提交给php
                $.post(url, data.field, function (res) {

                    layer.close(loadIndex); //关闭加载loading
                    //发异步，把数据提交给php
                    if(res.status == 1) {

                        console.log(res);
                        layer.alert(res.msg, {icon: 6},function () {
                            // 关闭当前frame
                            parent.location.reload();
                            parent.layer.close(index);
                        });

                    } else {

                        layer.alert(res.msg, {icon: 5});
                    }

                }, "json");
               return false;
            });


        });


    </script>

@endsection