<template>
  <div id="homeOut" class="homeOut">
    <TopBox id="topBox"></TopBox>

    <div class="home-router-view">
      <router-view></router-view>
    </div>
    <!--    footer-->
    <div class="footer">
      <div class="footer-main">
        <div class="footer-brand-col">
          <img
            v-if="hasLogoInfo"
            :src="footerHomeInfo.logoImg"
            alt="logo"
            class="footer-brand-logo"
          >
        </div>

        <div class="footer-link-cols">
          

          <div class="footer-link-col">
            <h4 class="footer-col-title">{{ $t('home.footerProducts') }}</h4>
            <ul class="footer-link-list">
              <li
                v-for="item in footerProductServices"
                :key="item.label"
                class="footer-link-item"
                :class="{ clickable: !!item.path }"
                @click="goFooterService(item.path)"
              >
                {{ item.label }}
              </li>
            </ul>
          </div>
          
        <div class="footer-contact-col">
          <h4 class="footer-col-title">{{ $t('home.footerContact') }}</h4>
          <ul class="footer-contact-list">
            <li>地址：<span>{{ footerHomeInfo.adress }}</span></li>
            <li>邮箱：<span>{{ footerHomeInfo.email }}</span></li>
            <li>电话：<span>{{ footerHomeInfo.mobile }}</span></li>
          </ul>
          <div v-if="showFooterQrcode" class="footer-qrcode-row">
            <div class="qr-box">
              <div class="qr-code">
                <img src="./img/img.png" alt="">
              </div>
              <span class="qr-content">{{ $t('home.onlineChat') }}</span>
            </div>
            <div class="qr-box">
              <div class="qr-code">
                <img src="./img/kefu.jpg" alt="">
              </div>
              <span class="qr-content">关注公众号</span>
            </div>
            
          </div>
        </div>
        </div>

      </div>
      <div class="footer-record">
        <span v-if="hasLogoInfo"
              class="footer-record__text"><span
          class="goStyle"
        @click="goOut('https://beian.miit.gov.cn/#/Integrated/index')">
           京ICP备{{
            footerHomeInfo.license
          }}&nbsp;
       <span style="padding: 4px;"></span>
        </span> &nbsp;&nbsp;{{
            footerHomeInfo.footerTitle
          }}&nbsp;{{
            footerHomeInfo.copyright
          }}&nbsp; </span>
        <!--        IPC备案号:{{ ICP }} <span style="margin-left: 0.267rem">版权所有 @kaiyuanyun 2023</span>-->
        <!--        <img src="../../image/login/policeInsignia/policeInsignia.png" alt=""-->
        <!--             style="width:0.227rem;height:0.227rem;margin-right: 0.027rem;">-->
        <!--        <a href="https://beian.mps.gov.cn/#/query/webSearch?code=11010502054007" rel="noreferrer"-->
        <!--           target="_blank"-->
        <!--           style="margin-right:0.4rem;">京公网安备11010502054007</a>-->
        <!--        <span>-->
        <!--                  <router-link tag="a" target="_blank"-->
        <!--                               :to="{ name: 'homePageImage' }">经营许可证:京B2-20232313</router-link>-->
        <!--                </span>-->
      </div>
    </div>
  </div>
</template>
<script>
import Vue from 'vue'
import TopBox from "@/views/homePage/components/topBox/index.vue";
import {mapGetters, mapState} from "vuex";

