<template>
  <div>
    <div class="presence-content-box">
      <div class="content-mian">
        <div class="form-box">
          <div class="title-box">
            <div class="title-content">
              <div class="bt">申请试用</div>
            </div>
          </div>
          <div class="form">
            <div class="li">
              <el-input v-model="f1" placeholder="咨询产品"></el-input>
            </div>
            <div class="li">
              <el-input v-model="f2" placeholder="院校名称"></el-input>
            </div>
            <div class="li">
              <el-input v-model="f3" placeholder="校系"></el-input>
            </div>
            <div class="li">
              <el-input v-model="form.name" placeholder="联系人"></el-input>
            </div>
            <div class="li">
              <el-input v-model="form.phone" placeholder="电话"></el-input>
            </div>
            <div class="btn" @click="submit">立即提交</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import { submitApplicationForm } from '@/api/article'
export default {
  components: {},
  data() {
    return {
      // comment: '#专业:' + data.major + '#年级:' + data.class + '#大学:' + data.edu
      f1: '',
      f2: '',
      f3: '',
      form: {
        name: '',
        phone: '',
        project_id: 5009,
      },
    }
  },
  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
        }
      }
      this.form = Object.assign(this.form, { comment: `#咨询产品：${this.f1};#院校名称：${this.f2};#院系：${this.f3}` })
      submitApplicationForm(this.form)
        .then((res) => {
          if (res && res.status === 200) {
            this.$message({
              type: 'success',
              message: '提交成功',
            })
          } else {
            this.$message.error('提交失败')
          }
        })
        .catch(() => {})
    },
  },
}
</script>

<style lang="scss" scoped>
.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: 0 auto 40px;
      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: 90px;
        }
        .tips {
          font-size: 22px;
          line-height: 100%;
          color: #ffffff;
          text-align: center;
          margin-top: 20px;
        }
      }
      .form {
        width: 401px;
        background: #ffffff;
        margin-top: 54px;
        box-sizing: border-box;
        padding: 40px 50px;
        height: fit-content;
        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;
        }
      }
    }
  }
}
</style>
