@using Hncore.Infrastructure.Data
@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model PageData<ProductOrderEntity>
@{
    Layout = "_UserLayout";

    Func<string, string> cut = word =>
    {
        if (word.Length > 15)
            return word.Substring(0, 15) + "...";
        return word;
    };
}
<style>
    .tipBox {
        position: absolute;
        padding:10px;
        border: 1px solid #ccc;
        background: #fff;
        width: 260px;
        min-height:100px;
        white-space: normal;
        word-break: break-all;
        word-wrap: break-word;
        display: none;
    }
</style>
<form asp-action="myorders" asp-controller="user" method="get">
    <div class="toolsBar" id="app">

        <div class="item">
            日期筛选：
        </div>
        <div class="item">
            <div class="row">
                <div class='col-sm-6'>
                    <div class="form-group">
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker1'>
                            <input type='text' class="form-control" v-model="searchModel.BTime" placeholder="选择开始时间" id="BTime" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
                <div class='col-sm-6'>
                    <div class="form-group">
                        <!--指定 date标记-->
                        <div class='input-group date' id='datetimepicker2'>
                            <input type='text' class="form-control" v-model="searchModel.ETime" placeholder="选择结束时间" id="ETime" />
                            <span class="input-group-addon">
                                <span class="glyphicon glyphicon-calendar"></span>
                            </span>
                        </div>
                    </div>
                </div>
            </div>

        </div>
        <div class="item">
            <div class="btn-group">
                <select @@change="search" v-model="searchModel.OrderType" style="height:35px;">
                    <option value="0">全部类型</option>
                    <option value="1">新开</option>
                    <option value="2">续费</option>
                    <option value="3">批量新开</option>
                    <option value="4">批量续费</option>
                </select>
            </div>
        </div>
        <div class="item">
            <div class="btn-group">
                <select @@change="search" v-model="searchModel.ProductId" style="height:35px;">
                    <option value="0">全部产品</option>
                    <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                </select>
            </div>
        </div>
        <div class="item">
            <div class="btn-group">
                <select @@change="search" v-model="searchModel.PackageId" style="height:35px;">
                    <option value="0">全部套餐</option>
                    <option value="测试卡">测试卡</option>
                    <option value="天卡">天卡</option>
                    <option value="周卡">周卡</option>
                    <option value="月卡">月卡</option>
                    <option value="月卡(活动)">月卡(活动)</option>
                    <option value="双月卡(活动)">双月卡(活动)</option>
                    <option value="季卡">季卡</option>
                    <option value="季卡(活动)">季卡(活动)</option>
                    <option value="年卡">年卡</option>
                </select>
            </div>
        </div>
        <div class="item">
            <input type="text" v-model="searchModel.KeyWord" placeholder="账号" class="bianhao" /><button type="button" class="btn btn-primary" v-on:click="search">查询</button>
        </div>

    </div>
</form>
<table class="table table-striped table_person">
    <tr>
        <th>日期</th>
        <th>订单编号</th>
        <th>类型</th>
        <th>产品</th>
        <th>套餐</th>
        <th>单价</th>
        <th>总连接数</th>
        <th>账号</th>
        <th>订单金额</th>
        <th>优惠券</th>
        <th>实付金额</th>
    </tr>
    @foreach (var item in Model.List)
    {
        <tr>
            <td>@item.CreateTime.ToString("yyyy.MM.dd")</td>
            <td>@item.OrderNo</td>
            <td>@item.OrderType.GetEnumDisplayName()</td>
            <td>@item.ProductName</td>
            <td>@item.PackageName</td>
            <td>@item.DayPrice</td>
            <td>@(item.ConnectCount*item.AccountCount)</td>
            <td class="@(item.Accounts.Length>15?"cutTip":"")">
                @cut(item.Accounts)
                <div class="tipBox">@item.Accounts</div>
            </td>
            <td>@item.OrderAmount</td>
            <td>@item.CouponAmount</td>
            <td>@item.PaymentAmount</td>
        </tr>
    }
</table>
<div class="fenye">
    @await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
</div>


<script type="text/javascript">
    $(function () {
        var picker1 = $('#datetimepicker1').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn'),
            //minDate: '2016-7-1'
        });
        var picker2 = $('#datetimepicker2').datetimepicker({
            format: 'YYYY-MM-DD',
            locale: moment.locale('zh-cn')
        });
        //动态设置最小值
        picker1.on('dp.change', function (e) {
            picker2.data('DateTimePicker').minDate(e.date);
        });
        //动态设置最大值
        picker2.on('dp.change', function (e) {
            picker1.data('DateTimePicker').maxDate(e.date);
        });

        $(".cutTip").mouseover(function () {
            $(this).children().last().show();
        }).mouseleave(function () {
            $(this).children().last().hide();
        })
    });</script>

<script type="text/javascript">
        var app = new Vue({
        el: '#app',
        data: {
            productWithPackage: [],
            packages: [],
            searchModel: {
                OrderType:0,
                ProductId:@this.Context.Request.GetInt("ProductId"),
                PackageId:"0",
                KeyWord:'',
                BTime: '@this.Context.Request.Get("BTime")',
                ETime: '@this.Context.Request.Get("ETime")',
            },
            oneAuthModel: {
                ProductId: 0,
                Account: "",
                Pwd:""
            },
            mutilAuthModel: {
                ProductId: 0,
                Account: "",
                Pwd: "",
                StartNum: 0,
                Count:0
            }
        },
        computed: {

        },
        watch: {
            'searchModel.ProductId': {    //加引号监听对象里的属性
                handler: function (newValue, oldValue) {
                    for (var i = 0; i < this.productWithPackage.length; i++) {
                        var item = this.productWithPackage[i];
                        if (item.Product.Id == newValue) {
                            this.packages = item.Packages
                            return;
                        }
                    }
                },
                immediate: true
            }
        },
        created: function () {
            this.getProducts();
        },
        methods: {
            getProducts() {
                var that = this;
                $.ajax({
                    type: 'GET',
                    url: '/api/course/v1/product/ProductWithPackage',
                    success: function (res) {
                        if (res.Code == 10000) {
                            that.productWithPackage = res.Data;
                        }
                    }
                });
            },
            search() {
                var ps = [];
                this.searchModel.BTime = $("#BTime").val();
                this.searchModel.ETime = $("#ETime").val();
                for (var item in this.searchModel) {
                    var p = item + "=" + this.searchModel[item];
                    ps.push(p);
                }
                window.location.href = "?" + ps.join("&");
            },
        }
    })
</script>