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

<body>

<div class="layui-fluid">
    <div class="layui-row layui-col-space15">
        <div class="layui-col-md12">
            <div class="layui-card">

                <div class="layui-card-body">
                    <!-- 修改 -->
                    <div class="layui-form">
                        <!-- 素材名称 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <span class="must">*</span>
                                <span>素材名称</span>
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="materialName" lay-verify="required|specialCharacters|length"
                                       class="layui-input" th:value="${adMaterial.materialName}">
                            </div>
                        </div>
                        <div class="layui-form-item">
                            <label class="layui-form-label">
<!--                                <span class="must">*</span>-->
                                <span>机构名称：</span>
                            </label>
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <select name="orgId" id="orgId" lay-verify="" lay-search=""
                                            th:value="${adMaterial.orgId}">
                                        <option value="">搜索</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <!-- 素材类型：图片或视频 -->

                        <input type="hidden" name="materialType" id="materialType" class="layui-input">

                        <!-- 素材文件 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <span class="must">*</span>
                                <span>素材文件</span>
                            </label>
                            <!-- 广告图片 -->
                            <input type="hidden" id="fastDfsServer" th:value="${fastDfsServer}"/>
                            <div class="layui-upload" style="margin-left: 110px;margin-top: 40px;">
                                <button type="button" class="layui-btn" id="attachButton">上传文件</button>
                                <button type="button" class="layui-btn" disabled style="display: none" id="upload">开始上传</button>
                                <input type="hidden" name="materialFile" class="layui-input"
                                       th:value="${adMaterial.materialFile}">
                                <blockquote id="VideoView" class="layui-elem-quote layui-quote-nm"
                                            style="margin-top: 10px;display: none;">
                                    预览视频：
                                    <!--<div class="layui-upload-list" id="demo5"></div>-->
                                    <video id="showVideoUri" style="width: 20%;height: 40%"
                                           th:src="${fastDfsServer+adMaterial.materialFile}" controls="controls" autoplay="autoplay">
                                        您的浏览器不支持HTML5
                                    </video>
                                    <input type="hidden" name="materialFile" id="materialFile" th:value="${adMaterial.materialFile}">
                                    <!--                                    <input type="hidden" name="videoMd5" id="videoMd5" th:value="${adMaterial.videoMd5}">-->

                                </blockquote>
                                <!--                                保存图片地址，逗号隔开-->
                                <blockquote id="ImageView" class="layui-elem-quote layui-quote-nm"
                                            style="margin-top: 10px;display: none;">
                                    预览图：
                                    <div class="layer-photos-demo" id="previewImage">
                                        <!--编辑时，图片遍历-->
                                        <div class="layer-photos-content" style="width: 150px; height: 150px;"
                                             th:if="${adMaterial.materialFile ne null}">
                                            <input type="hidden" name="materialFile"
                                                   th:value="${adMaterial.materialFile}"/>
                                            <img style="width: 150px; height: 150px; margin: 0 10px 10px 0;"
                                                 th:src="${fastDfsServer+adMaterial.materialFile}">
                                            <div class="layui-layer-imgsee">
                                            </div>
                                            <span class="layui-layer-setwin">
	                                                <a class="layui-layer-ico layui-layer-close layui-layer-close2"
                                                       href="javascript:;"></a>'
                                                </span>
                                            <a href="javascript:;" class="layui-laypage-next">
                                                <i class="layui-icon"></i>
                                            </a>
                                            <a href="javascript:;" class="layui-laypage-prev ">
                                                <i class="layui-icon"></i>
                                            </a>
                                        </div>
                                    </div>
                                </blockquote>
                            </div>
                        </div>
                        <!-- 素材时长 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <span class="must">*</span>
                                <span>素材时长</span>
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="materialTime" lay-verify="required|specialCharacters|length"
                                       class="layui-input" th:value="${adMaterial.materialTime}">
                            </div>
                        </div>

                        <!-- 素材尺寸 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <span class="must">*</span>
                                <span>素材尺寸</span>
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" name="materialSize" lay-verify="required|specialCharacters|length"
                                       class="layui-input" th:value="${adMaterial.materialSize}">
                            </div>
                        </div>
                        <!-- 素材大小 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <span class="must">*</span>
                                <span>素材大小</span>
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" disabled id="materialMemory" name="materialMemory"
                                       lay-verify="required|specialCharacters|length" class="layui-input" th:value="${adMaterial.materialMemory}">
                            </div>
                        </div>

                        <!-- 素材排序 -->
                        <div class="layui-form-item">
                            <label class="layui-form-label">
                                <span class="must">*</span>
                                <span>素材排序</span>
                            </label>
                            <div class="layui-input-inline">
                                <input type="text" value="100" name="materialSerial" lay-verify="required" class="layui-input" th:value="${adMaterial.materialSerial}">
                            </div>
                        </div>


                        <!--广告位状态-->
                        <div class="layui-form-item" lay-filter="adType_entity">
                            <label class="layui-form-label">
                                <span class="must">*</span>
                                <span>状态</span>
                            </label>
                            <div class="layui-input-inline">
                                <div class="layui-input-inline">
                                    <select name="materialStatus" id="materialStatus" lay-verify="required" lay-search=""
                                            th:value="${adMaterial.materialStatus}">
                                        <option value="1">有效</option>
                                        <option value="2">失效</option>
                                    </select>
                                </div>
                            </div>
                        </div>
                        <input id="id" name="id" type="hidden" th:value="${adMaterial.id}">
                        <input id="videoMd5" name="videoMd5" type="hidden">

                        <!-- 按钮 -->
                        <div class="layui-form-item">
                            <div class="layui-input-block">
                                <button class="layui-btn" lay-filter="addConfirm" lay-submit>提交</button>
                                <button type="reset" class="layui-btn layui-btn-primary">取消</button>
                            </div>
                        </div>

                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
</body>

<!-- javascript -->
<script th:src="@{'/layui/layui.js'}" charset="utf-8"></script>
<script>
    layui.config({
        base: '/' //静态资源所在路径
    });
</script>
<script th:src="@{'/js/ad/ad-material-add.js'}" charset="utf-8"></script>
<!--编辑图片样式-->
<link xmlns:th="http://www.thymeleaf.org" rel="stylesheet" th:href="@{'/css/ad/ad.css'}" media="all">
</html>
