@using Hncore.Infrastructure.Data
@using Hncore.Pass.Vpn.Domain
@using Hncore.Infrastructure.Extension
@using ViewComponents
@model PageData<ProductOrderEntity>
@{
    Layout = "_UserLayout";
}
<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" name="BTime" 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" name="ETime" 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.ProductId" style="height:35px;">
                <option value="0" selected >全部产品</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.KewWord" placeholder="账号" class="bianhao" />
        <button type="button" class="btn btn-primary" v-on:click="search">查询</button>
    </div>
</div>

<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.Accounts</td>
            <td>@item.ConnectCount</td>
            <td>@item.DayCount</td>
            <td>@item.DayPrice</td>
            <td>@item.PaymentAmount</td>
            <td>@item.RefundAmount</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">
        var app = new Vue({
        el: '#app',
        data: {
            productWithPackage: [],
            packages: [],
            searchModel: {
                ProductId:@this.Context.Request.GetInt("ProductId"),
                PackageId:"0",
                Keyword:'',
                BTime: '',
                ETime: ''
            }
        },
        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: {
            selectFn: function (e) {
                console.log(e.target.value) // 选择项的value
            },
            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("&");
            }
        }
    })
    $(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);
        });
        //退款
        $(".btn-refund").on('click', function () {
            var accounts = [];
            $.each($('input:checkbox:checked'), function () {
                accounts.push($(this).val())
            });
            if (accounts.length == 0) { alert('请选择账号'); return; }
            $.ajax({
                type: 'GET',
                url: '/api/course/v1/order/Refund?account=' + accounts[0],
                success: function (res) {
                    if (res.Code == 10000) {
                        alert('退款成功')
                    } else {
                        alert(res.Message)
                    }
                }
            });
        })
    });
</script>