<template>
  <div class="footer">
    <div class="footer-content">
      <div class="container">
        <!-- 主要页脚信息 -->
        <div class="footer-main">
          <div class="footer-section">
            <div class="footer-logo">
              <img :src="img('logo.png')" alt="丙维科技" class="logo">
              <h3>上海丙维数字科技有限公司</h3>
              <p class="company-desc">AI 工程交付与企业数字化服务</p>
              <router-link to="/index#contact" class="footer-cta">预约咨询</router-link>
            </div>
          </div>

          <div class="footer-section">
            <h4>解决方案</h4>
            <ul class="footer-links">
              <li v-for="solution in solutionsMenu" :key="solution.name">
                <router-link :to="solution.url">{{ solution.name }}</router-link>
              </li>
            </ul>
          </div>
          
          <div class="footer-section">
            <h4>联系咨询</h4>
            <div class="contact-info">
              <div class="contact-item">
                <span class="contact-icon" v-html="icons.phone"></span>
                <a href="tel:13817819452">13817819452</a>
              </div>
              <div class="contact-item">
                <span class="contact-icon" v-html="icons.mail"></span>
                <a href="mailto:bimwe@bimwe.com">bimwe@bimwe.com</a>
              </div>
              <div class="contact-item">
                <span class="contact-icon" v-html="icons.globe"></span>
                <router-link to="/index#contact">提交业务场景</router-link>
              </div>
            </div>
          </div>

          <div class="footer-section">
            <h4>合规信息</h4>
            <ul class="footer-links">
              <li><router-link to="/aboutUs">关于我们</router-link></li>
              <li><router-link to="/legal/privacy">隐私政策</router-link></li>
              <li><router-link to="/legal/terms">服务条款</router-link></li>
              <li><router-link to="/legal/compliance">数据合规说明</router-link></li>
            </ul>
            <div class="footer-address">
              上海市宝山区高逸路112-118号3幢6422室
            </div>
          </div>
        </div>
        
        <!-- 页脚底部 -->
        <div class="footer-bottom">
          <div class="footer-bottom-content">
            <div class="copyright">
              <p>&copy; {{ currentYear }} 上海丙维数字科技有限公司. 保留所有权利.</p>
            </div>
            <div class="footer-extra">
              <div class="beian">
                <span class="beian-icon" v-html="icons.shield"></span>
                <span>沪ICP备19005870号-1</span>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
    
    <!-- 返回顶部按钮 -->
    <button type="button" class="back-to-top" @click="scrollToTop" v-show="showBackToTop" aria-label="返回顶部">
      <span class="arrow" v-html="icons.arrowUp"></span>
    </button>
  </div>
</template>

<script>
import { getFooterSolutionsMenu } from '../config/menu'
import { img } from '@/utils/image'

export default {
  name: 'ifooter',
  computed: {
    currentYear() {
      return new Date().getFullYear()
    }
  },
  data() {
    const icon = (path) => `<svg viewBox="0 0 24 24" aria-hidden="true" focusable="false">${path}</svg>`
    return {
      img,
      showBackToTop: false,
      solutionsMenu: getFooterSolutionsMenu(),
      icons: {
        phone: icon('<path d="M22 16.9v3a2 2 0 0 1-2.2 2 19.8 19.8 0 0 1-8.6-3.1 19.4 19.4 0 0 1-6-6A19.8 19.8 0 0 1 2.1 4.2 2 2 0 0 1 4.1 2h3a2 2 0 0 1 2 1.7c.1 1 .4 1.9.7 2.8a2 2 0 0 1-.5 2.1L8.1 9.9a16 16 0 0 0 6 6l1.3-1.2a2 2 0 0 1 2.1-.5c.9.3 1.8.6 2.8.7a2 2 0 0 1 1.7 2Z"/>'),
        mail: icon('<path d="M4 5h16a2 2 0 0 1 2 2v10a2 2 0 0 1-2 2H4a2 2 0 0 1-2-2V7a2 2 0 0 1 2-2Z"/><path d="M22 7l-10 6L2 7"/>'),
        globe: icon('<circle cx="12" cy="12" r="10"/><path d="M2 12h20M12 2a15.3 15.3 0 0 1 0 20M12 2a15.3 15.3 0 0 0 0 20"/>'),
        shield: icon('<path d="M12 3l7 4v5c0 4.5-2.9 7.5-7 9-4.1-1.5-7-4.5-7-9V7l7-4Z"/><path d="M9 12l2 2 4-5"/>'),
        arrowUp: icon('<path d="M12 19V5M6 11l6-6 6 6"/>')
      }
    }
  },
  mounted() {
    window.addEventListener('scroll', this.handleScroll)
    this.handleScroll()
  },
  beforeDestroy() {
    window.removeEventListener('scroll', this.handleScroll)
  },
  methods: {
    handleScroll() {
      this.showBackToTop = window.pageYOffset > 300
    },
    
    scrollToTop() {
      window.scrollTo({
        top: 0,
        behavior: 'smooth'
      })
    }
  }
}
</script>

<style scoped>
.footer {
  background: linear-gradient(180deg, #f8fafc 0%, #f1f5f9 100%);
  color: #0f172a;
  position: relative;
  border-top: 1px solid #e2e8f0;
}

.footer-content {
  padding: 56px 0 0 0;
}

.container {
  max-width: 1200px;
  margin: 0 auto;
  padding: 0 20px;
}

/* 主要页脚区域 */
.footer-main {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(250px, 1fr));
  gap: 36px;
  margin-bottom: 42px;
}

