<template>
  <div class="home-page">
    <div class="box-top">
      <div class="headline">
        <h2>不止</h2>
       
        <!-- <div id="title-container" >
          <h3 v-for="(title, index) in titles" :key="index" class="title" :style="{transform: `translateY(-${currentTitleIndex * 100}%)`}">{{ title }}</h3>
        </div> -->

        <div id="title-container" >
          <h3 v-for="(title, index) in titles" :key="index" class="title" :style="titleContainerStyle">{{ title }}</h3>
        </div>

        <!-- <p>AI软著引擎平台累计辅助编写资料<em v-html="number1"></em>万套，通过平台代办下发证书<em v-html="number2"></em>万件</p> -->
        <p>AI软著引擎平台累计辅助编写资料<em>10</em>万套，通过平台代办下发证书<em>10</em>万件</p>
        <div class="button-box">
          <button><a href="">免费试用</a></button>
          <button><a href="">立即前往</a></button>
        </div>
      </div>
    </div>
    <div class="box-bottom">
      <div class="box1">
        <h4>软件著作权的重要性</h4>
        <p>没有被保护的作品随时面临被抄袭，侵权的风险</p>
        <ul>
          <li>
            <img src="/assets/img/box1-1.jpg" alt="logo图片">
            <em style="color: #8281e9;">帮助宣传</em>
            <p>已登记的版权可以向社会宣传自己的产品</p>
          </li>
          <li>
            <img src="/assets/img/box1-2.jpg" alt="logo图片">
            <em style="color: #4193f9;">防止抄袭</em>
            <p>当自己的版权被侵犯时，可以采取法律措施，维护自己的权益</p>
          </li>
          <li>
            <img src="/assets/img/box1-3.jpg" alt="logo图片">
            <em style="color: #ff8217;">提升无形资产</em>
            <p>帮助企业增资，提升递延纳税优惠</p>
          </li>
          <li>
            <img src="/assets/img/box1-4.jpg" alt="logo图片">
            <em style="color: #7daafa;">平台入住</em>
            <p>腾讯/阿里/百度等大平台入住必备条件</p>
          </li>
          <li>
            <img src="/assets/img/box1-5.jpg" alt="logo图片">
            <em style="color: #ffc15d;">减免税收</em>
            <p>办理高新技术企业认定的前提条件，并且享受百万政府补贴</p>
          </li>
        </ul>
      </div>  

      <div class="box2">
        <!-- 背景定位图片 -->
        <a href="">
          <img class="icon" src="/assets/img/icon.png" alt="">
        </a>
        <div class="location1">
          <img src="/assets/img/location1.jpg" alt="">
        </div>
        <div class="location2">
          <img src="/assets/img/location2.jpg" alt="">
        </div>
        <div class="location3">
          <img src="/assets/img/location3.jpg" alt="">
        </div>
        <!-- 软著申请步骤 -->
        <div class="step">
          <h4>简单三步，完成您的软件著作权登记证书申请</h4>
          <div class="step_head_tab" ref="boxRef">
            <ul>
              <li v-scroll-to="{ el: '.step1', offset: -100}">系统搭建</li>
              <li v-scroll-to="{ el: '.step2', offset: -100}">资料下载</li>
              <li v-scroll-to="{ el: '.step3', offset: -100}">网上申报</li>
            </ul>
          </div>
          
        </div>
        <!-- 步骤1 -->
        <div class="step1">
          <div class="left-box">
            <div class="top1">
              <div class="box">
                <p>
                  <em>1</em>/<i>3</i>
                </p>
              </div>
              <div class="title">
                <h4>系统搭建</h4>
              </div>
            </div>
            <ul>
              <li id="step1" v-for="(item1, index) in stepsContent1" :key="index"  @click="selectStep1(index)" :class="{ active: currentStepIndex1 === index }" @mouseover="selectStep1(index)">
                <img :src="getStepImage1(item1, index)" alt="">
                <p>{{ item1.text }}</p>
              </li>
            </ul>
          </div>
          <div class="right-box">
            <img :src="getRightBoxImage1(currentStepIndex1)" alt="">
          </div>
        </div>
        <!-- 步骤2 -->
        <div class="step2">
          <div class="left-box">
            <img :src="getRightBoxImage2(currentStepIndex2)" alt="">
          </div>
          <div class="right-box">
            <div class="top2">
              <div class="box">
                <p>
                  <em>2</em>/<i>3</i>
                </p>
              </div>
              <div class="title">
                <h4>资料下载</h4>
              </div>
            </div>
            <ul>
              <li id="step5" v-for="(item2, index) in stepsContent2" :key="index"  @click="selectStep2(index)" :class="{ active: currentStepIndex2 === index }" @mouseover="selectStep2(index)">
                <img :src="getStepImage2(item2, index)" alt="">
                <p>{{ item2.text }}</p>
              </li>
            </ul>
          </div>
        </div>
        <!-- 步骤3 -->
        <div class="step3">
          <div class="left-box">
            <div class="top3">
              <div class="box">
                <p>
                  <em>3</em>/<i>3</i>
                </p>
              </div>
              <div class="title">
                <h4>网上申报</h4>
              </div>
            </div>
            <ul>
              <li id="step9" v-for="(item3, index) in stepsContent3" :key="index"  @click="selectStep3(index)" :class="{ active: currentStepIndex3 === index }" @mouseover="selectStep3(index)">
                <img :src="getStepImage3(item3, index)" alt="">
                <p>{{ item3.text }}</p>
              </li>
            </ul>
          </div>
          <div class="right-box">
            <img :src="getRightBoxImage3(currentStepIndex3)" alt="">
          </div>
        </div>
      </div>
    </div>

  </div>
