<!--
 * @Date: 2024-09-26 13:42:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2025-01-03 09:36:09
 * @FilePath: /hager/src/components/common/hagerFooter.vue
 * @Description: 文件描述
-->
<template>
  <div class="hager-footer">
    <hager-box v-if="!is_xs">
      <el-row :gutter="0" style="color: #FFF; margin: 2rem 0;">
        <el-col :span="14">
          <el-row :gutter="0">
            <el-col :span="8">
              <div class="link-box">
                <div class="link-title">产品目录</div>
                <div class="link-info">
                  <p v-for="(item, index) in footer_data.product" :key="index" @click="goToProduct(item)">{{ item.category_name }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="link-box">
                <div class="link-title">解决方案</div>
                <div class="link-info">
                  <p v-for="(item, index) in footer_data.solution" :key="index" @click="goToSolution(item)">{{ item.category_name }}</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="link-box">
                <div class="link-title">企业</div>
                <div class="link-info">
                  <p v-for="(item, index) in intro_list" :key="index" @click="goToCorp(item)">{{ item.c_title }}</p>
                </div>
              </div>
            </el-col>
          </el-row>
        </el-col>
        <el-col :span="10">
          <div>
            <div class="link-box" style="margin-bottom: 2rem;">
              <div class="link-title">海格中国</div>
              <div class="link-info">
                <div>海格在中国主要城市设立了多达32个销售办事处，拥有惠州、上海、北京、西安4个客户体验中心，惠州、广州和上海3个物流中心。</div>
              </div>
            </div>
            <div class="link-box">
              <div class="link-title contact-us" @click="goToContact">联系我们</div>
              <div class="link-info link-contact">
                <p>海格电气中国总部</p>
                <p>上海市静安区山西北路99号苏河湾中心21层01、02单元</p>
                <p class="link" @click="goToICP">粤ICP备2021117768号-3</p>
                <p class="link" @click="goToBeiAn">粤公网安备44133002100282号</p>
              </div>
            </div>
            <div style="margin-top: 2rem;">
              <el-image style="width: 3rem; height: 3rem;" src="https://cdn.ipadbiz.cn/hager/img/a971ae72e8d79472164b19a1be1ccda.jpg" fit="fit"></el-image>
            </div>
          </div>
        </el-col>
      </el-row>
    </hager-box>
    <div v-else>
      <div class="link-box xs">
        <div class="link-title xs" @click="toggleCollapse('p')">
          <div>产品目录</div>
          <div><i class="el-icon-arrow-down"></i></div>
        </div>
        <el-collapse-transition>
          <div v-show="show_p" class="link-info">
            <p v-for="(item, index) in footer_data.product" :key="index" @click="goToProduct(item)">{{ item.category_name }}</p>
          </div>
        </el-collapse-transition>
      </div>
      <div class="link-box xs">
        <div class="link-title xs" @click="toggleCollapse('s')">
          <div>解决方案</div>
          <div><i class="el-icon-arrow-down"></i></div>
        </div>
        <el-collapse-transition>
          <div v-show="show_s" class="link-info">
            <p v-for="(item, index) in footer_data.solution" :key="index" @click="goToSolution(item)">{{ item.category_name }}</p>
          </div>
        </el-collapse-transition>
      </div>
      <div class="link-box xs">
        <div class="link-title xs" @click="toggleCollapse('c')">
          <div>企业</div>
          <div><i class="el-icon-arrow-down"></i></div>
        </div>
        <el-collapse-transition>
          <div v-show="show_c" class="link-info">
            <p v-for="(item, index) in intro_list" :key="index" @click="goToCorp(item)">{{ item.c_title }}</p>
          </div>
        </el-collapse-transition>
      </div>
      <div>
        <div class="link-box xs" style="margin-bottom: 2rem;">
          <div class="link-title">海格中国</div>
          <div class="link-info">
            <div>海格在中国主要城市设立了多达32个销售办事处，拥有惠州、上海、北京、西安等4个客户体验中心，惠州、广州和上海3个物流中心。</div>
          </div>
        </div>
        <div class="link-box xs">
          <div class="link-title contact-us" @click="goToContact">联系我们</div>
          <div class="link-info link-contact">
            <p>海格电气中国总部</p>
            <p>上海市静安区山西北路99号苏河湾中心21层01、02单元</p>
            <p @click="goToICP">粤ICP备2021117768号-3</p>
            <p @click="goToBeiAn">粤公网安备44133002100282号</p>
          </div>
        </div>
        <div class="link-box xs">
          <el-image style="width: 3rem; height: 3rem;" src="https://cdn.ipadbiz.cn/hager/img/a971ae72e8d79472164b19a1be1ccda.jpg" fit="fit"></el-image>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
import { getFooterAPI } from '@/api/hager';

export default {
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {
      footer_data: '',
      show_p: false,
      show_s: false,
      show_c: false,
      intro_list: [{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g01@2x.png',
        c_title: '海格全球',
        e_title: 'Hager Group',
        content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。',
        link: '/about/global',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g02@2x.png',
        c_title: '海格中国',
        e_title: 'Hager China',
        content: '海格在中国主要城市设立了多达32个销售办事处，拥有惠州、上海、北京、西安等4个客户体验中心，惠州、广州和上海3个物流中心。',
        link: '/about/china',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g03@2x.png',
        c_title: '创新设计',
        e_title: 'Innovative Design',
        content: '海格电气一直致力于创新，我们与客户共同着手面向未来的主题。海格电气仔细倾听客户的声音，以使我们的设计语言能够被普遍理解。',
        link: '/about/design',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/tiny/g04@2x.png',
        c_title: '生产研发',
        e_title: 'Production and R&D',
        content: '为配合海格集团在全球的业务扩展计划，目前中国有2个生产基地，分别位于惠州和东莞，主要为亚太乃至全球市场提供优质的配电及相关产品。海格集团在全球拥有22家生产基地，主要分布于欧洲。',
        link: '/about/product',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g05@2x.png',
        c_title: '可持续发展',
        e_title: 'Sustainable Development',
        content: '海格集团是全球领先的电气及智能化解决方案和服务提供商，应用领域涵盖住宅、商业建筑、公共建筑和工业。',
        link: '/about/development',
      },{
        img: 'https://cdn.ipadbiz.cn/hager/img/about/g06@2x.png',
        c_title: '荣誉展示',
        e_title: 'Honors',
        content: '海格集团是行业创新领导者之一，我们与来自工业和电气领域的客户一起致力于引领面向未来的主题，如家庭互联、智能建筑技术、能源效率、生活辅助系统、电动交通、可再生能源。',
        link: '/about/honors',
      }],
    }
  },
  async mounted () {
    const { code, data } = await getFooterAPI();
    if (code) {
      this.footer_data = data;
      this.$emit('send-openid', data.openid)
    }
  },
  methods: {
    toggleCollapse (type) {
      if (type === 'p') { // 产品目录
        this.show_p = !this.show_p;
      }
      if (type === 's') { // 解决方案
        this.show_s = !this.show_s;
      }
      if (type === 'c') { // 企业
        this.show_c = !this.show_c;
      }
    },
    goToProduct (item) {
      this.$router.push({
        path: `/product/index/${item.id}/${Date.now()}`,
      });
    },
    goToSolution (item) {
      this.$router.push({
        path: `/solution/detail/${item.id}/${Date.now()}`,
      });
    },
    goToCorp (item) {
      this.$router.push({
        path: item.link,
        timestamp: Date.now()
      })
    },
    goToContact () {
      this.$router.push({
        path: '/contact'
      })
    },
    goToICP () {
      window.open('https://beian.miit.gov.cn/')
    },
    goToBeiAn () {
      window.open('https://beian.mps.gov.cn/#/query/webSearch')
    }
  }
}
</script>

<style lang="less" scoped>
.hager-footer {
  background-color: #414141;
  margin-top: auto;
  .link-box {
    &.xs {
      padding: 1rem 2rem;
    }
    .link-title {
      font-size: 1.15rem;
      font-weight: 600;
      color: #FFF;
      margin-bottom: 0.5rem;
      &.xs {
        display: flex;
        justify-content: space-between;
        align-items: center;
      }
    }
    .contact-us {
      &:hover {
        text-decoration: underline;
        cursor: pointer;
      }
    }
    .link-info {
      font-size: 0.85rem;
      color: #FFF;
      line-height: 2;
      display: flex;
      flex-direction: column;
      p {
        display: inline-block;
        &:hover {
          text-decoration: underline;
          cursor: pointer;
        }
      }
      &.link-contact {
        p {
          &:hover {
            text-decoration: none;
            cursor: default;
          }
          &.link:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>