{layout name="layout2" /}
<style>
    .layui-form-item .layui-input-inline { width: 340px; }
    .pay-li {
        float: left;
        opacity: 1;
        position: relative;
    }
    .pay-img {
        width: 80px;
        height: 80px;
        padding: 4px;
    }
    .pay-img-del-x {
        position: absolute;
        z-index: 100;
        top: -4px;
        right: -2px;
        width: 20px;
        height: 20px;
        font-size: 16px;
        line-height: 16px;
        color: #fff;
        text-align: center;
        cursor: pointer;
        background: hsla(0, 0%, 60%, .6);
        border-radius: 10px;
    }
    .upload-cert-a{
        cursor: pointer;
        position: absolute;
        z-index: 100;
        top: 58px;
        right: -10%;
        width: 100px;
        height: 20px;
        font-size: 8px;
        line-height: 16px;
        text-align: center;
        border-radius: 10px;
        color: #4e8bff;
    }
    .upload-cert-a:hover {
        color: #0641cb;
    }
    .pay-cert{
        height:80px;line-height:80px
    }
    .cert-add,.key-add{
        height: 80px;
        width: 80px;
        float: left;
        opacity: 1;
        position: relative;
        border:1px dashed #a0a0a0;
        background-image:url('/static/common/image/default/add_file.png');
        background-repeat: no-repeat;
        background-position: 50% 35%;
        background-size:40px 40px;
        margin: 4px;
        text-align: center;
    }
</style>

<div class="layui-card layui-form" style="box-shadow:none;">
    <div class="layui-card-body">
        <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="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="cid" class="layui-form-label"><span style="color:red;">*</span>分类：</label>
            <div class="layui-input-inline">
                <select name="cid" id="cid" lay-verType="tips" lay-verify="required" lay-filter="cid">
                    <option value="">全部</option>
                    {volist name="cates" id="vo"}
                        <option value="{$vo.id}">{$vo.name}</option>
                    {/volist}
                </select>
            </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">-->
<!--            </div>-->
<!--        </div>-->

        <div class="layui-form-item">
            <label class="layui-form-label">封面图：</label>
            <div class="layui-input-block">
                <div class="like-upload-image" switch-tab="0" lay-verType="tips">
                    <div class="upload-image-elem"><a class="add-upload-image"> + 添加图片</a></div>
                </div>
                <div class="layui-form-mid layui-word-aux">建议尺寸：500*500像</div>
            </div>
        </div>


        <div class="layui-form-item" style="margin-bottom: 0px">
            <label class="layui-form-label"><span class="form-label-asterisk">*</span>轮播图：</label>
            <div class="layui-input-block" id="goodsImageContainer">
                <div class="like-upload-image">
                    <div class="upload-image-elem"><a class="add-upload-image" id="images"> + 添加图片</a></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <span style="color: #a3a3a3;font-size: 9px">建议尺寸：800*800像素，最多上传5张</span>
        </div>

        <!--支付证书-->
        <div class="layui-form-item">
            <label class="layui-form-label">上传文件：</label>
            <div class="layui-inline">
                <div class="pay-cert" id="kkk">
                    <input class="text" type="hidden" name="path" value="" >
                    <div class="cert-add" style="cursor: pointer;">
                        <a class="upload-cert-a">+ 添加文件</a>
                    </div>
                </div>
                <div class=" layui-form-mid layui-word-aux">
                    用户下载的文书附件
                </div>
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-inline">
                <input type="radio" name="is_show" value="1" title="显示">
                <input type="radio" name="is_show" value="0" title="隐藏" checked>
            </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"></textarea>
            </div>
        </div>

        <div class="layui-form-item layui-hide">
            <input type="button" lay-submit lay-filter="addSubmit" id="addSubmit" value="确认">
        </div>
    </div>
</div>
<script src="__PUBLIC__/static/common/js/area.js"></script>
<script>
    layui.config({
        base: "/static/lib/"

    }).extend({
        likeedit: "likeedit/likeedit",
        likeArea: "likeArea/likeArea",
    }).use(["likeedit","likeArea", "form"], function(){
        var form = layui.form;
        var likeedit = layui.likeedit;
        var likeArea = layui.likeArea;
        var content = likeedit.build("content", {
            uploadImage: {
                url: '{:url("file/lists")}?type=10'
            }
        });


        form.on('select(cid)', function (data) {
            console.log(data);
            var cid = data.value;
            $.ajax({
                type: 'GET',
                dataType: 'json',
                url: "{:url('content.ResourceCategory/lists')}",
                data: {pid:cid,page:1,limit:100},
                success: function(res) {
                    console.log(res)
                    var html = '<option value="">全部</option>';
                    if(res.code == 1 && res.data.count > 0){
                        var list =  res.data.lists
                        for (var i=0;i<res.data.count;i++){
                            item = list[i]
                            html += '<option value="'+item.id+'">'+item.name+'</option>';
                        }

                    }
                    console.log(html)
                    $("#cid2").html(html)
                    form.render();
                }

            })

        });


        form.verify({
            content: function() {
                likeedit.sync(content)
            }
        });

        like.delUpload();
        $(document).on("click", ".add-upload-image", function () {
            like.imageUpload({
                limit: 1,
                field: "image",
                that: $(this)
            });
        });

        // 轮播图
        $(document).on("click", "#images", function () {
            like.imageUpload({
                limit: 5,
                field: "legal_image[]",
                that: $(this),
                content: '{:url("file/lists")}?type=10'
            });
        })

        //删除图片/证书
        $(document).on('click', '.pay-img-del-x', function () {
            $(this).parent().siblings('input').val('');
            $(this).parent().siblings().css('display','block');
            $(this).parent().remove();
        });

        //==========================================上传证书start=========================================================

        like.certUpload('.cert-add', '{:url("file/other")}?sub_dir=resource', '{$storageUrl}');
        //==========================================上传证书end===========================================================
        //  删除按钮的显示与隐藏
        $(document).on('mouseover', '.pay-img', function () {
            $(this).next().show();
        });
        $(document).on('mouseout', '.pay-img', function () {
            $(this).next().hide();
        });
        $(document).on('mouseover', '.pay-img-del-x', function () {
            $(this).show();
        });
        $(document).on('mouseout', '.pay-img-del-x', function () {
            $(this).hide();
        });


        likeArea.init(
            "refund_province", "refund_city", "refund_district", "refund_province_id", "refund_city_id", "refund_district_id",
            "", "", ""
        );

    })
</script>