<template>
  <div class="mian">
    <!-- banner -->
    <div class="banner">
      <div class="title">开元云</div>
      <div class="dase">全球领先的AI服务运营商</div>
    </div>

    <!-- 介绍 -->
    <div class="introduce">
      <!-- 左侧标题 -->
      <div class="left">
        关于<span class="color">我们</span>
      </div>

      <!-- 右侧内容 -->
      <div class="right">
        <div class="content">
          <div class="text">
            <div v-for="(item, index) in companyData" :key="index" style="margin-bottom: .2rem;">
              {{ item }}
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 公司资质 -->
    <div class="qualifications">
      <div class="qualifications-title">
        公司<span class="color">资质</span>
      </div>
      <div class="img-list">
        <!-- 照片滚动 -->
        <!-- 从左向右滚动 -->
        <div class="top-img">
          <div class="scroll-container row1">
            <div v-for="(image, index) in topImages" :key="index" class="scroll-item">
              <img :src="image" alt="资质证书" />
            </div>
            <!-- 重复用于无缝衔接 -->
            <div v-for="(image, index) in topImages" :key="'top-dup-' + index" class="scroll-item">
              <img :src="image" alt="资质证书" />
            </div>
          </div>
        </div>
        <!-- 从右向左滚动 -->
        <div class="bottom-img">
          <div class="scroll-container row2">
            <div v-for="(image, index) in bottomImages" :key="'bottom-' + index" class="scroll-item">
              <img :src="image" alt="资质证书" />
            </div>
            <!-- 重复用于无缝衔接 -->
            <div v-for="(image, index) in bottomImages" :key="'bottom-dup-' + index" class="scroll-item">
              <img :src="image" alt="资质证书" />
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 企业文化 -->
    <div class="culture">
      <!-- 标题 -->
      <div class="culture-title">
        企业<span class="color">文化</span>
      </div>
      <!-- 列表 -->
      <div class="culture-content">
        <div class="culture-item">
          <div class="culture-icon">
            <div class="icon-placeholder">
              <img src="./img/sm.png" alt="">
            </div>
          </div>
          <div class="culture-text">
            <div class="culture-item-title">
              <div>使命</div>
              <div class="culture-en">Mission</div>
            </div>
            <div class="culture-desc">
              让AI无处不在，让智能如此简单
            </div>
          </div>
        </div>

        <div class="culture-item">
          <div class="culture-icon">
            <div class="icon-placeholder">
              <img src="./img/yj.png" alt="">
            </div>
          </div>
          <div class="culture-text">
            <div class="culture-item-title">
              <div>愿景</div>
              <div class="culture-en">Vision</div>
            </div>
            <div class="culture-desc">
              全球领先的AI服务运营商
            </div>
          </div>
        </div>

        <div class="culture-item">
          <div class="culture-icon">
            <div class="icon-placeholder">
              <img src="./img/jzg.png" alt="">
            </div>
          </div>
          <div class="culture-text">
            <div class="culture-item-title">
              <div>价值观</div>
              <div class="culture-en">Value</div>
            </div>
            <div class="culture-desc">
              卓越、开放、创新
            </div>
          </div>
        </div>
      </div>
    </div>
    <!-- 平台优势 -->
    <div class="advantages">
      <!-- 标题 -->
      <div class="advantages-title">
        平台<span class="color">优势</span>
      </div>
      <!-- 列表 -->
      <div class="advantages-content">
        <div
          class="advantages-item"
          v-for="(items, index) in advantagesList"
          :key="index"
          :class="'advantage-item-' + (index + 1)"
        >
          <div class="toptit">
            {{ items.title }}
          </div>
          <div class="btm-text">
            {{ items.desc }}
          </div>
        </div>
      </div>
    </div>
    <Footer />
  </div>
</template>

