<%@ page language="java" contentType="text/html; charset=UTF-8"
         pageEncoding="UTF-8" %>
<%@taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core" %>
<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>添加产品须知</title>
    <%@include file="/views/common.jsp" %>
    <style>
        .layui-input, .layui-input-inline {
            width: 350px
        }
    </style>
</head>
<body>
<div class="layui-input-block layui-form" style="margin-top: 30px">
    <form class="layui-form " action="">
        <input type="hidden" name="id" id="id">
        <div class="layui-form-item">
            <label class="layui-form-label">内容</label>
            <div class="layui-input-inline">
                <textarea type="text" name="content" placeholder="请输入内容" class="layui-textarea"
                          lay-verify="required" style="width: 300px;"></textarea>
            </div>
        </div>
        <input type="hidden" name="type" class="layui-input" value="2">
        <div class="layui-form-item">
            <label class="layui-form-label">图片或视频</label>
            <div class="layui-input-inline">
                <button type="button" class="layui-btn" id="uploaderImage">上传</button>
                <input type="file" id="upload" style="display: none"/>
                <input name="attachment" type="hidden" id="images"/>
            </div>
        </div>
        <div class="layui-form-item">
            <label class="layui-form-label" style="color: #FF5722">点击图片可以删除</label>
            <div class="layui-input-inline" id="preview" style="display: flex;"></div>
        </div>
        <div class="layui-form-item">
            <div class="layui-input-block">
                <button class="layui-btn" lay-submit="" lay-filter="enadd">确认添加</button>
                <button type="reset" class="layui-btn layui-btn-primary">重置</button>
            </div>
        </div>
    </form>
</div>
<script src="${path}/js/alioss.js"></script>
<script src="${path}/js/ossUploader.js"></script>
<script>
    function delImage(index) {
        layer.confirm('是否确认删除该图片', {
            btn: ['确定', '关闭'] //按钮
        }, function (layIndex) {
            let textImage = $("#images").val();
            let list = textImage == "" ? [] : textImage.split(",");
            list.splice(index, 1);
            $("#images").val(list.join(","));
            previewImage($("#images").val());
            layer.close(layIndex);
        }, function () {
        });

    }

    $("#images").val("");
    $("#preview").empty();

    function previewImage(textImage) {
        let textImageList = textImage == "" ? [] : textImage.split(",");
        let html = "";
        textImageList.forEach((item, index) => {
            if (item != "" && (item.indexOf(".mp4") > -1 || item.indexOf(".MP4") > -1)) {
                html += "<video src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='delImage(\"" + index + "\")'/>";
            } else if (item != "" && (item.indexOf(".PDF") > -1 || item.indexOf(".pdf") > -1)) {
                html += "<img src='https://dfdiyfile.oss-cn-fuzhou.aliyuncs.com/priceImages/20250905/PDF.png' class='layui-upload-img' style='width: 40px;height: 40px;margin-right: 5px;' onclick='delImage(\"" + item + "\")'/>";
            } else if (item != "") {
                html += "<img src='" + item + "' class='layui-upload-img' style='width: 50px;height: 50px;margin-right: 5px;' onclick='delImage(\"" + index + "\")'/>";
            }
        })
        $("#preview").empty().append(html);

    }


    async function putObject(file) {
        try {
            const result = await uploadFile(file);
            let textImage = $("#images").val();
            let list = textImage == "" ? [] : textImage.split(",");
            list.push(result);
            $("#images").val(list.join(","));
            previewImage($("#images").val());
        } catch (e) {
            console.log(e);
        }
    }

    document.getElementById('uploaderImage').addEventListener('click', function (e) {
        document.getElementById('upload').click();
    });
    document.getElementById('upload').addEventListener('change', function (e) {
        const file = e.target?.files[0];
        putObject(file);
        document.getElementById('upload').value = "";
    });

    layui.use(['form', 'layer'], function () {
        var $ = layui.$,
            form = layui.form,
            layer = layui.layer;

        //监听提交
        form.on('submit(enadd)', function (data) {
            let id = document.getElementsByName("id")[0].value;
            let url = id == "" ? '${path}/addInformation' : '${path}/updateInformation';
            $.ajax({
                url: url,
                dataType: 'json',
                data: $(data.form).serialize(),
                type: 'post',
                success: function (data) {
                    if (data.code == 200) {
                        layer.msg('录入成功！', {
                            icon: 6,
                            offset: "auto",
                            time: 2000
                        });//提示框
                    } else {
                        layer.msg('录入失败！', {
                            icon: 5,
                            offset: "auto",
                            time: 2000
                        });//提示框
                    }
                    setTimeout(function () {
                        var index = parent.layer.getFrameIndex(window.name);//获取窗口索引
                        parent.layer.close(index);//关闭弹出层
                        parent.layui.table.reload("informationTableAll"); //重新加载页面表格
                    }, 2100);
                }
            })
            return false;
        });
    })
</script>
</body>
</html>