<template>
  <div>
    <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">入股申请</span>
    </div>
    <!--入股详情页-->
    <!--我要参与-->
    <div class="shoppings main-container"  v-if="optionName=='detail'">
      <div class="first" >
        <h3>{{companyName}}</h3>
       <div class="pad10 tips">
         <p>参与须知：</p>
         <p>本次提交为意向参与，后续会有专门的工作人员联系您，最终的入股申请参与成功，需要线下确认。</p>
       </div>
        <el-form :model="form" :rules="rules" ref="form" label-width="100px">
          <el-input v-model="form.companyId" hidden></el-input>
          <el-form-item label="姓名" prop="name">
            <el-input v-model="form.name" placeholder="请输入姓名"></el-input>
          </el-form-item>
          <el-form-item label="联系电话" prop="tel">
            <el-input v-model="form.tel" placeholder="请输入联系电话"></el-input>
          </el-form-item>
          <el-form-item label="数量" prop="count">
            <el-input v-model="form.count" placeholder="请输入份额"></el-input>
          </el-form-item>
        </el-form>
        <ruby class="ruby" v-if="msg">{{msg}}</ruby>
        <div class="flex-jcc-aic bottom-button">
          <el-button @click="submit('form')">提 交</el-button>
        </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>
  .pad10{
    padding: 10px;
  }
  .tips p{
    color: #999;
    font-size: 14px;
  }

  .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-bottom: 10px;
  }
  .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 {
        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 = "请选择待申请的入股项目！"
        }
        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;
            }
          }
        };
        //提交
        const set = this.$refs;
        set[formName].validate(valid => {
          checkPhone(that.form.tel);
          checkCount(that.form.count);
          if (valid && 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>