export default Vue.extend({
  name: "indexLast",
  components: {TopBox},
  data() {
    return {
      currentBaseMenu: "hot", // 默认选中热门推荐
      baseMenu: [
        {
          id: "hot",
          name: "热门推荐",
          icon: require("./newImg/niu.png"),
          activeIcon: require("./newImg/niuActive.png")
        },
        {
          id: "computing",
          name: "计算",
          icon: require("./newImg/computing.png"),
          activeIcon: require("./newImg/computingActive.png")
        },
        {
          id: "cun",
          name: "存储",
          icon: require("./newImg/cun.png"),
          activeIcon: require("./newImg/cunActive.png") // 注意路径修正
        },
        {
          id: "database",
          name: "数据库",
          icon: require("./newImg/database.png"),
          activeIcon: require("./newImg/databaseActive.png")
        },
        {
          id: "container",
          name: "容器",
          icon: require("./newImg/container.png"),
          activeIcon: require("./newImg/containerActive.png")
        }
      ],
      footerProductServices: [
        { label: 'Token市集', path: '/homePage/tokenMarket' },
        { label: '算力市场', path: '/homePage/computeMarket' },
        { label: 'OPC公共服务平台', path: '/homePage/opc' },
        { label: '训推平台', path: '/homePage/trainPlatform' },
        { label: '智能体商店', path: '/homePage/agentStore' },
        { label: '供需广场', path: '/ncmatchHome/supplyAndDemandSquare' },
        { label: '文档中心', path: '/homePage/new' },
      ],
      footerAboutUs: [
        { label: '关于我们', path: '/homePage/about' },
        { label: '文件中心', path: '/homePage/new' },
        { label: '联系我们', path: '/homePage/about' },
        { label: '人才招聘', path: '' },
        { label: '云作坊', path: '' },
        { label: '友情链接', path: '' },
      ],
      footerSolutions: [
        { label: '汽车行业', path: '/homePage/solve/hospital' },
        { label: '金融行业', path: '' },
        { label: '政务行业', path: '' },
        { label: '工业行业', path: '' },
        { label: '教育行业', path: '' },
        { label: '医疗行业', path: '' },
        { label: '互联网行业', path: '' },
      ],
      footerSupports: [
        { label: '备案服务', path: '' },
        { label: '服务咨询', path: '' },
        { label: '建议与反馈', path: '/homePage/about' },
        { label: '常见问题', path: '/homePage/new' },
        { label: '帮助中心', path: '/homePage/new' },
      ]
    }
  },
  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;
    },
    hasLogoInfo() {
      return this.logoInfoNew && JSON.stringify(this.logoInfoNew) !== '{}' && this.logoInfoNew.home
    },
    footerHomeInfo() {
      return this.hasLogoInfo ? this.logoInfoNew.home : {}
    },
    showFooterQrcode() {
      return this.hasLogoInfo && this.footerHomeInfo.bannerTitle !== '开元数智'
    },
    username() {
      return sessionStorage.getItem('username') || '';
    },

  },
  watch: {
    '$route.fullPath'() {
      this.$nextTick(() => {
        this.scrollHomeToTop()
        window.setTimeout(this.scrollHomeToTop, 0)
      })
    }
  },
  methods: {
    scrollHomeToTop() {
      const container = this.$el
      if (container) container.scrollTop = 0
      window.scrollTo(0, 0)
      document.documentElement.scrollTop = 0
      document.body.scrollTop = 0
    },
    goOut(url){
      window.open(url)
    },
    goFooterService(path) {
      if (!path || this.$route.path === path) return
      this.$router.push(path)
    },
    scrollToElement(id) {
      const element = document.getElementById(id);
      if (element) {
        element.scrollIntoView({
          behavior: 'smooth', // 平滑滚动
          block: 'start',     // 滚动到顶部对齐（可选：'start', 'center', 'end', 'nearest'）
        });
      }
    },
    clickBaseMenu(menu) {
      console.log("emnu", menu)
      this.currentBaseMenu = menu.id;
    },
    async goBaidu() {
      this.scrollToElement('topBox')
      await this.$store.commit('setShowHomeNav', true)
      await this.$store.commit('setNavIndex', 0)

      // const orgType = window.sessionStorage.getItem('org_type');
      // let isKehu = orgType === '2' || orgType === '3';
      // if (isKehu) {
      //   this.$router.push({path: '/product/baiduProduct',})
      // } else {
      //   this.$router.push({
      //     path: "/login",
      //     query: {
      //       type: 'homePage',
      //     }
      //   })
      // }
    },
    async goAliyun() {

      this.scrollToElement('topBox')
      await this.$store.commit('setShowHomeNav', true)
      await this.$store.commit('setNavIndex', 1)

      // const orgType = window.sessionStorage.getItem('org_type');
      // let isKehu = orgType === '2' || orgType === '3';
      // if (isKehu) {
      //   reqNewHomeFestival().then(res => {
      //     if (res.status) {
      //       window.open(res.data)
      //     } else {
      //       this.$message.warning(res.msg)
      //     }
      //   })
      //
      // } else {
      //   this.$router.push({
      //     path: "/login",
      //     query: {
      //       type: 'homePage',
      //     }
      //   })
      // }
    },
  }
})
</script>


