{layout name="layout2" /}
<style>
    .layui-form {padding: 20px 30px;background-color: #ffffff;}
    .layui-form-item .layui-form-label { width: 95px; }
    .layui-form-item .layui-input-inline { width: 240px; }
    .layui-form-item .map-container{ width: 600px; height: 400px; margin-left: 100px; margin-top: 20px; }
    #video-block {position: relative; width: 700px;height: 300px}
    .del-video-btn {
        visibility: hidden;
        display: flex;
        align-items: center;
        justify-content: center;
        position: absolute;
        z-index: 100;
        top: -11px;
        right: -9px;
        width: 20px;
        height: 20px;
        cursor: pointer;
        font-size: 14px;
        color: #FFFFFF;
        border-radius: 50%;
        background: hsla(0, 0%, 60%, .6)
    }
    .select-goods {margin-left: 10px}
</style>

<div class="layui-card layui-form">
    <div class="layui-card-body">
        <input type="hidden" value="{$detail.id}" name="id">
        <div class="layui-form-item">
            <label for="title" class="layui-form-label"><span style="color:red;">*</span>标题：</label>
            <div class="layui-input-inline">
                <input type="text" name="title" id="title" lay-verType="tips" lay-verify="title"
                    switch-tab="0" autocomplete="off" class="layui-input" value="{$detail.title}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="desc" class="layui-form-label"><span style="color:red;">*</span>文章概述：</label>
            <div class="layui-input-inline">
                <input type="text" name="desc" id="desc" lay-verType="tips" lay-verify="desc"
                       switch-tab="0" autocomplete="off" class="layui-input" value="{$detail.desc}">
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">文章类型：</label>
            <div class="layui-input-inline">
                <input type="radio" lay-filter="type" name="type" value="0" title="文章" {if condition = "$detail.type eq 0"} checked {/if}>
                <input type="radio" lay-filter="type" name="type" value="1" title="视频" {if condition = "$detail.type eq 1"} checked {/if}>
            </div>
        </div>

        <div id="mall-image" class="layui-form-item" {if condition = "$detail.type eq 1"} style="display: none" {/if}>
            <label class="layui-form-label">图片：</label>
            <div class="layui-input-block" id="goodsImageContainer">
                <div class="like-upload-image">
                    <div class="upload-image-elem"><a class="add-upload-image" id="mallNewImage"> + 添加图片</a></div>
                </div>
            </div>
        </div>

        <div id="mall-video" class="layui-form-item" {if condition = "$detail.type eq 0"} style="display: none" {/if}>
            <label class="layui-form-label">视频：</label>
            <div id="upload-video-block" class="layui-input-block">
                <div class="like-upload-image">
                    <div class="upload-image-elem"><a class="add-upload-video"> + 上传视频</a></div>
                </div>
            </div>
            <div id="video-block" style="display: none">
                <div class="del-video-btn" style="visibility: inherit">x</div>
                <video id="mallVideo" controls></video>
                <input type="hidden" name="video_file">
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label"></label>
                <span style="color: #a3a3a3;font-size: 9px">视频上传格式为mp4，上传文件大小限制为：{$max_upload_size}</span>
            </div>
        </div>

<!--        <div class="layui-form-item">-->
<!--            <label for="shop_name" class="layui-form-label">商品名称：</label>-->
<!--            <div class="layui-input-inline">-->
<!--                <input type="text" name="shop_name" id="shop_name" autocomplete="off" class="layui-input" value="{$detail.shop_name}">-->
<!--            </div>-->
<!--        </div>-->
        <div class="layui-form-item">
            <label class="layui-form-label">商品：</label>
            <div class="layui-input-inline" style="display: flex">
                <div id="shop_name">{$detail.shop ? $detail.shop['name'] : ''}</div>
                <input type="hidden" id="shop_id" name="shop_id" style="margin-right: 10px;" value="{$detail.shop_id}">
                <a class="layui-btn layui-btn-normal select-goods">选择商品</a>
            </div>
        </div>

        <div class="layui-form-item">
            <label class="layui-form-label">是否置顶：</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_top" value="0" title="否" {if condition = "$detail.is_top eq 0"} checked {/if}>
                <input type="radio" name="is_top" value="1" title="是" {if condition = "$detail.is_top eq 1"} checked {/if}>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="sort" class="layui-form-label">排序：</label>
            <div class="layui-input-inline">
                <input type="text" name="sort" id="sort" autocomplete="off" class="layui-input" value="{$detail.sort}">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="content" class="layui-form-label">文章详情：</label>
            <div class="layui-input-block">
                <textarea name="content" id="content" lay-verify="content">{$detail.content}</textarea>
            </div>
        </div>
    </div>
    <div class="layui-form-item layui-hide">
        <input type="button" lay-submit lay-filter="addSubmit" id="addSubmit" value="确认">
    </div>
</div>


<script src="__PUBLIC__/static/common/js/area.js"></script>
<script>
    var detail= {$detail|raw|default=''};

    layui.config({
        base: "/static/lib/"
    }).extend({
        likeedit: "likeedit/likeedit",
        likeArea: "likeArea/likeArea",
        txMap: "likeMap/txMap"
    }).use(["form", "laydate", "likeArea", "txMap", 'likeedit', 'upload', 'element'], function(){
        var $ = layui.$;
        var form = layui.form;
        var laydate = layui.laydate;
        var likeedit = layui.likeedit;
        var likeupload = layui.upload;

        //------------------------------------------富文本编辑器 begin --------------------------------
        var content = likeedit.build("content", {
            uploadImage: {
                url: '{:url("file/lists")}?type=10'
            }
        });

        form.verify({
            content: function() {
                likeedit.sync(content)
            }
        });
        //------------------------------------------富文本编辑器 end --------------------------------

        //文章图片
        if(detail['files'] && detail['type'] === 0){
            var html = '';
            for(j = 0; j < detail['files'].length; j++) {
                html = html +
                    '<div class="upload-image-div">' +
                    '<img src="' + detail['files'][j].src + '" alt="img" />' +
                    '<input type="hidden" name="mall_news_images[]" value="' + detail['files'][j].src + '">' +
                    '<div class="del-upload-btn">x</div>' +
                    '</div>';
            }
            html = html + '<div class="upload-image-elem"><a class="add-upload-image" id="mallNewImage"> + 添加图片</a></div>';
            $('#goodsImageContainer').html(html);
        }

        // 视频上传
        if (detail['files'] && detail['type'] === 1) {
            $("#upload-video-block").hide()
            $("#video-block").show()
            $("#mallVideo").attr('src', detail['files'][0]['src'])
            $("input[name='video_file']").val(detail['files'][0]['src'])
        }

        // 切换文章类型
        form.on('radio(type)', function(data){
            if(data.value == 0){
                $("#mall-image").show()
                $("#mall-video").hide()
            } else {
                $("#mall-image").hide()
                $("#mall-video").show()
            }
        });

        laydate.render({type:"datetime", elem:"#expire_time", trigger:"click",min:0});

        like.delUpload();
        $(document).on("click", "#mallNewImage", function () {
            like.imageUpload({
                limit: {$max_upload_file},
                field: "mall_news_images[]",
                that: $(this)
            });
        });

        // 视频上传
        likeupload
        var uploadInst = likeupload.render({
            elem: '.add-upload-video' //绑定元素
            ,url: "{:url('MallNews/uploadVideo')}" //上传接口
            ,accept: 'video'
            ,exts: "mp4"
            ,before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                console.log(222)
                layer.load(); //上传loading
            }
            ,done: function(res, index, upload){
                if (res.code === 1) {
                    console.log(res)
                    $("#upload-video-block").hide()
                    $("#video-block").show()
                    $("#mallVideo").attr('src', res.data.file)
                    $("#mall_news_images").val(res.data.file)
                    $("input[name='video_file']").val(res.data.file)
                } else {
                    layer.msg('上传错误');
                    return false;
                }
                layer.closeAll('loading'); //关闭loading
            }
            ,error: function(index, upload){
                layer.closeAll('loading'); //关闭loading
            }
        });

        // 删除视频
        $(document).on("click", ".del-video-btn", function (e) {
            layer.confirm("是否删除该视频？", function(index) {
                const videoFile = $("#mallVideo").attr('src')
                like.ajax({
                    url: '{:url("mallNews/delVideo")}',
                    data:  {videoFile},
                    type: "post",
                    success: function (res) {}
                });

                $("#upload-video-block").show()
                $("#video-block").hide()
                $("#mallVideo").attr('src', '')
                layer.close(index);
            })
        });

        // 选择商品
        $(document).on('click','.select-goods',function () {
            layer.open({
                type: 2
                ,title: '选择商品'
                ,content: '{:url("mallNews/goods")}'
                ,area: ['90%', '90%']
                ,btn: ['确认', '取消']
                ,yes: function(index, layero){
                    var data = window["layui-layer-iframe" + index].callbackdata();
                    $('#shop_name').html(data[0].name)
                    $('#shop_id').val(data[0].id)
                }
            })
        })

        form.verify({
            title: function (value, item) {
                if (!value) {
                    switchTab($(item).attr("switch-tab"));
                    return "请填写标题";
                }
            },
            desc: function (value, item) {
                if (!value) {
                    switchTab($(item).attr("switch-tab"));
                    return "请填写文章概述";
                }
            },
        });

        function switchTab(number) {
            $('.layui-tab-card .layui-tab-title li').removeClass('layui-this');
            $('.layui-tab-content .layui-tab-item').removeClass('layui-show');
            $('.layui-tab-card .layui-tab-title li').eq(number).addClass('layui-this');
            $('.layui-tab-content .layui-tab-item').eq(number).addClass('layui-show');
        }
    })
</script>