{% extends 'app_doc/user/user_base.html' %}
{% load static %}
{% load i18n %}
{% block title %}{% trans "图片素材管理" %}{% endblock %}

{% block custom_element %}
<link href="{% static 'viewerjs/viewer.css' %}?version={{mrdoc_version}}" rel="stylesheet">
{% endblock %}

{% block content %}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row">
            <form action="" method="get">
                <div class="layui-form-item">
                    <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" id="upload_img">
                        <i class="layui-icon layui-icon-upload"></i>{% trans "上传图片" %}</button>
                    <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" onclick="createImgGroup()">
                        <i class="layui-icon layui-icon-addition"></i>{% trans "新建分组" %}</button>
                    <a class="layui-btn layui-btn-normal layui-btn-sm" href="{% url 'manage_img_group' %}">{% trans "分组管理" %}</a>
                </div>
            </form>

        </div>
        <div class="layui-row" style="padding-top: 10px;">
            <span class="doc_status_condition" >
            {% load project_filter %}
            <a href="{% url 'manage_image' %}?group=0" class="layui-btn layui-btn-xs layui-btn-primary {% if g_id == 0 %}current{% endif %}">{% trans "全部图片" %}({{all_img_cnt}})</a>
            <a href="{% url 'manage_image' %}?group=-1" class="layui-btn layui-btn-xs layui-btn-primary {% if g_id == -1 %}current{% endif %}">{% trans "未分组" %}({{no_group_cnt}})</a>
            {% for group in groups %}
            <a href="{% url 'manage_image' %}?group={{group.id}}" class="layui-btn layui-btn-xs layui-btn-primary {% if g_id == group.id %}current{% endif %}">{{group.group_name}}({{group.id | img_group_cnt}})</a>
            {% endfor %}
            </span>
        </div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row" lay-skin="line">
            <ul style="padding: 20px;" id="images">
                {% for img in images %}
                <li class="image-list">
                    <img class="image-list-i" src="{{img.file_path}}"  title="{{img.file_name}}">
                    <div class="opera-img-btn">
                        <a href="javascript:void(0);" class="move-img" title="移动分组" data-src="{{img.file_path}}" data-id="{{img.id}}"><i class="layui-icon layui-icon-transfer"></i></a>
                        <a href="javascript:void(0);" class="del-img" title="删除图片" data-src="{{img.file_path}}" data-id="{{img.id}}"><i class="layui-icon layui-icon-delete"></i></a>
                    </div>
                </li>

                {% endfor %}
            </ul>
        </div>
        <hr>
        <!-- 分页 -->
        <div class="layui-row">
            <div class="layui-box layui-laypage layui-laypage-default">
                    <!-- 上一页 -->
                    {% if images.has_previous %}
                        <a href="?page={{ images.previous_page_number }}&group={{images.group}}" class="layui-btn layui-btn-xs layui-btn-normal">{% trans "上一页" %}</a>
                    {% else %}
                        <a href="javascript:;" class="layui-btn layui-btn-xs layui-btn-disabled">{% trans "上一页" %}</a>
                    {% endif %}
                    <!-- 当前页 -->
                    <span class="layui-laypage-curr">
                        <em class="layui-laypage-em"></em>
                        <em>{{ images.number }}/{{ images.paginator.num_pages }}</em>
                    </span>
                    <!-- 下一页 -->
                    {% if images.has_next %}
                        <a href="?page={{ images.next_page_number }}&group={{images.group}}" class="layui-btn layui-btn-xs layui-btn-normal">{% trans "下一页" %}</a>
                    {% else %}
                        <a class="layui-btn layui-btn-xs layui-btn-disabled">{% trans "下一页" %}</a>
                    {% endif %}
            </div>
        </div>
    </div>