<style scoped lang="scss">
.homeOut {
  //padding-top: 60px;
  height: 100%;
  overflow: auto !important;
  min-width: 1500px;
  // background: linear-gradient(180deg, #f0f7ff 0%, #ffffff 60%, #f5f8ff 100%);
}
#topBox{
  // height: 82px;  
  background: transparent!important;
  background-color: transparent!important;
  box-shadow: none!important;
  border: 0!important;
}

.home-router-view {
  width: 100%;
  padding-top: 0;
  box-sizing: border-box;
}

.footer {
  padding: 38px 0 22px;
  width: 100%;
  display: flex;
  justify-content: center;
  flex-wrap: wrap;
  background: #f1f3f7;
}

.footer-main {
  width: 1400px;
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 38px;
  padding: 0 0 32px;
  border-bottom: 1px solid rgba(122, 130, 160, 0.22);
  box-sizing: border-box;
}

.footer-brand-col {
  width: 150px;
  padding-top: 2px;
}

.footer-brand-logo {
  width: 180px;
  height: 50px;
  object-fit: contain;
  object-position: left center;
}

.footer-link-cols {
  flex: 1;
  display: flex;
  justify-content: flex-start;
  align-items: flex-start;
  gap: 60px;
}

.footer-link-col {
  min-width: 110px;
}

.footer-col-title {
  margin: 0 0 14px;
  color: #202634;
  font-size: 16px;
  font-weight: 600;
  line-height: 1.5;
}

.footer-link-list {
  margin: 0;
  padding: 0;
  list-style: none;
}

.footer-link-item {
  margin-bottom: 9px;
  color: #5d6477;
  font-size: 14px;
  line-height: 1.5;
  white-space: nowrap;
  transition: color .2s ease, transform .2s ease;
}

.footer-link-item:last-child {
  margin-bottom: 0;
}

.footer-link-item.clickable {
  cursor: pointer;
}

.footer-link-item.clickable:hover {
  color: #1b5bff;
  transform: translateX(3px);
}

.footer-contact-list {
  margin: 0;
  padding: 0;
  list-style: none;
  color: #5d6477;
  font-size: 14px;
  line-height: 1.6;

  li {
    margin-bottom: 5px;
  }
}

.footer-qrcode-row {
  margin-top: 14px;
  display: flex;
  align-items: flex-start;
  gap: 14px;
}

.qr-box {
  display: flex;
  flex-direction: column;
  align-items: center;
}

.qr-code {
  width: 120px;
  height: 120px;
  padding: 4px;
  border: 1px solid #dde3ef;
  background: #fff;
  box-sizing: border-box;

  img {
    width: 100%;
    height: 100%;
    object-fit: cover;
  }
}

.qr-content {
  margin-top: 8px;
  color: #5d6477;
  font-size: 13px;
  line-height: 1.4;
}

.footer-record {
  width: 100%;
  display: flex;
  justify-content: center;
  align-items: center;
}

.footer-record__text {
  width: 1400px;
  margin: 18px 0 0;
  display: flex;
  justify-content: center;
  align-items: center;
  color: #7a82a0;
  font-size: 13px;
}

.goStyle {
  cursor: pointer;
  transition: all .3s ease-in-out;

  &:hover {
    transition: all .3s ease-in-out;
    color: #1b5bff;
  }
}
</style>