</template>

<script>
// import { onMounted, onUnmounted, ref } from 'vue'; 
import axios from 'axios' 
export default {
  data() {
    return {
      titles: ['生成真实系统 | 可下载安装包', '生成申报材料 | 提供一键导出', '价格明码标价 | 提供价格担保', '提供代理服务 | 也可自行申报'],
      intervalId: null,
      currentTitleIndex: 0,

      currentStepIndex1: 0,
      currentStepIndex2: 0,
      currentStepIndex3: 0,
      stepsContent1: [
        { text: '填写系统名称并签署委托开发协议',images: ['step-1.png', 'step-1-1.png'] },
        { text: '由AI生成系统功能与系统简介',images: ['step-2.png', 'step-2-2.png'] },
        { text: '填写系统相关所属权信息并生成系统', images: ['step-3.png', 'step-3-3.png'] },
        { text: '提供灵活的安装包支持公有或私有部署', images: ['step-4.png', 'step-4-4.png'] },
      ],
      stepsContent2: [
        { text: '一键生成软著申请所需的所有材料', images: ['step-5.png', 'step-5-5.png']},
        { text: '提供源代码审查与查重保证原创性', images: ['step-6.png', 'step-6-6.png']},
        { text: '提供多种风格的系统皮肤与框架', images: ['step-7.png', 'step-7-7.png']},
        { text: '提供多种风格和行业的用户操作手册模板', images: ['step-8.png', 'step-8-8.png']},
      ],
      stepsContent3: [
        { text: '提供国家版权登记平台填报服务', images: ['step-9.png', 'step-9-9.png']},
        { text: '提供申报环节动态实时通知服务', images: ['step-10.png', 'step-10-10.png']},
        { text: '提供软著材料重新编写与补正服务', images: ['step-11.png', 'step-11-11.png']},
        { text: '提供申报担保及包下证服务', images: ['step-12.png', 'step-12-12.png']},
      ],
      rightBoxImages1: ['a1.jpg', 'a2.jpg', 'a3.jpg', 'a4.jpg'],
      rightBoxImages2: ['2-1.png', '2-2.png', '2-3.png', '2-4.png'],
      rightBoxImages3: ['3-1.png', '3-2.png', '3-3.png', '3-4.png'],

      // number1: '',
      // number2: '' ,

    }
  },
  methods: {

    selectStep1(index) {
      this.currentStepIndex1 = index; // 设置当前选中的步骤索引
    },
    getStepImage1(item1, index) {
      // 拼接完整的图片路径
      const activeIndex = this.currentStepIndex1 === index ? 1 : 0;
      return `assets/img/${item1.images[activeIndex]}`;
    },
    getRightBoxImage1(index) {
      // 拼接右侧盒子图片的完整路径
      return `assets/img/${this.rightBoxImages1[index]}`;
    },

    selectStep2(index) {
      this.currentStepIndex2 = index; // 设置当前选中的步骤索引
    },
    getStepImage2(item2, index) {
      // 拼接完整的图片路径
      const activeIndex = this.currentStepIndex2 === index ? 1 : 0;
      return `assets/img/${item2.images[activeIndex]}`;
    },
    getRightBoxImage2(index) {
      // 拼接右侧盒子图片的完整路径
      return `assets/img/${this.rightBoxImages2[index]}`;
    },

    selectStep3(index) {
      this.currentStepIndex3 = index; // 设置当前选中的步骤索引
    },
    getStepImage3(item3, index) {
      // 拼接完整的图片路径
      const activeIndex = this.currentStepIndex3 === index ? 1 : 0;
      return `assets/img/${item3.images[activeIndex]}`;
    },
    getRightBoxImage3(index) {
      // 拼接右侧盒子图片的完整路径
      return `assets/img/${this.rightBoxImages3[index]}`;
    },

    // startData() {
    //   const dataUrl1 = `http://121.36.71.250:58085/operator/app/systemuser/getrelease/c8db34f1-737d-4520-8bd5-fd1b727c87e7`
    //   const dataUrl2 = `http://121.36.71.250:58085/operator/app/systemuser/getrelease/f2782ed4-8133-4307-b067-c8e8cac16cdd`

    //   axios.get(dataUrl1).then(response => {
    //     // console.log(response.data)
    //     // console.log(response.data.dataSummary)
    //     this.number1 = response.data.dataSummary
    //   })
    //   .catch(error1 => {
    //     console.error('There was an error!', error1);
    //   })

    //   axios.get(dataUrl2).then(response => {
    //     // console.log(response.data)
    //     // console.log(response.data.dataSummary)
    //     this.number2 = response.data.dataSummary
    //   })
    //   .catch(error2 => {
    //     console.error('There was an error!', error2);
    //   })
    // },




    startScroll() {
      this.intervalId = setInterval(() => {
        this.currentTitleIndex = (this.currentTitleIndex + 1) % this.titles.length;
        if (this.currentTitleIndex === 0) {
          // 使用Vue的nextTick来在DOM更新后重置过渡效果
          this.$nextTick(() => {
            // this.resetTransition();
          });
        }
      }, 3000);
    },
    // resetTransition() {
    //   // 移除过渡效果，然后立即重新添加，以避免动画
    //   const titleContainer = document.getElementById('title-container');
    //   titleContainer.style.transition = 'none';
    //   titleContainer.offsetHeight; // 触发重排
    //   titleContainer.style.transition = 'transform 0.5s ease-in-out';
    // },
    stopScroll() {
      clearInterval(this.intervalId);
    },

  },

  computed: {

    titleContainerStyle() {
      return {
        transform: `translateY(-${this.currentTitleIndex * 100}%)`,
        transition: 'transform 0.5s ease-in-out',
      };
    },

  
  },

  mounted() {
    this.startScroll();
    // this.startData();
    // this.goToLink();
    
  },

  // beforeUnmount() {
  //   clearInterval(this.intervalId);  
  // },
  beforeDestroy() {
    this.stopScroll();
    // this.startData();
  }

}
</script>

