<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <div class="presence-content-box">
      <card title="报名咨询" class="card-style">
        <div class="content-mian">
          <div class="form-box">
            <div class="title-box">
              <div class="title-content">
                <div class="bt">报名咨询</div>
                <div class="tips">申请领取试听课程</div>
              </div>
            </div>
            <div class="form">
              <div class="li">
                <el-input v-model="form.company" placeholder="您的公司名称"></el-input>
              </div>
              <div class="li">
                <el-input v-model="form.title" placeholder="您的职位"></el-input>
              </div>
              <div class="li">
                <el-input v-model="form.name" :placeholder="$t('home.presence.nameholder')"></el-input>
              </div>
              <div class="li">
                <el-input v-model="form.phone" :placeholder="$t('home.presence.phoneholder')"></el-input>
              </div>
              <div class="btn" @click="submit">{{ $t('home.presence.formBtn') }}</div>
            </div>
          </div>
        </div>
      </card>
    </div>
  </div>
</template>

<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
import { postNes } from '@/api'
export default {
  name: 'presence',
  components: {
    Card,
    AppLink
  },
  data() {
    return {
      form: {
        company: '',
        title: '',
        name: '',
        phone: '',
        project_id: process.env.projectId,
        channel: 19960
      },
      value: '',
      titleParams: {
        name: this.$t('home.presence.title'),
        more: {
          path: '/alumni/sharing'
        }
      },
      listData: []
    }
  },
  async fetch() {
    const params = { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share' }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
    isMobile() {
      return this.$store.state.isMobile
    }
  },
  mounted() {},
  methods: {
    submit() {
      const findNull = Object.values(this.form).findIndex(item => {
        return item === ''
      })
      if (findNull !== -1) {
        this.$message('请完善信息')
        return
      } else {
        const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        if (!MOBILE_REG.test(this.form.phone)) {
          this.$message('手机号格式错误')
          return
        }
      }
      postNes(this.form)
        .then(res => {
          if (res && res.status === 200) {
            this.$message({
              type: 'success',
              message: '提交成功'
            })
          } else {
            this.$message.error('提交失败')
          }
        })
        .catch(() => {})
    },
    swiperStop() {
      this.swiper.autoplay.stop()
    },
    swiperStart() {
      this.swiper.autoplay.start()
    }
  }
}
</script>

<style lang="scss" scoped>
.is-pc {
  .card-style {
    width: 1200px;
    margin: 0 auto;
  }
  .presence-content-box {
    padding-top: 80px;
    .m-title {
      width: 1200px;
      margin: 0 auto;
    }
    .content-mian {
      padding-top: 24px;
      .my-swipe {
        height: 500px;
        ::v-deep {
          .app-link {
            width: 100%;
            height: 100%;
          }
          a {
            width: 100%;
            height: 100%;
          }
        }
        img {
          width: 100%;
          height: 100%;
          display: block;
          object-fit: cover;
        }
      }
      .form-box {
        width: 1200px;
        height: 500px;
        margin: 70px auto 0;
        background: url(https://webapp-pub.ezijing.com/project/exed/home-ssfc-bg.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        .title-box {
          width: 580px;
          height: 160px;
          background: rgba(170, 25, 65, 0.4);
          box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
          margin-top: 170px;
          position: relative;
          .title-content {
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
            width: 380px;
            height: 200px;
            background: #aa1941;
          }
          .bt {
            font-size: 22px;
            line-height: 100%;
            color: #ffffff;
            text-align: center;
            margin-top: 70px;
          }
          .tips {
            font-size: 22px;
            line-height: 100%;
            color: #ffffff;
            text-align: center;
            margin-top: 20px;
          }
        }
        .form {
          width: 401px;
          height: 382px;
          background: #ffffff;
          margin-top: 54px;
          box-sizing: border-box;
          padding: 63px 56px 56px 64px;
          margin-right: 116px;
          ::v-deep {
            .el-select {
              width: 100%;
            }
          }
          .li {
            margin-bottom: 20px;
          }
          .btn {
            font-size: 18px;
            line-height: 32px;
            color: #ffffff;
            width: 281px;
            background: #aa1941;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.is-h5 {
  .card-width {
    width: 100%;
    margin: 0;
    ::v-deep {
      .card-hd {
        margin: 0.2rem 0.15rem;
      }
    }
  }
  .presence-content-box {
    .my-swipe {
      height: 1.58rem;
      ::v-deep {
        .app-link {
          width: 100%;
          height: 100%;
        }
        a {
          width: 100%;
          height: 100%;
        }
      }
      img {
        width: 100%;
        height: 100%;
        display: block;
        object-fit: cover;
      }
    }
    .form-box {
      background: url(https://webapp-pub.ezijing.com/project/kelley-h5/home-presen-bg-new1.png) center;
      background-size: cover;
      padding-top: 0.18rem;
      box-sizing: border-box;
      margin-top: 0.27rem;
      padding-bottom: 0.05rem;
      .title-box {
        width: 3.75rem;
        height: 1.2rem;
        background: rgba(170, 25, 65, 0.63);
        box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.07);
        .bt {
          text-align: center;
          font-size: 0.26rem;
          // font-weight: bold;
          line-height: 0.31rem;
          color: #ffffff;
          text-align: center;
          padding-top: 0.16rem;
        }
        .tips {
          font-size: 0.1rem;
          line-height: 0.12rem;
          color: #ffffff;
          text-align: center;
          padding-top: 0.1rem;
        }
      }
      .form {
        width: 2.7rem;
        background: #ffffff;
        margin: 0.2rem auto;
        padding: 0.25rem 0.2rem;
        box-sizing: border-box;
        .li {
          margin-bottom: 0.2rem;
        }
        ::v-deep {
          .el-select {
            width: 100%;
            height: 100%;
          }
        }
        .btn {
          font-size: 0.12rem;
          line-height: 0.26rem;
          color: #ffffff;
          background: #aa1941;
          border-radius: 0.02rem;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
