<?php
$articleLocation = array_map(fn($case) => [
    'label' => ucfirst($case->toString()),
    'value' => $case->value,
], \App\Enums\LocationEnum::cases());
?>
<!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" />
</head>
<body>

<form class="layui-form" action="">
    <input type="hidden" name="aid" value="" class="layui-input">
    <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">
                    <div class="layui-input-group">
                        <input type="text" name="title" value="" required lay-verify="required" class="layui-input">
                    </div>
                    <div>
                        <span id="translate_title"></span>
                    </div>
                </div>
            </div>
            @include('article/module/brand', ['query' => $query])
            <div class="layui-form-item">
                <label class="layui-form-label">地点</label>
                <div class="layui-input-block">
                    <div class="layui-col-xs3">
                        <select name="location" lay-search="">
                            <option value="">请选择</option>
                            <?php foreach ($articleLocation as $location): ?>
                            <option value="<?= $location['value'] ?>"><?= $location['label'] ?></option>
                            <?php endforeach; ?>
                        </select>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">封面图</label>

                <div class="layui-input-block layui-row">
                    <div class="layui-col-xs3">
                        <img style="width: 30%" class="cover" id="cover" src=""/>
                        <input type="text" style="display:none" name="cover" value="" />
                    </div>
                    <div class="layui-col-xs3">
                        <button type="button" class="pear-btn pear-btn-primary pear-btn-sm" id="avatar">
                            <i class="layui-icon layui-icon-upload"></i>上传图片
                        </button>
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <label class="layui-form-label">图片合集</label>
                <div class="layui-upload layui-input-block">
                    <button type="button" class="layui-btn" id="uploadBtn">批量上传</button>
                    <div class="layui-upload-list" id="images-tpl-container">
                    </div>
                </div>
            </div>
            <div class="layui-form-item">
                <div class="button-container">
                    <button type="submit" class="pear-btn pear-btn-primary pear-btn-md" lay-submit="" lay-filter="update">
                        提交
                    </button>
                </div>
            </div>
        </div>
    </div>

    <!-- 模板 -->
    <script type="text/html" id="images-tpl">
        @{{# layui.each(d.list, function(index, item){ }}
        <div class="img-item" data-id="@{{ index }}">
            <img src="@{{= item.src }}" class="img-preview">
            <input type="text" style="display:none" name="images[@{{= index }}][src]" value="@{{= item.src }}" />
            <div class="img-operate">
                <i class="layui-icon layui-icon-util"></i>
                <i class="layui-icon layui-icon-close"></i>
            </div>
        </div>
        @{{# }); }}
    </script>

</form>
<script src="/component/layui/layui.js?v=2.8.12"></script>
<script src="/component/pear/pear.js"></script>
{{--<script src="/admin/js/permission.js"></script>--}}
<script>

    // api
    const UPLOAD_API = "/common/upload-image";
    const VIEW_API = "/admin/api/article/view";
    const UPDATE_API = "/admin/api/article/update";

    layui.use(['upload', 'jquery'], function(){
        const upload = layui.upload;
        const $ = layui.jquery;

        initViewData()

        // renderPreview();


        // let fileList = [];
        {{--if (fileList) {--}}
        {{--    initSortable();--}}
        {{--    initDelete();--}}
        {{--}--}}

        // console.log(fileList)

        // 图片批量上传
        // upload.render({
        //     elem: '#uploadBtn',
        //     url: UPLOAD_API,
        //     multiple: true,
        //     accept: 'images',
        //     done: function(res){
        //         if(res.code === 0){
        //             const item = {
        //                 // id: res.data.id,
        //                 src: res.data.src, // 获取缩略图
        //                 // base_path: res.data.base_path // 图片绝对路径
        //             };
        //             // const item = res.data.url
        //
        //             console.log(fileList)
        //             fileList.push(item);
        //             console.log(fileList)
        //             renderPreview();
        //         }
        //     }
        // });

        layui.form.on("submit(update)", function (data) {
            layui.$.ajax({
                url: UPDATE_API,
                type: "POST",
                dateType: "json",
                data: data.field,
                success: function (res) {

                    if (res.code) {
                        return layui.popup.failure(res.msg);
                    }
                    return layui.popup.success("操作成功", function () {
                        parent.refreshTable();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                }
            });
            return false;
        });

        function renderImages(data) {
            const tpl = $('#images-tpl').html();
            // 始终渲染全部数据但隐藏超出的部分
            const html = layui.laytpl(tpl).render({
                list: data
            });
            $('#images-tpl-container').html(html);

            // 添加加载更多按钮（仅显示时隐藏部分数据）
            if(data.length > 30) {
                $('#images-tpl-container').append(`
            <div class="load-more-btn">
                <button type="button" class="pear-btn pear-btn-primary">
                    加载全部图片（剩余${data.length - 30}张）
                </button>
            </div>
        `);
            }

            // 加载拖动模块
            initSortable('images-tpl-container');

            // 初始化删除事件
            initOperate();

            $('.load-more-btn').on('click', function () {
                $('.img-item:nth-child(n+31)').show();
                $(this).hide();
            });
        }


        // 初始化拖拽排序
        function initSortable(sortElementId) {
            Sortable.create(document.getElementById(sortElementId), {
                animation: 150,
            });
        }

        // 初始化删除
        function initOperate() {
            // 图片删除
            $('#images-tpl-container').on('click', '.layui-icon-close', function() {
                const index = $(this).closest('.img-item').data('id');
                // fileList.splice(index, 1);
                $(this).closest('.img-item').remove();
            });

            // 图片编辑
            $('#images-tpl-container').on('click', '.layui-icon-util', function(e) {
                var target = e.target;
                let coverSrc = $(target)?.parent()?.parent()?.find('img')[0]?.currentSrc
                if (!coverSrc) {
                    layui.popup.failure('设置封面失败。');
                    return;
                }

                let index = layer.alert('设置', {
                    btn: ['设置为封面'],
                    btnAlign: 'c', // 按钮居中显示
                    btn1: function(){
                        document.querySelector('[id="cover"]').src = coverSrc
                        document.querySelector('[name="cover"]').value = coverSrc
                        // layer.msg('按钮一的回调');
                        layui.layer.close(index)
                    }
                });
            });
        }

        $("#brand-search").on('click', function () {
            console.log($("#brand").val())
            var brandInput = $("#brand-input");
            var name = brandInput.val();
            $("#datas").children().filter('option').remove();
            $.ajax({
                method: 'get',
                url: '/api/v1/articles/brand-search?brand=' + name,
                success: function (res) {

                    var html = '';
                    if (res.code == 0) {
                        $.each(res.data, function (index, obj) {
                            var name = obj.cn_name ? (obj.name + ' [' + obj.cn_name + ']') : obj.name;
                            html += '<option class="res-options" brand-id=' + obj.id + ' brand-name=' + obj.name + '>' + name + '</option>'
                        });
                        $("#datas").append(html);
                    }else{
                        layer.msg(res.msg,{
                            time:500
                        });
                    }
                }
            })
        }).focus(function () {
            $("#datas").children().filter('option').remove();
        });

        $(document).on('click', '.res-options', function(e) {
            const brandId = $(this).attr('brand-id');  // 获取自定义的 'data-val' 属性
            const brandName = $(this).attr('brand-name');  // 获取自定义的 'data-val' 属性
            $('#brand-input').val(brandName)
            $('#brand').attr('value', brandId)
            $("#datas").children().filter('option').remove();
        });


        function initViewData() {
            let viewId = layui.url().search['id']
            $.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);
                        }
                    });

                    // 翻译的标题
                    document.getElementById('translate_title').innerHTML = res.data.translate_title

                    // 文章封面
                    document.querySelector('[id="cover"]').src = res.data.cover
                    // 文章地点赋值
                    $("select[name=location]").val(res.data.location);
                    layui.form.render("select");

                    renderImages(res.data.images);

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

                }
            });
        }

    });


    // 在页面中引入Sortable.js
    document.write('<script src="https://cdn.jsdelivr.net/npm/sortablejs@1.15.0/Sortable.min.js"><\/script>');

