$(function () {
  $.ajax({
    url: "jsons/salary.json",
    success: (res) => {
      const { features, program, industries, priceList } = res;

      // 功能点
      $("#salary_features").append(renderFeatrues(features));
      $("#salary_features_mobile").append(renderFeatruesMobile(features));

      // 全场景人事解决方案
      $("#salary_program").append(renderProgram(program));

      const programMobile_1 = [];
      const programMobile_2 = [];
      program.forEach((item, i) => {
        if (i > 3) {
          programMobile_2.push(item);
        } else {
          programMobile_1.push(item);
        }
      });

      $("#salary_program_mobile_1").append(
        renderProgram(programMobile_1, "mobile_1")
      );
      $("#salary_program_mobile_2").append(
        renderProgram(programMobile_2, "mobile_2")
      );

      /*
            // 智能薪酬 行业版
            industries.forEach((item, ) => {
                $("#salary_industries").append(renderIndustries(item))
                $("#salary_industries_mobile").append(renderIndustriesMobile(item))
            });
            */

      // 行业版移动端 轮播
      swiperSalary("features_swiper", 0);
      // 解决方案 轮播
      swiperSalary("program_swiper");
      // 解决方案移动端 轮播
      swiperSalary("mobile_1_swiper");
      swiperSalary("mobile_2_swiper");

      // 产品价格渲染，PC端
      // priceList.forEach(item => {
      //     $("#salaryPriceList").append(renderPriceList(item));
      //     $("#salaryPriceListMobile").append(renderPriceListMobile(item));
      // })
      // 其他行业模板渲染
      // $("#otherContent").html(template("other-content-temp", res));
      // 其他行业轮播事件
      // $("#otherContent .swiper-container").each(function (i, val) {
      //   if ($(val).attr("data-slide-length") > 1) {
      //     new Swiper(val, {
      //       loop: true,
      //       autoplay: {
      //         delay: 4000,
      //         disableOnInteraction: false,
      //       },
      //       on: {
      //         slideChange: function () {
      //           const prev = $(val).prev();
      //           const ul = prev[0];
      //           if (ul) {
      //             setTimeout(() => {
      //               var index =
      //                 $(val)
      //                   .find(".outer-slide.swiper-slide-active")
      //                   .eq(0)
      //                   .attr("data-swiper-slide-index") || 0;
      //               $(ul)
      //                 .find("li")
      //                 .removeClass("active")
      //                 .eq(+index)
      //                 .addClass("active");
      //             }, 0);
      //           }
      //         },
      //       },
      //     });
      //   }
      // });
      // 其他行业tab切换事件
      // $("#otherContent .tabs li").click(function () {
      //   var s = $(this).parent().next()[0].swiper;
      //   s.slideTo($(this).index() + 1, 300, false);
      //   s.autoplay.stop();
      // });
    },
  });

  /**
   * id 轮播节点
   * speed 播放速度
   */
  swiperSalary = (id, speed) => {
    const el = `#${id}`;
    const nav = `#${id}_tabs_nav`;

    var salarySwiper = new Swiper(el, {
      loop: true,
      autoplay: {
        delay: 4000,
        delay: 4000000,
        disableOnInteraction: false,
      },
      on: {
        slideChange: function () {
          setTimeout(() => {
            var index =
              $(`${el} .swiper-slide-active`)
                .eq(0)
                .attr("data-swiper-slide-index") || 0;
            $(`${nav} li`).removeClass("active").eq(+index).addClass("active");
          }, 0);
        },
      },
    });

    if (speed) {
      salarySwiper.speed = speed;
    }

    $(`${nav} li`).click(function () {
      salarySwiper.slideTo($(this).index() + 1, 300, false);
      salarySwiper.autoplay.stop();
    });

    $(`${nav} li`).hover(
      function () {
        if ($(this).hasClass("active")) {
          salarySwiper.autoplay.stop();
        }
      },
      function () {
        salarySwiper.autoplay.start();
      }
    );

    $(`${el}`).hover(
      function () {
        salarySwiper.autoplay.stop();
      },
      function () {
        salarySwiper.autoplay.start();
      }
    );
  };

  // 功能点节点渲染
  renderFeatrues = (features) => {
    return `
        <div id="features_swiper_tabs_nav" class="container clearfix">
            <ul class="left_nav">
                ${renderFeatureNav(features)}
            </ul>
            <div class="right_content">
                <div id="features_swiper" class="features_swiper_containe">
                    <div class="swiper-wrapper">
                        ${renderFeatrueContent(features)}
                    </div>
                </div>
            </div>
        </div>
        `;
  };

  // 功能点导航
  renderFeatureNav = (features = []) => {
    let featureNav = "";

    features.forEach((item, i) => {
      featureNav += `
                <li class="${i === 0 && "active"}">
                    <div class="text">
                        <span class="number">${item.id}</span>
                        <span class="title">${item.title}</span>
                        <p class="sub_title">${item.subTitle}</p>
                    </div>
                    <div class="bottom_progress">
                        <div class="progress_line">
                        </div>
                    </div>
                </li>
            `;
    });

    return featureNav;
  };

  // 功能点内容
  renderFeatrueContent = (features = []) => {
    let featrueContent = "";

    features.forEach((item, i) => {
      featrueContent += `
            <div class="swiper-slide feature_item">
                <div class="top_feature_img"><img src="${item.img}" alt=""></div>
            </div>
            `;
    });

    return featrueContent;
  };

  renderFeatruesMobile = (features) => {
    let accordion = "";

    features.forEach((item, i) => {
      accordion += `
                ${i === 0 ? '<div class="panel_line"></div>' : ""}
                <div class="panel">
                    <div class="panel-heading">
                        <h4 class="panel-title">
                            <a class="${
                              i !== 0 && "collapsed"
                            }" data-toggle="collapse" data-parent="#salary_features_mobile"
                            href="#collapse${i}">
                                <span class="num">${item.id}</span>
                                <span class="title">${item.title}</span>
                                <p class="sub_title">${item.subTitle}</p>
                                <span class="icon_font">&#xe605;</span>
                            </a>
                        </h4>
                    </div>
                    <div id="collapse${i}" class="panel-collapse collapse ${
        i === 0 && "in"
      }">
                        <img src="${item.imgMobile}" alt=""/>
                    </div>
                </div>
                <div class="panel_line"></div>
            `;
    });

    return accordion;
  };

  // 功能点list
  renderFeatureList = (items = []) => {
    let list = "";
    items.forEach((item) => {
      list += `
                <li class="item"><span class="icon_ok"></span>${item}</li>
            `;
    });
    return list;
  };

  // 产品价值点 list
  renderProductValue = (items = []) => {
    let list = "";
    items.forEach((item) => {
      list += `
                <li class="item">${item.data}：${item.value}</li>
            `;
    });

    return list;
  };

  /**
   * 解决方案
   * source 来源，不传值时默认PC端, 有值表移动端。
   */
  renderProgram = (program, source = "") => {
    return `
            <ul id="${
              source ? source : "program"
            }_swiper_tabs_nav" class="program_tab_nav">
                ${renderProgramNav(program)}
            </ul>
            <div class="program_tab_content">
                <div id="${source ? source : "program"}_swiper">
                    <div class="swiper-wrapper">
                        ${renderProgramPlan(program, source)}
                    </div>
                </div>
            </div>
        `;
  };

  // 解决方案Tab导航
  renderProgramNav = (program = []) => {
    let nav = "";

    program.forEach((item, i) => {
      nav += `
                <li class="${i === 0 && "active"}">
                ${item.title}
                <span class="bottom_line"></span>
                </li>
            `;
    });

    return nav;
  };

  /**
   * 解决方案Tab内容
   * source 来源，不传值时默认PC端, 有值表移动端。
   */
  renderProgramPlan = (program = [], source = "") => {
    let plan = "";

    program.forEach((item, i) => {
      plan += `
                <div class="swiper-slide tab_plan clearfix ${
                  i === 0 && "active"
                }">
                    <div class="hidden-xs row">
                        <div class="col-sm-7 img_box">
                            <img src="${
                              source ? item.imgMobile : item.img
                            }" alt=""/>
                        </div>
                        <div class="col-sm-5 tab_plan_conten">
                            <h4 class="title">${item.title}</h4>
                            <div class="desc">${renderProgramDesc(
                              item.desc
                            )}</div>
                        </div>
                    </div>
                    <div class="visible-xs">
                        <div class="tab_plan_conten">
                            <div class="desc">${renderProgramDesc(
                              item.desc
                            )}</div>
                        </div>
                        <div class="img_box">
                            <img src="${
                              source ? item.imgMobile : item.img
                            }" alt=""/>
                        </div>
                    </div>
                </div>
            `;
    });

    return plan;
  };

  // 解决方案Tab内容说明文案
  renderProgramDesc = (items = []) => {
    let desc = "";
    items.forEach((item) => {
      desc += `
                <p>${item}</p>
            `;
    });
    return desc;
  };

  /**
    // 行业版
    renderIndustries = item => {
        return `
            <div class="col-md-4 col-sm-4 col-xs-12 salary_industries_item_warp">
                <div class="salary_industries_item" style="background-image: url('${item.img}')">
                    <div class="title">${item.title}</div>
                </div>
            </div>
        `
    }

    // 行业版移动端
    renderIndustriesMobile = item => {
        return `
            <div class="swiper-slide salary_industries_item" style="background-image: url('${item.img}')">
                <div class="title">${item.title}</div>
            </div>
        `
    }
    **/
  // 产品价格 PC端
  renderPriceList = (item) => {
    return `
            <div class="col-sm-4 img-list">
                <div class="img-box">
                    <img src="${item.img}" alt=""/>
                </div>
                <div class="img-hover-box" data-toggle="modal" data-target="#modalForSalary">
                    <img src="${item.img}" alt=""/>
                </div>
            </div>
        `;
  };

  // 产品价格 移动端
  renderPriceListMobile = (item) => {
    return `
            <div class="img-box-item" data-toggle="modal" data-target="#modalForSalary" style="background-image: url('${item.imgMobile}'); height: ${item.imgMobileHeight}px"></div>
        `;
  };

  $(".salary-video img").click(function () {
    $(this).css("display", "none");
    $(".salary-video video").css("visibility", "visible").trigger("play");
  });
});