<template>
  <div class="form-submit">
    <h2>{{ title }}</h2>
    <div class="desc" v-if="type === 1">
      <ul>
        <li>免联考，在职读</li>
        <li>申请制入学</li>
        <li>双语授课</li>
        <li>学制1-2年</li>
      </ul>
      <p>全球正规优选院校 <span>|</span> 6000+全球精英校友 <span>|</span> 国际化师资团队</p>
    </div>
    <ul v-if="type === 2" class="desc2">
      <li>
        <h4>权威可靠</h4>
        <p>百年学府 中美教育部双认证</p>
      </li>
      <li>
        <h4>校方直录</h4>
        <p>点对点直录，硕士学分国内提前修</p>
      </li>
      <li>
        <h4>免标准化考试</h4>
        <p>美国校方考试替代托福/GMAT</p>
      </li>
      <li>
        <h4>省时省费</h4>
        <p>减免部分学费，赴美1年，校内住宿安全便捷</p>
      </li>
      <li>
        <h4>师资雄厚</h4>
        <p>清华北大教授+全美TOP100大学博士师资</p>
      </li>
      <li>
        <h4>精英辈出</h4>
        <p>美国前总统，诺贝尔奖得主，世界500强CEO等</p>
      </li>
    </ul>
    <el-form inline :model="form" :rules="rules" ref="form">
      <el-form-item prop="name">
        <el-input type="text" v-model="form.name" placeholder="请输入您的名字"></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input type="text" v-model="form.phone" placeholder="请输入您的手机号"></el-input>
      </el-form-item>
      <el-form-item prop="project_id">
        <el-select v-model="form.project_id" placeholder="请选择项目">
          <el-option v-for="item in projects" v-bind="item" :key="item.value"></el-option>
        </el-select>
      </el-form-item>
      <el-button type="primary" @click="handleSubmit">立即报名</el-button>
    </el-form>
  </div>
</template>

<script>
import { postNes } from '@/api/index'

export default {
  props: { type: { type: Number, default: 1 } },
  data() {
    return {
      form: {
        name: '',
        phone: '',
        project_id: '',
        channel: this.$route.query.channel_num || 19962
      },
      rules: {
        name: [{ required: true, message: '请输入您的名字', trigger: 'blur' }],
        phone: [
          { required: true, message: '请输入您的手机号', trigger: 'blur' },
          { pattern: /^1[3-9]\d{9}$/, message: '请输入正确的手机号', trigger: 'blur' }
        ],
        project_id: [{ required: true, message: '请选择项目', trigger: 'change' }]
      }
    }
  },
  computed: {
    title() {
      return this.type === 1 ? '在线读国际硕士，与在校生相同的学位' : '全球正规优选院校，可申请中留服认证'
    },
    projects() {
      if (this.type === 1) {
        return [
          { label: this.$t('aside.project4'), value: '1001' },
          { label: this.$t('aside.project5'), value: '1006' },
          { label: this.$t('aside.project6'), value: '1005' },
          { label: this.$t('aside.project1'), value: '1012' },
          { label: this.$t('aside.project3'), value: '1008' },
          { label: '餐饮管理方向MBA', value: '1015' }
        ]
      } else {
        return [
          { label: '工商管理硕士1+1项目', value: '1016' },
          { label: '管理信息系统硕士1+1项目', value: '9999' },
          { label: '工商管理博士项目', value: '1017' },
          { label: '金融硕士1+1项目', value: '1018' },
          { label: '工程管理硕士1+1', value: '1020' }
        ]
      }
    }
  },
  methods: {
    handleSubmit() {
      this.$refs.form.validate().then(() => {
        const params = { ...this.form }
        if (params.project_id === '9999') {
          params.project_id = '1016'
        }
        postNes(params)
          .then(res => {
            if (res && res.status === 200 && res.error === 0) {
              this.$message.success('报名提交成功')
            } else {
              this.$message.error('报名提交失败')
            }
          })
          .catch(() => {
            this.$message.error('报名提交失败')
          })
      })
    }
  }
}
</script>

<style lang="scss">
.form-submit {
  min-height: 356px;
  padding: 80px 0 60px;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(https://webapp-pub.ezijing.com/www/pc/form/form_bg.png) no-repeat center top;
  background-size: cover;
  h2 {
    font-size: 40px;
    font-weight: 400;
    line-height: 1;
    color: #010101;
  }
  .desc {
    padding: 28px 0 50px;
    display: flex;
    align-items: center;
    font-size: 16px;
    line-height: 28px;
    color: #010101;
    span {
      padding: 0 5px;
      color: #a81840;
    }
    p {
      padding-left: 50px;
    }
    ul {
      display: flex;
      li {
        padding-left: 20px;
        padding-right: 30px;
        background: url(https://webapp-pub.ezijing.com/www/pc/form/form_check_bg.png) no-repeat left center;
        background-size: 16px;
      }
    }
  }
  .el-input,
  .el-button {
    width: 288px;
    height: 48px;
    border-radius: 0;
  }
  .el-input__inner {
    height: 48px;
    border-radius: 0;
  }
  .desc2 {
    width: 1200px;
    padding: 40px 0;
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 20px;
    li {
      display: flex;
      flex-direction: column;
      justify-content: center;
      height: 70px;
      padding-left: 42px;
      background: #fff url(https://webapp-pub.ezijing.com/www/pc/form/form_check_bg.png) no-repeat 16px center;
      background-size: 16px;
      border: 1px solid #dcdcdc;
    }
    h4 {
      font-size: 18px;
      color: #010101;
    }
    p {
      font-size: 16px;
      color: #010101;
    }
  }
}
</style>
