var XunluForm = class extends HTMLElement {
  connectedCallback() {
    this.$submitBtn = $(this).find('.xunlu-form_submit')
    this.bindEvent();

  }
  bindEvent() {
    this.$submitBtn.click(() => {
        this.submit();
      });
  }
  submit() {
    const defaultValues = {
      detail: '',
      product_name: '',
      product_icon: '',
      country_code: '',
      country_str: '',
      country_icon: '',
      country_code: '1',
      country_str: 'US',
      source: 5,
      status: 0,
      forms: [
        {
          kind: 'single_line',
          title: 'Quantity',
          value: '22'
        },
        {
          kind: 'submitText',
          title: 'Submit'
        },
        {
          kind: 'attachment',
          title: 'Add attachment',
          value: []
        }
      ]
    };
    let ip = '1';
    let errorStr = '';
    this.querySelectorAll('.xunlu-form_value').forEach((n) => {
      let value = $(n).val();
      const title = $(n).data('title');
      const kind = $(n).attr('name');
      const required = $(n).data('required');
      if (required && !value) {
        errorStr = `${title} is required`;
      }

      if (kind === 'phone' && value) {
        value = `${ip}-${value}`;
      }

      if (kind === 'detail') {
        defaultValues.detail = value;
      }
      const obj = {
        kind: kind,
        title: title,
        value: value
      };
      defaultValues.forms.push(obj);
    });
    if (errorStr) {
      this.errorMsg(errorStr);
      return;
    }
    this.post(defaultValues);
  }
  post(data) {
    const isLoading = this.$submitBtn.hasClass('loading')
    if (isLoading) {
      return
    }
    this.$submitBtn.addClass('loading');
    $.ajax({
      url: 'https://quote.funpinpinapps.com/api/app/quote',
      // url: 'https://quote.funpinpinapps.top/api/app/quote',
      headers: {
        'x-fpp-shop': Shopify.shop,
        'content-type': 'application/json; charset=UTF-8'
      },
      method: 'POST',
      data: JSON.stringify(data),
      dataType: 'json',
      success: (res) => {
        this.success();
      },
      error: function () {},
      complete:() => {
        this.$submitBtn.removeClass('loading');
      }
    });
  }
  success() {
    $(this)
      .find('.xunlu-form_result')
      .addClass('xunlu-success')
      .removeClass('xunlu-error')
      .html('Data sent successfully!');
      this.querySelectorAll('.xunlu-form_value').forEach((n) => {
        $(n).val('')
      })
    if (window._paq) window._paq.push(['trackEvent', 'plugin', 'Click', 'quote', 1]);
    if (window.gtag) window.gtag('event', 'submit_quote', { 'event_category': 'engagement', 'value': 1 });
  }
  errorMsg(str) {
    $(this).find('.xunlu-form_result').removeClass('xunlu-success').addClass('xunlu-error').html(str);
  }
  close() {
    $(this).removeClass('active loading');
  }
};
window.customElements.define('xunlu-form', XunluForm);

(() => {
  function bindFooterBlockTootle (el) {
    $(el).click(function() {
      const $blockMain = $(this).parent().find('.footer-block_main')
      if ($blockMain.height() === 0) {
        $(el).parent().removeClass('closeHeight')
        $blockMain.height($blockMain.attr('xunlu-height'))
      } else {
        $(el).parent().addClass('closeHeight')
        $blockMain.height(0)
      }
    })
  }
  if ($(window).width() < 1000) {
    $('.footer-block-container .widget-title').each(function(i, el) {
      const $blockMain = $(el).parent().find('.footer-block_main')
      $blockMain.attr('xunlu-height', $blockMain.outerHeight())
      $blockMain.height(0)
      bindFooterBlockTootle(el)
      $(el).parent().addClass('closeHeight')
    })
  }

})()

