{layout name="layout2" /}
<style>
    .layui-form-label{width: 100px}
    .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="name" class="layui-form-label"><span style="color:red;">*</span>名称：</label>
            <div class="layui-input-inline">
                <input type="text" name="name" id="name" lay-verType="tips" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="vote_id" class="layui-form-label"><span style="color:red;">*</span>所属活动：</label>
            <div class="layui-input-inline">
                <select name="vote_id" id="vote_id" lay-verType="tips" lay-verify="required" lay-filter="vote_id">
                    <option value="">全部</option>
                    {volist name="votes" id="vo"}
                    <option value="{$vo.id}">{$vo.title}</option>
                    {/volist}
                </select>
            </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" id="avatar"> + 添加图片</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-input-block" id="videoContainer">
                <div class="like-upload-video">
                    <div class="upload-image-elem"><a class="add-upload-video" id="video"> + 添加视频</a></div>
                </div>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label"></label>
            <span style="color: #a3a3a3;font-size: 9px">宣传视频，在投票详情页面播放。(限制30m内)</span>
        </div>


        <div class="layui-form-item">
            <label for="base_visit" class="layui-form-label">基础浏览数：</label>
            <div class="layui-input-inline">
                <input type="number" name="base_visit" id="base_visit" lay-verType="tips" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>

        <div class="layui-form-item">
            <label for="base_visit" class="layui-form-label">虚拟投票数：</label>
            <div class="layui-input-inline">
                <input type="number" name="base_visit" id="base_vote"  lay-verType="tips" lay-verify="required" autocomplete="off" class="layui-input">
            </div>
        </div>


        <div class="layui-form-item">
            <label class="layui-form-label">状态：</label>
            <div class="layui-input-inline">
                <input type="radio" name="status" value="1" title="显示">
                <input type="radio" name="status" value="0" title="隐藏" checked>
            </div>
        </div>

        <div class="layui-form-item">
            <label for="intro" class="layui-form-label">简介：</label>
            <div class="layui-input-block" >
                <textarea style="width: 50%" placeholder="请输入简介" name="intro" id="intro" class="layui-textarea"  rows="6"></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",'laydate'], function(){
        var form = layui.form;

        like.delUpload();

        // 商品封面图
        $(document).on("click", "#avatar", function () {
            like.imageUpload({
                limit: 1,
                field: "avatar",
                that: $(this),
                content: '{:url("file/lists")}?type=10'
            });
        })
        // 商品轮播图
        $(document).on("click", "#images", function () {
            like.imageUpload({
                limit: 5,
                field: "goods_image[]",
                that: $(this),
                content: '{:url("file/lists")}?type=10'
            });
        })
        // 商品视频
        $(document).on("click", "#video", function () {
            like.videoUpload({
                limit: 1,
                field: "video",
                that: $(this),
                content: '{:url("file/lists")}?type=20'
            });
        })


        //删除图片/证书
        $(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();
        });

    })
</script>