<template>
  <div class="about">
    <div class="banner">
      <van-swipe class="my-swipe" :autoplay="3000" indicator-color="white">
        <van-swipe-item>
          <img src="/img/home-banner.png" style="width: 100%;" alt="">
        </van-swipe-item>
      </van-swipe>
    </div>

    <div class="top">
      <div class="item i1">
        <span>
          理念
        </span>
        <p>信 家 创造 共享</p>
        <hr>
      </div>

      <div class="item i2">
        <span>
          竞争力
        </span>
        <p>人无我有<br>
          人有我全<br>
          人全我精</p>
        <hr>
      </div>

      <div class="item i3">
        <span>
          愿景
        </span>
        <p>助企扶平<br>
          无忧创业<br>
          互享共赢</p>
        <hr>
      </div>

      <div class="item i4">
        <span>
          使命
        </span>
        <p>为中小微企业提供一站式移动互联网+项目孵化产业链服务</p>
        <hr>
      </div>
    </div>

    <div class="introduce">
      <span class="title">
        关于我们
      </span>
      <p>
        赢前科技是为中小微企业提供互联网、金融、咨询等一站式服务的综合型企业。以浙江、福建、北京为核心，全国覆盖。十年行业经验，专注实体经营与数字化服务创新。
      </p>
    </div>

    <div class="course">
      <span class="title">
        发展历程
      </span>
      <div class="years" v-for="(item, index) in timearray" :key="index" v-show="index === active">
        <b>
          {{ item.year }}
        </b>
        <p>
          {{ item.content }}
        </p>
      </div>

      <div class="timeline box box-pack-between box-align-center">
        <img class="scroll-btn" :src="active === 0 ? '/img/left_inactive.png' : '/img/left_active.png'" alt=""
          @click="decreaseActive">
        <div class="line" id="line">
          <div class="item" v-for="(item, index) in timearray" :key="index">
            <img :class="index === active ? 'active' : 'inactive'"
              :src="index === active ? '/img/add_active.png' : '/img/add_inactive.png'" alt="">
            <!-- <hr> -->
            <p :class="index === active ? 'activefont' : ''">{{ item.year }}</p>
          </div>
        </div>
        <img class="scroll-btn"
          :src="active === timearray.length - 1 ? '/img/right_inactive.png' : '/img/right_active.png'" alt=""
          @click="increaseActive">
      </div>
    </div>

    <div class="honor">
      <span class="title">
        荣誉资质
      </span>
      <van-swipe class="honor-swipe" :loop="false" :show-indicators="true">
        <van-swipe-item v-for="pageIndex in Math.ceil(imglist.length / 3)" :key="pageIndex">
          <div class="imgbox">
            <div class="img" v-for="i in imglist.slice((pageIndex - 1) * 3, pageIndex * 3)" :key="i">
              <img :src="i" alt="">
            </div>
          </div>
        </van-swipe-item>
        <template #indicator="{ active, total }">
          <div class="pagedot">
            <div v-for="i in total" :key="i" :class="{ 'active': active === i - 1 }" class="dot">
            </div>
          </div>
        </template>
      </van-swipe>
    </div>

    <div class="customer">
      <span class="title">
        合作客户
      </span>
      <div class="gridbox">
        <img src="/img/cust-i1.png" alt="">
        <img src="/img/cust-i2.png" alt="">
        <img src="/img/cust-i3.png" alt="">
        <img src="/img/cust-i4.png" alt="">
        <img src="/img/cust-i5.png" alt="">
        <img src="/img/cust-i6.png" alt="">
      </div>
    </div>


    <div class="office">
      <span class="title">
        办公区
      </span>
      <div class="add">
        <span>
          义乌运营中心
        </span>
        <p>
          <img src="/img/address.png" alt="">
          义乌市吾悦壹号公馆3502室赢前科技
        </p>
        <p>
          <img src="/img/phone.png" alt="">
          15868932252 13566761067 13429038906
        </p>
      </div>
      <div class="add">
        <span>
          杭州运营中心
        </span>
        <p>
          <img src="/img/address.png" alt="">
          杭州市滨江区凯瑞金座1716室杭州创孵中心
        </p>
        <p>
          <img src="/img/phone.png" alt="">
          15868932252 13566761067 13429038906
        </p>
      </div>
    </div>

  </div>
</template>

<script>
export default {
  name: 'Index',
  data() {
    return {
      active: 0,
      currentPage: 1,
      timearray: [
        {
          year: '2013',
          content: '率先搭建国内微信营销服务体系，正式开展基于微信的营销和管理服务',
          active: 0,
        },
        {
          year: '2014-2015',
          content: '为中小微企业提供系统定制服务；成立策划运营团队，为中大型企业项目提供策划、运营服务',
          active: 1,
        },
        {
          year: '2016',
          content: '为中小微企业以及连锁和终端门店提供一站式的支付代付解决方案，提高开发和营销业务竞争力',
          active: 2,
        },
        {
          year: '2017',
          content: '推出自主电商平台吱了生活，实现客源交叉，产品交叉推送，引流电商',
          active: 3,
        },
        {
          year: '2018',
          content: '与全国各个城市产业园和地方政府招商合作，利用税务洼地为企业提供财税筹划解决方案',
          active: 4,
        },
        {
          year: '2019',
          content: '正式成立微生客移动互联网+项目孵化产业链服务：需求分析、模式设计、系统开发、策划运营、支付代付、财税筹划六个闭环产业链服务',
          active: 5,
        },
        {
          year: '2020-2022',
          content: '成立吱了品牌管理公司和微生客商学院，致力自身品牌资产整合、知名品牌授权、企业咨询、项目策划、培训、资源整接等优势服务',
          active: 6,
        },
        {
          year: '2023-至今',
          content: '升级支付、代付、分账解决方案，优化收支风控，运营风险；成立各类交易所运营中心，为各类平台赋能；杭州建立数字创业服务基地，提升资源整接互联互链能力',
          active: 7,
        },
      ],
      imglist: [
        '/img/cert-i1.png',
        '/img/cert-i1.png',
        '/img/cert-i1.png',
        '/img/cert-i1.png',
        '/img/cert-i1.png',
        '/img/cert-i1.png',
        '/img/cert-i1.png',
        '/img/cert-i1.png',
        '/img/cert-i1.png',
        '/img/cert-i1.png',
      ]
    }
  },
  methods: {
    increaseActive() {
      if (this.active < this.timearray.length - 1) {
        this.active++;
        this.scrollToActive();
      }
    },
    decreaseActive() {
      if (this.active > 0) {
        this.active--;
        this.scrollToActive();
      }
    },
    /**
     * 滚动到当前选中的时间轴项
     */
    scrollToActive() {
      this.$nextTick(() => {
        const line = document.getElementById('line');
        if (line && line.children[this.active]) {
          const activeItem = line.children[this.active];
          // 计算使当前项居中的滚动位置
          const scrollLeft = activeItem.offsetLeft + (activeItem.clientWidth / 2) - (line.clientWidth / 2);
          line.scrollTo({
            left: scrollLeft,
            behavior: 'smooth',
          });
        }
      });
    },
  },
};
</script>
