<template>
    <div class="fullpage-container">
      <section-view :css-style="{'background-color':'#000'}" v-lazy:background-image="assetsUri('images/ContactUs/ContactUs_banner.png')" class="contactUs-section-view">
        <div class="contactUs-div wow fadeInUp">
          <img v-lazy="assetsUri('images/ContactUs/ContactUs_c.png')" alt="">
          <h2 class="contactUs-div-t">Contact Us</h2>
        </div>
      </section-view>
      <section-view :css-style="{'background-color':'#fff'}">
          <div  class="contactUs-Why-conten wow fadeInUpBig"  data-wow-delay=".8s"  >
            <h1 >Why Partner with us?</h1><p >The original intention of LightLimX  is "Create miracles and lead the future together with entrepreneurs". We are investors and entrepreneurs,full of passion, active exploration and persistence in entrepreneurship.Such spirit makes LightLimX and investees the most solid partners. Such core value is also reflected in the value we live by.</p>
          </div>
          <div class="contactUs-Why-brie wow fadeInUpBig" data-wow-delay=".8s" >
            <p  >Please contact us if you have an innovative idea.</p>
            <p >We are willing to turn your dream into real business with our support.</p>
          </div>
          <div class="situation-h1 wow fadeInUpBig">Email:info@lightlimx.com</div>


          <div class="LP-login-input-conten ">
              <div class="LP-login-input wow fadeInUpBig"  data-wow-delay=".3s" >
                      <p>Name<span style="color:#F49F00">*</span></p>
                  <input class="inputClass" v-model="from.name"  type="text" name="" id="">
              </div>
              <div class="LP-login-input wow fadeInUpBig"  data-wow-delay=".3s">
                      <p class="Password">mail<span style="color:#F49F00">*</span></p>
                  <input v-model="from.email" class="password-font inputClass"  name="" id="">
              </div>
              <div class="LP-login-input wow fadeInUpBig"  data-wow-delay=".3s">
                      <p class="Password">Organization<span style="color:#F49F00">*</span></p>
                  <input v-model="from.company"  class="password-font inputClass"  name="" id="">
              </div>

              <div class="LP-login-input wow fadeInUpBig"  data-wow-delay=".3s">
                    <p class="Password">Project<span style="color:#F49F00">*</span></p>
                    <public-select @select="handleSelect" class="password-font inputClass" :select.sync="from.project_id" :options="staticData">
                      <div class="svg-icon-wrap" style="padding-right: .35rem">
                        <svg-icon icon-class="cuarr"></svg-icon>
                      </div>
                    </public-select>
              </div>
              <div class="LP-login-input wow fadeInUpBig"  data-wow-delay=".3s">
                <p class="Password">More informationt<span style="color:#F49F00">*</span></p>
                <div class="input-btn-conten">
                  <van-field
                    v-model="from.information"
                    class="input-btn-conten-textarea"
                    rows="1"
                    autosize
                    label=""
                    type="textarea"
                    placeholder=""
                  />
                  <div class="input-btn-conten-box">
                  <img  v-lazy="assetsUri('images/ContactUs/file.png')" alt="">
                    <van-uploader :after-read="onRead" :accept="'.pdf'">
                        <span class="btnx_hover">{{file_name}}</span>
                    </van-uploader>
                  </div>
                </div>
              </div>
          </div>
          <div class="LP-login-input-btnFile  wow fadeInUp"  data-wow-delay=".3s">
            <span @click="contactUsBtn">Submit</span>
          </div>
      </section-view>
    </div>
