<%@ 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" lay-filter="addUser"
     style="margin-top: 30px">
    <form class="layui-form " action="">
        <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"></textarea>
            </div>
        </div>

        <input type="hidden" name="type" placeholder="请输入类型" class="layui-input" value="1">
        <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>
    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();
    const client = new OSS({
        // yourregion填写Bucket所在地域。以华东1（杭州）为例，Region填写为oss-cn-hangzhou。
        region: "oss-cn-hangzhou",
        // 从环境变量中获取访问凭证。运行本代码示例之前，请确保已设置环境变量OSS_ACCESS_KEY_ID和OSS_ACCESS_KEY_SECRET。
        accessKeyId: "LTAI5tE7wuNkeT9jZ42bQnyr",
        accessKeySecret: "NnutvWhKl4HbQFSad3HosYbCkEkbjN",
        // 填写存储空间名称。
        bucket: "ltcloudfile",
        endpoint: "https://oss-cn-hangzhou.aliyuncs.com",
    });

    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 != "") {
                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 {
            let fileDir = dateFtt("yyyyMMdd", new Date())
            let name = "priceImages/" + fileDir + "/" + guid() + getSuff(file.name);
            // 填写Object完整路径。Object完整路径中不能包含Bucket名称。
            // 您可以通过自定义文件名（例如exampleobject.txt）或文件完整路径（例如exampledir/exampleobject.txt）的形式实现将数据上传到当前Bucket或Bucket中的指定目录。
            // data对象可以自定义为file对象、Blob数据或者OSS Buffer。
            const options = {
                headers: {"Content-Type": "text/plain"},
            };
            let index = layer.load();
            const result = await client.put(name, file, options);
            layer.close(index);
            let textImage = $("#images").val();
            let list = textImage == "" ? [] : textImage.split(",");
            list.push(result.url);
            $("#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 = "";
    });

    function dateFtt(fmt, date) {
        var o = {
            "M+": date.getMonth() + 1,                 //月份
            "d+": date.getDate(),                    //日
            "h+": date.getHours(),                   //小时
            "m+": date.getMinutes(),                 //分
            "s+": date.getSeconds(),                 //秒
            "q+": Math.floor((date.getMonth() + 3) / 3), //季度
            "S": date.getMilliseconds()             //毫秒
        };
        if (/(y+)/.test(fmt)) {
            fmt = fmt.replace(RegExp.$1, (date.getFullYear() + "").substr(4 - RegExp.$1.length));
        }
        for (var k in o) {
            if (new RegExp("(" + k + ")").test(fmt))
                fmt = fmt.replace(RegExp.$1, (RegExp.$1.length == 1) ? (o[k]) : (("00" + o[k]).substr(("" + o[k]).length)));

        }
        return fmt;

    }

    function getSuff(name) {
        return name.substring(name.lastIndexOf("."));
    }

    function guid() {
        return "xxxxxxxx-xxxx-4xxx-yxxx".replace(/[xy]/g, function (c) {
            var r = (Math.random() * 16) | 0,
                v = c == "x" ? r : (r & 0x3) | 0x8;
            return v.toString(16);
        });
    }

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

        //监听提交
        form.on('submit(enadd)', function (data) {
            $.ajax({
                url: '${path}/addInformation',
                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>