</div>
{% endblock %}
{% block custom_script %}
<script src="{% static 'viewerjs/viewer.min.js' %}"></script>
<script>
    layui.use(['table', 'form', 'jquery','upload','form','flow'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        var flow = layui.flow;
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        // 懒加载图片
        flow.lazyimg({elem:'img.image-list-i'}); 
        //悬浮显示图片按钮
        $(".image-list").mouseover(function(){
            $(this).find(".opera-img-btn").show();
        });
        $(".image-list").mouseleave(function(){
            $(this).find(".opera-img-btn").hide();
        });
        //删除图片
        $(".del-img").click(function(){
            var img_id = $(this).data("id");
            var img_src = $(this).data("src");
            layer.open({
                type:1,
                title:'删除图片',
                area:'300px;',
                id:'delImg',//配置ID
                content:'<div style="margin:10px;"><img src="'+ img_src +'" style="width:50px;height:50px;margin:10px;"/><span>删除此图片后，文档中添加的该图片将不再显示！</span></div>',
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    layer.load(1);
                    data = {
                        'img_id':img_id,
                        'types':0
                    }
                    $.post("{% url 'manage_image' %}",data,function(r){
                        layer.closeAll('loading')
                        if(r.status){
                            //删除成功
                            window.location.reload();
                            //layer.close(index)
                        }else{
                            //删除失败，提示
                            // console.log(r)
                            layer.msg(r.data)
                        }
                    })
                },

            })
        });
        //移动分组
        $(".move-img").click(function(){
            var img_id = $(this).data("id");
            var img_src = $(this).data("src");
            layer.open({
                type:1,
                title:'移动图片分组',
                area:['300px','300px'],
                id:'moveImg',//配置ID
                content:$("#move-group-layer"),
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    layer.load(1);
                    data = {
                        'types':1,
                        'img_id':img_id,
                        'group_id':$("#group_id").val()
                    }
                    console.log(data)
                    $.post("{% url 'manage_image' %}",data,function(r){
                        layer.closeAll('loading')
                        if(r.status){
                            //移动成功
                            window.location.reload();
                            //layer.close(index)
                        }else{
                            //移动失败，提示
                            // console.log(r)
                            layer.msg(r.data)
                        }
                    })
                },
                success:function(){
                    form.render();
                }
            })
        });
        //查看图片
        var options = {
            //inline: true,
            url: 'data-original',
            fullscreen:false,//全屏
            rotatable:false,//旋转
            scalable:false,//翻转
            //zoomable:false,//缩放
            button:false,//关闭按钮
        };
        var viewer = new Viewer(document.getElementById('images'), options);
        //创建图片分组
        createImgGroup = function(){
            layer.open({
                type:1,
                title:'新建图片分组',
                area:'300px;',
                id:'createImgGroup',//配置ID
                content:'<div style="margin:10px;"><input type="text" id="img_group_name" class="layui-input" /></div>',
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    layer.load(1); //上传loading
                    data = {
                        'types':0,
                        'group_name':$("#img_group_name").val(),
                    }
                    $.post("{% url 'manage_img_group' %}",data,function(r){
                        layer.closeAll('loading');
                        if(r.status){
                            //新建成功
                            window.location.reload();
                        }else{
                            //新建失败，提示
                            // console.log(r)
                            layer.msg(r.data)
                        }
                    })
                },
            })
        };
        //上传图片
        var upload = layui.upload;
        upload.render({
            elem: '#upload_img',
            url: '{% url "upload_doc_img" %}',
            data:{group_id:"{{g_id}}"},
            before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(); //上传loading
            },
            done: function(res, index, upload){ //上传后的回调
                layer.closeAll('loading'); //关闭loading
                //上传成功，刷新页面
                if(res.success == 1){
                    window.location.reload();
                }else{
                    layer.msg(res.message)
                }
            },
            error:function(){
                layer.closeAll('loading'); //关闭loading
                layer.msg("系统异常，请稍后再试！")
            },
            accept: 'images', //允许上传的文件类型
            acceptMime:'image/*',
            field:'manage_upload',

        })
    });
</script>

<!--移动图片分组DIV块-->
<div style="margin:10px;display:none;" class="layui-form" id="move-group-layer">
    <div class="layui-form-item">
        <select id="group_id">
            {% for group in groups %}
            <option value="{{group.id}}">{{group.group_name}}</option>
            {% endfor %}
        </select>
    </div>
</div>
{% endblock %}