</template>
<script>
  import animateMixin from '../../utils/animateMixin'
  import SectionView from "../../components/SectionView/index";
  import {assetsUri} from '~/utils/index.js'
  import PublicSelect from "../../components/PublicSelect/index";
  export default {
  name: 'IndexPage',
  layout:'index',
    mixins:[animateMixin],
  components:{
    PublicSelect,
  SectionView
  },
  head() {
    return {
      title: this.title,
      meta: [
        {
          hid: 'description',
          name: 'description',
          content: 'My custom description'
        }
      ]
    }
  },
  async asyncData(data) {
    const { params, $http }=data;
    // const post = await $http.$get(`https://api.nuxtjs.dev/posts/${params.id}`)
    return { post:'121' }
  },
  data() {
    return {
      staticData:[],
      from:{
        name:'',
        email:'',
        company:'',
        project_id:'',
        logo:'',
        information:''
      },
      file_name:'Attachment Files(.PDF)',
      assetsUri,
      title:'LightLimX-Contract Us',
      opts: {

      }
    }
  },
  created(){
    this.handleLists()
  },
  methods:{
    handleSelect(item){
      this.from.project_id=item.id
    },
    async handleLists(){
      const {baseURL}=this.$config;
      const res= await this.$axios(baseURL+'/projectType/index?page=1&size=100')
      if(res.status!==200){
        return this.$toast(res.data.msg)
      }
      const {content,totalElements}=res.data
      this.staticData=content.map((item)=>{return  {...item,id:item.id.toString()}});
    },
    // 文件提交
    contactUsBtn(){
      if(this.from.name == ''){
        return this.$toast('Please enter name');
      }
      if(this.from.email == ''){
        return this.$toast('Please enter mail');
      }
      if(this.from.company == ''){
        return this.$toast('Please enter Organization');
      }
      if(this.from.project_id == ''){
        return this.$toast('Please select Project');
      }
      if(this.from.information==''){
        return this.$toast('Please enter More informationt text');
      }
      if(this.from.logo == ''){
        return this.$toast('Please enter More informationt');
      }
      const {baseURL}=this.$config;
      console.log('this.form',this.from)
      this.$axios.post(baseURL+'/contact/save', this.from, {headers: {
        'Content-Type': 'application/json'
      }}).then(res => {
          this.$toast('Submitted successfully');
          setTimeout(() => {
            this.$router.push('/contact/one')
          }, 500);
      }).catch(err => {
        alert(err)
      })
    },
    // 返回布尔值
    onRead(file) {
      const {baseURL}=this.$config;
      let fd = new FormData()
      fd.append('file', file.file)
      this.$axios.post(baseURL+'/uploads/store', fd, {headers: {
        'Content-Type': 'multipart/form-data'
      }}).then(res => {
        this.file_name = res.data.data.name;
        this.from.logo= res.data.data.image.uri;
      }).catch(err => {
        alert(err)
      })
    },

  },
}
</script>

<style  scoped lang="less">
.contactUs-section-view{
    background-position: center bottom;
    background-size: 100% 100%;
    background-repeat: no-repeat;
    margin-top: 0.95rem;
    min-height:6.25rem !important;
    .contactUs-div{
      display: flex;
      justify-content: center;
      align-items: center;
      padding-top: 1.6rem;
    img{
      display: block;
      width: 15%;
    }
    .contactUs-div-t{
      font-size: 0.72rem;
      font-family: Manrope;
      font-weight: bold;
      color: #FFFFFF;
      opacity: 1;
    }
}
}
.contactUs-Why-conten{
  padding-top: 1.5rem;
  h1{
    font-size: 0.48rem;
    font-family: Manrope;
    font-weight: bold;
    color: #302D2C;
    text-align: center;
    margin-bottom: 0.7rem;
  }
  p{
    font-size: 0.2rem;
    font-family: Manrope;
    font-weight: 400;
    color: #302D2C;
    text-align: center;
    line-height: 0.4rem;
  }
}
.contactUs-Why-brie{
  margin-top: 1rem;
  p{
    text-align: center;
    font-size: 0.2rem;
    font-family: Manrope;
    font-weight: bold;
    line-height: 0.4rem;
    color: #302D2C;
  }
}
.situation-h1{
    margin-top: 1.5rem;
    font-size: 0.62rem;
    font-family: Manrope;
    font-weight: bold;
    color: #302D2C;
    cursor: pointer;
    text-align: center;
}
.situation-h1:hover{
  /*text-shadow: 0 0 5px #FF0000, 0 0 5px #6bf403;*/
  text-stroke:1px #F49F00;
  -webkit-text-stroke:1px #F49F00;
  color: #Fff;
}
.LP-login-input-conten{
            display: flex;
            flex-direction: column;
            width: 100%;
            margin-top: 2rem;
        .LP-login-input{
            margin: 0 auto;
        .inputClass{
            padding-left: 0.2rem;
            font-size: 0.2rem;
            font-family: Manrope;
            font-weight: 400;
            width: 8.8rem;
            height: 0.58rem;
            display: block;
            background: #FFFFFF;
            border: 1px solid #9B9B9B;
            opacity: 1;
            border-radius: 0.1rem;
            margin-top: 0.15rem;
        }
        select{
              outline: none;
              padding: 0 .2rem;
              appearance:none;
              -moz-appearance:none;
              -webkit-appearance:none;
              font-size: 0.2rem;
              font-family: Manrope;
              font-weight: 400;
              height: 0.58rem;
              width: 9rem;
              margin-top: 0.15rem;
              border-radius: 0.1rem;
              border: solid 1px #9B9B9B;
              background: url("~/static/images/ContactUs/arrow.png") no-repeat  95% center !important;
        }










        select::-ms-expand { display: none; }
        select:focus{
            border: 1px solid #F49F00;
            box-shadow: 0px 3px 6px rgba(244, 159, 0, 0.12);
        }
        .password-font{
            // font-family: none;
        }
        input:focus {
            border: 1px solid #F49F00;
            box-shadow: 0px 3px 6px rgba(244, 159, 0, 0.12);
        }
        p{
            font-size: 0.16rem;
            font-family: Manrope;
            font-weight: 400;
            color: #302D2C;
            opacity: 1;
        }
        .Password{
            margin-top: 0.35rem;
        }
        }
}
.input-btn-conten{
  margin-top: 0.15rem;
  width: 9rem;
  min-height: 1.94rem;
  border: 1px solid #9B9B9B;
  border-radius: 0.1rem;
  display: flex;
  position: relative;
  &-textarea{
    padding:.2rem .2rem 1rem;
    background-color: transparent;
    font-size: 0.2rem;
    font-family: Manrope;
    font-weight: 400;
    &:after{
      border-bottom: 0;
    }
  }
  .input-btn-conten-box{
    display: flex;
    align-items: center;
    margin-bottom: 0.2rem;
    position: absolute;
    left: 0;
    bottom: 0;
  img{
    margin-left: 0.25rem;
    width: 10%;
  }
  span{
    font-size: 0.2rem;
    font-family: Manrope;
    font-weight: 400;
    color: #302D2C;
    opacity: 1;
    cursor: pointer;
    margin-left: 0.15rem;
  }

  }

}

