{% extends 'app_doc/user/user_base.html' %}
{% load static %}
{% load i18n %}
{% block title %}{% trans "附件管理" %}{% endblock %}
{% block content %}
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row">
            <form action="{% url 'manage_attachment' %}" method="get">
            <div class="layui-form-item">
                <div class="layui-input-inline">
                    <input type="text" name="kw" id="kw"  placeholder="输入附件名称" autocomplete="off" class="layui-input">
                </div>
                <button class="layui-btn layui-btn-normal layui-btn-sm" type="submit"><i class="layui-icon layui-icon-search"></i>{% trans "搜索" %}</button>
                <button class="layui-btn layui-btn-normal layui-btn-sm" type="button" id="upload_attachment" title="支持Zip格式压缩文件">
                    <i class="layui-icon layui-icon-upload"></i>{% trans "上传附件" %}</button>
            </div>
            </form>
        </div>
    </div>
</div>
<div class="layui-card">
    <div class="layui-card-body">
        <div class="layui-row" >
            <table class="layui-table"  id="doctemp-list" lay-skin="nob" lay-even>
                <colgroup>
                <col width="400">
                <col width="200">
                <col width="200">
                <col>
        </colgroup>
        <thead>
            <tr>
            <th>{% trans "附件名称" %}</th>
            <th>{% trans "文件大小" %}</th>
            <th>{% trans "上传时间" %}</th>
            <th>{% trans "操作" %}</th>
            </tr>
        </thead>
        <tbody>
            {% for attachment in attachments %}
            <tr>
                <td><a href="/media/{{attachment.file_path}}" target="_blank">{{ attachment.file_name }}</a></td>
                <td>{{ attachment.file_size }}</td>
                <td>{{ attachment.create_time }}</td>
                <td>
                    <a href="javascript:void(0);" onclick="delAttach('{{attachment.id}}');" class="layui-btn layui-btn-xs layui-btn-warm">
                        <i class="layui-icon layui-icon-delete"></i>{% trans "删除" %}
                    </a>
                </td>
            </tr>
            {% endfor %}
        </tbody>
            </table>
        </div>
        <!-- 分页 -->
        <div class="layui-row">
            <div class="layui-box layui-laypage layui-laypage-default">
                    <!-- 上一页 -->
                    {% if attachments.has_previous %}
                        <a href="?page={{ attachments.previous_page_number }}&kw={{attachments.kw}}" 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>{{ attachments.number }}/{{ attachments.paginator.num_pages }}</em>
                    </span>
                    <!-- 下一页 -->
                    {% if attachments.has_next %}
                        <a href="?page={{ attachments.next_page_number }}&kw={{attachments.kw}}" 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>
    layui.use(['table', 'form', 'jquery', 'dtree','upload'], function() {
        let table = layui.table;
        let form = layui.form;
        let $ = layui.jquery;
        let dtree = layui.dtree;
        $.ajaxSetup({
            data: {csrfmiddlewaretoken: '{{ csrf_token }}' },
        });
        //上传附件
        var upload = layui.upload;
        upload.render({
            elem: '#upload_attachment',
            url: '{% url "manage_attachment" %}',
            data:{types:0,csrfmiddlewaretoken: '{{ csrf_token }}'},
            before: function(obj){ //obj参数包含的信息，跟 choose回调完全一致，可参见上文。
                layer.load(1); //上传loading
            },
            done: function(res, index, upload){ //上传后的回调
                layer.closeAll('loading'); //关闭loading
                //上传成功，刷新页面
                if(res.status == 1){
                    window.location.reload();
                }else{
                    layer.msg(res.data)
                }
            },
            accept: 'file', //允许上传的文件类型
            //exts:'zip', //允许上传zip压缩文件
            field:'attachment_upload',
            size: 50000, //最大允许上传的文件大小

        })
        // 删除附件
        delAttach = function(attach_id){
            layer.open({
                type:1,
                title:'删除附件',
                area:'300px;',
                id:'delPro',//配置ID
                content:'<div style="margin-left:10px;">警告：删除附件后，文档中引用的附件将失效！</div>',
                btn:['确定','取消'], //添加按钮
                btnAlign:'c', //按钮居中
                yes:function (index,layero) {
                    layer.load(1);
                    data = {
                        'attach_id':attach_id,
                        'types':1
                    }
                    $.post("{% url 'manage_attachment' %}",data,function(r){
                        layer.closeAll('loading');
                        if(r.status){
                            //修改成功
                            window.location.reload();
                            //layer.close(index)
                        }else{
                            //修改失败，提示
                            // console.log(r)
                            layer.msg(r.data)
                        }
                    })
                },
            });
        }
    })
</script>
{% endblock %}