</script>
<script>

    // 相关接口
    const SAVE_API = "/api/v1/articles/savexxx";

    // 字段 头像 avatar
    layui.use(["upload", "layer"], function() {
        let input = layui.$("#avatar").prev();
        console.log(input)

        layui.upload.render({
            elem: "#avatar",
            url: UPLOAD_API,
            // value: "/avatar.png",
            acceptMime: "image/gif,image/jpeg,image/jpg,image/png",
            // field: "__file__",
            done: function (res) {
                console.log(res)
                if (res.code > 0) return layui.layer.msg(res.msg);
                this.item.prev().val(res.data.src).prev().attr("src", res.data.src + '-w480');
            }
        });
    });

    //提交事件
    layui.use(["form", "popup"], function () {
        layui.form.on("submit(save)", function (data) {
            layui.$.ajax({
                url: SAVE_API,
                type: "POST",
                dateType: "json",
                data: data.field,
                success: function (res) {

                    if (res.code) {
                        return layui.popup.failure(res.msg);
                    }
                    return layui.popup.success("操作成功", function () {
                        parent.refreshTable();
                        parent.layer.close(parent.layer.getFrameIndex(window.name));
                    });
                }
            });
            return false;
        });
    });
</script>
<style>
    h1, .h1, h2, .h2, h3, .h3, p {
        font-family: 'Microsoft Yahei",Helvetica,Arial,sans-serif'; /* 常见的、现代的无衬线字体，增加可读性 */
        text-indent: unset !important;
        margin-top: 0.5rem;
        margin-bottom: unset;
    }

    .res-options {
        padding: 0 10px;
        line-height: 36px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }
    .layui-upload-list {
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, 120px);
        gap: 15px;
    }

    .img-item {
        position: relative;
        border: 1px solid #e6e6e6;
        border-radius: 4px;
        cursor: move;
    }

    .img-preview {
        width: 100%;
        height: 120px;
        object-fit: contain;
    }

    .img-operate {
        position: absolute;
        top: 5px;
        right: 5px;
        opacity: 0;
        transition: .3s;
    }

    .img-item:hover .img-operate {
        opacity: 1;
    }

    #images-tpl-container .layui-icon-close,
    #images-tpl-container .layui-icon-util {
        color: #fff;
        background: #ff5722;
        border-radius: 50%;
        padding: 2px;
        cursor: pointer;
    }

    .layui-upload-list {
        /* 保持原有样式 */
        margin-top: 20px;
        display: grid;
        grid-template-columns: repeat(auto-fill, 120px);
        gap: 15px;
    }
    /* 新增显示限制 */
    .img-item:nth-child(n+31) {
        display: none;
    }
    .load-more-btn {
        grid-column: 1 / -1;
        text-align: center;
        padding: 10px 0;
    }
</style>
</body>
</html>
