
{% load i18n %}

<ol class="breadcrumb">
    <li> {% trans "康年皇冠" %}</li>
    <li> {% trans "标签状态查询" %}</li>
</ol>
{% verbatim %}
<div id="kangnian-labelquery">
    <div class="kn-labelquery-wrapper">
        <div class="kn-labelquery-container">
            <div class="kn-searchbar">
                <input placeholder='在此输入标签号码' v-model="labelcode" class="kn-labelquery-input"/>
                <div class="kn-query-btn" @click="requestLabelInfo">
                    查询
                </div>
            </div>
            <div class="kn-labelquery-info-wrapper" >
                <div class="kn-labelquery-info-item">
                    <div class="kn-labelquery-info-title">
                        是否激活
                    </div>
                    <div class="kn-labelquery-info-content">
                        {{has_info?'已激活':'否'}}
                    </div>
                </div>
                <div v-if="has_info">
                    <div class="kn-labelquery-info-item">
                        <div class="kn-labelquery-info-title">
                            是否启用
                        </div>
                        <div class="kn-labelquery-info-content">
                            {{is_active?'已启用':'尚未启用'}}
                        </div>
                    </div>
                    <div class="kn-labelquery-info-item">
                        <div class="kn-labelquery-info-title">
                            是否已核销
                        </div>
                        <div class="kn-labelquery-info-content">
                            {{is_writeoffed?'已核销':'尚未核销'}}
                        </div>
                    </div>
                    <div class="kn-labelquery-info-item">
                        <div class="kn-labelquery-info-title">
                            产品名称
                        </div>
                        <div class="kn-labelquery-info-content">
                            {{product_name}}
                        </div>
                    </div>
                    <div class="kn-labelquery-info-item">
                        <div class="kn-labelquery-info-title">
                            激活时间
                        </div>
                        <div class="kn-labelquery-info-content">
                            {{tm}}
                        </div>
                    </div>
                    <div class="kn-labelquery-info-item">
                        <div class="kn-labelquery-info-title">
                            支付方式
                        </div>
                        <div class="kn-labelquery-info-content">
                            {{payment_method==0?'现金结算':payment_method==1?'赊账':'未指定'}}
                        </div>
                    </div>
                </div>





            </div>
        </div>
    </div>

</div>
{% endverbatim %}
<style>
.kn-labelquery-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
}
.kn-labelquery-container {
    width: 50%;
    background: #fff;
    padding: 2rem;
}
.kn-searchbar {
    display: flex;
    justify-content: space-between;
}
.kn-query-btn {
    background: #588ac0;
    border-radius: 7px;
    color: #fff;
    font-weight: bold;
    display: flex;
    justify-content: center;
    align-items: center;
    padding: 0.5rem 2.2rem;
    margin-left: 10%;
    cursor: pointer;
}
.kn-query-btn:active {
    filter: brightness(0.8);
}
.kn-labelquery-input {
    border: none;
    outline: none;
    flex-grow: 1;
    border-bottom: 1px solid #d5d5d5;
}
.kn-labelquery-info-item {
    display: flex;
    padding: 1rem;
    border-bottom: 1px solid #d5d5d5;
    text-align:center;
    margin-top: 0.5rem;
}
.kn-labelquery-info-title {
    width: 30%;
    border-right: 1px solid #d5d5d5;
}
.kn-labelquery-info-content {
    width: 70%;
}
</style>
<script>
    
    var app = new Vue({
        el: '#kangnian-labelquery',
        data:{
            labelcode: '',
            has_info: false,
            is_active :false,
            is_writeoffed: false,
            payment_method: '',
            product_name:'',
            tm: '',
            user: ''
        },
        methods: {
            requestLabelInfo() {
                var that = this;
                $.ajax({
                    url: '/sales/kangnian_labelquery/?labelcode='+that.labelcode,
                    success: function(res) {
                        console.log(res);
                        if(res.e == '') {
                            that.labelInfo = res.data;
                            that.has_info = res.has_info;
                            if(res.has_info){
                                that.is_active=res.data.is_active,
                                that.is_writeoffed= res.data.is_writeoffed,
                                that.payment_method= res.data.payment_method,
                                that.product_name=res.data.product_name,
                                that.tm= res.data.tm,
                                that.user= res.data.user
                            }

                        }else {
                            if(res.e == 'no labelcode') {
                                alert('请输入标签号码');
                            }else {
                                alert(res.e);
                            }
                        }
                    }
                })
            }
 },
        mounted() {
            
        }
    })


</script>