.footer-section h4 {
  font-size: 1.08rem;
  font-weight: 600;
  margin-bottom: 16px;
  color: #0f172a;
  position: relative;
}

.footer-section h4::after {
  content: '';
  position: absolute;
  bottom: -7px;
  left: 0;
  width: 30px;
  height: 2px;
  background: #94a3b8;
  border-radius: 1px;
}

/* Logo区域 */
.footer-logo .logo {
  height: 50px;
  margin-bottom: 15px;
}

.footer-logo h3 {
  font-size: 1.14rem;
  font-weight: 600;
  margin-bottom: 10px;
  color: #0f172a;
}

.company-desc {
  color: #475569;
  font-size: 0.95rem;
  line-height: 1.5;
}

.footer-cta {
  display: inline-flex;
  align-items: center;
  min-height: 38px;
  margin-top: 18px;
  padding: 0 16px;
  border-radius: 8px;
  background: #2563eb;
  color: #fff;
  font-size: 14px;
  font-weight: 600;
  text-decoration: none;
  transition: background-color 0.25s ease, transform 0.25s ease;
}

.footer-cta:hover {
  background: #1d4ed8;
  transform: translateY(-1px);
}

/* 链接列表 */
.footer-links {
  list-style: none;
  padding: 0;
  margin: 0;
}

.footer-links li {
  margin-bottom: 12px;
}

.footer-links a {
  color: #475569;
  text-decoration: none;
  transition: color 0.25s ease;
  display: inline-block;
  position: relative;
}

.contact-item a {
  color: #475569;
  text-decoration: none;
  transition: color 0.25s ease;
  position: relative;
  display: inline-flex;
  align-items: center;
  line-height: 1.35;
}

.footer-links a:hover,
.contact-item a:hover {
  color: #1d4ed8;
}

/* 联系信息 */
.contact-info {
  display: flex;
  flex-direction: column;
  gap: 15px;
}

.contact-item {
  display: flex;
  align-items: center;
  gap: 12px;
  color: #475569;
  font-size: 0.95rem;
}

.contact-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 20px;
  height: 20px;
  line-height: 0;
  text-align: center;
  color: #64748b;
  flex-shrink: 0;
}

.footer-address {
  margin-top: 18px;
  color: #64748b;
  font-size: 0.86rem;
  line-height: 1.6;
}

.contact-icon /deep/ svg,
.beian-icon /deep/ svg,
.back-to-top .arrow /deep/ svg {
  width: 100%;
  height: 100%;
  fill: none;
  stroke: currentColor;
  stroke-width: 1.8;
  stroke-linecap: round;
  stroke-linejoin: round;
}

/* 页脚底部 */
.footer-bottom {
  border-top: 1px solid #dbe3ee;
  padding: 22px 0;
}

.footer-bottom-content {
  display: flex;
  justify-content: space-between;
  align-items: center;
  flex-wrap: wrap;
  gap: 20px;
}

.copyright p {
  color: #64748b;
  font-size: 0.9rem;
  margin: 0;
}

.footer-extra {
  display: flex;
  align-items: center;
  gap: 20px;
}

.beian {
  display: flex;
  align-items: center;
  gap: 8px;
  color: #64748b;
  font-size: 0.9rem;
}

.beian-icon {
  width: 20px;
  height: 20px;
  text-align: center;
  color: #94a3b8;
}

/* 返回顶部按钮 */
.back-to-top {
  position: fixed;
  bottom: 30px;
  right: 30px;
  width: 50px;
  height: 50px;
  padding: 0;
  border: 0;
  background: #2563eb;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  transition: all 0.3s ease;
  box-shadow: 0 10px 24px rgba(37, 99, 235, 0.2);
  z-index: 1000;
}

.back-to-top:hover {
  transform: translateY(-3px);
  background: #1d4ed8;
  box-shadow: 0 14px 28px rgba(37, 99, 235, 0.24);
}

.back-to-top .arrow {
  display: block;
  width: 22px;
  height: 22px;
  color: white;
}

/* 响应式设计 */
@media (max-width: 768px) {
  .footer-content {
    padding: 28px 0 0 0;
  }
  
  .footer-main {
    grid-template-columns: 1fr;
    gap: 20px;
    margin-bottom: 28px;
    justify-items: center;
    text-align: center;
  }

  .footer-section {
    width: min(520px, 100%);
  }

  .footer-section h4 {
    margin-bottom: 12px;
  }

  .footer-logo .logo {
    margin-bottom: 10px;
  }

  .footer-logo h3 {
    margin-bottom: 8px;
  }

  .footer-cta {
    margin-top: 14px;
  }

  .footer-links li {
    margin-bottom: 8px;
  }

  .contact-info {
    gap: 10px;
  }

  .footer-address {
    margin-top: 12px;
  }

  .footer-section h4::after {
    left: 50%;
    transform: translateX(-50%);
  }

  .footer-links {
    display: flex;
    flex-direction: column;
    align-items: center;
  }

  .contact-info {
    align-items: center;
    width: 100%;
  }

  .contact-item {
    justify-content: center;
    text-align: center;
    flex-wrap: nowrap;
  }

  .footer-logo {
    display: flex;
    flex-direction: column;
    align-items: center;
  }
  
  .footer-bottom {
    padding: 14px 0;
  }

  .footer-bottom-content {
    flex-direction: column;
    text-align: center;
    gap: 12px;
  }
  
  .back-to-top {
    bottom: 20px;
    right: 20px;
    width: 45px;
    height: 45px;
  }
  
  .back-to-top .arrow {
    font-size: 1.3rem;
  }
}

</style>
