<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 v-for="(item, index) in formList" :key="index">
        <img src="https://webapp-pub.ezijing.com/www/pc/form/form_check_bg.png" alt="" />
        <h4>{{ item.tit }}</h4>
        <p>{{ item.desc }}</p>
      </li>
    </ul>
    <div class="form">
      <div class="form-item">
        <input class="form-input" type="text" v-model="form.name" placeholder="请输入您的名字" />
      </div>
      <div class="form-item">
        <input class="form-input" type="number" v-model="form.phone" placeholder="请输入您的手机号" maxlength="11" />
      </div>
      <div class="form-item">
        <select class="form-select" placeholder="请选择项目" v-model="form.project_id">
          <option v-for="(item, index) in projects" :value="item.value" :key="index">{{ item.label }}</option>
        </select>
      </div>
      <div class="form-item">
        <input class="form-button" type="button" @click="handleSubmit" value="立即报名" />
      </div>
    </div>
  </div>
</template>

<script>
import * as api from '@/api'

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' }],
      },
      formList: [
        {
          tit: '权威可靠',
          desc: '-百年学府 中美教育部双认证',
        },
        {
          tit: '校方直录',
          desc: '-百年学府 中美教育部双认证',
        },
        {
          tit: '免标准化考试',
          desc: '-美国校方考试替代托福/GMAT',
        },
        {
          tit: '省时省费',
          desc: '-减免部分学费，赴美1年，校内住宿安全便捷',
        },
        {
          tit: '师资雄厚',
          desc: '-清华北大教授+全美TOP100大学博士师资',
        },
        {
          tit: '精英辈出',
          desc: '-美国前总统，诺贝尔奖得主，世界500强CEO等',
        },
      ],
    }
  },
  mounted() {
    if (this.type === 1) {
      this.form.project_id = '1006'
    } else {
      this.form.project_id = '1018'
    }
  },
  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: '家庭教育硕士MS', value: '1021' },
          { label: this.$t('aside.project1'), value: '1012' },
          { label: this.$t('aside.project3'), value: '1008' },
          // { label: '餐饮管理方向MBA', value: '1015' }
        ]
      } else {
        return [
          // { label: '工商管理硕士保研项目', value: '1016' },
          // { label: '管理信息系统硕士保研项目', value: '9999' },
          { label: '纽约州立大学石溪分校金融学硕士项目', value: '1018' },
          { label: '德保罗大学金融学硕士项目', value: '1025' },
          { label: '斯蒂文斯理工学院工程管理硕士项目', value: '1020' },
          { label: '加州浸会大学全日制工商管理博士项目', value: '1017' },
          { label: '加州浸会大学全球科技创新管理学者DBA项目', value: '1023' },
        ]
      }
    },
  },
  methods: {
    handleSubmit() {
      if (!this.form.name) {
        this.$notify('请输入您的姓名')
        return
      }
      if (!this.form.phone || !/^1[3-9]\d{9}$/.test(this.form.phone)) {
        this.$notify('请输入正确的手机号')
        return
      }
      if (!this.form.project_id) {
        this.$notify('请选择项目')
        return
      }
      const params = { ...this.form }
      if (params.project_id === '9999') {
        params.project_id = '1016'
      }
      api
        .submit(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" scoped>
.form-submit {
  margin: 0.25rem 0.15rem 0 0.15rem;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  background: url(https://webapp-pub.ezijing.com/www/h5/internationalDegree/apply_bg1.png) no-repeat center top;
  background-size: 100% 100%;
  box-sizing: border-box;
  h2 {
    font-size: 0.18rem;
    font-weight: 500;
    color: #010101;
    margin-top: 0.31rem;
  }
  .desc {
    display: flex;
    flex-direction: column;
    font-size: 0.12rem;
    color: #333333;
    margin-top: 0.08rem;

    span {
      color: #a81840;
      margin: 0 0.04rem;
    }
    p {
      padding: 0 0.14rem 0 0.14rem;
      white-space: nowrap;
      color: #333333;
      margin-top: 0.08rem;
    }
    ul {
      display: flex;
      padding: 0 0.09rem 0 0.12rem;
      li {
        padding-left: 0.12rem;
        padding-right: 0.08rem;
        background: url(https://webapp-pub.ezijing.com/www/pc/form/form_check_bg.png) no-repeat left center;
        background-size: 0.11rem;
        white-space: nowrap;
      }
    }
  }

  .desc2 {
    // width: 1200px;
    text-align: left;
    padding-left: 0.2rem;
    li {
      display: flex;
      justify-content: flex-start;
      align-items: center;
      font-size: 0.12rem;
      margin-top: 0.12rem;
      img {
        width: 0.11rem;
        height: 0.11rem;
      }
      h4 {
        color: #333333;
        white-space: nowrap;
        margin-left: 0.06rem;
      }
      p {
        color: #666666;
      }
    }
  }
}
.form {
  padding: 0.34rem;
  .form-item {
    display: flex;
    align-items: center;
    margin-bottom: 0.15rem;
    font-size: 0.12rem;
    height: 0.35rem;
    width: 2.9rem;
  }
  .form-input {
    width: 100%;
    height: 100%;
    background: rgba(255, 255, 255, 0.39);
    border: 1px solid #dcdcdc;
    padding-left: 0.1rem;
    color: #424242;
    &::placeholder {
      color: #7d7d7d;
    }
  }
  .form-select {
    position: relative;
    padding: 0 10px;
    width: 100%;
    height: 100%;
    background: url('https://webapp-pub.ezijing.com/www/h5/images/icon_arrows.png') no-repeat;
    background-position: right 0.7em top 50%, 0 0;
    background-size: 30px 30px;
    box-sizing: border-box;
    padding-left: 0.1rem;
    color: #424242;
    border: 0.01rem solid #dcdcdc;
  }
}

.form-button {
  padding: 0 0.1rem;
  width: 100%;
  height: 100%;
  font-size: 0.12rem;
  background-color: #aa1941 !important;
  color: #fff;
  box-sizing: border-box;
  border: none;
  cursor: pointer;
}
</style>
