<template>
  <BasePage>
    <div class="plan">

      <div class="planBox">
        <div class="planTitle">
          <span>服务优势</span>
        </div>

        <div class="serviceList">
          <div class="serviceItemLeft">
            <b class="itemTitle">全周期陪伴</b>
            <div class="itemContent">从初创到上市各阶段需求全覆盖</div>
            <img src="/img/serviceItem1.png" alt="">

          </div>
          <div class="serviceItemRight">
            <div class="itemRight iTop">
              <b class="itemTitle">行业智库支持</b>
              <div class="itemContent">整合金融/法律/营销领域专家资源</div>
              <img src="/img/serviceItem2.png" alt="">
            </div>
            <div class="itemRight iBottom">
              <b class="itemTitle">落地实战派</b>
              <div class="itemContent">所有方案配套执行手册与效果追踪</div>
              <img src="/img/serviceItem3.png" alt="">
            </div>
          </div>
        </div>
      </div>

      <div class="planBox system">
        <div class="planTitle">
          <span>标准化实施体系</span>
        </div>

        <div class="systemList">
          <div class="systemItem" v-for="(item, index) in systemList" :key="index">
            <img :src="item.img" alt="">
            <div>
              <b class="itemTitle">{{ item.title }}</b>
              <div class="itemContent">{{ item.content }}</div>
            </div>

            <span :style="{ 'color': colorList[index] }">{{ item.index }}</span>
          </div>
        </div>
      </div>

      <div class="planBox">
        <div class="planTitle">
          <span>一站式企业解决方案</span>
        </div>

        <div class="productList">
          <div class="btnBox" :class="active === 0 ? 'grayBtn' : 'greenBtn'" @click="changeActive(active - 1)"><img
              src="/img/allow-left.png" :class="active !== 0 ? 'whiteIcon' : ''" alt=""></div>

          <div class="listBox">
            <div class="productItem" v-for="(item, index) in productList" :key="index">
              <img :src="item.img" alt="">
              <div>
                <b class="itemTitle">{{ item.title }}</b>
                <div class="itemContent">{{ item.content }}</div>
              </div>
            </div>
          </div>

          <div class="btnBox" :class="active === productList.length - 1 ? 'grayBtn' : 'greenBtn'"
            @click="changeActive(active + 1)">
            <img :class="active !== productList.length - 1 ? 'whiteIcon' : ''" src="/img/allow-left.png"
              class="transform" alt="">
          </div>
        </div>
      </div>
    </div>
  </BasePage>
</template>

<script>
export default {
  name: '',
  data() {
    return {
      active: 0,
      colorList: ['#ffdfbe', '#d0e8ff', '#ffdfbe', '#d1e9ff', '#ffdfbe'],
      systemList: [
        {
          img: '/img/systemItem1.png',
          title: '深度需求诊断',
          content: '企业现状调研、高层战略访谈、定制化需求清单',
          index: '01',
        },
        {
          img: '/img/systemItem2.png',
          title: '定制方案设计',
          content: '多维方案输出、可行性论证、方案可视化',
          index: '02',
        },
        {
          img: '/img/systemItem3.png',
          title: '模块化实施',
          content: '分阶段执行手册、驻场辅导机制、实时进度追踪',
          index: '03',
        },
        {
          img: '/img/systemItem4.png',
          title: '数据化复盘',
          content: '关键指标审计、三维度总结会、迭代建议书',
          index: '04',
        },
        {
          img: '/img/systemItem5.png',
          title: '持续进化服务',
          content: '年度战略升级、长期智库支持、生态资源导入',
          index: '05',
        },
      ],
      productList: [
        {
          img: '/img/productItemBg.png',
          title: '品牌战略与视觉体系',
          content: 'VI（标识+视觉+应用）\n创意（视频+动画+PPT）\n文案（故事+招商+传播）',
        },
        {
          img: '/img/productItemBg.png',
          title: '产品目标',
          content: '解决痛点，提升体验，带动销量和份额',
        },

        {
          img: '/img/productItemBg.png',
          title: '产品目标',
          content: '解决痛点，提升体验，带动销量和份额',
        },
        {
          img: '/img/productItemBg.png',
          title: '产品目标',
          content: '解决痛点，提升体验，带动销量和份额',
        },
        {
          img: '/img/productItemBg.png',
          title: '产品目标',
          content: '解决痛点，提升体验，带动销量和份额',
        },
      ],
    };
  },
  methods: {
    /**
     * 切换产品列表索引并滚动到对应项
     * @param {number} index - 目标索引
     */
    changeActive(index) {
      if (index < 0 || index >= this.productList.length) return;
      this.active = index;
      const listBox = document.querySelector('.listBox');
      if (listBox && listBox.children[index]) {
        // 计算目标元素相对于容器左侧的偏移量
        const targetOffset = listBox.children[index].offsetLeft;
        const containerOffset = listBox.offsetLeft;
        listBox.scrollTo({
          left: targetOffset - containerOffset,
          behavior: 'smooth',
        });
      }
    },

  },
};
</script>