(function () {
    'use strict';

    if (typeof Vue === 'undefined') {
        return;
    }

    var createApp = Vue.createApp;

    var productEl = document.getElementById('product-app');
    if (productEl) {
        createApp({
            data: function () {
                return {
                    q: '',
                    products: window.PRODUCTS || []
                };
            },
            computed: {
                filtered: function () {
                    var kw = this.q.trim().toLowerCase();
                    if (!kw) {
                        return this.products;
                    }
                    return this.products.filter(function (p) {
                        return (p.name + ' ' + p.code + ' ' + p.desc).toLowerCase().indexOf(kw) !== -1;
                    });
                }
            }
        }).mount(productEl);
    }

    var contactEl = document.getElementById('contact-app');
    if (contactEl) {
        createApp({
            data: function () {
                return {
                    form: { name: '', email: '', phone: '', company: '', subject: '', message: '' },
                    errors: {},
                    submitting: false,
                    message: '',
                    ok: false
                };
            },
            computed: {
                remaining: function () {
                    return 1000 - this.form.message.length;
                },
                messageClass: function () {
                    return this.ok
                        ? 'rounded-lg border border-success bg-success-soft px-4 py-3 text-sm text-success'
                        : 'rounded-lg border border-danger bg-danger-soft px-4 py-3 text-sm text-danger';
                }
            },
            methods: {
                submit: function () {
                    var self = this;
                    self.submitting = true;
                    self.message = '';
                    self.errors = {};

                    var tokenEl = document.querySelector('meta[name="csrf-token"]');
                    var token = tokenEl ? tokenEl.getAttribute('content') : '';

                    fetch('/contact', {
                        method: 'POST',
                        headers: {
                            'Content-Type': 'application/json',
                            'Accept': 'application/json',
                            'X-CSRF-TOKEN': token
                        },
                        body: JSON.stringify(self.form)
                    })
                        .then(function (res) { return res.json(); })
                        .then(function (data) {
                            self.ok = !!data.ok;
                            self.message = data.message || (self.ok ? '提交成功。' : '提交失败。');
                            if (self.ok) {
                                self.form = { name: '', email: '', phone: '', company: '', subject: '', message: '' };
                            } else if (data.errors) {
                                self.errors = data.errors;
                            }
                        })
                        .catch(function () {
                            self.ok = false;
                            self.message = '网络异常，请稍后重试。';
                        })
                        .finally(function () {
                            self.submitting = false;
                        });
                }
            }
        }).mount(contactEl);
    }
})();