<#assign base=request.contextPath />
<#import "../common/defaultLayout.ftl" as defaultLayout>
<@defaultLayout.layout>
    <link rel="stylesheet" href="${base}/assets/css/amazeui.switch.css"/>
    <div class="admin-content">
        <div class="am-cf am-padding" style="padding:1rem 1.6rem 1.6rem 1rem;margin:0px;">
            <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
            <div class="am-fl am-cf"><strong class="am-text-primary am-text-lg">工作流程</strong> /
                <small>流程实例</small>
            </div>
        </div>


        <div class="am-g">
            <div class="am-u-sm-12">
                <form class="am-form" id="listForm" action="${base}/account/list" method="POST">
                    <input type="hidden" id="keywords" name="keywords" value='${keywords!""}'/>
                    <table class="am-table am-table-bordered am-table-radius table-main" style="padding:0;">
                        <tbody>
                        <tr>
                            <th class="am-text-middle">流程名称</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <select data-am-selected id="procDefKey" name="procDefKey">
                                        <option value=" ">全部</option>
                                        <option value='estimate'
                                                <#if procDefKey! =="estimate" >selected</#if> >
                                            概算审批流程</option>
                                        <option value='budget'
                                                <#if procDefKey! =="budget" >selected</#if> >
                                            预算审批流程</option>
                                        <option value='settle'
                                                <#if procDefKey! =="settle" >selected</#if> >
                                            结算审批流程</option>
                                        <option value='final'
                                                <#if procDefKey! =="final" >selected</#if> >
                                            决算审批流程</option>
                                        <option value='saleContract'
                                                <#if procDefKey! =="saleContract" >selected</#if> >
                                            销售合同审批流程</option>
                                        <option value='businessPurchase'
                                                <#if procDefKey! =="businessPurchase" >selected</#if> >
                                            业务采购审批流程</option>
                                    </select>
                                </div>
                            </td>
                            <th class="am-text-middle">项目名称</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="projectName" class="am-form-field am-input-sm" maxlength="50"
                                           value="${projectName!}"/>
                                </div>
                            </td>

                            <th class="am-text-middle">项目ID</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="projectId" class="am-form-field am-input-sm" maxlength="12"
                                           value="${projectId!}"/>
                                </div>
                            </td>

                            <th class="am-text-middle">流程实例ID</th>
                            <td>
                                <div class="am-u-sm-10">
                                    <input type="text" id="procInsId" class="am-form-field am-input-sm" maxlength="12"
                                           value="${procInsId!}"/>
                                </div>
                            </td>

                            <td >
                                <div align='right'>
                                    <button type="button" class="am-btn am-btn-default am-btn-sm am-text-secondary"
                                            id="submit-btn" onclick="sub_function('query')">搜索
                                    </button>
                                </div>
                            </td>
                        </tr>

                        </tbody>
                    </table>
                </form>
            </div>
        </div>

        <div class="am-g">
            <div class="am-u-sm-12 am-scrollable-horizontal">
                <!--  padding:1px 2px 3px 4px;上、右、下,和左   -->
                <table class="am-table am-table-striped am-table-hover table-main">
                    <thead>
                    <tr class="am-text-nowrap">
                        <th class="table-title">流程名称</th>
                        <th class="table-title">流程标识</th>
                        <th class="table-title">流程版本</th>
                        <th class="table-title">流程实例id</th>
                        <th class="table-title">项目名称</th>
                        <th class="table-date">申请人</th>
                        <th class="table-date">申请时间</th>
                        <th class="table-date">当前任务节点</th>
                        <th class="table-date">当前审批人</th>
                        <th class="table-date">结束时间</th>
                        <th class="table-set am-text-center">操作</th>
                    </tr>
                    </thead>
                    <tbody>
                    <#if (pager.list)?exists>
                        <#list  pager.list as list>
                            <tr>
                                <td>${list.procName!}</td>
                                <td>${list.procKey!}</td>
                                <td>${list.version!}</td>
                                <td>${list.procInsId!}</td>
                                <td>${list.projectName!}${list.projectTitle!}</td>
                                <td>${list.user!}</td>
                                <td>${list.startTime?datetime}</td>
                                <td>${list.currentTask!}</td>
                                <td>${list.candidateUsers!}</td>
                                <td><#if list.endTime??>${list.endTime?datetime}</#if></td>
                                <td>
                                    <#--<#if !list.endTime??>
                                        <button type="button"
                                                class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                                onclick="deleteProcIns('${list.procInsId}', '系统管理员撤销')">
                                            <span class="am-icon-pencil-square-o"></span>
                                            撤销流程
                                        </button>

                                    </#if>-->

                                    <button type="button"
                                            class="am-btn am-btn-default am-btn-xs am-text-secondary"
                                            onclick="location.href='${base}/actTaskDef/hisTaskList/${list.procInsId}'">
                                        <span class="am-icon-pencil-square-o"></span>
                                        审批过程
                                    </button>
                                </td>

                            </tr>
                        </#list>
                    </#if>
                    </tbody>
                </table>

                <div class="am-cf">
                    <!-- 分页 -->
                    <#if (pager.list)?exists  && (pager.list?size>0) >
                        <div class="am-fr">
                            <#include "../common/common_pager.ftl">
                        </div>
                    <#else>
                        <div class="am-kai" align="center">
                            <h3>没有找到任何记录!</h3>
                        </div>
                    </#if>
                </div>
            </div>
        </div>
    </div>
