<template>
  <div class="about-page" style="width: 100%;">
    <!-- Banner部分 -->
    <div class="banner">
      <div v-if="JSON.stringify(logoInfoNew) !== '{}'" style="font-size: 38px;">
        <div>{{ logoInfoNew.home.bannerTitle }}</div>
        <p style="color: #0e0b0b">全球领先的AI服务运营商</p>
      </div>
    </div>

    <!-- 关于我们部分 -->
    <div class="mainBox" style="padding-top: 35px">
      <div class="inBox">
        <div class="leftBox">
          <p class="leftBoxtitle">关于<span class="gradient-text">我们</span></p>
        </div>
        <div v-if="JSON.stringify(logoInfoNew) !== '{}'" class="rightBox">
          <p v-for="(i, index) in logoInfoNew.about.content" :key="index">
            {{ i }}
          </p>
        </div>
      </div>
    </div>

    <!-- 公司资质 -->
    <div class="zizhi">
      <div style="width: 1400px;">
        <div style="text-align:center;font-size: 30px;font-weight: bold;margin: 55px 0;width: 100%;margin-bottom: 50px">
          公司<span class="gradient-text">资质</span>
        </div>
        <LogoTwo></LogoTwo>
      </div>
    </div>

    <!-- 企业文化 -->
    <div class="enterprise">
      <div class="enterprise-inner">
        <div class="left-box">
          <div class="left-title">
            <span>企业<span class="gradient-text">文化</span></span>
          </div>
        </div>
        <div class="right-box">
          <div class="item">
            <div class="item-img">
              <img src="./img/sm.png" alt="使命图标">
            </div>
            <div class="item-content">
              <div class="item-tit">
                <div>使命</div>
                <div>Mission</div>
              </div>
              <div class="item-text">
                <p>让AI无处不在，让智能如此简单</p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-img">
              <img src="./img/yj.png" alt="愿景图标">
            </div>
            <div class="item-content">
              <div class="item-tit">
                <div>愿景</div>
                <div>Vision</div>
              </div>
              <div class="item-text">
                <p>全球领先的AI服务运营商</p>
              </div>
            </div>
          </div>
          <div class="item">
            <div class="item-img">
              <img src="./img/jzg.png" alt="价值观图标">
            </div>
            <div class="item-content">
              <div class="item-tit">
                <div>价值观</div>
                <div>Value</div>
              </div>
              <div class="item-text">
                <p>卓越、开放、创新</p>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>

    <!-- 优势部分 - 使用动态绑定 -->
    <div class="advantage">
      <div class="advantage-tit">
        <span>平台<span class="gradient-text">优势</span></span>
      </div>
      <!-- 优势列表 -->
      <div class="advantage-content">
        <div class="advantage-grid">
          <div
            v-for="(item, index) in advantageItems"
            :key="index"
            class="advantage-item"
            :class="{
              'hovered': hoveredIndex === index && item.hasHoverEffect,
              'no-hover-effect': !item.hasHoverEffect
            }"
            @mouseenter="hoveredIndex = index"
            @mouseleave="hoveredIndex = null"
            :style="{
              backgroundImage: `url(${getBackgroundImage(index)})`
            }"
          >
            <div class="content-wrapper">
              <div class="top-tit">
                {{ item.title }}
              </div>
              <div class="btm-tit">
                {{ item.description }}
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Vue from 'vue'
import LogoTwo from "@/views/homePage/mainPage/logoG/logoTwo.vue";
import { mapGetters, mapState } from "vuex";

