<template>
  <div class="contact-us">
    <div class="top-banner" />
    <div class="from-cont">
      <div class="form-all">
        <div class="form-line" />
        <div class="form-top">联系我们</div>
        <div class="form-title">我们将为您提供专业的应收账款服务方案，让您的资产流动起来！</div>
        <div class="input-full">
          <div class="ipnut-title">单位名称</div>
          <el-input v-model="contactParam.enterpriceCn" type="text" class="input-cont" />
        </div>
        <div class="input-flex">
          <div>
            <div class="ipnut-title">姓名</div>
            <el-input v-model="contactParam.contactName" type="text" class="input-cont" />
          </div>
          <div>
            <div class="ipnut-title">职务</div>
            <el-input v-model="contactParam.contactPost" type="text" class="input-cont" />
          </div>
        </div>
        <div class="input-flex">
          <div>
            <div class="ipnut-title">电话</div>
            <el-input v-model="contactParam.phoneNumber" type="text" class="input-cont" />
          </div>
          <div>
            <div class="ipnut-title">邮箱</div>
            <el-input v-model="contactParam.email" type="text" class="input-cont" />
          </div>
        </div>
        <div class="input-flex">
          <div>
            <div class="ipnut-title">主营品类</div>
            <el-input v-model="contactParam.mainCategories" type="text" class="input-cont" />
          </div>
          <div>
            <div class="ipnut-title">年销售额（万元）</div>
            <el-input v-model="contactParam.annualSalesRevenue" type="text" class="input-cont" />
          </div>
        </div>
        <div class="input-full">
          <div class="ipnut-title">主要客户</div>
          <el-input v-model="contactParam.mainCustomers" type="text" class="input-cont" />
        </div>
        <div class="input-flex">
          <div>
            <div class="ipnut-title">预估账期</div>
            <el-input v-model="contactParam.estimatedAccountingPeriod" type="text" class="input-cont" />
          </div>
          <div>
            <div class="ipnut-title">应收余额（万元）</div>
            <el-input v-model="contactParam.accountsReceivableBalance" type="text" class="input-cont" />
          </div>
        </div>
        <div class="from-btn" @click="submitForm">
          提交
        </div>
      </div>
      <div class="form-img form-img-mobile" />
    </div>
    <div class="card-cont">
      <div v-for="item in cardList" :key="item.address" class="card-item">
        <div class="card-item-name">
          {{ item.companyName }}
        </div>
        <div class="card-item-desc">
          {{ item.address }}
        </div>
        <template v-if="mapLoadError">
          <div class="card-item-map">
            <img :src="item.mapUrl">
          </div>
        </template>
        <template v-else>
          <div :id="item.mapName" class="card-item-map" />
        </template>
      </div>
    </div>
  </div>
</template>

<script>
import loadMap from '@/utils/loadMap'
import { contactUs } from '@/api/user'

