<template>
  <div :class="isMobile ? 'is-h5' : 'is-pc'">
    <div class="presence-content-box">
      <card :title="$t('home.presence.title')" class="card-style">
        <template #header-aside>
          <nuxt-link to="/alumni/sharing">{{ $t('viewMore') }}</nuxt-link>
        </template>
      </card>
      <div class="content-mian">
        <van-swipe class="my-swipe" :autoplay="5000" :vertical="true" indicator-color="white">
          <template v-for="(item, index) in listData">
            <van-swipe-item :key="index">
              <app-link :data="item" :to="`/news/hot/${item.id}`">
                <img :src="item.web_img_uri" />
              </app-link>
            </van-swipe-item>
          </template>
        </van-swipe>
        <div class="form-box">
          <div class="title-box">
            <div class="bt" v-html="$t('home.presence.tips1')"></div>
            <div class="tips">{{ $t('home.presence.tips2') }}</div>
          </div>
          <div class="form">
            <div class="li">
              <el-select v-model="form.years" :placeholder="$t('home.presence.yearsholder')">
                <el-option v-for="item in yearsOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="li">
              <el-select v-model="form.degree" :placeholder="$t('home.presence.degreeholder')">
                <el-option v-for="item in degreeOptions" :key="item.value" :label="item.label" :value="item.value">
                </el-option>
              </el-select>
            </div>
            <div class="li">
              <el-input v-model="form.name" :placeholder="$t('home.presence.nameholder')"></el-input>
            </div>
            <div class="li">
              <el-input v-model="form.phone" :placeholder="$t('home.presence.phoneholder')"></el-input>
            </div>
            <div class="btn" @click="submit">{{ $t('home.presence.formBtn') }}</div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import Card from '@/components/Card'
import AppLink from '@/components/Link'
import { postNes } from '@/api'
export default {
  name: 'presence',
  components: {
    Card,
    AppLink
  },
  data() {
    return {
      yearsOptions: [
        {
          value: '0~2',
          label: '0-2年'
        },
        {
          value: '3~5',
          label: '3-5年'
        },
        {
          value: '5~10',
          label: '5-10年'
        },
        {
          value: '10+',
          label: '10年及以上'
        }
      ],
      degreeOptions: [
        {
          value: '2',
          label: '普通本科'
        },
        {
          value: '3',
          label: '本科/学士'
        },
        {
          value: '5',
          label: '硕士'
        },
        {
          value: '7',
          label: '博士'
        }
      ],
      form: {
        years: '',
        degree: '',
        name: '',
        phone: '',
        project_id: process.env.projectId,
        channel: 19960
      },
      value: '',
      titleParams: {
        name: this.$t('home.presence.title'),
        more: {
          path: '/alumni/sharing'
        }
      },
      listData: []
    }
  },
  async fetch() {
    const params = { project_id: process.env.newProjectId, type_tag: 'kelley_alumni_share', limit: 1 }
    this.listData = await this.$axios.get('/api/cms/api/v1/articles', { params }).then(res => res.data.data)
  },
  computed: {
    swiper() {
      return this.$refs.mySwiper.swiper
    },
    isMobile() {
      return this.$store.state.isMobile
    }
  },
  mounted() {},
  methods: {
    submit() {
      const findNull = Object.values(this.form).findIndex(item => {
        return item === ''
      })
      if (findNull !== -1) {
        this.$message('请完善信息')
        return
      } else {
        const MOBILE_REG = /^1(3[0-9]|4[01456879]|5[0-35-9]|6[2567]|7[0-8]|8[0-9]|9[0-35-9])\d{8}$/
        if (!MOBILE_REG.test(this.form.phone)) {
          this.$message('手机号格式错误')
          return
        }
      }
      postNes(this.form)
        .then(res => {
          if (res && res.status === 200) {
            this.$message({
              type: 'success',
              message: '提交成功'
            })
          } else {
            this.$message.error('提交失败')
          }
        })
        .catch(() => {})
    },
    swiperStop() {
      this.swiper.autoplay.stop()
    },
    swiperStart() {
      this.swiper.autoplay.start()
    }
  }
}
</script>

