<!--
 * @Date: 2024-10-18 09:31:05
 * @LastEditors: hookehuyr hookehuyr@gmail.com
 * @LastEditTime: 2024-12-10 16:12:30
 * @FilePath: /hager/src/views/contact.vue
 * @Description: 联系我们
-->
<template>
  <div class="hager-contact-page">
    <div :class="['top-img', is_xs ? 'xs' : '']"></div>
    <hager-box class="box-wrapper xs">
      <!-- Start -->
      <el-row v-if="!is_xs" :gutter="0" style="margin-bottom: 1rem;">
        <el-col :span="16">
          <div class="img"></div>
        </el-col>
        <el-col :span="8">
          <div class="headquarter-wrapper">
            <div class="info">
              <div class="title">中国总部（上海）</div>
              <div class="name" style="margin: 1rem;">座机</div>
              <div class="number">021-66986600</div>
            </div>
          </div>
        </el-col>
      </el-row>
      <div v-else>
        <div class="headquarter-wrapper xs">
          <div class="info xs">
            <div class="title">中国总部（上海）</div>
            <div class="name" style="margin: 1rem;">座机</div>
            <div class="number">021-66986600</div>
          </div>
        </div>
        <div class="img xs"></div>
      </div>
      <!-- END -->
      <div v-if="!is_xs" v-for="(item, index) in concat_list" :key="index">
        <div :class="['contact-area', is_xs ? 'xs' : '']">{{ item.area }}</div>
        <div>
          <el-row v-for="(contact, idx) in item.list" :key="idx" :gutter="0" :style="{borderBottom: idx === item.list?.length - 1 ? '' : '1px solid #DADADA'}">
            <el-col :span="12" v-for="(x, i) in contact" :key="i" :style="{borderRight: i%2 === 0 ? '1px solid #DADADA' : '', padding: '1.5rem 0'}">
              <el-row :gutter="0">
                <el-col :span="12" class="title"><span class="inner">{{ x.area }}</span></el-col>
                <el-col :span="3" class="name outer"><p class="inner">{{ x.name }}</p></el-col>
                <el-col :span="9" :class="['number', 'outer', x?.tel?.length >= 2 ? 'double' : '']">
                  <p v-for="(tel, index) in x.tel" :key="index" class="inner">{{ tel }}</p>
                </el-col>
              </el-row>
            </el-col>
          </el-row>
        </div>
      </div>
      <div v-if="is_xs" v-for="(item, index) in mini_concat_list" :key="index">
        <div :class="['contact-area', is_xs ? 'xs' : '']">{{ item.area }}</div>
        <div class="xs-box" v-for="(items, idx) in item.list" :key="idx">
          <el-row :gutter="0" :style="{borderBottom: idx === item.list?.length - 1 ? '' : '1px solid #DADADA', padding: '1.5rem 0'}">
            <el-col :span="12" class="title"><p class="inner xs">{{ items.area }}</p></el-col>
            <el-col :span="4" class="name outer"><p class="inner xs">{{ items.name }}</p></el-col>
            <el-col :span="8" class="number outer">
              <p class="inner xs" v-for="(tel, index) in items.tel">{{ tel }}</p>
            </el-col>
          </el-row>
        </div>
      </div>
    </hager-box>
  </div>
</template>

<script>
import mixin from 'common/mixin';
import hagerBox from '@/components/common/hagerBox';
// import telData from '@/common/telData';
import { cloneDeep } from 'lodash-es';
import { concatAPI } from "@/api/hager.js";

export default {
  components: { hagerBox },
  mixins: [mixin.init],
  data () {
    return {
      concat_list: [],
      mini_concat_list: [],
    }
  },
  async mounted () {
    const { code, data } = await concatAPI();
    if (code) {
      this.concat_list = cloneDeep(data);
      this.mini_concat_list = cloneDeep(data);
      // PC端将list中的元素分成两组, 构造显示结构
      this.concat_list.forEach(item => {
        item.list = this.splitListIntoPairs(item.list);
      });
    }
  },
  methods: {
    splitListIntoPairs (list) {
      let result = [];

      if (list?.length >= 2) {
        for (let i = 0; i < list?.length; i += 2) {
          // 每次取2个元素组成一个子数组
          result.push(list.slice(i, i + 2));
        }
      } else {
        result = [list];
      }

      return result;
    }
  }
}
</script>

<style lang="less" scoped>
  .hager-contact-page {
    .top-img {
      height: 22rem;
      background-image: url('https://cdn.ipadbiz.cn/hager/img/tiny/banner05.png');
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      &.xs {
        height: 12rem;
      }
    }

    .box-wrapper {
      margin: 3rem 0;
      &.xs {
        margin: 1rem 0;
      }
    }

    .headquarter-wrapper {
      display: flex;
      align-items: center;
      justify-content: center;
      height: 25rem;
      background-color: #F7F7F7;
      &.xs {
        height: auto;
        padding: 2rem 0;
      }
      .info {
        display: flex;
        flex-direction: column;
        font-size: 1.5rem;
        text-align: center;
        &.xs {
          font-size: 1.25rem;
        }
      }
    }

    .title {
      color: @secondary-color;
      font-weight: bold;
      .inner {
        padding-left: 1.5rem;
        display: block;
        &.xs {
          padding-left: 0.5rem;
        }
      }
    }

    .name {
      color: @primary-color;
      font-weight: bold;
      &.outer {
        text-align: right;
      }
      .inner {
        text-align: center;
        &.xs {
          text-align: center;
        }
      }
    }

    .number {
      color: #F56400;
      font-weight: bold;
      position: relative;
      &.outer {
        text-align: right;
      }
      &.double {
        position: absolute;
        right: 0;
        top: -50%;
      }
      .inner {
        margin-right: 1.5rem;
        &.xs {
          margin-right: 0.5rem;
        }
      }
    }

    .img {
      width: 100%;
      height: 25rem;
      background-image: url(https://cdn.ipadbiz.cn/hager/img/concat/l01.png);
      background-size: cover;
      background-position: center;
      background-repeat: no-repeat;
      &.xs {
        height: 12rem;
      }
    }

    .contact-area {
      background-color: #E3F1F7;
      padding: 1rem 1.5rem;
      font-weight: bold;
      &.xs {
        margin-top: 1rem;
        padding-left: 1rem;
      }
    }

    .xs-box {
      font-size: 0.85rem;
    }
  }
</style>