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

<!--
    $Author:
    $Date: 2018/8/2
    $Revision: 1.0
    项目/合同微件
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <style>
            html,body{
            width:552px;
            height:360px;
            margin: 0;
            padding: 0;
            color:#000;
            }
            .widget_cont_prj{
            box-sizing:border-box;
            width:552px;
            height:360px;
            background-color:#fff;
            position:relative;
            border:1px solid #F0F0F3;
            padding:0 24px 0 16px;
            user-select:none;
            cursor:default;
            }
            .widget_cont_prj .widget_label{
            position:absolute;
            width:40px;
            height:4px;
            top:0;
            left:16px;
            background-color:#5A7FFF;
            }
            .widget_cont_prj .row1{
            position:relative;
            height:20px;
            line-height:20px;
            margin:16px 0 0 0;
            font-family: PingFangSC-Medium;
            font-size: 14px;
            color: rgba(75,80,90,0.85);
            letter-spacing: 0;
            }

            .widget_cont_prj .row2{
            display:inline-block;
            position:relative;
            height:26px;
            margin:10px 0 8px 0;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            color: #5A7FFF;
            letter-spacing: 0;
            }
            .widget_cont_prj .row2 span{
            display:inline-block;
            width:64px;
            height:24px;
            line-height:24px;
            font-family: PingFangSC-Regular;
            font-size: 12px;
            letter-spacing: 0;
            text-align: center;
            cursor:pointer;
            }
            .widget_cont_prj .row2 input{
            display:none;
            }
            .widget_cont_prj .row2 #myPrj{
            border-radius: 4px 0 0 4px;
            border: 1px solid #5A7FFF;
            color: #5A7FFF;
            }
            .widget_cont_prj .row2 #myCont{
            border-radius:0 4px 4px 0;
            position:relative;
            left:-1px;
            border: 1px solid rgba(75,80,90,0.15);
            color: rgba(75,80,90,0.75);
            }
            .widget_cont_prj .row2 input:checked~#myPrj{
            border-color:rgba(75,80,90,0.15);
            color:rgba(75,80,90,0.75);
            }
            .widget_cont_prj .row2 input:checked~#myCont{
            border: 1px solid #5A7FFF;
            color: #5A7FFF;
            }
            .widget_cont_prj .hls-pagging-grid{
            width:100%;
            height:278px;
            -webkit-box-shadow:none;
            box-shadow:none;
            }
            .widget_cont_prj .hls-pagging-grid .grid-title{
            display:none;
            }
            .widget_cont_prj .hls-pagging-grid .grid-body{
            padding:0;
            }
            .widget_cont_prj .hls-pagging-grid .hls-table>tr:first-child{
            display:none;
            }
            .widget_cont_prj .hls-pagging-grid .hls-table tbody tr:first-child{
            height:48px;
            border-top:1px solid #F0F0F3;
            }
            .widget_cont_prj .hls-pagging-grid .hls-table tr{
            height:48px;
            font-family: PingFangSC-Medium;
            font-size: 12px;
            color: rgba(93,97,103,0.85);
            letter-spacing: 0;
            border-bottom:1px solid #F0F0F3;
            }
            .widget_cont_prj .hls-pagging-grid .hls-table tr:hover{
            background: rgba(90,127,255,0.08);
            }
            .widget_cont_prj .hls-pagging-grid .hls-table-active{
            background: rgba(90,127,255,0.08);
            }
            .widget_cont_prj .hls-pagging-grid .grid-foot{
            height: 36px;
            margin-top:0;
            line-height:36px;
            }
            .widget_cont_prj .hls-pagging-grid .grid-body table tr td:nth-child(2) div{
            max-height:48px;
            max-width:130px;
            white-space:nowrap;
            color: rgba(93,97,103,0.85);
            font-family: PingFangSC-Medium;
            overflow:hidden;
            text-overflow : ellipsis;
            }
            .widget_cont_prj .hls-pagging-grid .grid-body table tr td:nth-child(3) div{
            max-height:48px;
            max-width:130px;
            white-space:nowrap;
            color: rgba(75,80,90,0.75);
            font-family: PingFangSC-Regular;
            overflow:hidden;
            text-overflow : ellipsis;
            }
            .widget_cont_prj .hls-pagging-grid .hls-table tbody tr td:nth-child(4){
            min-width:50px;
            text-align:center;
            }
            .widget_cont_prj .hls-pagging-grid .hls-table tbody tr td:nth-child(5){
            min-width:120px;
            text-align:RIGHT;
            }
            .widget_cont_prj .hls-pagging-grid .hls-table .firstLetter{
            display:inline-block;
            width:30px;
            height:30px;
            line-height:32px;
            background: #D8D8D8;
            border-radius: 3.73px;
            font-family: PingFangSC-Regular;
            font-size: 11.93px;
            color: #FFFFFF;
            letter-spacing: 0;
            text-align: center;
            }
            .widget_cont_prj .hls-pagging-grid .hls-table .statusBox{
            display:inline-block;
            height:26px;
            line-height:26px;
            padding:0 10px;
            background: rgba(90,127,255,0.15);
            border-radius: 3.73px;
            font-family: PingFangSC-Regular;
            font-size: 11.93px;
            color: #4866CC;
            letter-spacing: 0;
            text-align: center;
            }
            .widget_cont_prj #my_cont_grid-wraper{
            display:none;
            }
        </style>
        <script><![CDATA[
        function myContLoader(ds){
            var records=ds.data;
            var my_prj_ds=$("my_prj_ds");
            var my_cont_ds=ds;

            jQuery("#cont_prj_type").on('change',function(e){
                //checked==true 对应 我的合同
                //checked==false 对应 我的项目
                if(e.target.checked==true){
                    jQuery("#my_cont_grid-wraper").show();
                    jQuery("#my_prj_grid-wraper").hide();
                }else{
                    jQuery("#my_cont_grid-wraper").hide();
                    jQuery("#my_prj_grid-wraper").show();
                }
            });
        }
        function first_letter_renderer(record,index){
            var firstLetter='';
            if(record.data["bp_name"]){
                firstLetter=record.data["bp_name"].charAt(0);
            }
            return '<span class="firstLetter">'+firstLetter+'</span>'
        }
        function status_renderer(record,index){
            var status='';
            if(record.data["status"]){
                status=record.data["status"];
            }
            return '<span class="statusBox">'+ status +'</span>'
        }
        function bp_name_renderer(record,index){
            return '<div title="'+record.data["bp_name"]+'" style="cursor:pointer;">'+ record.data["bp_name"] +'</div>'
        }
        function name_renderer(record,index){
            return '<div title="'+record.data["name"]+'" style="cursor:pointer;">'+ record.data["name"] +'</div>'
        }
            ]]></script>
        <a:dataSets>
            <a:dataSet id="my_cont_ds" autoQuery="true" pageSize="5" model="cont.CON1003.my_cont" >
                <a:fields>
                    <a:field name="bp_name"/>
                    <a:field name="name"/>
                    <a:field name="legal_person"/>
                    <a:field name="status"/>
                </a:fields>
                <a:events>
                    <a:event name="load" handler="myContLoader"/>
                </a:events>
            </a:dataSet>
            <a:dataSet id="my_prj_ds" autoQuery="true" pageSize="5" model="prj.PRJ1101.my_prj" >
                <a:fields>
                    <a:field name="bp_name"/>
                    <a:field name="name"/>
                    <a:field name="legal_person"/>
                    <a:field name="status"/>
                </a:fields>
            </a:dataSet>
        </a:dataSets>
        <div class="widget_cont_prj">
            <span class="widget_label"> </span>
            <div class="row1">项目/合同</div>
            <label class="row2" for="cont_prj_type">
                <!--用:check伪类做toggle tab的状态类转换,checked表示cont_prj_type=myCont-->
                <input type="checkbox" id="cont_prj_type"/>
                <span id="myPrj">我的项目</span>
                <span id="myCont">我的合同</span>
            </label>
            <a:hapGrid id="my_cont_grid" bindTarget="my_cont_ds">
                <a:columns>
                    <a:column template="first_letter_renderer"/>
                    <a:column template="bp_name_renderer"/>
                    <a:column template="name_renderer"/>
                    <a:column name="legal_person"/>
                    <a:column template="status_renderer"/>
                </a:columns>
            </a:hapGrid>
            <a:hapGrid id="my_prj_grid" bindTarget="my_prj_ds" canWheel="true">
                <a:columns>
                    <a:column template="first_letter_renderer"/>
                    <a:column template="bp_name_renderer"/>
                    <a:column template="name_renderer"/>
                    <a:column name="legal_person" />
                    <a:column template="status_renderer"/>
                </a:columns>
            </a:hapGrid>
        </div>
        <a:screenBody style="display:none"> </a:screenBody>
    </a:view>
</a:screen>