<style scoped>
.active {
  border: 1px solid rgba(0,0,0,.2);
  background-color: #FFF !important;
}
.home-page {
  position: relative;
}

.home-page .box-top {
  display: flex;
  width: 100%;
  height: 100vh;
  /* background-color: pink; */
  background: url(/assets/img/home-bj.png) no-repeat;
  background-size: cover;
}
.home-page .box-top .headline {
  position: relative;
  display: flex;
  flex-direction: column;
  /* position: absolute;
  left: 50%;
  top: 50%; */
  width: 900px;
  height: 300px;
  /* border: 2px solid red; */
  margin: auto;
  /* margin: auto 300px; */
  
}

.home-page .box-top .headline h2 {
  font-size: 50px;
  color: #FFF;
  text-align: center;
}
.home-page .box-top .headline #title-container {
  position: relative;
  height: 80px; /* 根据需要调整 */
  overflow: hidden;
  /* border: 1px solid blue; */
}
.home-page .box-top .headline .title {
  position: relative;
  top: 0;
  font-size: 50px;
  color: #FFF;
  width: 860px;
  height: 80px;
  line-height: 80px;
  margin: auto 20px;
  padding: 0 10px;
  letter-spacing: 6px;
  text-align: center;
  /* border: 1px solid red; */
  transition: transform 0.5s ease-in-out; 
}
.home-page .box-top .headline p {
  font-size: 18px;
  color: #FFF;
  /* margin: 5px auto; */
  margin: auto;
  letter-spacing: 2px;
}
.home-page .box-top .headline p em {
  font-size: 30px;
}
.home-page .box-top .headline .button-box {
  font-size: 26px;
  /* margin: 20px auto; */
  margin: auto;
}
.home-page .box-top .headline .button-box button {
  padding: 10px 45px;
  margin-left: 20px;
  border: none;
}
.home-page .box-top .headline .button-box button:first-child {
  background-color: #39C7C1;
  /* color: #FFF; */
}
.home-page .box-top .headline .button-box button:first-child a {
  color: #FFF;
}

