<template>
  <div style="background:#F8F8F8;height: calc(100vh)">
    <div class="header-css">
      <!--@click="$router.push({name:'mypoints'})"-->
      <img @click="goBack()" src="data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAABIAAAAfCAYAAADqUJ2JAAAAGXRFWHRTb2Z0d2FyZQBBZG9iZSBJbWFnZVJlYWR5ccllPAAAAyZpVFh0WE1MOmNvbS5hZG9iZS54bXAAAAAAADw/eHBhY2tldCBiZWdpbj0i77u/IiBpZD0iVzVNME1wQ2VoaUh6cmVTek5UY3prYzlkIj8+IDx4OnhtcG1ldGEgeG1sbnM6eD0iYWRvYmU6bnM6bWV0YS8iIHg6eG1wdGs9IkFkb2JlIFhNUCBDb3JlIDUuNi1jMTM4IDc5LjE1OTgyNCwgMjAxNi8wOS8xNC0wMTowOTowMSAgICAgICAgIj4gPHJkZjpSREYgeG1sbnM6cmRmPSJodHRwOi8vd3d3LnczLm9yZy8xOTk5LzAyLzIyLXJkZi1zeW50YXgtbnMjIj4gPHJkZjpEZXNjcmlwdGlvbiByZGY6YWJvdXQ9IiIgeG1sbnM6eG1wPSJodHRwOi8vbnMuYWRvYmUuY29tL3hhcC8xLjAvIiB4bWxuczp4bXBNTT0iaHR0cDovL25zLmFkb2JlLmNvbS94YXAvMS4wL21tLyIgeG1sbnM6c3RSZWY9Imh0dHA6Ly9ucy5hZG9iZS5jb20veGFwLzEuMC9zVHlwZS9SZXNvdXJjZVJlZiMiIHhtcDpDcmVhdG9yVG9vbD0iQWRvYmUgUGhvdG9zaG9wIENDIDIwMTcgKFdpbmRvd3MpIiB4bXBNTTpJbnN0YW5jZUlEPSJ4bXAuaWlkOjU0OTNGQTA2QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4IiB4bXBNTTpEb2N1bWVudElEPSJ4bXAuZGlkOjU0OTNGQTA3QTEwNTExRTg4M0E3OUI4RkYwRDg3RUU4Ij4gPHhtcE1NOkRlcml2ZWRGcm9tIHN0UmVmOmluc3RhbmNlSUQ9InhtcC5paWQ6NTQ5M0ZBMDRBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiIHN0UmVmOmRvY3VtZW50SUQ9InhtcC5kaWQ6NTQ5M0ZBMDVBMTA1MTFFODgzQTc5QjhGRjBEODdFRTgiLz4gPC9yZGY6RGVzY3JpcHRpb24+IDwvcmRmOlJERj4gPC94OnhtcG1ldGE+IDw/eHBhY2tldCBlbmQ9InIiPz4bKBAsAAAAzklEQVR42qzWWQrCMBDG8VzCtVb01ZuIFJUq4nU8l+AlXEsFXz2CC+iXB2EYgjBL4P/6o4Qk0xD0q4G2aBSMyB590F2LNQkSe6OFFGmhA0PWUqSNjgxZWZEXWkqRDjpZkS46E+Sp2diIXAjyQKUUyRLIXIr0UMWQmQapGTKVInkCKaTIAF0ZMtEgN4aMNZdwR5DYRvskuH1RXEOPPfqtfgIrtFjucY5cTza9a5X1rv27uKUWc3mPXF9I+ma7YuYp4jrXXCet6+xP/o18BRgA2Nl6bmmSdvgAAAAASUVORK5CYII=" size="25" style="width: 15px; height: 20px; margin: 10px">
      <span class="header-title" style="margin: 0 auto;padding-right: 40px;">申请入股</span>
    </div>
    <!--入股详情页-->
    <div style="background:#F8F8F8;height:57px"></div>
    <!--我要参与-->
    <div class="shoppings main-container" v-if="optionName=='detail'">
      <div class="first" >
        <el-input v-model="form.companyId" hidden></el-input>
        <div class="inputBox">
          <div class="inputBoxLeft"><span style="color:red">*</span>姓名</div>
          <div class="inputBoxRight">
            <input type="text" placeholder="请输入您的姓名" v-model="form.name">
          </div>
        </div>
        <div class="inputBox">
          <div class="inputBoxLeft"><span style="color:red">*</span>联系电话</div>
          <div class="inputBoxRight">
            <input type="text" placeholder="请输入联系电话" v-model="form.tel">
          </div>
        </div>

        <div class="inputBox" style="margin-top:10px">
          <div class="inputBoxLeft"><span style="color:red">*</span>份额/股数</div>
          <div class="inputBoxRight">
            <input type="text" placeholder="请输入您的份额/股数" v-model="form.count">
          </div>
        </div>
        <ruby class="ruby" v-if="msg">{{msg}}</ruby>
        <div class="pad10 tips tipBox">
          <img src="../../../../static/images/tip.png" alt="" width="15">
          <div class="tipBoxRight">本次提交为意向参与，后续会有专门的工作人员联系您，最终的入股申请是否成功，需要线下确认。</div>
        </div>
        <div class="submitBox" @click="submit">立即申请</div>
      </div>
    </div>
    <!--参与结果页-->
    <div class="shoppings main-container flex-jcc-aic-cl" v-if="optionName=='crowdResult'">
      <img class="success-tip" v-if="img" src="../../../assets/images/success.png"/>
      <img class="success-tip" v-else="!img" src="../../../assets/images/error.png"/>
      <h5 v-if="img">感谢您的参与，后续会有专门的客服与您联系！</h5>
      <h5 v-if="!img">出错啦，请联系客服！</h5>
      <el-button @click="goBack()">返回股权入股申请页</el-button>
    </div>
  </div>