export default {
  data() {
    return {
      contactParam: {
        enterpriceCn: '',
        contactName: '',
        contactPost: '',
        phoneNumber: '',
        email: '',
        mainCategories: '',
        annualSalesRevenue: '',
        mainCustomers: '',
        estimatedAccountingPeriod: '',
        accountsReceivableBalance: ''
      },
      cardList: [
        {
          companyName: '西安总部',
          address: '西安市经济技术开发区凤城二路51号白桦林金融创新中心D栋13层',
          mapUrl: require('@/assets/contactUs/map_1.png'),
          mapName: 'xian'
        },
        {
          companyName: '上海中心',
          address: '上海市普陀区曹杨路1888号星光耀广场1号楼13A19室',
          mapUrl: require('@/assets/contactUs/map_2.png'),
          mapName: 'shanghai'
        },
        {
          companyName: '深圳中心',
          address: '深圳市前海深港合作区南山街道听海大道5059号前海鸿荣源中心A座1601B',
          mapUrl: require('@/assets/contactUs/map_3.jpg'),
          mapName: 'shenzhen'
        }
      ],
      mapLoadError: false
    }
  },
  computed: {

  },
  mounted() {
    loadMap().then((res) => {
      this.initMap()
    }, (err) => {
      console.log(err)
      this.mapLoadError = true
    })
  },
  methods: {
    // 联系我们提交
    submitForm() {
      if (this.contactParam.phoneNumber === '') {
        this.$message.warning('请输入联系电话')
        return
      } else {
        if (!/^\d{11}$/.test(this.contactParam.phoneNumber)) {
          this.$message.warning('请输入合法电话号码')
          return
        }
      }
      if (this.contactParam.email !== '') {
        if (this.contactParam.email.indexOf('@') === -1) {
          this.$message.warning('请输入合法邮箱')
          return
        }
      }
      contactUs(this.contactParam).then(() => {
        this.$message.success('留言成功')
        this.$router.go(0)
      })
    },
    initMap() {
      try {
        // eslint-disable-next-line
        const mapXian = new AMap.Map('xian', {
          resizeEnable: true,
          center: [108.9231043498764, 34.318071788447504],
          zoom: 15
        })
        // eslint-disable-next-line
        const marker1 = new AMap.Marker({
          position: [108.9231043498764, 34.318071788447504]
        })
        marker1.setMap(mapXian)

        // eslint-disable-next-line
        const mapShanghai = new AMap.Map('shanghai', {
          resizeEnable: true,
          center: [121.408444, 31.250071],
          zoom: 15
        })
        // eslint-disable-next-line
        const marker2 = new AMap.Marker({
          position: [121.408444, 31.250071]
        })
        marker2.setMap(mapShanghai)

        // eslint-disable-next-line
        const mapShenzhen = new AMap.Map('shenzhen', {
          resizeEnable: true,
          center: [113.896792, 22.529793],
          zoom: 15
        })
        // eslint-disable-next-line
        const marker3 = new AMap.Marker({
          position: [113.896792, 22.529793]
        })
        marker3.setMap(mapShenzhen)
      } catch (error) {
        console.log('map load error', error)
        this.mapLoadError = true
      }
    }
  }
}
</script>

<style lang="scss" scoped>
.contact-us {
  display: flex;
  flex-direction: column;
  width: 100%;
  background-color: #fff;
  .top-banner {
    display: flex;
    justify-content: flex-end;
    width: 100%;
    height: 420px;
    background: url('../../../assets/contactUs/top-banner.jpg') no-repeat center;
  }

  .from-cont {
    display: flex;
    width: 100%;
    height: 702px;
    margin: 90px auto 174px;
    .form-all {
      width: 50%;
      padding: 0 1% 0 18%;
      .form-line {
        width: 16px;
        height: 2px;
        border: 2px solid #FE7D0B;
      }
      .form-top {
        font-size: 16px;
        line-height: 24px;
        color: #333333;
        margin-top: 10px;
        font-weight: 600;
      }
      .form-title {
        font-size: 14px;
        line-height: 24px;
        color: #999;
        margin: 20px 0 28px;
      }
      .ipnut-title {
        color: #333;
        font-size: 14px;
        line-height: 21px;
        margin-bottom: 4px;
      }
      .input-cont {
        width: 100%;
        border: 1px solid #fff;
        ::v-deep .el-input__inner {
          height: 40px;
          line-height: 40px;
          background-color: transparent;
        }
      }
      .input-full {
        width: 100%;
        color: #fff;
        margin-bottom: 20px;
      }
      .input-flex {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
        div {
          width: 45%;
          .ipnut-title {
            width: 100%;
          }
          .input-cont {
            width: 100%;
            border: 1px solid #fff;
            ::v-deep .el-input__inner {
              height: 40px;
              line-height: 40px;
              background-color: transparent;
            }
          }
        }
      }
      .from-btn {
        width: 128px;
        height: 40px;
        line-height: 40px;
        background-color: #FE7D0B;
        color: #fff;
        margin: 0 auto;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
      }
    }
    .form-img {
      flex: 1;
      height: 100%;
      background: url('../../../assets/contactUs/form_r.png') no-repeat left center;
    }
  }

  .card-cont {
    display: flex;
    width: 100%;
    justify-content: center;
    margin-bottom: 70px;
    .card-item {
      width: 28%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 388px;
      color: #444;
      background-color: #FBFBFB;
      padding: 24px;
      .card-item-name {
        margin-bottom: 20px;
        font-size: 22px;
        line-height: 28px;
        color: #FE7D0B;
      }
      .card-item-desc {
        font-size: 14px;
        line-height: 24px;
        color: #333;
      }
      .card-item-map {
        margin-top: 15px;
        width: 100%;
        height: 380px;
        img {
          width: 100%;
          height: 100%;
        }
      }
    }
    .card-item:nth-child(2) {
      margin: 0 20px;
    }
    .card-item:nth-child(2) .card-item-map {
      margin-top: 32px;
    }
  }
}