.home-page .box-top .headline.button-box button:first-child:hover {
  background-color: #00A99D;
  color: #FFF;
  font-weight: 700;
  cursor: pointer;
}
.home-page .box-top .headline .button-box button:last-child:hover {
  font-weight: 700;
  cursor: pointer;
}
.home-page .box-bottom {
  display: flex;
  flex-direction: column;
  width: 100%;
  height: 2100px;
  background-color: #fff;
}
.home-page .box-bottom .box1 {
  height: 450px;
  margin: 70px auto;
  text-align: center;
  /* border: 2px solid red; */
}
.home-page .box-bottom .box1 h4 {
  margin-top: 15px;
  font-size: 28px;
}
.home-page .box-bottom .box1 p {
  font-size: 14px;
  margin: 15px auto;
  color: #a2a2a2;
}
.home-page .box-bottom .box1 ul {
  display: flex;
}
.home-page .box-bottom .box1 ul li {
  display: flex;
  flex-direction: column;
  width: 130px;
  margin: 40px 40px;
  /* padding: 0 30px; */
}
.home-page .box-bottom .box1 ul li img {
  width: 110px;
  height: 110px;
  margin: 0 auto;
}
.home-page .box-bottom .box1 ul li em {
  font-size: 16px;
  margin: 20px auto 0px auto;
  font-weight: 700;
}
.home-page .box-bottom .box1 ul li p {
  /* font-size: 14px; */
  line-height: 30px;
}
/* 软著申请步骤--------------------------------------- */
.home-page .box-bottom .box2 {
  position: relative;
  width: 100%;
  height: 1500px;
  margin: 20px auto;
  /* border: 2px solid red; */
}
.home-page .box-bottom .icon {
  /* position: absolute; */
  position: fixed;
  z-index: 20;
  bottom: 10px;
  right: 10px;
  width: 80px;
  height: 80px;
  cursor: pointer;
}
.home-page .box-bottom .location1{
  position: absolute;
  top: 160px;
  /* right: -150px; */
  right: 0;
  width: 270px;
  height: 330px;
  /* border: 2px solid red; */
  /* z-index: 100; */
}
.home-page .box-bottom .location2{
  position: absolute;
  top: 380px;
  /* left: -180px; */
  left: 0;
  width: 240px;
  height: 320px;
  /* border: 2px solid red; */
  /* z-index: 100; */
}
.home-page .box-bottom .location3{
  position: absolute;
  top: 830px;
  /* right: -150px; */
  right: 0;
  width: 270px;
  height: 330px;
  /* border: 2px solid red; */
  /* z-index: 100; */
}
.home-page .box-bottom .box2 .step {
  margin: 10px;
  /* border: 2px solid red; */
}