</template>

<style scoped>
  .inputBox{background: #fff;display: flex;display: flexbox;display: -webkit-box;padding: 13px 15px;}
  .inputBoxLeft{width: 80px;color: #333333;font-size: 14px}
  .inputBoxRight{flex: 1}
  .inputBoxRight input{border: none;color: #333333;font-size: 14px;width: 100%;vertical-align: -2px;-webkit-tap-highlight-color:rgba(255,255,255,0);outline:none;}
  .pad10{
    padding: 10px;
  }
  .tips p{
    color: #999;
    font-size: 14px;
  }
  .tipBox{display: flex;display: flexbox;display: -webkit-box;align-items: center}
  .tipBoxRight{flex:1;color: #666;font-size: 11px;margin-left: 10px}
  .submitBox{margin: 30px 15px 15px 15px;background-color: #C1A170;border-radius: 25px;height: 44px;line-height: 44px;color: #fff;font-size: 14px;text-align: center;}
  .o5{opacity: 0.5;}
  .success-tip{
    width: 100px;
    height:100px;
    margin: 30px;
    border-radius: 100px;
  }
  .bottom-button{
    padding: 10px;
  }
  .bottom-button button{
    padding: 10px 40px;
  }
  .ruby{
    display: block;
    color: red;
    font-size: 13px;
    padding: 10px 15px;
  }
  .el-form-item__label{
    text-align: left;
  }
  .el-form--inline .el-form-item__content{
    margin-bottom: 10px;
  }
  p{
    padding: 3px;
    margin: 0;
  }
</style>

<script>
  import {
    stockSearchPage,
    stockApply,
    page,
    addObj,
    getObj,
    delObj,
    putObj
  } from 'api/base_info/branch_company';

  import {mapGetters} from 'vuex';
  import ElForm from "../../../../node_modules/element-ui/packages/form/src/form.vue";
  import ElFormItem from "../../../../node_modules/element-ui/packages/form/src/form-item.vue";

  export default {
    components: {
      ElFormItem,
      ElForm},
    name: 'stockCrowdDetail',
    data() {
      return {
        noward:true,
        optionName:"detail",
        form: {
          name: undefined,
          tel: undefined,
          companyId: undefined,
          count: undefined
        },
        img : !0,
        companyName: "",//公司名称
        rules: {
          name: [
            {
              required: true,
              message: '请输名称',
              trigger: 'blur'
            }
          ],
          tel: [{
            required: true,
            message: '请输入正确的联系电话',
            trigger: 'blur'
          }],
          count: [{
            required: true,
            message: '请输入份额',
            trigger: 'blur'
          }]
        },
        msg:"",//提示语
        total: null,
        listLoading: true
      }
    },
    created() {
    },
    methods: {
      //返回按钮
      goBack(){
        this.$router.push({ path:'/stockCrowd' })
      },
      switchTab(target){
        this.optionName = target;
      },
      submit(formName){
        let that = this;
        that.msg = "";
        if(!that.form.companyId){
          that.msg = "请选择待申请的入股项目！"
          return false;
        }else if(!that.form.name){
          that.msg = "请输入姓名"
          return false;
        }else if(!that.form.tel){
          that.msg = "请输入手机号"
          return false;
        }else if(!that.form.count){
          that.msg = "请输入份额"
          return false;
        }
        var isPhone = false;
        var isNum = false;
        var checkCount = (value) => {
          if(!value){
            return;
          } else {
            if (!(/(^[1-9]\d*$)/.test(value))) {
              isNum = false;
              that.msg = "请输入大于0的整数";
              return;
            } else {
              isNum = true;
            }
          }
        }
        var checkPhone = (value) => {
          if (!value) {
            return;
          } else {
            const reg = /^1[3|4|5|6|7|8|9][0-9]\d{8}$/
            console.log(reg.test(value));
            if (reg.test(value)) {
              isPhone = true;
            } else {
              isPhone = false;
              that.msg = "请输入正确手机号";
              return;
            }
          }
        };
        //提交
        checkPhone(that.form.tel);
        checkCount(that.form.count);
        if (isNum && isPhone) {
          stockApply(this.form)
            .then(res => {
              that.optionName = "crowdResult";
            if(res.code==1){
              that.img = !0;
            } else {
              that.img = !1;
            }

          })
        } else {
          return false;
        }
      }
    },
    mounted() {
      let id = this.$route.query.id;
      this.form.companyId = this.$route.query.id;
      this.companyName = this.$route.query.name;
    },
  }
</script>
