<?xml version="1.0" encoding="UTF-8"?>

<!--
    $Author:Think
    $Revision: 1.0
    工作流
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application"
          xmlns:s="leaf.plugin.script" trace="true">
    <a:init-procedure>
    </a:init-procedure>
    <a:view template="default" package="leaf.ui.std">
        <a:link id="widget_widget_wfl_node_approve_history"
                url="${/request/@context_path}/modules/zjwfl/ZJWFL3040/zj_wfl_my_approved_application_history.lview"/>
        <style>
            html, body {
                width: 840px;
                height: 360px;
                margin: 0;
                padding: 0;
            }

            .widget_wfl_approve {
                box-sizing: border-box;
                width: 840px;
                height: 360px;
                background-color: #fff;
                position: relative;
                border: 1px solid #F0F0F3;
                padding: 0;
                cursor: default;
            }

            .widget_wfl_approve .widget_label {
                position: absolute;
                width: 40px;
                height: 4px;
                top: 0;
                left: 16px;
                background-color: #5A7FFF;
            }

            .widget_wfl_approve .title {
                padding: 12px 0 10px 16px;
                font-family: PingFangSC-Medium;
                font-size: 14px;
                color: rgba(75,80,90,0.85);
                letter-spacing: 0;
            }

            .widget_wfl_approve .switch {
                width: 100%;
                height: 26px;
                cursor: pointer;
                padding-bottom: 8px;
                border-bottom: 1px solid #F0F0F3;
            }

            .widget_wfl_approve .switch .switch_approve {
                display: block;
                width: 72px;
                float: left;
                font-size: 12px;
                text-align: center;
                border: 1px solid rgba(75, 80, 90, 0.15);
                line-height: 22px;
                color: rgba(75, 80, 90, 0.75);

            }

            .widget_wfl_approve .switch #widget_switch_unapprove_id {
                border-bottom-left-radius: 3px;
                border-top-left-radius: 3px;
                margin-left: 16px;
            }

            .widget_wfl_approve .switch #widget_switch_approved_id {
                border-top-right-radius: 3px;
                border-bottom-right-radius: 3px;
                margin-left: -1px;
            }

            .widget_wfl_approve .hls-pagging-grid {
                width: 100%;
                height: 279px;
                -webkit-box-shadow: none;
                box-shadow: none;
            }

            .widget_wfl_approve .hls-pagging-grid .grid-title {
                display: none;
            }

            .widget_wfl_approve .hls-pagging-grid .grid-body {
                padding: 0;
            }

            .widget_wfl_approve .hls-pagging-grid .hls-table tr td {
                text-align: center;
            }

            /*表头*/
            .widget_wfl_approve .hls-pagging-grid .grid-body table > tr {
                display: none;
            }

            .widget_wfl_approve .hls-pagging-grid .hls-table tr td {
                text-align: center;

            }

            .widget_wfl_approve .hls-pagging-grid .hls-table tbody tr {
                height: 48px !important;
                font-size: 12px;
                color: rgba(0,0,0,0.50);
                letter-spacing: 0;
                border-bottom: 1px solid #F0F0F3;
            }
            .widget_wfl_approve .hls-pagging-grid .hls-table tbody td {
                max-width: 16em;
                text-align: left;
                margin: 0 16px;
            }
            .widget_wfl_approve .hls-pagging-grid .hls-table tbody td:first-child div{
                font-size: 13px;
                color: rgba(0,0,0,0.65);
                margin-left: 16px;
            }
            .widget_wfl_approve .hls-pagging-grid .hls-table tbody td:last-child div{
                margin-right: 16px;
            }
            .widget_wfl_approve .hls-pagging-grid .hls-table tbody td:last-child {
                text-align: right;
            }
            .widget_wfl_approve .hls-pagging-grid .hls-table tbody tr:hover {
                background: rgba(90, 127, 255, 0.08);
            }
            .widget_wfl_approve .hls-table-active {
                background-color: rgba(90, 127, 255, 0.08);
            }

            .widget_wfl_approve #widget_zjwfl_grid_approved-wraper{
                display: none;
            }

            .widget_wfl_approve #widget_zjwfl_grid_approved tbody {
                text-align: center !important;
            }

            .widget_wfl_approve #widget_zjwfl_grid_approved tbody .grid_no_date {
                margin-left: 0 !important;
                position: relative !important;
            }

        </style>
        <script><![CDATA[
        function weclickUnapprove() {
            //border: 1px solid #5A7FFF;
            //color: rgba(90,127,255,1);
            //代办grid等
            document.getElementById('widget_switch_unapprove_id').style.border = '1px solid #5A7FFF';
            document.getElementById('widget_switch_unapprove_id').style.color = '#5A7FFF';
            document.getElementById('widget_zjwfl_grid_unapproval-wraper').style.display="block";


            document.getElementById('widget_switch_approved_id').style.border="1px solid #D9D9D9";
            document.getElementById('widget_switch_approved_id').style.color="rgba(0,0,0,0.65)";
            document.getElementById('widget_zjwfl_grid_approved-wraper').style.display="none";
        }
        function weclickApprove() {
            //已办grid等
            document.getElementById('widget_switch_approved_id').style.border="1px solid #5A7FFF";
            document.getElementById('widget_switch_approved_id').style.color="rgba(90,127,255,1)";
            document.getElementById('widget_zjwfl_grid_approved-wraper').style.display="block";

            document.getElementById('widget_switch_unapprove_id').style.border="1px solid #D9D9D9";
            document.getElementById('widget_switch_unapprove_id').style.color="rgba(0,0,0,0.65)";
            document.getElementById('widget_zjwfl_grid_unapproval-wraper').style.display="none";
        }
        ]]></script>
        <a:dataSets>
            <a:dataSet id="widget_zjwfl_zjwfl5110_ds" autoQuery="true" pageSize="5"
                       model="zjwfl.ZJWFL5110.sdic_wfl_instance_node_recipient">
                <a:fields>
                    <a:field name="instance_id"/>
                    <a:field name="node_id"/>
                    <a:field name="record_id"/>
                    <a:field name="workflow_id"/>
                    <a:field name="record_type"/>
                    <a:field name="workflow_info"/>
                    <a:field name="submitted_by_name"/>
                    <a:field name="creation_date_format"/>
                </a:fields>
            </a:dataSet>
            <a:dataSet id="widget_zjwfl_ZJWFL3040_ds" autoQuery="true" pageSize="5"
                       model="zjwfl.ZJWFL3040.zj_wfl_my_approved_application">
                <a:fields>
                </a:fields>
            </a:dataSet>
        </a:dataSets>

        <div class="widget_wfl_approve">
            <span class="widget_label"> </span>
            <div class="title">我的审批事项</div>
            <div class="switch">
                <div class="switch_approve" id="widget_switch_unapprove_id" onclick="weclickUnapprove()">待办事项</div>
                <div class="switch_approve" id="widget_switch_approved_id" onclick="weclickApprove()">已办事项</div>
            </div>

            <a:hapGrid id="widget_zjwfl_grid_unapproval" bindTarget="widget_zjwfl_zjwfl5110_ds"
                       canWheel="true">
                <a:columns>
                    <a:column name="workflow_info"/>
                    <a:column name="document_info"/>
                    <a:column name="creation_date_format"/>
                </a:columns>
            </a:hapGrid>

            <a:hapGrid id="widget_zjwfl_grid_approved" bindTarget="widget_zjwfl_ZJWFL3040_ds"
                       canWheel="true">
                <a:columns>
                    <a:column name="workflow_desc"/>
                    <a:column name="document_info"/>
                    <a:column name="approve_date"/>
                </a:columns>
            </a:hapGrid>
        </div>


        <a:screenBody style="display:none"></a:screenBody>

        <script>
            Leaf.onReady(function () {
                document.getElementById('widget_switch_unapprove_id').style.border = '1px solid #5A7FFF';
                document.getElementById('widget_switch_unapprove_id').style.color = '#5A7FFF';
            })
        </script>
    </a:view>
</a:screen>