<template>
  <div class="containerbox">
    <div class="flextwo sharetopk" @click="back">
      <div class="leftrow leftrowkimg">
        <img src="../../../assets/leftrow.png" alt />
      </div>
      <div class="sharemiddle">加入我们</div>
      <div class="sharebtn">
        <!-- <img src="../../../assets/sharebtn.png" alt /> -->
      </div>
    </div>
    <div class="applayjoinbox">
      <div class="applayjoinitem flexone">
        <div class="applayjoinleft">姓名</div>
        <div class="applayjoinright">
          <input type="text" placeholder="请输入姓名" v-model="name" />
        </div>
      </div>
      <div class="applayjoinitem flexone">
        <div class="applayjoinleft">联系方式</div>
        <div class="applayjoinright">
          <input type="text" placeholder="请输入联系方式" v-model="mobile" />
        </div>
      </div>
      <!-- v-for="(item,index) in question" :key="index" -->
      <!-- {{item.value}} -->
      <div class="applayjoinitem">
        <div class="applayjoinleft">留言</div>
        <div class="question">
          <textarea
            :data-index="index"
            id
            cols="30"
            rows="10"
            placeholder="请输入留言"
            @input="enterword"
          ></textarea>
        </div>
      </div>
    </div>

    <div class="suciabot">
      <div class="sucaibtn" @click="sub">提交申请</div>
    </div>
  </div>
</template>

<script>
import { Toast } from 'vant'
export default {
  data() {
    return {
      question: [],
      answer: [],
      name: '',
      mobile: '',
      answertext: ''
    }
  },

  created() {
    document.title = '唐元集'
    this.getquestion()
  },
  methods: {
    back() {
      this.$router.go(-1)
    },
    getquestion() {
      let that = this;
      var url = "/api/user/join_question";
      let param = {

      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          that.question = res.data.question

        })
        .catch(function (err) {
          console.log(err);
        });
    },
    enterword(e) {
      console.log(e)
      // let index = e.target.dataset.index;
      // console.log(index)
      // let obj = {};
      // obj.question = this.question[index].value;
      // obj.answer = e.target.value;
      // this.answer[index] = obj;
      // console.log(this.answer)
      this.answertext = e.target.value;

    },
    sub() {
      let that = this;
      if (that.name == '') {
        Toast('请输入姓名')
        return false
      }
      if (this.mobile == '') {
        Toast('请输入联系方式')
        return false
      }
      if (!(/^1[3456789]\d{9}$/.test(that.mobile))) {
        Toast("请输入正确的手机号")
        return false;
      }
      if (that.answertext == '') {
        Toast('填写留言')
        return false
      }
      var url = "/api/user/join";
      let param = {
        name: this.name,
        mobile: that.mobile,
        data: that.answertext
      };

      that.$axios
        .post(url, param)
        .then(function (res) {
          console.log(res);
          Toast('提交成功')
          that.$router.push({
            path: '/usercenter'
          })

        })
        .catch(function (err) {
          console.log(err);
        });
    }
  }

}
</script>


<style scoped>
@import "../../../style/usercenter.css";
</style>