@{
    Layout = "_UserLayout";
}

<div id="app">
    <div class="boxes margin-top-5 clearfix">
        <div style="display: flex; align-items: center;">
            <input v-model="ip" type="text" style="width: 350px; margin-right: 20px;" placeholder="请输入ip地址并点击保存白名单" />
            <button v-on:click="set_ip()" type="button" class="btn btn-primary"
                style="outline: none; box-shadow: none;">保存</button>
        </div>
        <div class="margin-top-30">
            <h5>当前白名单列表
                <span class="text-warning">当前白名单数量：{{ whiteLimit }} 个</span>
                <button type="button" class="btn btn-new btn-xs" data-toggle="modal" data-target="#whitelistModal"
                    style="outline: none; box-shadow: none; margin-left: 60px;" v-on:click="get_package_details()">
                    调整白名单上限
                </button>
            </h5>

            <div class="modal fade" id="whitelistModal" tabindex="-1" role="dialog">
                <div class="modal-dialog" role="document">
                    <div class="modal-content">
                        <div class="modal-header">
                            <h5 class="modal-title">调整白名单上限</h5>
                            <button type="button" class="close" data-dismiss="modal">
                                <span>&times;</span>
                            </button>
                        </div>
                        <div class="d-flex align-items-center" style="gap: 15px;">
                            <div class="modal-body btn-group" role="group">
                                <button type="button" class="btn btn-new btn-xs" v-on:click="decreaseLimit"
                                    style=" outline: none; box-shadow: none;" :disabled="tempWhiteLimit <= 1">-</button>
                                <span class="btn btn-default btn-xs">{{ tempWhiteLimit }}</span>
                                <button type="button" class="btn btn-new btn-xs" v-on:click="increaseLimit"
                                    style="outline: none; box-shadow: none;" :disabled="tempWhiteLimit >= 20">+</button>
                            </div>
                            <div style="margin-left: 2rem; margin-bottom: 1rem">
                                <span v-if="tempDiscount === 10">价格<span class="text-danger">无折扣</span></span>
                                <span v-else class="text-danger">
                                    当前已应用 {{ tempDiscount*10 }}% 折扣
                                </span>
                            </div>
                            <div style="margin-left: 2rem; margin-bottom: 1rem">
                                调整后到期时间：{{ new Date(newExpre).toLocaleString() }}
                            </div>
                        </div>
                        <div class="modal-footer">
                            <button type="button" class="btn btn-secondary" data-dismiss="modal">关闭</button>
                            <button type="button" class="btn btn-primary" v-on:click="set_white_limit()">确定</button>
                        </div>
                    </div>
                </div>
            </div>
            <div class="col-sm-12">
                <table class="products-table responsive tablesaw tablesaw-stack" data-tablesaw-mode="stack">
                    <thead>
                        <tr>
                            <th>IP地址</th>
                            <th>设置时间</th>
                            <th>锁定状态</th>
                            <th>操作</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr v-for="item in ip_list">
                            <td style="display:none;">{{item.id}}</td>
                            <td>{{item.ip}}</td>
                            <td>{{item.createTime}}</td>
                            <td>{{item.isLocked}}</td>
                            <td>
                                <a v-if="item.isLocked=='未锁定'" v-on:click="lock_ip(item.id,1)"
                                    class="btn btn-new">锁定</a>
                                <a v-if="item.isLocked=='已锁定'" v-on:click="lock_ip(item.id,0)"
                                    class="btn btn-new">解锁</a>
                                <a class="btn btn-danger" v-on:click="delete_ip(item.id)">删除</a>
                            </td>
                        </tr>
                    </tbody>
                </table>
            </div>
        </div>
    </div>
