@extends('layouts.father')
@section('title', '买家秀添加')
@section('style')
    <link href="/assets/lightbox/css/lightbox.css" rel="stylesheet">
    <style>
        .dn{
            display: none;
        }
        .detail-img-icon{
            position: absolute;
            margin-left: -15px;
            margin-top: -8px;
            cursor: pointer;
        }

        .detail-img-icon2{
            font-size: 23px!important;
        }
        .layui-upload-more-img {
             width: 92px;
             height: 92px;
             margin: 0 10px 10px 0;
        }
    </style>
@endsection
@section('body')
    <div class="x-body">
        <form class="layui-form" enctype="multipart/form-data">
            {{csrf_field()}}
            <div class="layui-form-item">
                <label for="name" class="layui-form-label" style="text-align: left">
                    <span class="x-red">*</span>商品名称：
                </label>
                <div class="layui-input-inline" style="display: flex">
                    <select name="eid" lay-filter="eid" lay-search required="required" lay-verify="required">
                        @if(!$buyershow->id)
                            <option value="">请选择</option>
                        @endif
                        @foreach($enterNameArr as $k => $vo)
                        <option @if($buyershow->eid == $k) selected @endif value="{{$k}}">{{ $vo}}</option>
                        @endforeach
                    </select>
                    <input type="hidden" id="name" name="name"  value="{{ $buyershow->name }}" autocomplete="off" class="layui-input">
                    <input type="hidden" name="id"  value="{{ $buyershow->id }}" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item" style="display: flex;align-items: center">
                <label for="name" class="layui-form-label" style="text-align: left">
                    <span class="x-red">*</span>标题：
                </label>
                <div class="">
                    <input type="text" id="title" name="title" required="" value="{{ $buyershow->title }}" lay-verify="required" autocomplete="off" class="layui-input">
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label" style="text-align: left">
                    <span class="x-red">*</span>内容：
                </label>
                <div style="width: 80%;margin-left: 5%">
                    <textarea type="text" id="content" name="content" required="" lay-verify="required" autocomplete="off" class="layui-textarea">{{ $buyershow->content }}</textarea>
                </div>
            </div>
            <div class="layui-form-item layui-card">

                <div class="layui-card-header">主图</div>
                <div class="layui-card-body">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn upload @if($buyershow->pic) x-disable @endif">
                            <i class="layui-icon">&#xe67c;</i>上传图片
                        </button>
                        <input type="hidden" name="pic" value="{{$buyershow->pic}}">
                        <div class="layui-upload-list @if(!$buyershow->pic) dn @endif">
                            <a href="{{ env('OSS_HOST').$buyershow->pic }}" data-lightbox="upload-img"  data-title="主图">
                                <img id="upload-img" class="layui-upload-img upload-img"  src="{{ env('OSS_HOST').$buyershow->pic }}" style="height: 100px;">
                            </a>
                            <i class="layui-icon iconfont detail-img-icon detail-img-icon2" onclick="removeImg('pic')" >&#x1007;</i>
                            <p id="test-upload-demoText"></p>
                        </div>
                    </div>
                </div>
            </div>

            <div class="layui-card">
                <div class="layui-card-header">上传多张详情图</div>
                <div class="layui-card-body">
                    <div class="layui-upload">
                        <button type="button" class="layui-btn upload-more">详情图上传</button>
                        <blockquote class="layui-elem-quote layui-quote-nm" style="margin-top: 10px;">
                            预览图：
                            <div class="layui-upload-list upload-more-list">

                                @foreach($detail as $p)
                                    @php
                                        $detail_cnt =  $loop->index + 1;
                                    @endphp
                                    <a href="{{env('OSS_HOST').$p}}" data-lightbox="detail_img"  data-title="详情图">
                                        <img src="{{env('OSS_HOST').$p}}" alt="" class="layui-upload-more-img detail_img{{$detail_cnt}}">
                                    </a>
                                    <i class="iconfont layui-icon detail-img-icon detail_i{{$detail_cnt}}" onclick="del_icon({{$detail_cnt}})"  style="font-size:23px;">ဇ</i>
                                    <input name="detail[]" type="hidden" value="{{$p}}" class="detail_input{{$detail_cnt}}">
                                @endforeach

                            </div>
                        </blockquote>
                    </div>
                </div>
            </div>



            <div class="layui-form-item">
                <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
            upload = layui.upload;
            form = layui.form;

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

                var index = parent.layer.getFrameIndex(window.name);
                var loadIndex = layer.load(); //打开加载loading
                var id = $("input[name=id]").val()
                //发异步，把数据提交给php
                $.post('/admin/buyerShowAdd?id='+id, data.field, function (res) {

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

                        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;
            });


            form.on('select(eid)', function(data){
                $("#name").val($(data.elem).find('option:selected').text())
            });

            var loadIndex = ''; //打开加载loading
            //执行实例
            upload.render({
                elem: '.upload' //绑定元素
                ,size: 2048
                , url: '/admin/upload' //上传接口
                , data: {
                    '_token': $("input[name=_token]").val(),
                    'type': '',                              // 上传文件夹 默认上传地址enterprise
                }
                , before: function (obj) { //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                    loadIndex = layer.load(); //上传loading
                    obj.preview(function (index, file, result) {
                        $('.upload-img').attr('src', result); //图片链接（base64）
                        $('.upload-img').show();
                    });
                }
                , done: function (res, index, upload) {
                    //上传完毕回调
                    layer.close(loadIndex); //关闭加载loading
                    if (res.status == 1) {
                        $(".upload").addClass("x-disable");
                        $(".upload-img").parent().parent().removeClass('dn');
                        $(".upload-img").parent().attr("href","/"+res.data.filename);
                        layer.msg(res.msg, {icon: 6, time: 1000});
                        $("input[name=pic]").val(res.data.filename);

                    }
                }
                , error: function (error, upload) {
                    //请求异常回调
                    console.log(error);
                    layer.close(loadIndex); //关闭加载loading
                }
            });

            var cnt = {{$detail_cnt or 0}} + '';
            /*** 详解图上传 **/
            upload.render({
                elem: '.upload-more'
                ,url: '/admin/upload' //上传接口
                ,multiple: true
                ,data:{
                    '_token':$("input[name=_token]").val(),
                    'type':'',                              // 上传文件夹 默认上传地址enterprise
                    'thumb':0,                           // 1 ，开启缩略图，0, 不开启
                }
                ,before: function(obj){
                    // cnt++;
                    loadIndex = layer.load(); //上传loading
                    //预读本地文件示例，不支持ie8
                }
                ,done: function(res){

                    cnt++;
                    //上传完毕回调
                    layer.close(loadIndex); //关闭加载loading
                    if (res.status == 1) {

                        $(".upload-more-list").append('<input name="detail[]" class="detail_input'+cnt+'" type="hidden" value="' + res.data.filename + '">')
                        $('.upload-more-list').append('<a href="{{env('OSS_HOST')}}' + res.data.filename + '" data-lightbox="detail_img"  data-title="详情图"><img src="{{env('OSS_HOST')}}' + res.data.filename + '" class="layui-upload-more-img detail_img'+cnt+'"></a>\n' +
                            '<i class="iconfont layui-icon detail-img-icon detail_i'+cnt+'" onclick="del_icon('+cnt+')"  style="font-size:23px;">ဇ</i>\n');
                        layer.msg(res.msg, {icon: 6, time: 1000});
                    }
                }
            });

        });


        /*删除主图或者附图*/
        function removeImg(className) {
            var url = "/admin/picDelete?path="+$('input[name='+className+']').val();

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

                        $('input[name='+className+']').val(""); // 删除input 图片路径

                        // 恢复选择图片按钮 可点击
                        var btn = $('input[name='+className+']').parent().children("button");
                        btn.removeClass("x-disable");

                        //视图移除图片
                        var pic =$('input[name='+className+']').parent().children('.layui-upload-list');
                        pic.addClass('dn');
                        //发异步把用户状态进行更改
                        layer.msg(res.msg,{icon: 6,time:1000});

                    } else {

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

        /*删除详解图*/
        function del_icon(cnt) {

            var url = "/admin/picDelete?path="+$(".detail_input"+cnt).val();

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

                    //移除视图图片
                    $(".detail_img"+cnt).remove();
                    $(".detail_input"+cnt).remove();
                    $(".detail_i"+cnt).remove();

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

                });
            });
        }
    </script>
    <style>
        .layui-form-label{
            width: 100px;
        }
    </style>
@endsection