@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;
    };
}

    <div id="app">
        <form asp-action="myorders" asp-controller="user" method="get">
            <div class="chaxun2">
                <input type="text" v-model="searchModel.KeyWord" /><button type="button" class="btnOrange" v-on:click="search">查询</button>
            </div>
            <div class="row riqi">
                <div class="col-sm-4 col-xs-4">
                    日期查询：
                </div>
                <div class="col-sm-4 col-xs-4">
                    <input type="text" name="start_date" id="start_date" v-model="searchModel.BTime" placeholder="选择开始日期" readonly="readonly" />
                </div>
                <div class="col-sm-4 col-xs-4">
                    <input type="text" name="end_date" id="end_date" v-model="searchModel.ETime" placeholder="选择结束日期" readonly="readonly" />
                </div>
            </div>

            <div class="row shaixuan">
                <div class="col-sm-4 col-xs-4">
                    <select @@change="search"  v-model="searchModel.OrderType">
                        <option value="0">全部类型</option>
                        <option value="1">新开</option>
                        <option value="2">续费</option>
                        <option value="3">批量新开</option>
                        <option value="4">批量续费</option>
                    </select>
                </div>
                <div class="col-sm-4 col-xs-4">
                    <select @@change="search"  v-model="searchModel.ProductId">
                        <option value="0">全部产品</option>
                        <option v-for="item in productWithPackage" :value="item.Product.Id">{{item.Product.Name}}</option>
                    </select>
                </div>
                <div class="col-sm-4 col-xs-4">
                    <select @@change="search"  v-model="searchModel.PackageId">
                         <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>
        </form>
        <table border="0" cellspacing="0" cellpadding="0" class="orderTable">
            <tr><th>类型</th><th>产品</th><th>套餐</th><th>详情</th></tr>
            @foreach (var item in Model.List)
            {
                <tr>
                    <td>@item.OrderType.GetEnumDisplayName()</td>
                    <td>@item.ProductName</td>
                    <td>@item.PackageName</td>
                    <td>
                        <button type="button" class="btnXq toDetail" onclick="showDetail(this)"
                                a-date="@item.CreateTime.ToString("yyyy.MM.dd")"
                                a-orderno="@item.OrderNo"
                                a-ordertype="@item.OrderType.GetEnumDisplayName()"
                                a-product="@item.ProductName"
                                a-package="@item.PackageName"
                                a-price="@item.DayPrice"
                                a-conncount="@(item.AccountCount*item.ConnectCount)"
                                a-account="@item.Accounts"
                                a-orderamount="@item.OrderAmount"
                                a-couponamount="@item.CouponAmount"
                                a-payamount="@item.PaymentAmount">
                            详情
                        </button>
                    </td>
                </tr>
            }
        </table>
        <div class="fenye">
            @await Component.InvokeAsync("Pager", new PagerModel() { Total = Model.RowCount, PageIndex = this.Context.Request.GetInt("PageIndex") })
        </div>
        <!-- 弹窗详情 -->
        <div class="layerTable">
            <table border="0" cellspacing="0" cellpadding="0">
                <tr>
                    <td>日期：</td>
                    <td>{{currentOrder.date}}</td>
                </tr>
                <tr>
                    <td>订单编号：</td>
                    <td>{{currentOrder.orderno}}</td>
                </tr>
                <tr>
                    <td>类型：</td>
                    <td>{{currentOrder.ordertype}}</td>
                </tr>
                <tr>
                    <td>产品：</td>
                    <td>{{currentOrder.product}}</td>
                </tr>
                <tr>
                    <td>套餐：</td>
                    <td>{{currentOrder.package}}</td>
                </tr>
                <tr>
                    <td>单价：</td>
                    <td>{{currentOrder.price}}</td>
                </tr>
                <tr>
                    <td>总连接数：</td>
                    <td>{{currentOrder.conncount}}</td>
                </tr>
                <tr>
                    <td>账号：</td>
                    <td>{{currentOrder.account}}</td>
                </tr>
                <tr>
                    <td>订单金额：</td>
                    <td>{{currentOrder.orderamount}}</td>
                </tr>
                <tr>
                    <td>优惠金额：</td>
                    <td>{{currentOrder.couponamount}}</td>
                </tr>
                <tr>
                    <td>实付金额：</td>
                    <td>{{currentOrder.payamount}}</td>
                </tr>
            </table>
            <div class="back">
                <img src="~/m/img/arrowback.png"> 返回列表
            </div>
        </div>

    </div>

<script src="~/m/js/LCalendar.js" type="text/javascript" charset="utf-8"></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
            },
            currentOrder: {
                date:"",
                orderno:"",
                ordertype:"",
                product:"",
                package:"",
                price:"",
                conncount:"",
                account:"",
                orderamount:"",
                couponamount:"",
                payamount:""
            }
        },
        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("&");
                },
            setOrderInfo(info) {
                this.currentOrder = info;
            }
        }
        })

    function showDetail(_self) {
        var currentOrder = {
            date: $(_self).attr('a-date'),
            orderno: $(_self).attr('a-orderno'),
            ordertype: $(_self).attr('a-ordertype'),
            product: $(_self).attr('a-product'),
            package: $(_self).attr('a-package'),
            price: $(_self).attr('a-price'),
            conncount: $(_self).attr('a-conncount'),
            account: $(_self).attr('a-account'),
            orderamount: $(_self).attr('a-orderamount'),
            couponamount: $(_self).attr('a-couponamount'),
            payamount: $(_self).attr('a-payamount'),
        }
        app.setOrderInfo(currentOrder);
        $(_self).show();
    }
</script>
<script type="text/javascript">
    var calendar = new LCalendar();
    calendar.init({
        'trigger': '#start_date', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': (new Date().getFullYear() - 3) + '-' + 1 + '-' + 1, //最小日期
        'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
    });
    var calendar = new LCalendar();
    calendar.init({
        'trigger': '#end_date', //标签id
        'type': 'date', //date 调出日期选择 datetime 调出日期时间选择 time 调出时间选择 ym 调出年月选择,
        'minDate': (new Date().getFullYear() - 3) + '-' + 1 + '-' + 1, //最小日期
        'maxDate': (new Date().getFullYear() + 3) + '-' + 12 + '-' + 31 //最大日期
    });
    $(".toDetail").click(function () {
        showDetail($(this))
        $(".layerTable").show();
    });
    $(".back").click(function () {
        $(".layerTable").hide();
    })
</script>