<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org" xmlns:sptg="http://www.thymeleaf.org">
<head>
    <script th:replace="common/head"></script>
</head>

<body>
<div class="layui-fluid">
    <div class="layui-card">
        <div class="layui-form layui-card-header layuiadmin-card-header-auto" style="padding:0;">
            <div class="layui-form-item border-b">
                <div class="layui-inline">
                    <label class="layui-form-label">素材名称</label>
                    <div class="layui-input-block">
                        <input type="text" id="selectedAdMaterialName" placeholder="请输入" autocomplete="off"
                               class="layui-input">
                    </div>
                </div>

                <div class="layui-inline">
                    <label class="layui-form-label">素材类型</label>
                    <div class="layui-input-block">
                        <select id="selectedAdMaterialType" lay-verify="" lay-search="">
                            <option value="all" selected>全部</option>
                            <option value="图片">图片</option>
                            <option value="视频">视频</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline">
                    <label class="layui-form-label">状态</label>
                    <div class="layui-input-block">
                        <select id="selectedAdMaterialStatus" lay-verify="" lay-search="">
                            <option value="3" selected>全部</option>
                            <option value="1">有效</option>
                            <option value="2">无效</option>
                        </select>
                    </div>
                </div>
                <div class="layui-inline" style="margin-left: 38px;">
                    <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="query">查询</button>
                    <button class="layui-btn  layui-btn-primary" lay-submit lay-filter="reset">重置</button>
                </div>
            </div>

            <!-- 表格+头部按钮 -->
                <div class="layui-card-body" style="padding:0;" id="layPhotosTbImg">
                    <div style="padding-bottom: 10px;">
                        <button class="layui-btn layuiadmin-btn-admin" lay-submit lay-filter="add"
                                sptg:security="ad:material:insert">添加素材
                        </button>
                        <button class="layui-btn layuiadmin-btn-useradmin" lay-submit lay-filter="batchdel"
                                sptg:security="ad:material:delete">批量删除
                        </button>
                    </div>
                    <table id="table-id" lay-filter="table-id"></table>
                </div>
            </div>

            <!--操作-->
            <script type="text/html" id="table-operate-id">
                <a class="layui-btn layui-btn-normal layui-btn-xs" lay-event="edit" sptg:security="ad:material:insert">修改</a>
                <a class="layui-btn layui-btn-danger layui-btn-xs" lay-event="del"
                   sptg:security="ad:material:delete">删除</a>
            </script>

            <!-- 附件显示 -->
            <input type="hidden" id="fastDfsServer" th:value="${fastDfsServer}"/>
            <script type="text/html" id="materialFileTemplate">
                {{# if(d.materialType == '图片'){ }}
                <img src="{{fastDfsServer + d.materialFile}}"
                     style="display: inline-block; width: 80%; height: 100%;cursor: zoom-in">
                {{# }else if(d.materialType = "视频"){ }}
                <a href="{{fastDfsServer+d.materialFile}}" style="color: #1E9FFF;cursor: pointer;"
                   target="_blank">点击查看视频</a>
                {{#  }else{ }}
                <span>其他</span>
                {{# } }}
            </script>

        <script type="text/html" id="orgIdTemplate">
            <span>{{d.orgName}}</span>
        </script>
            <!-- 状态显示 -->
            <script type="text/html" id="materialStatusTemplate">
                {{#  if(d.materialStatus == 1){ }}
                <span class="layui-btn layui-btn-normal layui-btn-xs">有效</span>
                {{#  }else if(d.materialStatus == 2){ }}
                <span class="layui-btn layui-btn-danger layui-btn-xs">失效</span>
                {{#  }else{ }}
                <span class="layui-btn">其他</span>
                {{# } }}
            </script>
        </div>
    </div>
    <!-- javascript -->
    <script th:src="@{'/layui/layui.js'}" charset="utf-8"></script>
    <script>
        layui.config({
            base: '/' //静态资源所在路径
        });
        var fastDfsServer = document.getElementById("fastDfsServer").value;
    </script>
    <script th:src="@{'/js/ad/ad-material-manage.js'}" charset="utf-8"></script>
</body>

</html>
