{% extends 'shop/member/member.html' %}

{% load shoptags %}

{% block member_title %}订单评价{% endblock %}

{% block member %}

{% for ordersku in page_obj %}
<div class="box has-background-primary-light" id="skuComment{{ ordersku.id }}">
    <div class="is-flex is-justify-content-space-between box is-radiusless is-marginless is-shadowless has-background-light">
        <div>
            <figure class=" image is-64x64">
                <img src="{{ ordersku.sku_json.img }}" alt="{{ ordersku.sku_json.title }}" srcset="">
            </figure>
        </div>
        <div class="has-background-danger1 is-flex is-flex-direction-column is-justify-content-center is-flex-grow-1 pl-3 pr-3">
            <h1 class="has-text-weight-bold">{{ ordersku.sku_json.title }}</h1>
            <div class="is-flex">
                {% for op, value in sku.sku_json.specs.items %}
                <span class="mr-3 has-text-grey-light">{{ op }}:{{ value }}</span>
                {% endfor %}
            </div>
        </div>
        <div class="has-background-danger1 is-flex is-justify-content-center is-align-items-center">
            <p class="has-text-danger-dark">¥ {{ ordersku.sku_json.price }} x {{ ordersku.count }}</p>
        </div>
    </div>
    <div class="dropdown-divider"></div>
    <b-field>
        <b-input 
            custom-class="is-radiusless" 
            type="textarea" 
            placeholder="请发表您对货物最真实的感受评价..." 
            v-model="content" 
            :has-counter="false"
            maxlength="200">
        </b-input>
    </b-field>
    <div class="block">
        <b-radio v-model="radio"
            name="comment_choices{{ordersku.id}}"
            native-value="5">
            好评
        </b-radio>
        <b-radio v-model="radio"
            name="comment_choices{{ordersku.id}}"
            native-value="3">
            中评
        </b-radio>
        <b-radio v-model="radio"
            name="comment_choices{{ordersku.id}}"
            native-value="1">
            差评
        </b-radio>
    </div>
    <div class=" has-text-right">
        <b-button type="is-primary" @click="pushComment">发表评价</b-button>
    </div>
</div>
<script>
    var skuComment = 'skuComment{{ ordersku.id }}'
    skuComment = new Vue({
        el: '#skuComment{{ ordersku.id }}',
        delimiters: ['{$', '$}'],
        data: {
            content: '',
            radio:'5'
        },
        methods: {
            pushComment(){
                // console.log('评价', this.radio, this.content)
                fetch("{% url 'system:systemapi:order-comment' %}", {
                    method: 'POST',
                    headers: {
                        'Content-Type': 'application/json',
                        'X-Requested-With': 'XMLHttpRequest',
                        'X-CSRFToken': bayke.getCookie('csrftoken'),
                    },
                    body: JSON.stringify({
                        object_id: Number('{{ ordersku.id }}'),
                        app_label: 'shop',
                        model: 'baykeshopordersku',
                        content: this.content,
                        score: Number(this.radio),
                        tag: '{{ ordersku.sku.spu.id }}'
                    }),
                }).then(response => bayke.handleJSONResponse(response)).then(data => {
                    // 处理响应数据
                    console.log(data)
                    location.href = '{% url "shop:spu-detail" ordersku.sku.spu.id %}'
                }).catch(error => {
                    // 处理错误
					let message = Object.values(error).join()
					bayke.toastMessage('is-danger', message)
                });
            }
        }
    })
</script>
{% endfor %}
    
{% endblock %}


{% block extravue %}{% endblock %}
    