
<!DOCTYPE html>
<html lang="zh-cn">
<head>
    <meta charset="UTF-8">
    <title>更新页面</title>
    <link rel="stylesheet" href="/component/pear/css/pear.css" />
    <link rel="stylesheet" href="/admin/css/reset.css" />
    <style>
        .layui-iconpicker .layui-anim {
            bottom: 42px !important;
            top: inherit !important;
        }
    </style>
</head>
<body>

<form class="layui-form">

    <div class="mainBox">
        <div class="main-container mr-5">

            <div class="layui-form-item">
                <label class="layui-form-label required">标题</label>
                <div class="layui-input-block">
                    <input type="text" name="title" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label required">品牌名称</label>
                <div class="layui-input-block">
                    <input type="text" name="brand" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">源数据</label>
                <div class="layui-input-block">
                    <input type="text" name="source_url" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">类型</label>
                <div class="layui-input-block">
                    <input type="text" name="module" value="" class="layui-input">
                </div>
            </div>

            <div class="layui-form-item">
                <label class="layui-form-label">图集</label>
                <div class="layui-input-block">
                    <div id="images"></div>
                </div>
            </div>
        </div>
    </div>
</form>
<style>
    .images-item {
        display: flex;
        align-items: center;
    }
</style>
<script id="ID-demo-tpl" type="text/html">
    <div class="layui-col-space1" style="display:grid;grid-template-columns: auto auto auto;">
        @{{# d.forEach(function(item) { }}
            <div class="images-item">
                <img loading="lazy" style="width: 100%" src="@{{= item.src }}" >
            </div>
        @{{# }); }}
    </div>
</script>

<script src="/component/layui/layui.js?v=2.8.12"></script>
<script src="/component/pear/pear.js"></script>
<script>

    // 相关接口
    let PRIMARY_KEY = "id";

    // api
    const VIEW_API = "/admin/api/spider-article/view"
    const UPDATE_API = "/admin/api/menu/update";

    // 获取行数据
    layui.use(["form", "util", "popup"], function () {
        let viewId = layui.url().search['id']
        let $ = layui.$;
        $.ajax({
            url: VIEW_API,
            data: {
              id:  viewId
            },
            method: 'get',
            dataType: "json",
            success: function (res) {

                // 赋值表单
                layui.each(res.data, function (key, value) {
                    let obj = $('*[name="'+key+'"]');
                    // if (key === "password") {
                    //     obj.attr("placeholder", "不更新密码请留空");
                    //     return;
                    // }
                    if (typeof obj[0] === "undefined" || !obj[0].nodeName) return;
                    if (obj[0].nodeName.toLowerCase() === "textarea") {
                        obj.html(layui.util.escape(value));
                    } else {
                        obj.attr("value", value);
                    }
                });

                // 图标选择
                layui.use(["iconPicker"], function() {
                    layui.iconPicker.render({
                        elem: "#icon",
                        type: "fontClass",
                        page: false,
                    });
                });

                renderImages(res.data.images);

                // ajax产生错误
                if (res.code) {
                    layui.popup.failure(res.msg);
                }

            }
        });
    });

    // 渲染图集
    function renderImages(images) {
        var laytpl = layui.laytpl;
        var template = document.getElementById('ID-demo-tpl').innerHTML; // 获取模板字符
        var target = document.getElementById('images'); // 输出结果的目标元素

        // 渲染并输出结果
        laytpl(template).render(images, function(html) {
            target.innerHTML = html;
        });
    }

</script>

</body>

</html>
