<template>
  <div class="form-submit">
    <h2 v-html="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="formRef">
      <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-form-item>
        <el-button type="primary" @click="handleSubmit">{{ isEn ? 'Register now' : '立即报名' }}</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script setup>
import { ElMessage } from 'element-plus'
import { submitApplicationForm } from '@/api/index'

const props = defineProps({
  type: { type: Number, default: 1 },
})

const route = useRoute()
const { locale, t } = useI18n()
const formRef = ref(null)

const isEn = computed(() => locale.value === 'en-US')

const form = reactive({
  name: '',
  phone: '',
  project_id: '',
  channel: route.query.channel_num || 10000,
})

const rules = computed(() => ({
  name: [{ required: true, message: t('study.name1_placeholder'), trigger: 'blur' }],
  phone: [
    {
      required: true,
      message: t('study.phone2_placeholder'),
      trigger: 'blur',
    },
    { pattern: /^1[3-9]\d{9}$/, message: t('study.phone2_placeholder'), trigger: 'blur' },
  ],
  project_id: [{ required: true, message: t('study.project_placeholder'), trigger: 'change' }],
}))

const title = computed(() => {
  if (!isEn.value) {
    return props.type === 1 ? '在线读国际硕士，与在校生相同的学位' : '全球正规优选院校，可申请中留服认证'
  } else {
    return props.type === 1
      ? `Online Study of International Master's Programs<br/> with the Same Degrees for Students on Campus`
      : 'Select Prestigious Higher Education Institutions<br/> Offering Diplomas Recognized by CSCSE'
  }
})

const projects = computed(() => {
  if (props.type === 1) {
    return [
      // { label: t('aside.project4'), value: '1001' },
      // { label: t('aside.project5'), value: '1006' },
      { label: t('aside.project6'), value: '1005' },
      { label: t('aside.project8'), value: '1021' },
      { label: '领航数字时代EMBA', value: '1026' },
      { label: t('aside.project1'), value: '1012' },
      { label: t('aside.project3'), value: '1008' },
      // { label: t('aside.project9'), value: '1015' },
      // { label: t('aside.project4'), value: '1001' }
    ]
  } else {
    return [
      // { label: '工商管理硕士保研项目', value: '1016' },
      // { label: '管理信息系统硕士保研项目', value: '9999' },
      // { label: '加州大学河滨分校国际大一项目', value: '1017' },
      { label: '纽约州立大学石溪分校金融学硕士项目', value: '1018' },
      { label: '德保罗大学金融学硕士项目', value: '1025' },
      { label: '斯蒂文斯理工学院工程管理硕士项目', value: '1020' },
      { label: '雪城大学硕士保研项目', value: '1028' },
      // { label: '加州浸会大学全日制工商管理博士项目', value: '1017' },
      // { label: '加州浸会大学全球科技创新管理学者DBA项目', value: '1023' }
    ]
  }
})

const handleSubmit = () => {
  formRef.value?.validate().then(() => {
    const params = { ...form }
    if (params.project_id === '9999') {
      params.project_id = '1016'
    }
    submitApplicationForm(params)
      .then((res) => {
        if (res && res.status === 200 && res.error === 0) {
          ElMessage.success('报名提交成功')
        } else {
          ElMessage.error('报名提交失败')
        }
      })
      .catch(() => {
        ElMessage.error('报名提交失败')
      })
  })
}
</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: 32px;
    font-weight: 400;
    line-height: 1.5;
    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-select,
  .el-button {
    width: 280px;
    height: 48px;
    border-radius: 0;
  }
  .el-input__inner,
  .el-select__wrapper {
    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: 13px 0 13px 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>