</div>
<script>
    var baseUrl = '@ViewData["BaseUrl"]';
    var vm = new Vue({
        el: '#app',
        data: {
            ip_list: [],
            ip: '',
            whiteLimit: 1, //获取当前白名单的数量
            tempWhiteLimit: 1, //模态框中白名单的数量
            tempDiscount: 10,
            detail: {},
            newExpre: 0,
        },
        created: function () {
            this.get_list()
            this.get_white_limit()
            this.get_package_details()
        },
        methods: {
            get_list() {
                let data = {
                    cookie: document.cookie,
                }
                var that = this;

                $.ajax({
                    type: 'POST',
                    url: `${baseUrl}/http/user/white_list_su`,
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function (xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.ip_list = res.data
                    }
                });
            },
            set_ip() {
                let data = {
                    cookie: document.cookie,
                    data: { ip: this.ip }
                }
                var that = this;

                $.ajax({
                    type: 'POST',
                    url: `${baseUrl}/http/user/create_white_ip_su`,
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function (xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.get_list()
                    }
                });
            },
            lock_ip(id, status) {
                var lock_ip = {};
                lock_ip.id = id;
                lock_ip.lock = status;
                let dataa = {
                    cookie: document.cookie,
                    data: lock_ip
                }
                var that = this;

                $.ajax({
                    type: 'POST',
                    url: `${baseUrl}/http/user/lock_ip_su`,
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(dataa),
                    beforeSend: function (xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.get_list()
                    }
                });
            },
            delete_ip(id) {
                var dalete_ip = {};
                dalete_ip.id = id;
                let dataa = {
                    cookie: document.cookie,
                    data: dalete_ip
                }
                var that = this;

                $.ajax({
                    type: 'POST',
                    url: `${baseUrl}/http/user/delete_ip_su`,
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(dataa),
                    beforeSend: function (xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        that.get_list()
                    }
                });
            },
            // 添加白名单数量
            setTempWhiteLimit(value) {
                this.tempWhiteLimit = Math.min(20, value)
                this.tempWhiteLimit = Math.max(1, value)
                this.tempDiscount = Math.max(6, 11 - value)

                this.newExpre = this.calc_remain(this.detail.expireTime, this.whiteLimit, this.tempWhiteLimit)
            },
            increaseLimit() {
                this.setTempWhiteLimit(this.tempWhiteLimit + 1)
            },
            // 减少白名单数量
            decreaseLimit() {
                this.setTempWhiteLimit(this.tempWhiteLimit - 1)
            },
            //确定后把最新白名单数量调接口给后端
            set_white_limit() {
                let data = {
                    cookie: document.cookie,
                    data: { maxAmount: this.tempWhiteLimit }
                }
                var that = this;

                $.ajax({
                    type: 'POST',
                    url: `${baseUrl}/http/user/white_limit_set_su`,
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify(data),
                    beforeSend: function (xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: function (res) {
                        if (res.code > 0) {
                            $('#whitelistModal').modal('hide');
                            alert('白名单上限设置成功！');
                        } else {
                            alert('设置失败：' + (res.message || '未知错误'));
                        }
                    },
                    error: function () {
                        alert('设置失败，请重试！');
                    }
                });
            },

            // 获取白名单当前的数量
            get_white_limit() {
                $.ajax({
                    type: 'POST',
                    url: `${baseUrl}/http/user/white_limit_get_su`,
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({
                        cookie: document.cookie,
                    }),
                    beforeSend: function (xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: (res) => {
                        if (res.code > 0) {
                            this.whiteLimit = res.data
                            this.setTempWhiteLimit(res.data)
                        }
                    }
                });
            },

            // 获取最新套餐详情
            get_package_details() {
                $.ajax({
                    type: 'POST',
                    url: `${baseUrl}/http/user/get_unlimited_available`,
                    dataType: "json",
                    contentType: "application/json",
                    data: JSON.stringify({
                        cookie: document.cookie,
                    }),
                    beforeSend: function (xhr) {
                        xhr.withCredentials = true;
                    },
                    crossDomain: true,
                    success: (res) => {
                        if (res.code < 0) alert('获取套餐信息失败')
                        this.detail = res.data
                        this.setTempWhiteLimit(this.tempWhiteLimit)
                    }
                });
            },

            // 计算修改白名单上限后的剩余时间
            calc_remain(expire, maxWhitelist, newMaxWhitelist) {

                // 套餐剩余秒数
                const now = Math.floor(Date.now() / 1000)
                const prev = expire ?? now
                const remain = prev - now

                // 白名单比值，时间份数
                const multiple = maxWhitelist / newMaxWhitelist

                // 折扣比值，新折扣作为基准
                const oldDiscount = Math.max(.6, 1 - .1 * (maxWhitelist - 1))
                const newDiscount = Math.max(.6, 1 - .1 * (newMaxWhitelist - 1))
                const offset = oldDiscount / newDiscount

                // 手续费，固定 1%
                const fee = 99 / 100

                // 返回新到期时间
                return Math.floor(remain * multiple * offset * fee + now) * 1000
            }
        }
    });
</script>