<template>
  <div class="form-submit">
    <h2>{{ title }}</h2>
    <div class="desc" v-if="type === 1">
      <ul>
        <li>{{ isEn ? 'Admissions without joint exams and on-the-job study' : '免联考，在职读' }}</li>
        <li>{{ isEn ? 'Application-based admission' : '申请制入学' }}</li>
        <li>{{ isEn ? 'Bilingual teaching' : '双语授课' }}</li>
        <li>{{ isEn ? '1–2-year programs' : '学制1-2年' }}</li>
      </ul>
      <p>
        {{ isEn ? 'Select Prestigious Universities in the World ' : '全球正规优选院校' }}
        <span>|</span> {{ isEn ? '6000+ Alumni' : '6000 + 全球精英校友' }} <span>|</span>
        {{ isEn ? 'International Teachers' : '国际化师资团队' }}
      </p>
    </div>
    <ul v-if="type === 2" class="desc2">
      <li>
        <h4>{{ isEn ? 'Authoritative and reliable' : '权威可靠' }}</h4>
        <p>
          {{
            isEn
              ? 'Established institutions certified by Chinese and American education authorities'
              : '百年学府 中美教育部双认证'
          }}
        </p>
      </li>
      <li>
        <h4>{{ isEn ? 'lDirect enrollment by universities' : '校方直录' }}</h4>
        <p>
          {{
            isEn
              ? `Point-to-point direct enrollment and earning of credits for master's degrees in advance in China`
              : '点对点直录，硕士学分国内提前修'
          }}
        </p>
      </li>
      <li>
        <h4>{{ isEn ? 'Exemption from standardized examination' : '免标准化考试' }}</h4>
        <p>{{ isEn ? 'University tests in lieu of TOEFL/GMAT' : '美国校方考试替代托福/GMAT' }}</p>
      </li>
      <li>
        <h4>{{ isEn ? 'Time and cost saving' : '省时省费' }}</h4>
        <p>
          {{
            isEn
              ? 'Exemption of partial tuition fees, staying on campuses in the United States for one year, safe and convenient'
              : '减免部分学费，赴美1年，校内住宿安全便捷'
          }}
        </p>
      </li>
      <li>
        <h4>{{ isEn ? 'Strong faculty' : '师资雄厚' }}</h4>
        <p>
          {{
            isEn
              ? 'Professors from Tsinghua University and Peking University + teachers holding doctoral degrees from top 100 American universities'
              : '清华北大教授+全美TOP100大学博士师资'
          }}
        </p>
      </li>
      <li>
        <h4>{{ isEn ? 'Prominent alumni' : '精英辈出' }}</h4>
        <p>
          {{
            isEn
              ? 'Former US presidents, Nobel laureates, CEOs of Fortune 500 companies, etc.'
              : '美国前总统，诺贝尔奖得主，世界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="isEn ? 'Enter your name' : ' 请输入您的名字'"
        ></el-input>
      </el-form-item>
      <el-form-item prop="phone">
        <el-input
          type="text"
          v-model="form.phone"
          :placeholder="isEn ? 'Enter your mobile phone number' : '请输入您的手机号'"
        ></el-input>
      </el-form-item>
      <el-form-item prop="project_id">
        <el-select v-model="form.project_id" :placeholder="isEn ? 'Select a program' : '请选择项目'">
          <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">{{ isEn ? 'Register now' : '立即报名' }}</el-button>
    </el-form>
  </div>
</template>

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

export default {
  props: { type: { type: Number, default: 1 } },
  data() {
    return {
      isEn: false,
      form: {
        name: '',
        phone: '',
        project_id: '',
        channel: this.$route.query.channel_num || 19962
      },
      rules: {
        name: [{ required: true, message: this.$t('study.name1_placeholder'), trigger: 'blur' }],
        phone: [
          {
            required: true,
            message: this.$t('study.phone2_placeholder'),
            trigger: 'blur'
          },
          { pattern: /^1[3-9]\d{9}$/, message: this.$t('study.phone2_placeholder'), trigger: 'blur' }
        ],
        project_id: [{ required: true, message: this.$t('study.project_placeholder'), trigger: 'change' }]
      }
    }
  },
  computed: {
    title() {
      if (!this.isEn) {
        return this.type === 1 ? '在线读国际硕士，与在校生相同的学位' : '全球正规优选院校，可申请中留服认证'
      } else {
        return this.type === 1
          ? `Online Study of International Master's Programs with the Same Degrees for Students on Campus`
          : 'Select Prestigious Higher Education Institutions Offering Diplomas Recognized by CSCSE'
      }
    },
    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: '教育学硕士（家庭）MED', value: '1021' },
          { label: this.$t('aside.project1'), value: '1012' },
          { label: this.$t('aside.project3'), value: '1008' },
          { label: '餐饮管理方向MBA', value: '1015' },
          { label: this.$t('aside.project4'), value: '1001' }
        ]
      } else {
        return [
          // { label: '工商管理硕士保研项目', value: '1016' },
          // { label: '管理信息系统硕士保研项目', value: '9999' },
          { label: '全日制工商管理博士项目', value: '1017' },
          { label: '金融硕士保研项目', value: '1018' },
          { label: '工程管理硕士保研', value: '1020' },
          { label: '在线工商管理博士项目', value: '1023' }
        ]
      }
    }
  },
  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('报名提交失败')
          })
      })
    }
  },
  mounted() {
    this.isEn = this.$cookies.get('lang') === 'en-US'
  }
}
</script>

<style lang="scss">
.form-submit {
  min-height: 356px;
  padding: 78px 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: 36px;
    font-weight: 400;
    line-height: 1;
    color: #010101;
    width: 1200px;
    text-align: center;
  }
  .desc {
    padding: 28px 0 50px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-wrap: wrap;
    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>
