<template>
  <div
    class="homepage_message"
    :style="{'min-height': leavheight + 'px', backgroundImage:'url(' + imgUrlBg + ')' }"
  >
    <div class="homepage_message-main">
      <h3>
        <span>留下您的信息</span>
      </h3>
      <h5>紫荆教育学位顾问为您提供专业的服务</h5>
      <div class="homepage_message_body">
        <div class="body_img">
          <img :src="imgUrl" alt />
        </div>
        <div class="body_input">
          <el-form
            :model="ruleForm"
            :rules="rules"
            ref="ruleForm"
            label-width="0px"
            class="demo-ruleForm"
          >
            <el-form-item prop="name">
              <el-input v-model="ruleForm.name" placeholder="姓名"></el-input>
            </el-form-item>
            <el-form-item prop="phone">
              <el-input v-model="ruleForm.phone" placeholder="手机"></el-input>
            </el-form-item>
            <el-form-item>
              <el-button type="primary" :loading="isLoading" @click="submit">提交</el-button>
            </el-form-item>
          </el-form>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import cAction from '@action'

export default {
  name: 'leavex',
  props: {
    imgUrl: {},
    leavheight: {
      type: Number
    },
    imgUrlBg: {}
  },
  data() {
    var checkPhone = (rule, value, callback) => {
      var reg = /^1[345789]\d{9}$/
      if (!reg.test(value)) {
        callback(new Error('请输入11位手机号！'))
      } else {
        callback()
      }
    }
    return {
      ruleForm: {
        name: '',
        phone: '',
        channel: 10040,
        project_id: 1005
      },
      isLoading: false,
      rules: {
        name: [{ required: true, message: '请输入姓名', trigger: 'blur' }],
        phone: [{ required: true, validator: checkPhone, trigger: 'blur' }]
      }
    }
  },
  methods: {
    submit() {
      this.$refs.ruleForm.validate(valid => {
        if (valid) {
          this.isLoading = true

          cAction.Infos.postInfo(this.ruleForm)
            .then(() => {
              this.$alert('提交成功', '信息', {
                confirmButtonText: '确定',
                type: 'success'
              })
              this.isLoading = false
            })
            .catch(e => {
              this.isLoading = false
              console.log(e)
            })
        } else {
          this.isLoading = false
          return false
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.homepage_message {
  width: 100%;
  position: relative;
  background-repeat: no-repeat;
  background-size: cover;
  display: flex;
  justify-content: center;
  .homepage_message-main {
    width: 80%;
    margin: 0 auto;
    h3 {
      margin-top: 80px;
      text-align: center;
      color: rgba(255, 255, 255, 1);
      font-size: 40px;
      font-family: PingFangSC-Medium, PingFang SC;
      span {
        display: inline-block;
        position: relative;
        &::before {
          content: '';
          position: absolute;
          bottom: -4px;
          height: 3px;
          background: #ffffff;
          width: 100%;
        }
      }
    }
    h5 {
      padding-top: 24px;
      font-size: 18px;
      font-family: PingFangSC-Semibold, PingFang SC;
      font-weight: 600;
      opacity: 0.6;
      color: rgba(255, 255, 255, 1);
      text-align: center;
    }
    .homepage_message_body {
      padding: 63px 0px 0px 0px;
      display: flex;
      width: 100%;
      .body_img {
        flex: 1;
        padding: 0px 30px;
      }
      .body_input {
        flex: 1;
        padding: 0px 30px;
        .demo-ruleForm {
          display: flex;
          justify-content: space-between;
          flex-direction: column;
          height: 100%;
        }
        .el-input {
          max-width: 324px;
        }
        ::v-deep .el-input__inner {
          border: 0px;
          background: transparent;
          border-bottom: 2px solid #fff;
          border-radius: 0px;
          padding: 0px;
          color: #fff;
        }
        ::v-deep .el-button {
          width: 132px;
          height: 54px;
          border-radius: 4px;
          .el-icon-loading {
            color: #fff !important;
          }
        }
      }
    }
  }
}
</style>