var XunluFaqSimple = class extends HTMLElement {
  connectedCallback() {
    this.$container = $(this)
    this.$list = this.$container.find('.aqua-faq-simple_faqlist-main').children('.aqua-faq-simple_item') 
    this.bindEvent()
  }
  bindEvent () {
    this.$list.each((i, el) => {
      $(el).find('.aqua-faq-simple_item-title').click(() => {
        const height = $(el).find('.aqua-faq-simple_item-main .aqua-faq-simple_item-content').outerHeight()

        const $main = $(el).find('.aqua-faq-simple_item-main')
        if ($(el).hasClass('open')) {
          $(el).removeClass('open')
          $main.height(0)
        } else {
          $(el).addClass('open')
          $main.height(height)
        }
      })
    })
  }
};
window.customElements.define('xunlu-faq-simple', XunluFaqSimple);



var ArticleContentAchor = class extends HTMLElement {
  connectedCallback() {
    const $elList = $('.xunlu-article_content-main h2,.xunlu-article_content-main h3')
    if ($elList.length === 0) {
      this.cleanAchor()
      return
    }
    this.init()
      this.setOffsetTop()
  }
  init () {
    const $elList = $('.xunlu-article_content-main h2,.xunlu-article_content-main h3')
    const $posList = []
    let $lastH2 = null
    this.minHeight = $('.Aqua-header').outerHeight()  + 100
    $elList.each((i, el) => {
      const tagName = $(el).prop("tagName")
      if (tagName === 'H2') {
        const $h2 = {
          type: tagName,
          text: $(el).text(),
          top: $(el).offset().top - this.minHeight,
          children: []
        }
        $posList.push($h2)
        $lastH2 = $h2
      } else if (tagName === 'H3') {
        const $h3 = {
          type: tagName,
          text: $(el).text(),
          top: $(el).offset().top - this.minHeight
        }
        if ($lastH2) {
          $lastH2.children.push($h3)
        } else {
          $posList.push($h3)
        }
      }
    })
    this.addDom($posList)
  }
  setOffsetTop () {
    $('.xunlu-article-achor').css({opacity: 1})
  }
  addDom ($posList) {
    let $str = ``
    $posList.forEach(item => {
      let $li = `<dl>`
      if (item.type === 'H2') {
        $li += `<dt >
        ${item.children.length ? `<span class="xunlu-article_icon"><svg focusable="false" viewBox="0 0 8 12">
        <path fill="none" d="M7 1L2 6L7 11" stroke="currentColor" ></path>
      </svg></span>` : ''}<p class="xunlu-article_title xunlu-artice_anchor" data-pos="${item.top}">${item.text}</p>
        </dt>`
        if (item.children.length) {
          let $children = ``
          item.children.forEach(c => {
            $children += `<div data-pos="${c.top}" class="xunlu-article_title xunlu-artice_anchor">${c.text}</div>`
          })
          $li += `<dd><div article-collapse-content >${$children}</div></dd>`
        }
      } else if (item.type === 'H3'){
        $li += `<dd>
        <div article-collapse-content >
          <div data-pos="${item.top}" class="xunlu-article_title xunlu-artice_anchor">${item.text}</div>
        </div>
      </dd>`
      }
      $li += '</dl>'
      $str += $li
    })
    $('.xunlu-article_content-achor_main-content').html($str)
    this.bindEvent()
  }
  bindEvent () {
    $('.xunlu-article_content-achor_main-content .xunlu-article_title, .xunlu-article_content-achor_main-content dd').click(function(e) {
      const $pos = $(e.target).attr('data-pos')
      $("html, body").stop().animate({scrollTop:$pos}, 500, 'swing');
    }) 
    $('.xunlu-article_icon').click(function(e) {
      $(".xunlu-article_content-achor_main-content dl").each(function(i, el) {
        if ($(el).is($(e.target).closest('dl'))) {
          if ($(el).hasClass('open')) {
            const $dd =  $(el).find('dd')
            $dd.height(0)
            $(el).removeClass('open')
          } else {
            const $dd =  $(el).find('dd')
            var initHeight = $dd.find('[article-collapse-content]').outerHeight()
            $dd.height(initHeight)
            $(el).addClass('open')
          }
        } else {
          const $dd =  $(el).find('dd')
          var initHeight = $dd.find('[article-collapse-content]').outerHeight()
          $dd.height(0)
          $(el).removeClass('open')
        }
      })
    })
  }
  cleanAchor () {
    $('article_content-achor').remove()

    $('.xunlu-article_content-main').removeClass('xunlu-article_content-main')
  }
  
};
window.customElements.define("article_content-achor", ArticleContentAchor);