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

<!--
    $jqAuthor: huangtianyang
    $jqDate: 2018/7/3 下午3:33
    $jqRevision: 1.0
    授信额度查询
-->
<a:screen xmlns:a="http://www.leaf-framework.org/application">
    <a:init-procedure/>
    <a:view template="default" package="leaf.ui.std">
        <link href="${/request/@context_path}/resource/leaf.ui.std/hap/hlscomponent/hls-component.css"
              rel="stylesheet" type="text/css"/>
        <link href="${/request/@context_path}/resource/leaf.ui.std/hap/hlscomponent/hls-all.css" rel="stylesheet"
              type="text/css"/>
        <link href="${/request/@context_path}/resource/leaf.ui.std/hap/hlscomponent/beyond.min.css" rel="stylesheet"
              type="text/css"/>
        <link href="${/request/@context_path}/css/hap/bootstrap.min.css" rel="stylesheet" type="text/css"/>
        <style>
            .fundContain_balance_contain .query {
                height: 86px;
                border-bottom: 1px solid rgb(204, 204, 204);
            }

            .fundContain_balance_contain .query .queryInfo {
                border: 1px solid rgb(204, 204, 204);
                width: 240px;
                height: 30px;
                margin-top: 5px;
                border-radius: 5px;
            }

            .fundContain_balance_contain .query .queryInfo img {
                width: 15px;
                height: 15px;
                display: inline-block;
                margin-top: 0px;
                margin-left: 3px;
            }

            .fundContain_balance_contain .query .queryInfo input {
                border: none;
                width: 215px;
                height: 27px;
                background: #fff;
            }

            .fundContain_balance_contain .query span {
                color: #666666;
                line-height: 30px;
            }

            .fundContain_balance_contain .query button {
                width: 70px;
                height: 30px;
                margin-left: 8px;
                border-radius: 5px;
                border: 1px solid rgb(204, 204, 204);
                background: #fff;
                color: #000;
            }

            .fundContain_balance_foot button {
                width: 70px;
                height: 30px;
                float: right;
                border-radius: 5px;
                margin-top: 10px;
                margin-right: 10px;
                background: rgb(245, 123, 105);
                border: 1px solid rgb(245, 123, 105);
                color: white;
            }


        </style>
        <div></div>
        <script></script>
        <a:dataSets/>
        <div id="widget510" class="hls-query-form hls-block-x1" style="height:355px;margin-top:0;float:left">
            <div id="widget510_title" class="hls-query-form-title global-font-size13 border-bottom-blue">授信额度查询</div>
            <div class="hls-hbox-row border-bottom-1">
                <div>
                    <div>
                        <div class="fundContain_balance_contain">
                            <div class="query" style="height:86px;">
                                <div><span class="global-font-size13">授信机构</span></div>
                                <div class="queryInfo">
                                    <input id="collectionQueryFirst" type="text" placeholder="请输入授信机构名称"/>
                                </div>

                            </div>
                            <div class="query" style="height:86px;">
                                <div><span class="global-font-size13">授信额度</span></div>
                                <div>
                                    <i style="color: #EBAFAF;font-style: normal" color="colors">●</i>
                                    <span>已用额度</span>
                                    <i style="color: #BFCFDB;margin-left: 40px;font-style: normal" color="colors">●</i>
                                    <span>可用额度</span>
                                    <div style="clear:both"></div>

                                    <div style="width: 240px;height: 15px;background-color: #BFCFDB;display: inline-block">
                                        <div id="usedPerCent"
                                             style="width: 80px;height: 15px;background-color: #EBAFAF;display: inline-block;text-align:right;color: white;">
                                            1
                                        </div>
                                    </div>
                                </div>
                            </div>
                            <div class="query" style="height:86px;">
                                <div><span class="global-font-size13">时间跨度</span></div>
                                <div style="margin-top:5px;">
                                    <img style="width:30px;height:25px;padding-left:5px;"
                                         src="${/request/@context_path}/images/CSH/year.png" alt="png"/>
                                    <select id="yearSecond"
                                            style="height:25px;width:79px;border-color: rgb(213, 213, 213);border-radius: 5px;color:#000;padding:0;background:#fff;">

                                    </select>
                                    <img style="width:30px;height:25px;padding-left:5px;"
                                         src="${/request/@context_path}/images/CSH/month.png" alt="png"/>
                                    <select id="monthSecond"
                                            style="height:25px;width:79px;border-color: rgb(213, 213, 213);border-radius: 5px;color:#000;padding:0;background:#fff;">
                                        <option>1</option>
                                        <option>2</option>
                                        <option>3</option>
                                        <option>4</option>
                                        <option>5</option>
                                        <option>6</option>
                                        <option>7</option>
                                        <option>8</option>
                                        <option>9</option>
                                        <option>10</option>
                                        <option>11</option>
                                        <option>12</option>
                                    </select>
                                </div>
                            </div>

                            <div class="fundContain_balance_foot">
                                <button id="collectionButtonQuery">查询</button>
                                <div style="clear:both;"></div>
                            </div>
                        </div>
                    </div>
                </div>

            </div>
        </div>

        <script><![CDATA[

        /*设置年月查询初值*/
        var yearSecond = (new Date()).getFullYear();
        var monthSecond = (new Date()).getMonth() + 1;
        $jq("#yearSecond").val(yearSecond);
        $jq("#monthSecond").val(monthSecond);
        $jq("#collectionButtonQuery").click(function () {
            queryBp();
        })
        /*授信额度查询方法*/
        function queryBp() {
            var currency = $jq("input[name='currency']:checked").val();
            var bpName1 = $jq("#collectionQueryFirst").val();
            var year = $jq("#yearSecond").val();
            var month = $jq("#monthSecond").val();
            var temp = {};
            if (bpName1 != undefined && bpName1 != '') {
                temp.bpName = bpName1;
            }
            if (year != undefined && year != '') {
                temp.year = year;
            }
            if (month != undefined && month != '') {
                temp.month = month;
            }
            if (currency != undefined && currency != '') {
                temp.currencyName = currency;
            }

            accountRtbDataSource.read(temp);
            hlsMultiBarChartDataSource.read(temp);
            rollTableDataSource.read(temp);
            getBpName(bpName1);
            createBpName();
            setPerCent();

        }

        $jq("input[name='currency']").click(function () {
            queryBp();
        })
        /*设置已用额度百分比*/
        function setPerCent() {
/*            var datas1 = hlsMultiBarChartDataSource.dataSource;
            var used = 0;
            var noUsed = 0;
            datas1.forEach(function (value, index, array) {
                if (value.usedAmt != null && value.usedAmt != undefined) {
                    used = used + value.usedAmt;
                }
                if (value.noUsedAmt != null && value.noUsedAmt != undefined) {
                    noUsed = noUsed + value.noUsedAmt;
                }

            })
            var sum = noUsed + used;
            var cent = Hls.numberToDecimal2(used / sum * 100);
            var show = cent + "%";
            var width = cent * 2.4 + "px";
            $jq("#usedPerCent")[0].style.width = width;
            $jq("#usedPerCent")[0].innerHTML = show;*/

        }
        setPerCent();
        /*年份下拉选择框*/
        var YearSelect = {
            init: function (nowYear, obj) {
                //渲染数据
                var yearArray = [nowYear + 3, nowYear + 2, nowYear + 1, nowYear, nowYear - 1, nowYear - 2, nowYear - 3];
                //添加节点
                var parentDiv = document.getElementById(obj);
                $jq(parentDiv).empty();
                for (var index = 0; index < yearArray.length; index++) {
                    var option = document.createElement("option");
                    option.innerText = yearArray[index];
                    parentDiv.appendChild(option);
                }
                parentDiv.value = nowYear;
            }

        };
        YearSelect.init(yearSecond, "yearSecond");
        ]]></script>

        <a:screenBody/>
    </a:view>
</a:screen>