<script>
import { reqCompany } from '@/api/H5/index.js';
import '../media'
import Footer from '../components/footer/footer.vue';
export default {
  name: 'AboutPage',
  components: {
    Footer
  },
  data() {
    return {
      companyData: {},
      topImages: [
        require('./img/qualifications_img/topimg1.png'),
        require('./img/qualifications_img/topimg2.png'),
        require('./img/qualifications_img/topimg3.png'),
        require('./img/qualifications_img/topimg4.png'),
        require('./img/qualifications_img/topimg5.png'),
        require('./img/qualifications_img/topimg6.png'),
        require('./img/qualifications_img/topimg7.png'),
        require('./img/qualifications_img/topimg8.png')
      ],
      bottomImages: [
        require('./img/qualifications_img/btmimg1.png'),
        require('./img/qualifications_img/btmimg2.png'),
        require('./img/qualifications_img/btmimg3.png'),
        require('./img/qualifications_img/btmimg4.png'),
        require('./img/qualifications_img/btmimg5.png'),
        require('./img/qualifications_img/btmimg6.png'),
        require('./img/qualifications_img/btmimg7.png'),
        require('./img/qualifications_img/btmimg8.png'),
        require('./img/qualifications_img/btmimg9.png'),
        require('./img/qualifications_img/btmimg10.png')
      ],
      advantagesList: [
        {
          title: '精准定位',
          desc: '专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。'
        },
        {
          title: '技术服务',
          desc: '提供人工智能相关的技术服务，为企业解决复杂的技术难题。'
        },
        {
          title: '产品定制',
          desc: '根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。'
        },
        {
          title: '产业赋能',
          desc: '通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。'
        },
        {
          title: '一站式、本地化服务',
          desc: '从售前、售中到售后提供一站式全方位服务'
        },
        {
          title: '提供AI基础设施与模型服务',
          desc: '提供整体底层技术架构和系统支持及模型服务'
        }
      ],
      advantageBgImages: [
        require('./img/advantage1.png'),
        require('./img/advantage2.png'),
        require('./img/advantage3.png'),
        require('./img/advantage4.png'),
        require('./img/advantage5.png'),
        require('./img/advantage6.png')
      ]
    }
  },
  created() {
    this.getCompanyInfo();
  },
  methods: {
    async getCompanyInfo() {
      // 获取当前页面的URL
      const currentUrl = window.location.href;

      // 调用接口，传递url_link参数
      const res = await reqCompany({
        url_link: currentUrl
      });

      console.log('公司信息接口返回:', res);

      if (res.status === true) {
        this.companyData = res.data[0].additional_msg.about.content;
      } else {
        console.error('获取公司信息失败:', res.msg || '未知错误');
      }
    },
  },
  // 监听路由变化如果路由变化需要重新获取数据
  watch: {
    '$route'(to, from) {
      if (to.path !== from.path) {
        this.getCompanyInfo();
      }
    }
  }
}
</script>

<style lang="less" scoped>
.mian {
  height: 100%;
  overflow-y: auto;
}

.banner {
  width: 100%;
  background: url('./img/banner.png') no-repeat;
  background-size: 100% 100%;
  height: 4rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;

  .title {
    font-size: .3rem;
    background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
    font-weight: 600;
  }

  .dase {
    font-size: .338rem;
    color: #222f60;
    margin-top: .1rem;
  }
}

