<template>
  <div
    id="index_login_container"
  >
    <div class="cover_whole">
       <!-- 填写表框 -->
       <div class="cover_input">
          <span class="title">联名邀请，免费测评专注力</span>
          <input 
          placeholder='请输入学校名称'
          v-model="school" 
          @input="textControl($event,'sch')"
          placeholder-style="font-size: 28rpx;color: #B0784F;"/>

          <input 
          placeholder='请输入学生'
          v-model="student" 
          @input="textControl($event,'stu')"
          placeholder-style="font-size: 28rpx;color: #B0784F;"/>

          <button class="cu-btn btn" @click="joint_test">免费测评</button>
       </div>
       
       <!-- 滚动 -->
       <div class="cover_scroll">
         <swiper 
         class="swiper"
         easing-function="linear"
         :circular="circular" 
         :indicator-dots="indicatorDots"
         :autoplay="autoplay"
         :interval="interval"
         :duration="duration"
         :vertical="vertical"
         >
           <block v-for="(item,index) in scroll_list" :key="index">
             <swiper-item class="swiper-item"><div class="item">{{ item.school }} {{item.name}} 已联名</div></swiper-item>
           </block>
         </swiper>
       </div>
    </div>
    <!-- 弹窗 -->
       <van-popup
        :show="show"
        @close="close_pop"
        :close-on-click-overlay="true"
        custom-class="pop"
        overlay
        z-index="99"
       >
         <img class="cover_pop" show-menu-by-longpress="true" src="https://img.shuimuai.com/success_joint.png"/>
      </van-popup>

  </div>
</template>
<script>
import { addJoint, getJoint } from "../../requests/competition";
import Toast from "../../../static/vant/toast/toast";

var $this;
export default {
  name: "scan_container",
  data() {
    return {
      show: false,
      school: "",
      student: "",
      scroll_list: [],
      // 轮播配置
      indicatorDots: false,
      autoplay: true,
      interval: 1800,
      duration: 1800,
      vertical: true,
      circular: true,
    };
  },
  methods: {
    joint_test() {
      // 限制输入（学校：中英文   学生：中文
      var reg_sch = /^[a-zA-Z\u4e00-\u9fa5]+$/
      var reg_stu = /^[\u4e00-\u9fa5]+$/
      if ( $this.school && $this.student && (!reg_sch.test($this.school) || !reg_stu.test($this.student))) {
        if(!reg_sch.test($this.school)){
           wx.showToast({
             title: "请输中英文校名",
             icon: "error",
           })
        } else if(!reg_stu.test($this.student) && reg_sch.test($this.school)){
          wx.showToast({
             title: "请输入中文名",
             icon: "error",
           })
        } 
        
      } else{
        let $joint = {
          phone: wx.getStorageSync("phone"),
          school: $this.school,
          name: $this.student,
        };
        addJoint($joint)
        .then((res) => {
          console.log("联名", res);
          let $res = res.data;
          if ($res.code == 0) {
            $this.show = true;
            $this.school = "";
            $this.student = "";
          } else if ($res.code == 1012) {
            wx.showToast({
              title: "请先登录",
              icon: "error",
            });
          } else {
            wx.showToast({
              title: $res.errmsg,
              icon: "error",
            });
          }
        })
        .catch((err) => {
          console.log("错误", err);
        });
      }

    },

    close_pop() {
      $this.show = false;
    },
    
    // textControl($e,watch) {
    //   console.log($e)
    //   const value = $e.mp.detail.value

    //   var reg = /^[a-zA-Z\u4e00-\u9fa5]+$/;
    //   if (value && !reg.test(value)) {
    //     wx.showToast({
    //       title: "请输入中英文",
    //       icon: "error",
    //     })
    //     watch == "sch" ? $this.school = "" : $this.student = ""
    //   } 
    // },
  },
  mounted() {
    getJoint()
      .then((res) => {
        console.log("已联名", res);
        let $res = res.data;
        if ($res.code == 0) {
          $this.scroll_list = $res.data;
        } else {
          console.log("获取不到已联名", err);
        }
      })
      .catch((err) => {
        console.log("错误", err);
      });
  },
  created() {
    $this = this;
  },
  onUnload() {
    $this.show = false;
    $this.school = "";
    $this.student = "";
  },
};
</script>
<style scoped>
#index_login_container {
  background-color: #040312;
}

.cover_whole {
  background: url("https://img.shuimuai.com/bg_new.png");
  width: 100%;
  height: 4586px;
  background-size: 100% 100%;
  background-position: center;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  padding-top: 784rpx;
  font-family: Alibaba PuHuiTi;
  font-weight: 400;
}

.cover_input {
  background: url("https://img.shuimuai.com/bg_input.png");
  background-size: 100% 100%;
  background-position: center;
  width: 650rpx;
  height: 517rpx;
  margin-left: 7px;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
  justify-content: space-around;
  padding: 20px 0 28px;
}

.cover_scroll {
  background: url("https://img.shuimuai.com/bg_scroll.png");
  background-size: 100% 100%;
  background-position: center;
  width: 634rpx;
  height: 111rpx;
  margin-top: 88rpx;
  padding: 14rpx;
}

.item {
  font-size: 24rpx;
  color: #fff1d7;
  display: flex;
  align-items: center;
  box-sizing: border-box;
  flex-direction: column;
}

.title {
  font-size: 32rpx;
  color: #ffaf74;
  letter-spacing: 5px;
}

.btn {
  width: 502rpx;
  height: 80rpx;
  background: linear-gradient(180deg, #ffe8c0 0%, #e19c6a 100%);
  border-radius: 40rpx;
  font-size: 30rpx;
  font-weight: 500;
  color: #9a4720;
  letter-spacing: 5px;
}

input {
  width: 502rpx;
  height: 80rpx;
  background: #4a3843;
  border: 2px solid #ffaf74;
  border-radius: 40rpx;
  padding-left: 41rpx;
  color: white;
}

.cover_pop {
  width: 493rpx;
  height: 662rpx;
}
</style>

<style>
.pop {
  background-color: rgba(255, 255, 255, 0) !important;
}
.swiper {
  height: 87rpx !important;
}
/* .swiper-item{
  height:90rpx !important;
}  */
</style>