<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('合同文档')"/>
    <th:block th:include="include :: datetimepicker-css"/>
</head>
<body class="white-bg">
<div class="wrapper wrapper-content animated fadeInRight ibox-content">
    <form class="form-horizontal m" id="form-contract-edit" th:object="${tblContract}">
        <input id="contractId" name="id" th:field="*{id}" type="hidden">
        <div class="form-group">
            <label class="col-sm-3 control-label">合同名称：</label>
            <div class="col-sm-8">
                <input th:field="*{name}" class="form-control" type="text" disabled="disabled"/>
            </div>
        </div>
        <div class="form-group">
            <label class="col-sm-3 control-label">选择文档：</label>
            <div class="col-sm-4">
                <input id="fileName" class="form-control" type="text" disabled="disabled">
                <input id="filePath" name="filePath" class="form-control" type="file" style="display:none;"
                       onchange="didSelected();"
                       accept=".doc,.docx,.xls,.xlsx,.pdf">
            </div>
            <div class="col-sm-4">
                <button class="btn btn-default" type="button" onclick="selectFile();">选择</button>
                <button class="btn btn-default" type="button" onclick="uploadFile();">上传</button>
            </div>
        </div>
        <h4 class="form-header h4">已存档文件</h4>
        <div class="col-sm-12 select-table table-striped">
            <table id="bootstrap-table"></table>
        </div>
    </form>
</div>
<th:block th:include="include :: footer"/>
<script th:inline="javascript">
    var editFlag = [[${@permission.hasPermi('system:contract:edit')}]];
    var removeFlag = [[${@permission.hasPermi('system:contract:remove')}]];
    var prefix = ctx + "system/file"
    var accpetFile = ".doc,.docx,.xls,.xlsx,.pdf";

    function selectFile() {
        $("#filePath").click();
    }

    function didSelected() {
        var file = $("#filePath").val();
        if (file == undefined) {
            return;
        }
        var strFileName = file.replace(/^.+?\\([^\\]+?)(\.[^\.\\]*?)?$/gi, "$1");  //正则表达式获取文件名，不带后缀
        var fileExt = file.replace(/.+\./, "");   //正则表达式获取后缀
        if (!fileExt || fileExt == "") {
            $.modal.alertWarning("文件类型不合规");
            $("#filePath").val("");
            $("#fileName").val("");
            return;
        }
        if (accpetFile.indexOf(fileExt.toLowerCase()) < 0) {
            $.modal.alertWarning("文件类型不合规");
            $("#filePath").val("");
            $("#fileName").val("");
            return;
        }
        $("#fileName").val(strFileName + "." + fileExt);
        $("#fileName").attr("fileExt", fileExt);
    }

    function uploadFile() {
        var file = $("#filePath")[0].files[0];
        if (!file || file == null) {
            $.modal.alertWarning("请选择文件");
            return false;
        }
        var formData = new FormData();
        formData.append('relType', "contract");
        formData.append('relId', $("#contractId").val());
        formData.append('fileName', $("#fileName").val());
        formData.append('fileExt', $("#fileName").attr("fileExt"));
        formData.append('file', file);
        $.ajax({
            url: prefix + "/uploadfile",
            type: "post",
            cache: false,
            data: formData,
            processData: false,
            contentType: false,
            datatype: 'json',
            success: function (res) {
                $("#filePath").val("");
                $("#fileName").val("");
                $.operate.ajaxSuccess(res);
                queryFileList();
            }
        });
    }
    $(function(){
        var table = $("#bootstrap-table");
        table.bootstrapTable({
            data: [],
            columns: [
                {
                    field: 'fileName',
                    title: '文件名'
                },
                {
                    field: 'createTime',
                    title: '上传日期',
                },
                {
                    title: '操作',
                    align: 'center',
                    formatter: function (value, row, index) {
                        var actions = [];
                        actions.push('<a class="btn btn-success btn-xs ' + editFlag + '" href="javascript:void(0)" onclick="downloadFile(\'' + row.filePath + '\',\'' + row.fileName + '\')"><i class="fa fa-edit"></i>下载</a> ');
                        actions.push('<a class="btn btn-danger btn-xs ' + removeFlag + '" href="javascript:void(0)" onclick="removeFile(\'' + row.id + '\')"><i class="fa fa-remove"></i>删除</a>');
                        return actions.join('');
                    }
                }]
        });
        queryFileList();
    })
    function queryFileList() {
        var params = {relType: "contract", relId:  $("#contractId").val()};
        $.ajax({
            url: prefix + "/queryfilelist",
            type: "post",
            cache: false,
            data: JSON.stringify(params),
            contentType: "application/json;charset=utf-8",
            datatype: 'json',
            success: function (res) {
                if (res.code != web_status.SUCCESS) {
                    $.modal.alertError(res.msg);
                }
                $("#bootstrap-table").bootstrapTable("load",res.data);
                $('#bootstrap-table').bootstrapTable('refresh');
            }
        })
    }
    function downloadFile(value,filename) {
        window.location.href = ctx + "common/download/resource?resource=" + value + "&filename=" + filename;
    }
    function removeFile(id){
        $.modal.confirm("确认删除该条记录么？", function () {
            $.ajax({
                type: 'post',
                url: prefix + '/remove',
                data: id,
                dataType: 'json',
                contentType: "application/json;charset=utf-8",
                success: function (res) {
                    if (res.code != web_status.SUCCESS) {
                        $.modal.alertError(res.msg);
                        return;
                    }
                    queryFileList();
                }
            });
        });
    }
</script>
</body>
</html>