.home-page .box-bottom .box2 .step h4 {
  text-align: center;
  font-size: 30px;
  padding: 20px 30px;
}
.home-page .box-bottom .box2 .step .step_head_tab {
  /* position: fixed;
  backdrop-filter: blur(10px); */
  top: 90px;
  left: 0;
  z-index: 9999999;
  width: 100%;
  height: 60px;
  background-color: rgba(255,255,255,.6);
}

.home-page .box-bottom .box2 .step .stepscrollfix {
  position: fixed;
  backdrop-filter: blur(10px);
}
.home-page .box-bottom .box2 .step ul {
  display: flex;
  /* flex-direction: column; */
  justify-content: center;
  flex-wrap: wrap;
  align-content: center;
  width: 600px;
  height: 60px;
  margin: auto;

}
.home-page .box-bottom .box2 .step ul li {
  /* padding: 10px 35px; */
  width: 200px;
  height: 52px;
  line-height: 42px;
  text-align: center;
  background-color: #FFF;
  border: 5px solid #f8fbfd;
  cursor: pointer;
}
.home-page .box-bottom .box2 .step ul li:nth-child(2) {
  border-left: 0;
  border-right: 0;
}

/* 步骤1------------------- */
.home-page .box-bottom .box2 .step1 {
  position: relative;
  z-index: 10;
  display: flex;
  width: 1100px;
  height: 380px;
  /* border: 2px solid red; */
  margin: 30px auto;
}
.home-page .box-bottom .box2 .step1 .left-box {
  position: relative;
  width: 370px;
  height: 360px;
  margin: 10px;
  /* border: 2px solid red; */
}
/* 步骤一二三上方题目 */
.home-page .box-bottom .box2 .step1 .left-box .top1 {
  width: 180px;
  height: 150px;
  /* border: 1px solid red; */
}
.home-page .box-bottom .box2 .step1 .left-box .top1 .box {
  position: absolute;
  top: 0;
  width: 110px;
  height: 100px;
  background: url(/assets/img/step-top1.png) no-repeat; 
}

.home-page .box-bottom .box2 .step1 .left-box .top1 .box p {
  position: absolute;
  left: 25px;
  bottom: 0;
  width: 60px;
  font-size: 22px;
  /* border: 1px solid blue; */
}
.home-page .box-bottom .box2 .step1 .left-box .top1 .box p em {
  font-size: 36px;
  font-weight: 700;
}
.home-page .box-bottom .box2 .step1 .left-box .top1 .title {
  position: absolute;
  top: 100px;
  width: 180px;
  height: 50px;
  text-align: center;
  /* border: 1px solid green; */
}
.home-page .box-bottom .box2 .step1 .left-box .top1 h4 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto;
}
.home-page .box-bottom .box2 .step1 .left-box ul li {
  display: flex;
  height: 42.5px;
  border-radius: 7px;
  margin: 8px;
  background-color: #f9f9f9;
  cursor: pointer;
}
.home-page .box-bottom .box2 .step1 .left-box ul .newStyle {
  border: 0.25px solid #B3B3B3;
  background-color: transparent;
}


.home-page .box-bottom .box2 .step1 .left-box ul li img {
  width: 25px;
  height: 25px;
  margin: auto 10px;
}
.home-page .box-bottom .box2 .step1 .left-box ul li p {
  font-size: 16px;
  margin: auto 5px;
}
.home-page .box-bottom .box2 .step1 .right-box {
  z-index: 999;
  width: 650px;
  height: 360px;
  margin: 10px 10px 10px auto;
  /* border: 2px solid red; */
}
/* 步骤2----------------------------------------- */
.home-page .box-bottom .box2 .step2 {
  position: relative;
  z-index: 10;
  display: flex;
  width: 1100px;
  height: 380px;
  /* border: 2px solid red; */
  margin: 30px auto;
}
.home-page .box-bottom .box2 .step2 .left-box {
  position: relative;
  width: 650px;
  height: 360px;
  margin: 10px auto 10px 10px;
  /* border: 2px solid red; */
}