</@defaultLayout.layout>

<script src="${base}/assets/js/amazeui.switch.js"></script>
<script type="text/javascript">
    var urlBase = "${base}";
    var url;

    $(function () {
        /*表单提交 start*/
        var keywordsObj = {};
        $("#searchButton").on("click", function () {
            if ($("#name").val()) {
                keywordsObj.name = $("#name").val();
            }
            var keywords = "";
            if (!$.isEmptyObject(keywordsObj)) {
                keywords = JSON.stringify(keywordsObj);
            }
            console.log("keywords = " + keywords);
            $("#keywords").val(keywords);
            $("#list-form").submit();
        });
        /*表单提交 end*/

        /*复选框全选效果 start*/
        $("body").on('click', '.list-item', function () {
            $(".list-item").removeClass("tr-selected");
            $(this).addClass('tr-selected');
        });
        $("#allCheck").click(function () {
            $('input[name="ids"]').prop("checked", this.checked);
            $("#deleteButton").prop("disabled", $("input[name='ids']:checked").length == 0 ? true : false);
        });
        var $citySubBox = $("input[name='ids']");
        $citySubBox.click(function () {
            $("#allCheckCity").prop("checked", $citySubBox.length == $("input[name='ids']:checked").length ? true : false);
            $("#deleteButton").prop("disabled", $("input[name='ids']:checked").length == 0 ? true : false);
        });
        /*复选框全选效果 end*/

    });

    /*批量删除 start*/
    var deleteAll = function (url) {
        var $deleteButton = $("#deleteButton");// 删除按钮
        var ids = "";
        $("input[name='ids']:checked").each(function () {
            ids += $(this).val() + "#%#";
        });
        var params = {ids: ids};
        if (window.confirm('确定要删除吗？')) {
            $.ajax({
                url: url,
                data: params,
                dataType: "json",
                async: false,
                beforeSend: function (data) {
                    $deleteButton.prop("disabled", true)
                },
                success: function (data) {
                    $deleteButton.prop("disabled", false)
                    if (data.status == 0) {
                        layer.alert(data.msg);
                        window.location.href = window.location.href;
                    } else if (data.status == 1) {
                        layer.alert(data.msg);
                    }
                }
            });
        }
    }
    /*批量删除 end*/


    /**
     * 为每个启用或禁用按钮增加事件
     */
    $(function () {
        var $mycheckbox = $('.switch-button').find("input[type='checkbox']");
        $mycheckbox.each(function () {
            var myid = $(this).attr("id");
            var prop = $(this).attr("prop");

            $(this).on({
                'switchChange.bootstrapSwitch': function (event, state) {
                    toggle(myid, state ? 1 : 2);
                }
            });

        });

    });

    //启用或者禁用
    var toggle = function (id, status) {
        $.ajax({
            url: "${base}/actProcDef/suspend",
            data: {id: id, status: status},
            type: "get",
            dataType: "json",
            async: false,
            success: function (data) {
                parent.layer.msg(data.msg);
            }
        });
    };


    var deleteProcIns = function (procInsId, reason) {
        var params = {procInsId: procInsId, reason: reason};
        $.ajax({
            url: '${base}/actProcIns/deleteProcessInstance',
            data: params,
            dataType: "json",
            async: false,
            success: function (data) {
                layer.alert(data.msg);
                location.reload();
            }
        });
    }


    function initSearch() {
        var keywordsObj = {};
        if ($("#procDefKey").val())
            keywordsObj.procDefKey = $("#procDefKey").val();
        if ($("#projectName").val())
            keywordsObj.projectName = $("#projectName").val();
        if ($("#projectId").val())
            keywordsObj.projectId = $("#projectId").val();
        if ($("#procInsId").val())
            keywordsObj.procInsId = $("#procInsId").val();

        var keywords = "";
        if (!$.isEmptyObject(keywordsObj)) {
            keywords = JSON.stringify(keywordsObj);
        }
        $("#keywords").val(keywords);
    };

    var sub_function = function (type) {
        initSearch();
        if(type == 'query'){
            $("#listForm").attr("action", "${base}/actProcIns/list");
        }
        $("#listForm").submit();
    };

</script>