<style>
    /* 隐藏 Chrome 和 Safari 的上下箭头 */
input[type=number]::-webkit-inner-spin-button, 
input[type=number]::-webkit-outer-spin-button { 
  -webkit-appearance: none; 
  appearance: none;
  margin: 0; 
}

/* 隐藏 Firefox 的上下箭头 */
input[type=number] {
  -moz-appearance: textfield;
  appearance: textfield;
}

/* 隐藏输入框的边框 */
[v-cloak]{
    display: none !important;
}
</style>

{{ skus_data|json_script:'skusData' }}
{{ specs_data|json_script:'specsData' }}
<div id="skuApp" v-cloak>
    <section class="bk-hero bk-is-link bk-is-bold bk-is-small">
        <div class="bk-hero-body">
            <div class="bk-is-flex bk-is-justify-content-space-between bk-is-align-items-center">
                <p class="bk-is-size-3 bk-has-text-weight-bold">
                ￥{% verbatim %}{{ sku.price }}{% endverbatim %}
                </p>
                <p class="">销量：{% verbatim %}{{ sku.sales }}{% endverbatim %}</p>
            </div>
        </div>
    </section>
    <div class="bk-box bk-is-radiusless bk-is-shadowless1 m-0">
        {# 规格选择器 #}
        <template v-if="JSON.stringify(specsData) != '{}'">
            <div class="bk-field bk-is-grouped bk-is-grouped-multiline" 
                v-for="(values, key, i) in specsData" :key="key">
                <div class="bk-field">
                    <p class="bk-control">
                        <button class="bk-button bk-is-small bk-is-text px-0" style="text-decoration: none;">
                            {% verbatim %}{{ key }}:{% endverbatim %}
                        </button>
                    </p>
                </div>
                <div class="bk-field" v-for="(value, index) in values" :key="index">
                    <p class="bk-control">
                        <button class="bk-button bk-is-small"
                            :class="{ 'bk-is-link': value == seceltSpecs[i] }" 
                            @click="seceltSpecs[i] = value">
                            {% verbatim %}{{ value }}{% endverbatim %}
                        </button>
                    </p>
                </div>
            </div>
        </template>
        {# 购物车数量选择 #}
        <div class="bk-field bk-is-grouped bk-is-grouped-multiline">
            <div class="bk-field">
                <p class="bk-control">
                    <button class="bk-button bk-is-small bk-is-text px-0" style="text-decoration: none;">
                        数量：
                    </button>
                </p>
            </div>
            <div class="bk-field bk-has-addons">
                <p class="bk-control">
                    <button class="bk-button bk-is-small bk-is-shadowless" 
                        @click="count--" 
                        :disabled="count <= 1 || sku.stock <= 0">
                        <span class="bk-icon bk-is-small">
                            <i class="mdi mdi-minus"></i>
                        </span>
                    </button>
                </p>
                <p class="bk-control">
                    <input class="bk-input bk-is-small bk-has-text-centered bk-is-shadowless" 
                        type="number" 
                        v-model="count"
                        step="1"
                        readonly
                        min="1" 
                        :max="sku.stock">
                </p>
                <p class="bk-control">
                    <button class="bk-button bk-is-small bk-is-shadowless" 
                        @click="count++" 
                        :disabled="count >= sku.stock || sku.stock <= 0">
                        <span class="bk-icon bk-is-small">
                            <i class="mdi mdi-plus"></i>
                        </span>
                    </button>
                </p>
            </div>
            <div class="bk-field">
                <p class="bk-control">
                    <button class="bk-button bk-is-small bk-is-text px-0" style="text-decoration: none;color: rgb(142, 142, 142);">
                        库存：{% verbatim %}{{ sku.stock }}{% endverbatim %}
                    </button>
                </p>
            </div>
        </div>
    </div>
    {# 加入购物车和立即购买 #}
    <div class="bk-box bk-is-radiusless bk-is-shadowless1 m-0">
        <div class="bk-field bk-is-grouped">
            <p class="bk-control">
                <button 
                    class="bk-button bk-is-link px-6 bk-is-shadowless"
                    @click="addCarts"
                    :disabled="!sku.stock">
                    加入购物车
                </button>
            </p>
            <p class="bk-control">
              <button class="bk-button px-6 bk-is-shadowless"
                @click="buyNow"
                :disabled="!sku.stock">
                立即购买
              </button>
            </p>
        </div>
    </div>
</div>

<script>
    const { createApp } = bayke.vue
    const skuApp = createApp({
        data() {
            return {
                sku: {
                    id: 0,
                    price: 0,
                    sales: 0,
                    stock: 0,
                    line_price: 0,
                },
                count: 1,
                // 选择的规格
                seceltSpecs: [],
            }
        },
        computed: {
            skusData() {
                return JSON.parse(document.querySelector('#skusData').textContent)
            },
            specsData() {
                return JSON.parse(document.querySelector('#specsData').textContent)
            },
        },
        mounted() {
            // 默认规格
            values = Object.values(this.skusData)
            keys = Object.keys(this.skusData)
            this.sku = values.length > 0 ? values[0] : this.sku,
            this.seceltSpecs = keys.length > 0 ? keys[0].split(',') : []
        },
        methods: {
            // 规格选择
            specsChange(value, index) {
                this.seceltSpecs[index] = value
            },
            // 加入购物车
            addCarts() {
                let url = "{% url 'baykeshop_api:carts-list' %}"
                const formData = new FormData()
                formData.append('sku', this.sku.id)
                formData.append('quantity', this.count)
                fetch(url, {
                    method: 'POST',
                    headers: {
                        'X-CSRFToken': bayke.csrftoken,
                    },
                    body: formData,
                }).then(response => {
                    if (response.status == 201) {
                        window.location.reload()
                        return
                    } else if (response.status == 403) {
                        bayke.message.error('请登录后操作添加购物车', {
                            onClose: () => {
                                let pathname = window.location.pathname
                                window.location.href = '{% url "member:login" %}?next=' + pathname
                            },
                        })
                        return
                    }
                    return response.json()
                }).then(data => {
                    console.log(data)
                })
            },
            // 立即购买
            buyNow(){
                window.location.href = `{% url "shop:list" %}${this.sku.id}/${this.count}/`
            }
        },
        watch: {
            seceltSpecs: {
                handler(newValue, oldValue) {
                    let specs = newValue.join(',')
                    if (specs in this.skusData) {
                        this.sku = this.skusData[specs]
                    } else {
                        this.sku.stock = 0
                    }
                },
                deep: true,
            }
        }
    }).mount('#skuApp')
</script>