/* 移动端样式 */
@media screen and (max-width: 768px) {
  .contact-us {
    width: 100%;
    padding: 0 0 270px;
    margin-top: 60px;
    .top-banner {
      width: 100%;
      height: 124px;
      background-size: cover;
    }
  }
  .banner-desc {
    margin-bottom: 0 !important;
  }

  .from-cont {
    display: flex;
    flex-direction: column;
    width: 100%;
    height: auto !important;
    margin: 90px auto 174px;
    .form-all {
      width: 100% !important;
      padding: 20px !important;
      .form-line {
        width: 16px;
        height: 2px;
        border: 2px solid #FE7D0B;
      }
      .form-top {
        font-size: 16px;
        line-height: 24px;
        color: #333333;
        margin-top: 10px;
        font-weight: 600;
      }
      .form-title {
        font-size: 14px;
        line-height: 24px;
        color: #999;
        margin: 20px 0 28px;
      }
      .ipnut-title {
        color: #333;
        font-size: 14px;
        line-height: 21px;
        margin-bottom: 4px;
      }
      .input-cont {
        width: 100%;
        border: 1px solid #fff;
        ::v-deep .el-input__inner {
          height: 40px;
          line-height: 40px;
          background-color: transparent;
        }
      }
      .input-full {
        width: 100%;
        color: #fff;
        margin-bottom: 20px;
      }
      .input-flex {
        display: flex;
        justify-content: space-between;
        margin-bottom: 20px;
      }
      .from-btn {
        width: 128px;
        height: 40px;
        line-height: 40px;
        background-color: #FE7D0B;
        color: #fff;
        margin: 0 auto;
        text-align: center;
        cursor: pointer;
        border-radius: 4px;
      }
    }
    .form-img.form-img-mobile {
      width: 95%;
      height: 306px !important;
      flex: initial;
      margin: 0 auto;
      background: url('../../../assets/contactUs/form_r.png') no-repeat center;
    }
  }

  .card-cont {
    display: flex;
    width: 100%;
    justify-content: center;
    flex-direction: column;
    align-items: center;
    padding: 0 15px;
    .card-item {
      width: 100%;
      display: flex;
      flex-direction: column;
      align-items: center;
      justify-content: center;
      width: 388px;
      // height: 214px;
      color: #444;
      background-color: #F5F6F6;
      padding: 24px;
      .card-item-name {
        color: #FE7D0B;
        font-size: 22px;
        line-height: 28px;
      }
    }
    .card-item:nth-child(2) {
      margin: 20px 0 !important;
    }
  }
}

@media screen and (min-width: 1930px) {
  .contact-us {
    width: 88% !important;
    margin: 0 auto 70px !important;
    .top-banner {
      width: 100vw !important;
      height: 570px !important;
      background-size: cover !important;
      transform: translateX(-6%) !important;
    }
  }
  .from-cont {
    width: 86% !important;
    .form-all {
      width: 56% !important;
    }
  }
}
</style>