.home-page .box-bottom .box2 .step2 .right-box {
  position: relative;
  width: 370px;
  height: 360px;
  margin: 10px;
  /* border: 2px solid red; */
}
.home-page .box-bottom .box2 .step2 .right-box .top2 {
  /* position: absolute; */
  right: 0;
  width: 180px;
  height: 150px;
  /* border: 1px solid red; */
}
.home-page .box-bottom .box2 .step2 .right-box .top2 .box {
  position: absolute;
  top: 0;
  right: 0;
  width: 110px;
  height: 100px;
  background: url(/assets/img/step-top2.png) no-repeat;
  /* border: 1px solid red; */
}
.home-page .box-bottom .box2 .step2 .right-box .top2 .box p {
  position: absolute;
  right: 20px;
  bottom: 0;
  width: 60px;
  font-size: 22px;
}
.home-page .box-bottom .box2 .step2 .right-box .top2 .box p em {
  font-size: 36px;
  font-weight: 700;
}
.home-page .box-bottom .box2 .step2 .right-box .top2 .title {
  position: absolute;
  top: 100px;
  right: 0;
  width: 180px;
  height: 50px;
  text-align: center;
  /* border: 1px solid green; */
}
.home-page .box-bottom .box2 .step2 .right-box .top2 .title h4 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto;
}

.home-page .box-bottom .box2 .step2 .right-box ul li {
  display: flex;
  height: 42.5px;
  border-radius: 7px;
  margin: 8px;
  background-color: #f9f9f9;
  cursor: pointer;
}
.home-page .box-bottom .box2 .step2 .right-box ul .newStyle {
  border: 0.25px solid #B3B3B3;
  background-color: transparent;
}
.home-page .box-bottom .box2 .step2 .right-box ul li img {
  width: 25px;
  height: 25px;
  margin: auto 10px;
}
.home-page .box-bottom .box2 .step2 .right-box ul li p {
  font-size: 16px;
  margin: auto 5px;
}
/* 步骤3--------------------------------------- */
.home-page .box-bottom .box2 .step3 {
  position: relative;
  z-index: 10;
  display: flex;
  width: 1100px;
  height: 380px;
  /* border: 2px solid red; */
  margin: 30px auto;
}
.home-page .box-bottom .box2 .step3 .left-box {
  width: 370px;
  height: 360px;
  margin: 10px;
  /* border: 2px solid red; */
}
.home-page .box-bottom .box2 .step3 .left-box .top3 {
  position: relative;
  width: 180px;
  height: 150px;
  /* border: 1px solid red; */
}
.home-page .box-bottom .box2 .step3 .left-box .top3 .box {
  position: absolute;
  top: 0;
  width: 110px;
  height: 100px;
  background: url(/assets/img/step-top3.png) no-repeat;
}
.home-page .box-bottom .box2 .step3 .left-box .top3 .box p {
  position: absolute;
  left: 25px;
  bottom: 0;
  width: 60px;
  font-size: 22px;
}
.home-page .box-bottom .box2 .step3 .left-box .top3 .box p em {
  font-size: 36px;
  font-weight: 700;
}
.home-page .box-bottom .box2 .step3 .left-box .top3 .title {
  position: absolute;
  top: 100px;
  width: 180px;
  height: 50px;
  text-align: center;
}
.home-page .box-bottom .box2 .step3 .left-box .top3 .title h4 {
  font-size: 28px;
  font-weight: 700;
  margin: 0 auto;
}
.home-page .box-bottom .box2 .step3 .left-box ul li {
  display: flex;
  height: 42.5px;
  border-radius: 7px;
  margin: 8px;
  background-color: #f9f9f9;
  cursor: pointer;
}
.home-page .box-bottom .box2 .step3 .left-box ul .newStyle {
  border: 0.25px solid #B3B3B3;
  background-color: transparent;
}
.home-page .box-bottom .box2 .step3 .left-box ul li img {
  width: 25px;
  height: 25px;
  margin: auto 10px;
}
.home-page .box-bottom .box2 .step3 .left-box ul li p {
  font-size: 16px;
  margin: auto 5px;
}
.home-page .box-bottom .box2 .step3 .right-box {
  position: relative;
  width: 650px;
  height: 360px;
  margin: 10px 10px 10px auto;
  /* border: 2px solid red; */
}
</style>