<template>
  <div>
    <div class="content">
      <div class="left">
        <div class="map" id="map"></div>
        <div class="bottomInfo">
          <div class="contactInfo">
            <p>联系电话：0532-88985832</p>
            <p>联系邮箱：market@highwayiot.com</p>
            <p>公司地址：青岛市市北区郑州路43号</p>
            <p>邮编：266042</p>
          </div>
          <img class="qrcode" :src="qrcode" alt="联系我们"/>
        </div>
      </div>
      <div class="right">
        <div class="title">联系我们</div>
        <div class="form">
          <el-form ref="form" :model="form" size="small">
            <el-form-item>
              <el-input v-model="form.name" placeholder="姓名(必填)"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.name" placeholder="电话号码(必填)"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input v-model="form.name" placeholder="电子邮箱(必填)"></el-input>
            </el-form-item>
            <el-form-item>
              <el-input type="textarea" v-model="form.desc" :rows="6" placeholder="留言内容(必填)"></el-input>
            </el-form-item>
            <el-form-item>
              <el-col :span="8">
                <el-input v-model="form.name" placeholder="验证码"></el-input>
              </el-col>
              <el-col :span="8" :offset="2">
                <div style="width: 100%;height: 100%">
                  <el-image style="width: 100%; height: 2vw" :src="qrcode" fit="contain"></el-image>
                </div>
              </el-col>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" @click="onSubmit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import qrcode from '@/assets/image/qrcode.png'

let map = null
export default {
  name: 'ProductCenter',
  data() {
    return {
      qrcode,
      form: {
        name: '',
      }
    }
  },
  mounted() {
    this.createMap()
    this.addMarker()
  },
  methods: {
    createMap() {
      map = new AMap.Map('map', {
        zoom: 14,
        center: [120.390436,36.146313],
      });
    },
    addMarker(){
      const marker = new AMap.Marker({
        position: [120.390436,36.146313],
        offset: new AMap.Pixel(9, 0), //以 icon 的 [center bottom] 为原点
      });
      map.add(marker);

    }

  }
}
</script>

<style lang="less" scoped>
@import "~@/style.less";

.content {
  width: 65vw;
  margin: 2.1vw auto 0;
  padding-top: 3.1vw;
  text-align: left;
  display: flex;
  justify-content: space-between;
}

.left {
  width: 41.2vw;
  display: inline-block;
  text-align: left;

  .map {
    width: 100%;
    height: 17.6vw;
  }

  .bottomInfo {
    display: flex;
    justify-content: space-between;
    width: 100%;
    margin-top: 0.85vw;


    .contactInfo {
      color: #ccc;
      font-size: 0.8vw;

      p {
        line-height: 0.75vw;
        letter-spacing: 1px;
      }
    }

    .qrcode {
      object-fit: contain;
    }
  }
}

.right {
  width: 20vw;
  display: inline-block;
  text-align: left;

  .title {
    font-size: 1.2vw;
    color: #eee;
    letter-spacing: 2px;
  }

  .form {
    margin-top: 1.3vw;

    /deep/ .el-input__inner {
      height: 2vw;
      line-height: 2vw;

      &::placeholder {
        color: #999;
        font-size: 0.8vw;
      }
    }

    /deep/ .el-textarea__inner::placeholder {
      font-weight: 500;
      color: #999;
      font-size: 0.8vw;
      font-family: 'NotoSans', 'Avenir', Helvetica, Arial, sans-serif;
    }
  }
}
</style>
