<template>
  <div>


    <!-- footer部分 -->
    <div class="footer">
      <div class="footer-content">
        <!-- 顶部信息 -->
        <div class="footer-center">
          <div class="footer-top">
            <div class="logo-footer">
              <img :src="logoImg" alt="公司logo" v-if="logoImg">
            </div>
          </div>
          <div class="center">
            <div class="contact-item">
              <i class="iconfont icon-dizhi"></i>
              <span class="label">地址：</span>
              <span class="value">{{ address }}</span>
            </div>

            <div class="contact-item">
              <i class="iconfont icon-dianhua"></i>
              <span class="label">电话：</span>
              <div class="phone-numbers">
                <a href="tel:400-6150805" class="phone-link">400-6150805</a>
                <span class="phone-separator">/</span>
                <a href="tel:010-65917875" class="phone-link">010-65917875</a>
              </div>
            </div>
            <div class="contact-item">
              <i class="iconfont icon-youxiang"></i>
              <span class="label">邮箱：</span>
              <a href="mailto:Open-computing@kaiyuancloud.cn" class="email-link">
                Open-computing@kaiyuancloud.cn
              </a>
            </div>
            <div class="contact-item">
              <i class="iconfont icon-dianhua"></i>
              <span class="label">ICP备案号：</span>
              <div class="phone-numbers">
                <span class="icp-number">{{ ICP }}</span>
              </div>
            </div>
          </div>
          <div class="mobile-qr">
            <div class="qr-item">
              <div class="qr-code">
                <img src="@/assets/kyy/kyy公众号.jpg" alt="微信客服二维码">
              </div>
              <span class="qr-desc">关注公众号</span>
            </div>
            <div class="qr-item">
              <div class="qr-code">
                <img src="@/assets/kyy/客服wechat.png" alt="微信客服二维码">
              </div>
              <span class="qr-desc">微信客服</span>
            </div>
          </div>
        </div>

        <!-- 备案信息 -->
        <!-- <div class="footer-bottom">


          <div class="record-info">
            <div class="police-record">
              <img src="@/image/login/policeInsignia/policeInsignia.png" alt="公安备案图标" class="police-icon">
              <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer" target="_blank"
                class="police-link">
                京公网安备 11010502054007号
              </a>
            </div>
            <div class="license-record">
              <router-link tag="a" target="_blank" class="license-link" :to="{ name: 'homePageImage' }">
                经营许可证：京B2-20232313
              </router-link>
            </div>
          </div>
        </div> -->
      </div>
    </div>
  </div>
</template>

<script>
import { getLogoAPI } from "@/api/login"

export default {
  data() {
    return {

      // 公司信息
      logoImg: require("@/assets/logo/colorLogo.png"),
      logoText: "开元云(北京)科技有限公司",
      url: window.location.href,
      photosUrl: [],
      ICP: "京ICP备2022001945号-1",
      address: "农业展览馆13号瑞辰国际中心518B(团结湖地铁站c东南口步行420米)",
    }
  },

  computed: {
    duplicatedImages() {
      return [...this.images, ...this.images]
    }
  },

  created() {
    this.getCompanyInfo()
  },

  methods: {
    // 获取公司信息
    async getCompanyInfo() {
      const params = {
        url_link: this.parseURL(this.url)
      }

      const res = await getLogoAPI(params)

      if (res.status && res.data && res.data.length) {
        this.photosUrl = res.data[0]

        if (this.photosUrl.orgname !== '业主机构') {
          this.logoImg = this.photosUrl.logo || this.logoImg
          this.logoText = this.photosUrl.orgname || this.logoText
          this.ICP = this.photosUrl.license_number || this.ICP
          this.address = this.photosUrl.address || this.address
        }
      } else {
        this.showErrorMessage(res.msg || '获取公司信息失败')
      }
    },

    // 解析URL
    parseURL(url) {
      if (url.includes("#")) {
        return url.split("#")[0]
      }
      return url
    },

    // 显示错误信息
    showErrorMessage(message) {
      this.$message({
        message,
        type: "error"
      })
    },
  }
}
</script>

<style lang="less" scoped>

