<!--
 * @Date: 2024-09-26 13:42:22
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-10-23 09:42:45
 * @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>空气断路器</p>
                  <p>塑壳断路器</p>
                  <p>自动转换开关</p>
                  <p>接触器及热过载继电器</p>
                  <p>隔离开关</p>
                  <p>配电箱</p>
                  <p>终端配电</p>
                  <p>Unimes开关柜</p>
                  <p>Berker</p>
                  <p>志系列</p>
                  <p>KNX控制系统</p>
                  <p>RCU客房控制系统</p>
                  <p>Agardio数字化能源解决方案</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="link-box">
                <div class="link-title">解决方案</div>
                <div class="link-info">
                  <p>住宅解决方案</p>
                  <p>商建解决方案</p>
                  <p>公建解决方案</p>
                  <p>供电局解决方案</p>
                  <p>发电解决方案</p>
                  <p>石油石化解决方案</p>
                  <p>冶金解决方案</p>
                  <p>电子解决方案</p>
                  <p>通信解决方案</p>
                  <p>算力解决方案</p>
                  <p>交通解决方案</p>
                  <p>其它解决方案</p>
                </div>
              </div>
            </el-col>
            <el-col :span="8">
              <div class="link-box">
                <div class="link-title">企业</div>
                <div class="link-info">
                  <p>海格全球</p>
                  <p>海格电气在中国</p>
                  <p>创新设计与用户体验</p>
                  <p>生产研发与服务</p>
                  <p>可持续发展的企业文化</p>
                  <p>荣誉展示</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>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</div>
              </div>
            </div>
            <div class="link-box">
              <div class="link-title">联系我们</div>
              <div class="link-info link-contact">
                <p>海格电气中国总部</p>
                <p>上海市静安区山西北路99号苏河湾中心21层01、02单元</p>
                <p>粤ICP备2021117768号-3</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>空气断路器</p>
            <p>塑壳断路器</p>
            <p>自动转换开关</p>
            <p>接触器及热过载继电器</p>
            <p>隔离开关</p>
            <p>配电箱</p>
            <p>终端配电</p>
            <p>Unimes开关柜</p>
            <p>Berker</p>
            <p>志系列</p>
            <p>KNX控制系统</p>
            <p>RCU客房控制系统</p>
            <p>Agardio数字化能源解决方案</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>住宅解决方案</p>
            <p>商建解决方案</p>
            <p>公建解决方案</p>
            <p>供电局解决方案</p>
            <p>发电解决方案</p>
            <p>石油石化解决方案</p>
            <p>冶金解决方案</p>
            <p>电子解决方案</p>
            <p>通信解决方案</p>
            <p>算力解决方案</p>
            <p>交通解决方案</p>
            <p>其它解决方案</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>海格全球</p>
            <p>海格电气在中国</p>
            <p>创新设计与用户体验</p>
            <p>生产研发与服务</p>
            <p>可持续发展的企业文化</p>
            <p>荣誉展示</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>来自德国的海格电气，延承德系基因的匠心与专业，为全球住宅、酒店、医院、公共建筑、商业建筑、工业及能源领域，提供安全、稳定的电气设施与服务。坚持可持续发展，专注为你，构建更安全、更清洁、更愉悦的未来电气世界。</div>
          </div>
        </div>
        <div class="link-box xs">
          <div class="link-title">联系我们</div>
          <div class="link-info link-contact">
            <p>海格电气中国总部</p>
            <p>上海市静安区山西北路99号苏河湾中心21层01、02单元</p>
            <p>粤ICP备2021117768号-3</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';

export default {
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {
      show_p: false,
      show_s: false,
      show_c: false,
    }
  },
  mounted () {

  },
  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;
      }
    }
  }
}
</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;
      }
    }
    .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 {
          // color: #7a98c7;
          &:hover {
            text-decoration: underline;
            cursor: pointer;
          }
        }
      }
    }
  }
}
</style>