export default Vue.extend({
  name: "about",
  components: { LogoTwo },
  data() {
    return {
      hoveredIndex: null,
      advantageItems: [
        {
          title: '精准定位',
          description: '专注于为各行业提供专业、高效的人工智能解决方案，助力企业智能化转型。',
          normalImage: 'advantage1.png',
          hoverImage: 'advantageColor1.png', // 第一张没有彩色版本，使用同一张图片
          hasHoverEffect: true // 标记没有悬停效果
        },
        {
          title: '技术服务',
          description: '提供人工智能相关的技术服务，为企业解决复杂的技术难题。',
          normalImage: 'advantage2.png',
          hoverImage: 'advantageColor2.png',
          hasHoverEffect: true
        },
        {
          title: '产品定制',
          description: '根据企业的特定需求，定制开发人工智能产品，满足不同场景的应用需求。',
          normalImage: 'advantage3.png',
          hoverImage: 'advantageColor3.png',
          hasHoverEffect: true
        },
        {
          title: '产业赋能',
          description: '通过人工智能技术，为传统产业赋能，提升产业的竞争力和创新能力。',
          normalImage: 'advantage4.png',
          hoverImage: 'advantageColor4.png',
          hasHoverEffect: true
        },
        {
          title: '一站式、本地化服务',
          description: '从售前、售中到售后提供一站式全方位服务',
          normalImage: 'advantage5.png',
          hoverImage: 'advantageColor5.png',
          hasHoverEffect: true
        },
        {
          title: '提供AI基础设施与模型服务',
          description: '提供整体底层技术架构和系统支持及模型服务',
          normalImage: 'advantage6.png',
          hoverImage: 'advantageColor6.png',
          hasHoverEffect: true
        }
      ]
    }
  },
  computed: {
    ...mapGetters(["sidebar", "avatar", "device"]),
    ...mapState({
      isShowPanel: (state) => state.product.showHomeNav,
      navIndex: (state) => state.product.navIndex,
      gridObj: state => state.operationAnalysis.gridObj,
      mybalance: state => state.user.mybalance,
      logoutUrl: state => state.login.logoutUrl,
      loginState: state => state.login.loginState,
      logoInfoNew: state => state.product.logoInfoNew,
    }),
    showRegisterButton() {
      const orgType = window.sessionStorage.getItem('org_type');
      const userId = window.sessionStorage.getItem('userId');
      console.log("此时是:", orgType !== '2' && orgType !== '3' && userId !== null)
      return orgType !== '2' && orgType !== '3' && userId === null;
    },
    username() {
      return sessionStorage.getItem('username') || '';
    },
  },
  methods: {
    getBackgroundImage(index) {
      const item = this.advantageItems[index];

      // 如果有悬停效果且当前被悬停，使用悬停图片
      if (this.hoveredIndex === index && item.hasHoverEffect) {
        return require(`./img/${item.hoverImage}`);
      } else {
        // 正常状态或没有悬停效果
        return require(`./img/${item.normalImage}`);
      }
    }
  }
})
</script>

<style scoped lang="scss">
.banner {
  background: url("./img/Newbanner.png") no-repeat top center;
  display: flex;
  justify-content: center;
  background-size: cover;
  align-items: center;
  height: 500px;
  flex-direction: column;
  font-weight: bold;

  div {
    background: linear-gradient(to right, #275AFF, #2EBDFA);
    -webkit-background-clip: text;
    background-clip: text;
    color: transparent;
    display: inline-block;
    text-align: center;
  }
}

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

  .inBox {
    display: flex;
    justify-content: space-between;
    align-items: center;
    width: 1450px;

    .leftBox {
      width: 25%;
      height: 100%;
      display: flex;
      justify-content: center;
      align-items: flex-start;

      .leftBoxtitle {
        font-size: 30px;
        font-weight: bold;
      }

      img {
        width: 300px;
      }
    }

    .rightBox {
      width: 75%;
      height: 100%;
      line-height: 2;
    }
  }
}

