@model swap_event
@{
    ViewBag.Title = "展期信息";
    Layout = "~/Views/Shared/_InfoLayout.cshtml";
}
@section CSS{
    <style>
        .div-title {
            margin-bottom:5px;
            font-weight:bold;
        }
        #systemTip {
            margin-left:20px;
        }
    </style>
}
@section JS
    {
    <script type="text/javascript">
        var model = @Json.Serialize(Model);
        var enid='@ViewBag.Enid';
    </script>
    <script src="~/front/calendar?v=@(HtmlUtil.JsVersion)"></script>
    <script src="~/Scripts/fast/fastVue.components.js?v=@HtmlUtil.JsVersion"></script>
    <script src="~/Scripts/app/swaptrade/ExtenstionTime.js?v=@HtmlUtil.JsVersion"></script>
}
<div class="ui-corner-all" id="VueDiv">
    <div class="yc-panel">
        <div class="div-title">{{extenstion.SwapTradeNumber}}</div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>操作</td>
                    <td>展期日</td>
                    <td>原到期日</td>
                    <td>新到期日</td>
                    <td>操作人名</td>
                    <td>更新日期</td>
                </tr>
            </thead>
            <tbody>
                <tr>
                    <td >
                        <div style="display:flex;width:100px;">
                            <button class="btn btn-sm btn-outline-danger" type="button" v-on:click="editExtention" v-show="!edit">修改</button>
                            <button class="btn btn-sm btn-outline-danger" type="button" v-on:click="saveExtention" v-show="edit">保存</button>
                            <button class="btn btn-sm btn-outline-danger" type="button" v-on:click="deleteExtention" :disabled="extenstion.id==0" style="margin-left:10px;">删除</button>
                        </div>
                        
                    </td>
                    <td>
                        <vue-datepicker :holiday="1" v-model="extenstion.ValueDate" :disabled="!edit" style="width:100px;"/>
                    </td>
                    <td>
                        {{dateFormat(extenstion.extenstionData.OldMaturityDate)}}
                    </td>
                    <td>
                        <vue-datepicker :holiday="1" :mindate="extenstion.extenstionData.OldMaturityDate" v-model="extenstion.extenstionData.NewMaturityDate" :disabled="!edit" style="width:100px;"/>
                    </td>
                    <td>{{extenstion.OptName}}</td>
                    <td>{{dateFormat(extenstion.OptTime,'YYYY-MM-DD HH:mm:ss')}}</td>
                </tr>
            </tbody>
        </table>
    </div>
    <b id="systemTip">{{optime}}</b>
    <hr />
    <div class="yc-panel">
        <div class="div-title">操作历史</div>
        <table class="table table-bordered">
            <thead>
                <tr>
                    <td>操作类型</td>
                    <td>展期日</td>
                    <td>原到期日</td>
                    <td>新到期日</td>
                    <td>操作人名</td>
                    <td>更新日期</td>
                </tr>
            </thead>
            <tbody>
                <tr v-for="item in historyList">
                    <td>{{item.EventReason}}</td>
                    <td>{{dateFormat(item.ValueDate)}}</td>
                    <td>{{dateFormat(item.extenstionData.OldMaturityDate)}}</td>
                    <td>{{dateFormat(item.extenstionData.NewMaturityDate)}}</td>
                    <td>{{item.OptName}}</td>
                    <td>{{dateFormat(item.OptTime,'YYYY-MM-DD HH:mm:ss')}}</td>
                </tr>
            </tbody>
        </table>
    </div>
</div>