{extend name="layout/content"}
{block name="content"}

<style type="text/css">
    .spacing {
        margin-bottom: 10px;
        padding-right:4px;
        padding-left: 4px;
    }
    #talentInfoForm label {
        font-size: xx-small;
    }
    .has-feedback .form-control {
        padding-right: 5px;
    }
    #projectForm ul li{
        width:16%;
        padding-top: 10px;
    }
    #jjAttendanceForm ul li{
        width:16%;
        padding-top: 10px;
    }
    #field ul li{
        width:33%;
        padding-top: 5px;
    }
    ul li{
        list-style: none;
        display:inline-block;
    }
    .imgs li {
        float: left;
        border: 1px solid #d8d1d1;
        text-align: center;
        height: 30px;
    }
    .showImgs li {
        float: left;
        border: 1px solid #d8d1d1;
        text-align: center;
        height: 30px;
    }
    .project-detail li{width:30px;text-align:center;line-height:20px;color:#fff;margin:0 2px;}
    .project-detail li.gray{background:#d8d1d1;}
    .project-detail li.green{background:#1cc09f;}
</style>
<div id="showBigPic">
    <input type="hidden" id="id" value="{$id}"/>
    <input type="hidden" id="type" value="{$type}"/>
    <div class="panel panel-default">
        <div class="panel-heading" onclick="$(this).next().toggle()">
            <h3 class="panel-title">
                工作合同相关附件
            </h3>
        </div>
        <div class="panel-body" >
            <table id="fileTable" class="table-condensed" style="font-size: 10px;table-layout: fixed!important;" data-mobile-responsive="true" data-click-to-select="true">
                <thead>
                    <tr>
                        <th data-field="selectItem" data-checkbox="true"></th>
                    </tr>
                </thead>
            </table>
        </div>
    </div>     
</div>
<script type="text/javascript">
    var __initialize = function () {
        initFileTable();
        function initFileTable() {
            var queryData = {};
            queryData['talentId'] = $("#id").val();
            queryData['type'] = $("#type").val();
            $("#fileTable").bootstrapTable({
                url: Feng.ctxPath + "/common/api/findContractFileType",
                method: 'POST',
                contentType: "application/x-www-form-urlencoded; charset=UTF-8",
                search: false, // 是否显示表格搜索，此搜索是客户端搜索，不会进服务端
                showRefresh: false, // 是否显示刷新按钮
                clickToSelect: true, // 是否启用点击选中行
                singleSelect: true, // 设置True 将禁止多选
                striped: true, // 是否显示行间隔色
                escape: true,
                pagination: false, // 设置为 true 会在表格底部显示分页条
                paginationHAlign: "left",
                paginationDetailHAlign: "right",
                sidePagination: "server", // 设置在哪里进行分页，可选值为 'client' 或者 'server'
                showColumns: false,
                detailView: true, //是否显示父子表
                pageList: [10, 30, 50],
                queryParams: function (params) {
                    return $.extend(queryData, params)
                },
                rowStyle: function (row, index) {
                    return {classes: "info"};
                },
                columns: initFileTypeColumn(),
                onPostBody: function () {
                    $("td.uitd_showTip").bind("mouseover", function () {
                        var htm = $(this).html();
                        $(this).webuiPopover({title: '详情', content: htm, trigger: 'hover'}).webuiPopover('show');
                    });
                },
                onLoadSuccess: function (data) {
                    $("#fileTable").bootstrapTable('expandAllRows');
                },
                onExpandRow: function (index, row, $detail) {
                    var ajax = new $ax(Feng.ctxPath + "/common/api/listTalentFile", function (data) {
                        if (data == null || data.length == 0) {
                            return;
                        }
                        var html = '<ul class="imgs"><li style="width: 70%;font-weight: bold;padding-top: 5px;">附件原名</li><li style="width: 10%;font-weight: bold;padding-top: 5px;">预览</li><li style="width: 20%;font-weight: bold;padding-top: 5px;">操作</li>';
                        for (var key in data) {
                            var sn = data[key].url.lastIndexOf(".");
                            var suffix = data[key].url.substring(sn + 1, data[key].url.length);
                            var imgStr = "";
                            if (suffix == "pdf" || suffix == "PDF") {
                                imgStr = "<button type='button'  onclick=\"Feng.showPdf('" + data[key].url + "','" + data[key].id + "','" + data[key].orignName + "')\" class=\"btn btn-xs btn-danger\"><i class=\"fa fa-file-pdf-o\" aria-hidden=\"true\"></i></button>";
                            } else if (suffix == "xlsx" || suffix == "XLSX" || suffix == 'xls' || suffix == 'XLS') {
                                imgStr = "<button type='button'  onclick=\"Feng.showExcel('" + data[key].url + "','" + data[key].id + "','" + data[key].orignName + "')\" class=\"btn btn-xs btn-danger\"><i class=\"fa fa-file-excel-o\" aria-hidden=\"true\"></i></button>";
                            } else {
                                imgStr = '<img class=\"imgUrl\"  src=\"' + data[key].url + '\" style=\"width:25px;height:25px;\">';
                            }
                            html = html + '<li style="display: none">' + data[key].id + '</li>\n' +
                                    '<li style="width: 70%;padding-top: 5px;">' + data[key].orignName + '</li>\n' +
                                    '<li style="width: 10%;">' + imgStr + '</li>\n' +
                                    "<li style='width: 20%;padding-top: 2px;'><button type='button' onclick=\"Feng.downloadFile('" + data[key].id + "',1)\" style=\'margin-left: 5px\' class=\"btn btn-xs btn-success\"><i class=\"fa fa-download\" aria-hidden=\"true\"></i>下载</button></li>";
                        }
                        html = html + '</ul>';
                        $detail.html(html);
                        $(".imgs").viewer({
                            // toolbar:false,
                            fullscreen: false
                        });
                    }, function (data) {
                        Feng.error("查询失败!" + data.responseJSON.message + "!");
                    });
                    var queryData = {};
                    queryData["mainId"] = $("#id").val();
                    queryData["fileTypeId"] = row.id;
                    ajax.set(queryData);
                    ajax.start();
                }
            });
        }

        /**
         * 初始化附件类别表的列
         */
        function initFileTypeColumn() {
            var title = [];
            title = [
                {field: 'selectItem', checkbox: false, visible: false},
                {title: '名称', field: 'name', visible: true, align: 'center', valign: 'middle', width: "52%", 'class': 'uitd_showTip',
                    formatter: function (value, row, index) {
                        if (row.must == 1) {
                            return '<i class="fa fa-paste"></i><span style="font-weight:bold;color:red;font-size:14px;font-family:宋体"> * </span> ' + value;
                        }
                        if (row.must == 2) {
                            return '<i class="fa fa-paste"></i>' + value;
                        }
                    }
                },
                {title: '模板', field: 'templateUrl', visible: true, align: 'center', valign: 'middle', width: "8%",
                    formatter: function (value, row, index) {
                        if (value == null || value == '' || value == 'null') {
                            return '无';
                        }
                        return "<button type='button' onclick=\"Feng.downloadFile('" + value + "',3)\" style='margin-right: 10px' class=\"btn btn-xs btn-primary\">" +
                                "<i class=\"fa fa-download\"></i>下载" +
                                "</button>";
                    }
                },
                {title: '备注', field: 'description', visible: true, align: 'center', valign: 'middle', width: "40%", 'class': 'uitd_showTip'},
            ]
            return title;
        }
    }();
</script>
{/block}