.introduce {
  width: 100%;
  display: flex;
  align-items: center;
  flex-direction: column;
  background: linear-gradient(180deg, #fff 0%, #f6f8fd 40%, #fff 100%);

  .left {
    width: 20%;
    font-size: .3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: .3rem;

    .color {
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  .right {
    width: 90%;
    font-size: .2rem;
    color: #000;
    line-height: 1.6;
  }
}

// 公司资质样式
.qualifications {
  margin-top: .4rem;
  background: url('./img/footer.png') no-repeat;
  background-size: 100% 100%;
  height: 6rem;

  .qualifications-title {
    font-size: .3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: .3rem;

    .color {
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  .img-list {
    overflow: hidden;
    position: relative;

    .top-img,
    .bottom-img {
      height: 50%;
      width: 100%;
      overflow: hidden;
    }

    .scroll-container {
      display: inline-flex;
      height: 100%;
      white-space: nowrap;
      animation-duration: 40s;
      animation-timing-function: linear;
      animation-iteration-count: infinite;
    }

    .row1 {
      animation-name: scrollLeftToRight;
    }

    .row2 {
      animation-name: scrollRightToLeft;
    }

    .scroll-item {
      flex: 0 0 auto;
      width: 120px;
      height: 100%;
      margin: 0 10px;
      border-radius: 8px;
      overflow: hidden;
    }

    .scroll-item img {
      width: 2rem;
      height: 2rem;
      object-fit: contain;
      padding: .08rem;
      box-sizing: border-box;
    }
  }
}

// 企业文化样式
.culture {
  padding: 0 .2rem;
  padding-top: .4rem;
  background: linear-gradient(180deg, #d7e9ff 0%, #fff 100%);

  .culture-title {
    font-size: .3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: .3rem;

    .color {
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  .culture-content {
    .culture-item {
      display: flex;
      align-items: center;
      margin-bottom: .3rem;
      padding: .2rem;
      box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
      border-radius: .1rem;

      .culture-icon {
        width: .8rem;
        height: .8rem;
        border-radius: .1rem;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: .2rem;
        flex-shrink: 0;

        .icon-placeholder {
          font-size: .3rem;
          font-weight: bold;
        }

        img {
          width: 1rem;
          height: 1rem;
        }
      }

      .culture-text {
        flex: 1;

        .culture-item-title {
          display: flex;
          align-items: baseline;
          margin-bottom: .1rem;

          div:first-child {
            font-size: .28rem;
            font-weight: bold;
            color: #333;
            margin-right: .1rem;
          }

          .culture-en {
            font-size: .2rem;
            color: #666;
            font-style: italic;
          }
        }

        .culture-desc {
          font-size: .24rem;
          color: #444;
          line-height: 1.5;
        }
      }
    }
  }
}

// 平台优势样式
.advantages {
  padding: 0 .2rem;
  margin-top: .4rem;
  margin-bottom: .4rem;

  .advantages-title {
    font-size: .3rem;
    font-weight: 600;
    text-align: center;
    margin-bottom: .3rem;

    .color {
      background: linear-gradient(90deg, #275AFF 0%, #2EBDFA 100%);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      background-clip: text;
    }
  }

  .advantages-content {
    width: 100%;
    display: flex;
    justify-content: space-between;
    flex-wrap: wrap;

    .advantages-item {
      margin-bottom: .2rem;
      width: 48%;
      padding: .2rem;
      box-shadow: 0 .05rem .15rem rgba(0, 0, 0, 0.05);
      border-radius: .12rem;
      background-size: 180% 100%;
      background-repeat: no-repeat;
      background-position:right;
      display: flex;
      flex-direction: column;
      justify-content: center;

      .toptit {
        font-weight: 600;
        color: #000;
        font-size: .28rem;
        margin-bottom: .1rem;
      }

      .btm-text {
        font-size: .16rem;
        color: #666;
        line-height: 1.4;
      }
    }

    // 为每个优势项设置不同的背景图片
    .advantage-item-1 {
      background-image: url('./img/advantage1.png');
    }

    .advantage-item-2 {
      background-image: url('./img/advantage2.png');
    }

    .advantage-item-3 {
      background-image: url('./img/advantage3.png');
    }

    .advantage-item-4 {
      background-image: url('./img/advantage4.png');
    }

    .advantage-item-5 {
      background-image: url('./img/advantage5.png');
    }

    .advantage-item-6 {
      background-image: url('./img/advantage6.png');
    }
  }
}

// 滚动动画
@keyframes scrollLeftToRight {
  0% {
    transform: translateX(0);
  }

  100% {
    transform: translateX(-50%);
  }
}

@keyframes scrollRightToLeft {
  0% {
    transform: translateX(-50%);
  }

  100% {
    transform: translateX(0);
  }
}

// 响应式调整
@media (max-width: 375px) {
  .advantages-content .advantages-item {
    width: 100%;
    margin-bottom: .15rem;

    .toptit {
      font-size: .26rem;
    }

    .btm-text {
      font-size: .15rem;
    }
  }
}
</style>
