<template>
  <div class="contact-page">
    <div class="main-image">
      <img
        class="cover-parent"
        src="~@/assets/contact/main.jpg"
        alt="联系我们"
      />
      <div class="contact-text">CONTACT US</div>
    </div>
    <div class="heading">
      <h2 class="page-title underline-title text-center">联系我们</h2>
    </div>

    <div class="map-wrapper">
      <div class="info-card">
        <div v-if="location" class="location-info">
          <div class="location-city">{{ location.city }}</div>
          <div class="location-prop">
            <div class="label">地址</div>
            <div class="value">{{ location.address }}</div>
          </div>
          <div class="location-prop">
            <div class="label">电话</div>
            <a class="value" :href="`tel:${location.tel}`">{{
              location.tel
            }}</a>
          </div>

          <a
            class="back-button icon-arrow-left"
            href="javascript:;"
            @click="mapBack"
          ></a>
        </div>
        <div v-else class="select-tip">点击地图了解更多</div>
      </div>
      <div class="map">
        <el-amap vid="map" :center="center" :zoom="zoom">
          <el-amap-marker
            v-for="(m, i) in locations"
            :key="i"
            :position="[m.longitude, m.latitude]"
            :title="m.address"
            :label="{ content: m.city, offset: [20, 20] }"
            :events="markerEvents"
          />
        </el-amap>
      </div>
    </div>
  </div>
</template>
<script>
import VueAMap from 'vue-amap'
import Vue from 'vue'
Vue.use(VueAMap)

VueAMap.initAMapApiLoader({
  // 高德的key
  key: '',
  // 插件集合
  plugin: ['AMap.Scale', 'AMap.OverView', 'AMap.ToolBar', 'AMap.MapType'],
  // 高德 sdk 版本，默认为 1.4.4
  v: '1.4.4',
})

export default {
  name: 'ContactPage',
  data() {
    return {
      center: [107.925367, 31.217453],
      zoom: 4,

      locations: [
        {
          city: '西安',
          address: '陕西省西安市雁塔区太白南路39号金石柏朗大厦1幢12101室',
          tel: '029-1234567',
          longitude: 108.903762,
          latitude: 34.206739,
        },
        {
          city: '广州',
          address: '广东省广州市番禺区南村镇顺意坊大道东25-22仓',
          tel: '029-1234567',
          longitude: 113.362339,
          latitude: 23.017031,
        },
      ],

      locationIndex: -1,

      markerEvents: { click: this.onLocationClicked },
    }
  },
  computed: {
    location() {
      return this.locations[this.locationIndex]
    },
  },
  methods: {
    onLocationClicked(e) {
      const locationIndex = this.locations.findIndex(
        (ee) => ee.city === e.target.getLabel().content
      )
      this.locationIndex = locationIndex
      this.center = [this.location.longitude, this.location.latitude]
      this.zoom = 15
    },
    mapBack() {
      this.locationIndex = -1
      this.zoom = 4
      this.center = [107.925367, 31.217453]
    },
  },
}
</script>
<style lang="scss" scoped>
.main-image {
  position: relative;
  padding-top: 26.56%;
}

.heading {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 150px;
  background-color: #222;
}

.page-title {
  margin: 0;
  font-size: 32px;
  font-weight: normal;
  color: #fff;
}

.map-wrapper {
  display: flex;
  overflow: hidden;
}

.info-card {
  position: relative;
  flex: 1;
  color: #fff;
  background-color: var(--primary-color);
  display: flex;
  justify-content: center;
  align-items: center;
}

.map {
  flex: 1;
  height: 40vw;
}

.select-tip {
  width: 100%;
  display: flex;
  justify-content: flex-end;
  align-items: center;
  height: 100%;
  padding-right: 100px;
  font-size: 20px;
}

.location-city {
  font-size: 20px;
  margin-bottom: 40px;
}

.location-prop {
  border-bottom: solid 1px #efefef;

  .label {
    margin-bottom: 20px;
  }

  .value {
    margin-bottom: 20px;
    text-decoration: none;
    color: inherit;
  }

  &:not(:last-child) {
    margin-bottom: 40px;
  }
}

.back-button {
  display: block;
  width: 20px;
  height: 20px;
  position: absolute;
  top: 20px;
  left: 20px;
}

.contact-text {
  position: absolute;
  color: #fff;
  top: 50%;
  left: 50%;
  transform: translate(-50%);
  font-size: 28px;
  width: 100%;
  letter-spacing: 8px;
  font-weight: 100;
  text-align: center;
}

@media screen and (max-width: 1000px) {
  .heading {
    height: 100px;
  }

  .page-title {
    font-size: 20px;
  }

  .select-tip {
    padding-right: 0;
    justify-content: center;
    font-size: 16px;
    padding: 20px 0;
  }

  .map {
    flex: unset;
    height: 70vw;
  }

  .map-wrapper {
    flex-direction: column;
  }

  .location-info {
    padding: 20px 50px;
  }

  .location-city {
    margin-bottom: 20px;
    font-size: 16px;
  }

  .location-prop {
    font-size: 14px;

    .label {
      margin-bottom: 8px;
    }

    .value {
      margin-bottom: 8px;
    }

    &:not(:last-child) {
      margin-bottom: 10px;
    }
  }
  .contact-text {
    font-size: 18px;
  }
}
</style>
