<template>
  <BasePage>
    <div class="brand">
      <div class="brandTitle">
        我们的服务矩阵
      </div>

      <div class="brandServiceList">
        <div class="serviceItem" v-for="(item, index) in serviceList" :key="index">
          <img v-if="index % 2 === 0" :src="item.img" alt="">
          <div>
            <b class="itemTitle">{{ item.title }}</b>
            <div class="itemContent">{{ item.content }}</div>
          </div>
          <img v-if="index % 2 !== 0" :src="item.img" alt="">
        </div>
      </div>

      <div class="brandBox">
        <div class="brandTitle">
          行业解决方案
        </div>

        <div class="brandProductList">
          <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,
      productList: [
        {
          img: '/img/brandBanner.png',
          title: '教育类企业',
          content: '教材版权申请+教育IP授权（如故宫文创教具）'
        },
        {
          img: '/img/brandBanner.png',
          title: ' 品牌合作',
          content: '品牌合作与共赢\n 品牌合作案例展示\n 品牌合作与合作'
        },
        {
          img: '/img/brandBanner.png',
          title: '品牌服务',
          content: '品牌服务与支持\n 品牌服务案例展示\n 品牌服务与合作'
        },
      ],
      serviceList: [
        {
          img: '/img/brandServiceItem1.png',
          title: '品牌基础建设',
          content: '品牌定位与策划\n商标/专利/软著等知识产权服务 品牌视觉与内容体系搭建'
        },
        {
          img: '/img/brandServiceItem2.png',
          title: '品牌加速赋能',
          content: '30+一线品牌授权合作（如仁和、同仁堂、人民日报等）\n权威媒体背书（央视、新华社等）'
        },
        {
          img: '/img/brandServiceItem3.png',
          title: '数字品牌营销',
          content: '新媒体运营（抖音、微信生态）\n精准广告投放与KOL推广'
        },
      ],
    };
  },
  methods: {
    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>
