{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" value="{$detail.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">
                    <option value="">全部</option>
                    {volist name="category" id="vo"}
                    <option value="{$vo.id}" {if $detail.cid==$vo.id}selected{/if}>{$vo.name}</option>
                    {/volist}
                </select>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="intro" class="layui-form-label">资料简介：</label>
            <div class="layui-input-inline">
                <input type="text" name="intro" id="intro" value="{$detail.intro ?? ''}" autocomplete="off" class="layui-input">
            </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" value="{$detail.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">
                    {if $detail.image}
                    <div class="upload-image-div">
                        <img src="{$detail.image}" alt="img">
                        <input type="hidden" name="image" value="{$detail.image}">
                        <div class="del-upload-btn">x</div>
                    </div>
                    <div class="upload-image-elem" style="display:none;"><a class="add-upload-image"> + 添加图片</a></div>
                    {else}
                    <div class="upload-image-elem"><a class="add-upload-image"> + 添加图片</a></div>
                    {/if}
                </div>
                <div class="layui-form-mid layui-word-aux">建议尺寸：500*500像</div>
            </div>
        </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="{$detail.path}" >
                    {if !empty($detail.path)}
                    <div class="cert-add" style="display: none;cursor: pointer;">
                        <a class="upload-cert-a">+ 添加文件</a>
                    </div>
                    <div class="pay-li">
                        <img class="pay-img"  src="/static/common/image/default/upload.png">
                        <a class="pay-img-del-x" style="display: none">x</a>
                    </div>
                    {else/}
                    <div class="cert-add" style="cursor: pointer;">
                        <a class="upload-cert-a">+ 添加文件</a>
                    </div>
                    {/if}

                    <!--<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="type" value="0" title="全员免费" {if $detail.type==0}checked{/if}>
                <input type="radio" name="type" value="1" title="vip免费" {if $detail.type==1}checked{/if}>
                <input type="radio" name="type" value="2" title="付费" {if $detail.type==2}checked{/if}>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="sort" class="layui-form-label">价格：</label>
            <div class="layui-input-inline">
                <input type="number" name="price" value="{$detail.price}"  id="price" 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="layui-input-inline" style="width:120px;">
                    <select name="province_id" id="province" lay-filter="province"></select>
                </div>
                <div class="layui-input-inline" style="width:120px;">
                    <select name="city_id" id="city" lay-filter="city"></select>
                </div>
                <div class="layui-input-inline" style="width:120px;">
                    <select name="district_id" id="district"></select>
                </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="显示" {if $detail.is_show==1}checked{/if}>
                <input type="radio" name="is_show" value="0" title="隐藏" {if $detail.is_show==0}checked{/if}>
            </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|raw}</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.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', '.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(
            "province", "city", "district", "province_id", "city_id", "district_id",
            "{$detail.province_id}", "{$detail.city_id}", "{$detail.district_id}"
        );
        likeArea.init(
            "refund_province", "refund_city", "refund_district", "refund_province_id", "refund_city_id", "refund_district_id",
            "{$detail.refund_address.province_id ?? ''}", "{$detail.refund_address.city_id ?? ''}", "{$detail.refund_address.district_id ?? ''}"
        );

    })
</script>