@model TradeViewModel

@{
    ViewBag.Title = "交易信息|查看";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}
@section JS{
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script>
        const day_millionseconds = 1000 * 60 * 60 * 24;
        var PointDate = new Date();
        $(function () {
            var date = new Date();
            PointDate = date;
            var year = date.getFullYear();

            for (var i = year - 1; i <= year + 1; i++) {
                $("#year").append("<option value=" + i + ">" + i + "年</option>");
            }
            $("#year")[0].selectedIndex = 0;

            for (var i = 1; i <= 12; i++) {
                $("#month").append("<option value=" + i + ">" + i + "月</option>");
            }
            setDate(date);
        });

        function setDate(date) {
            var preDate = new Date();
            var week = new Array('日', '一', '二', '三', '四', '五', '六');
            var preDate_millionseconds = date.getTime() - day_millionseconds * 3;
            preDate.setTime(preDate_millionseconds);
            $("#year").val(date.getFullYear());
            $("#month").val(date.getMonth() + 1);
            var index = preDate.getDay();
            $("#WeekHeader").html("");
            $("#Days").html("");
            $("#WeekBody").html("");
            for (var i = index; i < 7; i++) {
                $("#WeekHeader").append("<td style='text-align:center;border:1px;" +
                    "border-color:black; border-style:solid; '><span style='font-size:large;font-weight:bold'>" + week[i] + "</span ></td > ");
            }
            for (var i = 0; i < index; i++) {
                $("#WeekHeader").append("<td style='text-align:center;border:1px;" +
                    "border-color:black;border-style:solid; '><span style='font-size:large;font-weight:bold'>" + week[i] + "</span ></td > ");
            }
            for (var i = 0; i < 7; i++) {
                var tempDate = new Date();
                tempDate.setTime(preDate.getTime() + i * day_millionseconds)
                var backGroundColor = ylotc.isHoliday(tempDate) ? "grey" : "black";
                if (i == 0) {
                    $("#Days").append("<td style='text-align:center;border:1px;" +
                        "border-color:black; background-color:" + backGroundColor + ";width:14.28%'><i class='fa fa-chevron-left' style='float:left' aria-hidden='true' onclick='PreWeek()'></i><span>" +
                        tempDate.getDate() + "</span ></td > ")
                }
                else if (i == 6) {
                    $("#Days").append("<td style='text-align:center;border:1px;" +
                        "border-color:black; background-color:" + backGroundColor + ";width:14.28%'><span>" + tempDate.getDate() +
                        "</span ><i class='fa fa-chevron-right' aria-hidden='true' style='float:right' onclick='NextWeek()'></i></td > ")
                } else {
                    $("#Days").append("<td style='text-align:center;border:1px;" +
                        "border-color:black; background-color:" + backGroundColor + ";width:14.28%'><span>" + tempDate.getDate() + "</span ></td > ")
                }
                $("#WeekBody").append("<td style='text-align:center;border:1px;border-color:black;border-style:solid;vertical-align:initial'>"
                    + "<table id='day" + i + "' style='text-align:center;width:100%'><tr>"
                    + "<td style='width:10%;font-weight:bold'></td > "
                    + "<td style='width:35%;font-weight:bold'>事件类别</td>"
                    + "<td style='width:35%;font-weight:bold'>模块</td > "
                    + "<td style='width:20%;font-weight:bold'>跳转</td></tr></table>"
                    + "</td>")

                if (tempDate.Format("yyyyMMdd") == new Date().Format("yyyyMMdd")) {
                    $("#day" + i).parent().css("background-color", "#D9FBA4");
                }
            }
            setDayEvents(preDate);
        }

        function setDayEvents(date) {
            for (var i = 0; i < 7; i++) {
                var queryDate = new Date();
                queryDate.setTime(date.getTime() + i * day_millionseconds);
                var option = {
                    url: "/risk/getDailyEvents",
                    type: "POST",
                    data: { date: queryDate.Format("yyyy-MM-dd") },
                    dataType: "json", //格式是html
                    success: function (res) {
                        if (res) {
                            setEventsView(date, res)
                        }
                        else {

                        }
                    },
                    error: function (msg) {
                        main.alert("后台运行错误:" + msg.msg);
                    }
                };
                main.ajax(option);
            }
        }

        function setEventsView(date, content) {
            var htmlContent = "";
            var day = 0;
            var calcDate = new Date();
            date.setSeconds(0);
            date.setMinutes(0);
            date.setHours(0)
            if (content.日期) {
                var calcDate = new Date(content.日期);
                day = Math.abs(Math.ceil((calcDate - date) / day_millionseconds));
            }
            if (content.obj) {
                var calcDate = new Date(content.obj);
                day = Math.abs(Math.ceil((calcDate - date) / day_millionseconds));
            }
            if (content.success != undefined && !content.success) {
                htmlContent += "<tr><td colspan='4'>" + content.msg + "</td></tr> "
            }
            if (content.到期期权 != undefined) {
                var color = "grey";
                if (content.到期期权) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>到期</td><td>期权</td><td><a href='/trade/tradeList?settleDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "
            }
            if (content.到期现金流 != undefined) {
                var color = "grey";
                if (content.到期现金流) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>到期</td><td>现金流</td><td><a href='/trade/tradeList?settleDate=" + calcDate.Format("yyyy-MM-dd") + "&tradeType=现金流交易,结构化交易' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "
            }
            if (content.到期远期 != undefined) {
                var color = "grey";
                if (content.到期远期) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>到期</td><td>远期</td><td><a href='/forwardTrade/TradeList?settleDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "

            }
            if (content.到期互换 != undefined) {
                var color = "grey";
                if (content.到期互换) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>到期</td><td>互换</td><td><a href='/swapTrade2/TradeList?settleDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "

            }
            if (content.收益互换 != undefined) {
                var color = "grey";
                if (content.收益互换) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>观察日</td><td>互换</td><td><a href='/swapTrade2/TradeList?observationDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "
            }
            if (content.除权除息 != undefined) {
                var color = "grey";
                if (content.除权除息) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>除权除息</td><td>除权除息</td><td><a href='/trade/DividendTradeList?settleDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "
            }
            if (content.票息 != undefined) {
                var color = "grey";
                if (content.票息) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>付息</td><td>付息</td><td><a href='/risk/CouponList?settleDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "

            }
            if (content.敲入敲出 != undefined) {
                var color = "grey";
                if (content.敲入敲出) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>观察日</td><td>敲入敲出</td><td><a href='/risk/KonckOutList?settleDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "
            }
            if (content.自定义交易 != undefined) {
                var color = "grey";
                if (content.自定义交易) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>观察日</td><td>自定义</td><td><a href='/risk/CustomList?settleDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "
            }
            if (content.延期互换 != undefined) {
                var color = "grey";
                if (content.延期互换) {
                    color = "green";
                }
                htmlContent += "<tr><td><i class='fa fa-check-circle-o' aria-hidden='true' style='color:" + color + "'></i></td>"
                    + "<td>延期</td><td>互换</td><td><a href='/risk/DelaySettlement?settleDate=" + calcDate.Format("yyyy-MM-dd") + "' target='_blank'>"
                    + "<i class='fa fa-share-square-o' aria-hidden='true'></a>"
                    + "</i></td></tr> "
            }
            $("#day" + day).append(htmlContent);
        }

        function PreWeek() {
            PointDate.setTime(PointDate.getTime() - 7 * day_millionseconds);
            setDate(PointDate);
        }

        function NextWeek() {
            PointDate.setTime(PointDate.getTime() + 7 * day_millionseconds);
            setDate(PointDate);
        }

        function BackToday() {
            PointDate = new Date();
            setDate(PointDate);
        }

        function ChangeMonth() {
            var year = $("#year").val();
            var month = $("#month").val();
            var monthStr = "" + month;
            if (monthStr.length == 1) {
                monthStr = "0" + monthStr;
            }
            PointDate = new Date(year + "-" + monthStr + "-01");
            setDate(PointDate);
        }
    </script>
}



<div style="background-color: black;height: 44px;">
    <select id="year" onchange="ChangeMonth()"></select>

    <select id="month" onchange="ChangeMonth()"></select>

    <button onclick="BackToday()">返回今天</button>
</div>
<div id="calendar" style="display:flex;">
    <table style="width:100%">
        <tr id="WeekHeader" style="height:44px"></tr>
        <tr id="Days" style="height:30px;color:white"></tr>
        <tr id="WeekBody">
        </tr>
    </table>
</div>