//  这是tab切换和单图五个图的轮播效果
class accondMouseShowClass {
  constructor(selectors, options = {}){
    const { activeClassName, contentSelector, contentActiveClassName } = options;
    this.LIST = document.querySelectorAll(selectors);
    this.CONTENT_LIST = document.querySelectorAll(contentSelector);
    this.ACTIVE_CLASSNAME = activeClassName;
    this.CONTENT_ACTIVE_CLASSNAME = contentActiveClassName;
  }
  init() {
    const that = this;
    for(let i = 0, len = this.LIST.length; i < len; i++){
      this.LIST[i].index = i;
      this.LIST[i].onmouseenter = function (){
        that.removeActiveClass();
        that.LIST[this.index].classList.add(that.ACTIVE_CLASSNAME);
        that.CONTENT_LIST[this.index].classList.add(that.CONTENT_ACTIVE_CLASSNAME);
      }
    }
  }
  removeActiveClass() {
    for(let i = 0, len = this.LIST.length; i < len; i++){
      this.LIST[i].classList.remove(this.ACTIVE_CLASSNAME);
      this.CONTENT_LIST[i].classList.remove(this.CONTENT_ACTIVE_CLASSNAME);
    }
  }
}

function tanmaTabs(){
  const tabsHeaderList = document.querySelectorAll('.chqs-qyhhzj-tabs-header-item');
  const tabsContentList = document.querySelectorAll('.chqs-qyhhzj-tabs-content-item');

  for(let i = 0, len = tabsHeaderList.length; i < len; i++){
    tabsHeaderList[i].index = i;
    tabsHeaderList[i].onclick = function () {
      removeTabsHeaderActiveClass();
      tabsHeaderList[this.index].classList.add('chqs-qyhhzj-tabs-header-item-active');
      tabsContentList[this.index].classList.add('chqs-qyhhzj-tabs-content-item-active');
    }
  }

  function removeTabsHeaderActiveClass () {
    for(let i = 0, len = tabsHeaderList.length; i < len; i++){
      tabsHeaderList[i].classList.remove('chqs-qyhhzj-tabs-header-item-active');
      tabsContentList[i].classList.remove('chqs-qyhhzj-tabs-content-item-active');
    }
  }

  const wordsItemActiveClassName = 'chqs-words-item-active';
  const contentActiveClassName = 'chqs-tabs-active-image'
  new accondMouseShowClass('.xshhzj>div', {
    activeClassName: wordsItemActiveClassName,
    contentSelector: '.xshhzj-content>img',
    contentActiveClassName: contentActiveClassName
  }).init();
  
  new accondMouseShowClass('.sophs>div', {
    activeClassName: wordsItemActiveClassName,
    contentSelector: '.sophs-content>img',
    contentActiveClassName: contentActiveClassName
  }).init();
  
  new accondMouseShowClass('.mgdzjg>div', {
    activeClassName: wordsItemActiveClassName,
    contentSelector: '.mgdzjg-content>img',
    contentActiveClassName: contentActiveClassName
  }).init();
  
  new accondMouseShowClass('.xsgcgl>div', {
    activeClassName: wordsItemActiveClassName,
    contentSelector: '.xsgcgl-content>img',
    contentActiveClassName: contentActiveClassName
  }).init();
  new accondMouseShowClass('.wxkhqyh>div', {
    activeClassName: wordsItemActiveClassName,
    contentSelector: '.wxkhqyh-content>img',
    contentActiveClassName: contentActiveClassName
  }).init();
}

tanmaTabs();


// class createTanmaWebsiteBanner {
//   constructor() {
//     this.index = 0;
//     this.dotIndex = 0;
//     this.timer = null;
//     this.autoplay = 5000;
//     this.handleDotEle = document.querySelectorAll('.tanma-banner-swiper-area-btnGroup>div');
//     this.bannerListEle = document.querySelector('.tanma-banner-swiper-area-list');
//     this.dotEleActiveClassName = 'tanma-banner-swiper-area-btnGroup-item-active';
//   }
//   init() {
//     const that = this;
//     for(let i=0, len = this.handleDotEle.length; i < len; i++) {
//       this.handleDotEle[i].index = i;
//       this.handleDotEle[i].onclick = function() {
//         that.index = this.index;
//         that.dotIndex = this.index;
//         clearInterval(that.timer);
//         that.handlePlay();
//         that.handleSport();
//       }
//     }
//     // this.handlePlay();
//   }
//   handlePlay() {
//     this.timer = setInterval(() => {
//       ++this.index;
//       ++this.dotIndex;
//       this.handleSport();
//     }, this.autoplay);
//   }
//   handleSport() {
//     this.bannerListEle.style.transition = 'transform 0.9s linear 0s';
//     this.bannerListEle.style.transform = `translate(${-this.index * 100}%)`;

//     for (const ele of this.handleDotEle) {
//       ele.classList.remove(this.dotEleActiveClassName);
//     }
//     if(this.dotIndex >= 5) this.dotIndex = 0;
//     this.handleDotEle[this.dotIndex].classList.add(this.dotEleActiveClassName);

//     if(this.index === 5) {
//       const timer = setTimeout(() => {
//         this.index = 0;
//         this.bannerListEle.style.transition = 'none 0s';
//         this.bannerListEle.style.transform = `translate(0)`;
//         clearTimeout(timer);
//       }, 900);
//     }
//   }
// }

// new createTanmaWebsiteBanner().init();