
{% load i18n %}

<ol class="breadcrumb">
    <li> {% trans "激活" %}</li>
    <li> {% trans "批量激活" %}</li>
</ol>
{% verbatim %}
<div>
    <div id="kangnian_activation">
        <div style="display: flex;">
            <div style="padding: 1rem;">
                <div style="font-weight: bold;">
                    起始号码
                </div>
                <div>
                    <input v-model="start_labelcode" placeholder="在此输入起始号码"/>
                </div>
            </div>
            <div style="padding: 1rem;">
                <div style="font-weight: bold;">
                    结束号码
                </div>
                <div>
                    <input v-model="end_labelcode" placeholder="在此输入结束号码"/>
                </div>
            </div>
            <div style="padding: 1rem;">
                <div style="font-weight: bold;">
                    数量
                </div>
                <div>
                    <input v-model="num" placeholder="请输入数量"/>
                </div>
            </div>
        </div>
        <div style="display: flex;">
            <div style="width: 10rem;padding: 1rem;">
                <div style="font-weight: bold;">
                    产品类型
                </div>
                <div v-for="(v,i) in product_list" class="product-list-item"
                    @click="selectProduct(v)"
                     :style="v.id==product_selected.id?'background:#588ac0;color:#fff;':''">
                   {{v.name}}
                </div>
            </div>
            <div style="width: 10rem;padding: 1rem;">
                <div style="font-weight: bold;">
                    付款方式
                </div>
                <div class="product-list-item"
                    @click="()=>{this.payment_index=0;}"
                     :style="payment_index==0?'background:#588ac0;color:#fff;':''">
                  现金结算
                </div>
                <div class="product-list-item"
                    @click="()=>{this.payment_index=1;}"
                     :style="payment_index==1?'background:#588ac0;color:#fff;':''">
                  赊账
                </div>
            </div>
            <div>
                <div @click="activate" class="activate-btn">
                    激活
                </div>
            </div>
        </div>
        <div style="padding: 1rem;" >
            <div style="font-weight: bold;">
                本次激活记录
            </div>
            <div>
                <div v-for="(v, i) in history">
                    <div v-if="v.e==''">
                        请求成功 - 本次激活了 {{v.cnt}} 个号码 - {{v.start}} ~ {{v.end}}
                    </div>
                    <div v-else>
                        请求失败 - 原因: {{v.e}}
                    </div>
                </div>
            </div>
        </div>
    </div>
</div>
{% endverbatim %}
<style>
    .product-list-item {
        cursor: pointer;
        padding: 0.5rem;
        border-radius: 7px;
    }
    #kangnian_activation {
        padding: 1rem;
        background: #fff;
    }
    .activate-btn {
        background:#588ac0;
        color:#fff;
        padding:0.5rem 2rem;
        margin-top:3rem;
        margin-left:3rem;
        cursor:pointer;
        border-radius:7px;
        font-weight: bold;
    }
</style>
<script>
    
    var app = new Vue({
        el: '#kangnian_activation',
        data:{
            product_list: [],
            product_selected: {},
            payment_index: 0,
            start_labelcode:'',
            end_labelcode:'',
            history: [],
			num:''
        },
        methods: {
            requestProductList() {
                var that = this;
                $.ajax({
                    url: '/wx/kangnian/product_list/',
                    success: function(res) {
                        console.log(res.list);
                        if(res.e == '') {
                            that.product_list = res.list;
                            that.product_selected = res.list[0];
                        }
                    }
                })
            },
            selectProduct(v) {
                this.product_selected = v;
            },
            activate(){
                var that = this;
                console.log(this.startcode);
                var postData = {
                        "user_id": `{{ user.id }}`,
                        "labelcode": '',
                        "start_labelcode": this.start_labelcode,
                        "end_labelcode": this.end_labelcode,
                        "product_id": this.product_selected.id,
                        "payment_method": this.payment_index,
                        "is_check": 0,
						"num":this.num
                    }
                $.ajax({
                    url:'/wx/kangnian/activate/',
                    type:'POST',
                    contentType: "application/json;charset=utf-8",
                    dataType: 'json',
                    data: JSON.stringify(postData),
                    success: function(res) {
                        console.log('activate', res);
                        var history = that.history;
                        if(res.e == '') {
                            history.push({
                                "tm": new Date(),
                                "cnt": res.cnt,
                                "e": res.e,
                                "start": that.start_labelcode,
                                "end": that.end_labelcode
                            })
                        }else {
                            history.push({
                                "tm": new Date(),
                                "cnt": res.cnt,
                                "e": res.e,
                                "start": that.start_labelcode,
                                "end": that.end_labelcode
                            })
                        }
                        that.history = history;
                    }
                })
            }
        },
        mounted() {
            this.requestProductList();
        }
    })


</script>