@keyframes scroll {
  0% {
    transform: translateX(0);
  }

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

/* Footer样式 */
.footer {
  width: 100%;
  background: #f6f8fd;
  color: #333;
  padding: 0.4rem 0.2rem 0.4rem;
  position: relative;
  overflow: hidden;
  border-top: 1px solid #e8edf5;
}

.footer-content {
  max-width: 12.8rem;
  margin: 0 auto;
  position: relative;
}

/* 顶部信息区域 */
.footer-top {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
}

.logo-footer {
  width: 2.4rem;
  height: .8rem;
  margin-bottom: 0.4rem;
  border-radius: 0.12rem;

  img {
    width: 100%;
    height: 100%;
  }
}

.footer-center {
  font-size: 0.24rem;
  padding: 0.3rem 0.2rem;
  background: #fff;
  border-radius: 0.16rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  border: 1px solid #eef2f9;
  width: 100%;

  @media (min-width: 768px) {
    grid-template-columns: 1fr 1fr;
    gap: 0.3rem 0.6rem;
  }

  .center {
    .contact-item {
      display: flex;
      align-items: flex-start;
      padding: 0.16rem 0.2rem;
      border-radius: 0.12rem;

      .iconfont {
        width: 0.2rem;
        height: 0.2rem;
        margin-right: 0.12rem;
        margin-top: 0.02rem;
        color: #275AFF;
        flex-shrink: 0;
        font-size: 0.26rem;
      }

      .label {
        color: #666;
        flex-shrink: 0;
        font-weight: 500;
        margin-right: 0.08rem;
        font-size: 0.24rem;
      }

      .value {
        color: #444;
        flex: 1;
        line-height: 1.5;
      }

      .phone-numbers {
        display: flex;
        flex-direction: column;
        gap: 0.08rem;

        @media (min-width: 768px) {
          flex-direction: row;
          align-items: center;
          gap: 0.16rem;
        }
      }

      .phone-link {
        color: #333;
        text-decoration: none;
        transition: all 0.3s;
        font-weight: 500;
        font-size: 0.208rem;

        &:hover {
          color: #275AFF;
          text-decoration: underline;
        }
      }

      .phone-separator {
        color: #999;
        font-weight: 300;

        @media (max-width: 768px) {
          display: none;
        }
      }

      .email-link {
        color: #275AFF;
        text-decoration: none;
        word-break: break-all;
        font-weight: 500;
        font-size: 0.208rem;

        &:hover {
          color: #2ebdfa;
          text-decoration: underline;
        }
      }
    }
  }
}

/* 移动端二维码 */
.mobile-qr {
  display: flex;
  justify-content: center;
  width: 100%;
  margin-top: 0.4rem;

  @media (min-width: 768px) {
    display: none;
  }

  .qr-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    background: #fff;
    border-radius: 0.16rem;
    padding: 0.24rem;
    box-shadow: 0 2px 12px rgba(39, 90, 255, 0.08);
    border: 1px solid #eef2f9;
    width: 100%;
    max-width: 2.4rem;
    margin-right: 0.4rem;

    .qr-code {
      width: 1.6rem;
      height: 1.6rem;
      background: #fff;
      border-radius: 0.12rem;
      padding: 0.12rem;
      border: 1px solid #eef2f9;
      margin-bottom: 0.16rem;

      img {
        width: 100%;
        height: 100%;
        object-fit: contain;
        border-radius: 0.04rem;
      }
    }

    .qr-desc {
      color: #333;
      font-size: 0.208rem;
      font-weight: 500;
    }
  }
}

/* 底部信息区域 */
.footer-bottom {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 0.3rem 0.2rem;
  background: #fff;
  border-radius: 0.16rem;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
  margin-top: 0.4rem;
  border: 1px solid #eef2f9;

  @media (min-width: 768px) {
    flex-direction: row;
    justify-content: space-between;
    align-items: center;
    text-align: left;
    padding: 0.3rem 0.4rem;
  }
}

.icp-info {
  margin-bottom: 0.24rem;
  display: flex;
  flex-direction: column;
  align-items: center;

  @media (min-width: 768px) {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0;
  }

  .icp-item {
    display: flex;
    align-items: center;
    gap: 0.08rem;
    margin-bottom: 0.12rem;

    @media (min-width: 768px) {
      margin-bottom: 0;
    }

    .icp-text {
      color: #888;
      font-size: 0.24rem;
    }

    .icp-number {
      color: #444;
      font-weight: 500;
      font-size: 0.24rem;
    }
  }

  .copyright {
    color: #888;
    font-size: 0.24rem;
    font-weight: 300;
  }
}

.record-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.16rem;
  margin-bottom: 0.24rem;

  @media (min-width: 768px) {
    flex-direction: row;
    align-items: center;
    gap: 0.6rem;
    margin-bottom: 0;
  }
}

.police-record {
  display: flex;
  align-items: center;
  gap: 0.1rem;
  padding: 0.08rem 0.16rem;
  background: #f9fafc;
  border-radius: 0.24rem;
  transition: all 0.3s;
  border: 1px solid #eef2f9;

  &:hover {
    background: #f0f5ff;
    border-color: #275AFF;
    transform: translateY(-2px);
  }

  .police-icon {
    width: 0.18rem;
    height: 0.18rem;
  }

  .police-link {
    color: #666;
    text-decoration: none;
    font-size: 0.24rem;

    &:hover {
      color: #275AFF;
      text-decoration: underline;
    }
  }
}

.license-record {
  .license-link {
    color: #666;
    text-decoration: none;
    font-size: 0.24rem;
    padding: 0.08rem 0.16rem;
    background: #f9fafc;
    border-radius: 0.24rem;
    transition: all 0.3s;
    border: 1px solid #eef2f9;

    &:hover {
      background: #f0f5ff;
      color: #275AFF;
      text-decoration: underline;
      transform: translateY(-2px);
      border-color: #275AFF;
    }
  }
}
</style>