.LP-login-input-btnFile{
  margin-top: 1.2rem;
  padding-bottom: 2.2rem;
  span{
    margin: 0 auto;
    cursor: pointer;
    display: block;
    width: 3.5rem;
    height: .6rem;
    background: #F49F00;
    border-radius: .1rem;
    text-align: center;
    line-height: .6rem;
    font-size: .24rem;
    font-family: Manrope;
    font-weight: bold;
    color: #302D2C;
  }
}


@media screen and (max-width: 768px){
    .contactUs-section-view{
      margin-top: 0.5rem;
      background-image: url('~/static/images/ContactUs/ContactUs_banner_h5.jpg') !important;
    }
    .contactUs-section-view .contactUs-div img{
      width: 28%;
    }
    .contactUs-Why-conten{
      padding: 0 0.3rem;
      padding-top: 0.5rem;
    }
    .contactUs-Why-conten h1{
      font-size: 0.6rem;
    }
    .contactUs-Why-conten p{
      font-size: 0.24rem;
      font-family: Manrope;
      font-weight: 400;
      line-height: 0.35rem;
      color: #302D2C;
      opacity: 1;
    }
    .contactUs-Why-brie{
      padding: 0 0.3rem;
    }
    .contactUs-Why-brie p{
      font-size: 0.3rem;
      font-family: Manrope;
      font-weight: bold;
      line-height: 0.4rem;
      color: #302D2C;
      opacity: 1;
    }
    .situation-h1{
      font-size: 0.52rem;
    }
    .LP-login-input-conten .LP-login-input{
      width: 85%;
    }
    .LP-login-input-conten .LP-login-input .inputClass{
      width: 100%;
      height: 0.8rem;
    }

    .LP-login-input-conten{
      margin-top: 1rem;
  }
.LP-login-input-conten .LP-login-input p{
font-size: 0.3rem;
font-family: Manrope;
font-weight: 400;
}
.input-btn-conten{
  width: 100%;
      padding-right: 0.2rem;
}
.LP-login-input-btnFile{
  margin-top: 1rem;
  padding-bottom: 1rem;
}
.input-btn-conten .input-btn-conten-box span{
  font-size: 0.22rem;
}
.LP-login-input-btnFile span{

    width: 70%;
    height: 0.96rem;

    line-height: 0.96rem;
    font-size: 0.38rem;

}
select{
  height: 0.96rem !important;
  width: 104% !important;
}

.LP-login-input-conten .LP-login-input input{
  font-size: 0.24rem;
}
.LP-login-input-conten .LP-login-input select{
  font-size: 0.24rem;
}
}

</style>
<style lang="less">
  .van-uploader:hover span.btnx_hover{
    color: #F49F00;
    text-decoration: underline;
    font-size: .2rem;
    font-family: Manrope;
    font-weight: 400;
    color: #F49F00;
  }
</style>