<style lang="scss" scoped>
.is-pc {
  .card-style {
    width: 1200px;
    margin: 0 auto;
  }
  .presence-content-box {
    padding-top: 80px;
    .m-title {
      width: 1200px;
      margin: 0 auto;
    }
    .content-mian {
      padding-top: 24px;
      .my-swipe {
        // height: 500px;
        img {
          width: 100%;
          height: 100%;
          display: block;
        }
      }
      .form-box {
        width: 1200px;
        height: 540px;
        margin: 80px auto 0;
        background: url(https://webapp-pub.ezijing.com/project/kelley/home-ssfc-bg.png);
        background-size: 100% 100%;
        display: flex;
        justify-content: space-between;
        .title-box {
          width: 592px;
          height: 223px;
          background: rgba(170, 25, 65, 0.63);
          box-shadow: 0px 0px 122px rgba(0, 0, 0, 0.07);
          margin-top: 127px;
          .bt {
            font-size: 48px;
            font-weight: bold;
            line-height: 58px;
            color: #ffffff;
            text-align: center;
            margin-top: 30px;
          }
          .tips {
            font-size: 14px;
            line-height: 100%;
            color: #ffffff;
            margin-top: 30px;
            text-align: center;
          }
        }
        .form {
          width: 401px;
          height: 382px;
          background: #ffffff;
          margin-top: 54px;
          box-sizing: border-box;
          padding: 63px 56px 56px 64px;
          margin-right: 116px;
          ::v-deep {
            .el-select {
              width: 100%;
            }
          }
          .li {
            margin-bottom: 20px;
          }
          .btn {
            font-size: 18px;
            line-height: 32px;
            color: #ffffff;
            width: 281px;
            background: #aa1941;
            border-radius: 4px;
            text-align: center;
            cursor: pointer;
          }
        }
      }
    }
  }
}
.is-h5 {
  .card-width {
    width: 100%;
    margin: 0;
    ::v-deep {
      .card-hd {
        margin: 0.2rem 0.15rem;
      }
    }
  }
  .presence-content-box {
    .my-swipe {
      // height: 1.58rem;
      img {
        width: 100%;
        height: 100%;
        display: block;
      }
    }
    .form-box {
      background: url(https://webapp-pub.ezijing.com/project/kelley-h5/home-presen-bg-new1.png) center;
      background-size: cover;
      padding-top: 0.18rem;
      box-sizing: border-box;
      margin-top: 0.27rem;
      padding-bottom: 0.05rem;
      .title-box {
        width: 3.75rem;
        height: 1.2rem;
        background: rgba(170, 25, 65, 0.63);
        box-shadow: 0rem 0rem 1rem rgba(0, 0, 0, 0.07);
        .bt {
          text-align: center;
          font-size: 0.26rem;
          // font-weight: bold;
          line-height: 0.31rem;
          color: #ffffff;
          text-align: center;
          padding-top: 0.16rem;
        }
        .tips {
          font-size: 0.1rem;
          line-height: 0.12rem;
          color: #ffffff;
          text-align: center;
          padding-top: 0.1rem;
        }
      }
      .form {
        width: 2.7rem;
        background: #ffffff;
        margin: 0.2rem auto;
        padding: 0.25rem 0.2rem;
        box-sizing: border-box;
        .li {
          margin-bottom: 0.2rem;
        }
        ::v-deep {
          .el-select {
            width: 100%;
            height: 100%;
          }
        }
        .btn {
          font-size: 0.12rem;
          line-height: 0.26rem;
          color: #ffffff;
          background: #aa1941;
          border-radius: 0.02rem;
          text-align: center;
          cursor: pointer;
        }
      }
    }
  }
}
</style>