/* 企业文化部分样式 */
.enterprise {
  width: 100%;
  background: linear-gradient(180deg, #d7e9ff 0%, #fff 100%);
  padding: 80px 0;
  display: flex;
  justify-content: center;
  align-items: center;

  .enterprise-inner {
    width: 1400px;
    display: flex;
    align-items: center;

    .left-box {
      width: 25%;
      display: flex;
      justify-content: center;
      align-items: flex-start;

      .left-title {
        font-size: 30px;
        font-weight: bold;
        display: flex;
        justify-content: center;
      }
    }

    .right-box {
      width: 70%;
      display: flex;
      flex-direction: column;
      gap: 40px;

      .item {
        display: flex;
        align-items: center;
        border-radius: 12px;
        padding: 30px;
        box-shadow: 0 5px 15px rgba(0, 0, 0, 0.05);
        transition: all 0.3s ease;

        &:hover {
          transform: translateY(-5px);
          box-shadow: 0 8px 25px rgba(0, 0, 0, 0.1);
        }

        .item-img {
          flex-shrink: 0;
          margin-right: 25px;

          img {
            width: 70px;
            height: 70px;
            object-fit: contain;
          }
        }

        .item-content {
          flex: 1;
          display: flex;
          align-items: center;

          .item-tit {
            margin-bottom: 15px;

            div:first-child {
              font-size: 24px;
              font-weight: bold;
              color: #333;
              margin-right: 15px;
            }

            div:last-child {
              font-size: 16px;
              color: #666;
              font-style: italic;
            }
          }

          .item-text {
            margin-left: 40px;

            p {
              font-size: 18px;
              line-height: 1.6;
              color: #444;
              margin: 0;
            }
          }
        }
      }
    }
  }
}

.zizhi {
  height: 900px;
  width: 100%;
  background: url("./img/zizhi.png") no-repeat;
  background-size: 100% 100%;
  padding-bottom: 15px;
  display: flex;
  justify-content: center;
  align-items: center;
}

/* 新增渐变文字样式 */
.gradient-text {
  background: linear-gradient(to right, #0066FF, #66CCFF);
  -webkit-background-clip: text;
  background-clip: text;
  color: transparent;
  display: inline-block;
}

// 优势样式
.advantage {
  padding: 80px 0;
  background:#fff;

  .advantage-tit {
    text-align: center;
    font-size: 30px;
    font-weight: bold;
    margin-bottom: 60px;
  }

  .advantage-content {
    display: flex;
    justify-content: center;

    .advantage-grid {
      display: grid;
      grid-template-columns: repeat(2, 1fr);
      gap: 30px;
      width: 1200px;

      .advantage-item {
        position: relative;
        border-radius: 12px;
        padding: 40px 30px;
        transition: all 0.3s ease;
        height: 140px;
        display: flex;
        flex-direction: column;
        justify-content: center;
        overflow: hidden;
        cursor: pointer;

        /* 背景图设置 */
        background-size: cover !important;
        background-position: center !important;
        background-repeat: no-repeat !important;

        .content-wrapper {
          position: relative;
          z-index: 2;
        }

        .top-tit {
          font-size: 22px;
          font-weight: bold;
          margin-bottom: 15px;
          color: #333;
          transition: all 0.3s ease;
        }

        .btm-tit {
          font-size: 16px;
          line-height: 1.6;
          color: #666;
          transition: all 0.3s ease;
        }

        /* 有悬停效果的卡片 */
        &:not(.no-hover-effect) {
          &.hovered {
            transform: translateY(-5px);
            box-shadow: 0 8px 25px rgba(0, 102, 255, 0.2);

            .top-tit {
              color: #fff;
            }

            .btm-tit {
              color: rgba(255, 255, 255, 0.9);
            }
          }
        }

        /* 没有悬停效果的卡片（第一张） */
        &.no-hover-effect {
          cursor: default;

          &:hover {
            transform: none;
            box-shadow: none;
          }

          .top-tit, .btm-tit {
            color: #333;
          }
        }
      }
    }
  }
}

/* 响应式设计 - 适配不同屏幕尺寸 */
@media (max-width: 1200px) {
  .mainBox .inBox,
  .enterprise .enterprise-inner,
  .advantage-content .advantage-grid {
    width: 95% !important;
  }

  .advantage-content .advantage-grid {
    grid-template-columns: 1fr;
  }
}

@media (max-width: 768px) {
  .banner {
    height: 300px;
    font-size: 28px !important;

    p {
      font-size: 16px;
    }
  }

  .mainBox .inBox {
    flex-direction: column;

    .leftBox, .rightBox {
      width: 100% !important;
    }

    .leftBox {
      margin-bottom: 30px;
    }
  }

  .enterprise .enterprise-inner {
    flex-direction: column;

    .left-box, .right-box {
      width: 100% !important;
    }

    .left-box {
      margin-bottom: 40px;
      justify-content: flex-start;
    }
  }

  .zizhi {
    height: auto;
    padding: 50px 0;
  }

  .advantage-item {
    height: 160px !important;
  }
}
</style>
