<template>
  <sail-page type="loading-view" title="申请入住" isHead>
    <div slot="content">
        <div class="details-occupancy" >
           <div class="occupancy-wrap_img">
              <img src="@/assets/img/bannerImg/apply_pic_banner@3x.jpg" class="occupancy_img" alt="">
           </div>
           <div class="occupancy_content">
             <div class="occupancy-about_status">
               申请条件
             </div>
             <div class="occupancy-content_main">
               个人申请租住，必须同时符合以下条件：
             </div>
             <div class="occupancy_circle">
               <svg class="icon nav-icon" aria-hidden="true">
                 <use xlink:href="#icon-yuan"/>
               </svg>
               <span class="circlr-words">具有全日制大学专科以上学历、年龄在35岁以下；</span>
             </div>
             <div class="occupancy_circle">
               <svg class="icon nav-icon" aria-hidden="true">
                 <use xlink:href="#icon-yuan"/>
               </svg>
               <span class="circlr-words">在《贵阳市产业发展指导目录》“鼓励类”产业的民营企业就业；</span>
             </div>
             <div class="occupancy_circle">
               <svg class="icon nav-icon" aria-hidden="true">
                 <use xlink:href="#icon-yuan"/>
               </svg>
               <span class="circlr-words">或在贵阳市行政机关、事业单位、国有企业工作、或在贵阳市自主创业；</span>
             </div>
             <div class="occupancy_circle">
               <svg class="icon nav-icon" aria-hidden="true">
                 <use xlink:href="#icon-yuan"/>
               </svg>
               <span class="circlr-words">本地居住的申请人配偶及未达法定婚龄子女原则上应当作为共同申请家庭成员</span>
             </div>
             <div @click="callCustomerService">
               <p class="service-border service-border_telephone">
                 <span>
                   <svg class="icon nav-icon" aria-hidden="true">
                     <use xlink:href="#icon-dianhua"/>
                   </svg>
                 </span>
                 <span>电话咨询</span>
               </p>
             </div>
             <div class="occupancy-about_status">
               申请资料
             </div>
             <div class="occupancy_circle">
               <svg class="icon nav-icon" aria-hidden="true">
                 <use xlink:href="#icon-yuan"/>
               </svg>
               <span class="circlr-words">贵阳市青年人才申请表</span>
             </div>
             <div class="occupancy_circle">
               <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-yuan"/>
              </svg>
              <span class="circlr-words">申请人身份证正反面</span>
             </div>
             <div class="occupancy_circle">
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-yuan"/>
              </svg>
               <span class="circlr-words">毕业证书</span>
             </div>
             <div class="occupancy_circle">
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-yuan"/>
              </svg>
               <span class="circlr-words">学信网教育部学历证书电子注册备案表</span>
             </div>
             <div class="occupancy_circle">
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-yuan"/>
              </svg>
               <span class="circlr-words">彩色近照</span>
             </div>
             <div class="occupancy_circle">
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-yuan"/>
              </svg>
               <span class="circlr-words">就业证明（自主创业的需提供工商注册登记证明或创业项目证明）</span>
             </div>
             <div class="occupancy_circle">
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-yuan"/>
              </svg>
               <span class="circlr-words">婚姻状况资料</span>
             </div>
             <div class="occupancy-theme">
               单身人员：<br>离婚证明（即未再婚人员）<br>
               已婚人员：<br>结婚证<br>配偶身份证正反面
             </div>
             <div class="occupancy_circle">
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-yuan"/>
              </svg>
               <span class="circlr-words">其他资料</span>
             </div>
             <div class="occupancy-theme">
               申请人及共同申请成员具有贵阳市中心城区户籍的需提供户口簿；<br>
               贵阳市非城镇户籍需提供户籍所辖乡、镇人民政府出具的无住房和无享受住房保障证明；<br>
               集体户口无法提供户口簿需提供集体户籍所在地或单位出具的证明。
             </div>          
             <div class="occupancy-about_status">
               申请流程 
             </div>
             <div class="occupancy-content_main">
              提交申请资料
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou1-copy"/>
              </svg>
              审核贵阳市有无房产
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou1-copy"/>
              </svg>
              审核有无申请过保障房
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou1-copy"/>
              </svg>
              验房，确定房间及配件
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou1-copy"/>
              </svg>
              签订租赁合同及相关资料
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou1-copy"/>
              </svg>
              租金缴纳
              <svg class="icon nav-icon" aria-hidden="true">
                <use xlink:href="#icon-jiantou1-copy"/>
              </svg>
              交房入住
             </div>
             <div class="occupancy-about_status">
               其他
             </div>
             <div class="occupancy-content_main">
               <p>禁止饲养宠物；</p>
               <p>禁止一切经营性行为；</p>
               <p>禁止黄、赌、毒等违法行为；</p>
               <p>禁止改造房屋结构及私搭线路；</p>
               <p>禁止转租；</p>
               <p>禁止高空抛物。</p>
             </div>            
           </div>
          <van-button size="large" class="submit-btn apply_status" @click="submit">立即申请</van-button>
        </div>
    </div>
  </sail-page>
</template>

<script>
import { Dialog } from "vant";
import sailPage from "@/components/sail-page.vue";
export default {
  components: {
    sailPage
  },
  data: function(){
    return {
      telephone:"",
    }; 
  },
  mounted() {
    this.$store.dispatch("selectServiceTel").then(res=>{
         
      this.telephone = res.data.data.phone;
    });
  },
  methods: {
    submit() {
      this.$router.push({path: "/applyCheckIn"});
    },
    callCustomerService() {
      let me = this;
      Dialog.confirm({
        title: "提示",
        message: "你确认拨打"+ me.telephone,
        closeOnClickOverlay:true,
        confirmButtonText: "致电"
      }).then(() => {
        // on confirm
        window.location.href = "tel:"+ me.telephone;
      }).catch(() => {
        // on cancel
      });
    }
  }

};
</script>
<style lang="less">
  
</style>
<style lang="less" scoped>
 .details-occupancy {
    height: 89vh;
    overflow: auto;
 }
 /*.submit-btn {
    position: fixed;
    left: 15px;
    bottom: 0;
 }*/
  /*.apply_status {
    margin-top: 10px;
    position: relative;
  }*/
  .occupancy-wrap_img {
    width: 375px;
    height: 157px;
    .occupancy_img {
      width: 375px;
    }
  }
  .service-border {
    width: 114px;
    height: 25px;
    color:  #E58E45;
    margin: 0 auto;
    margin-top: 15px;
    border-radius: 25px;
    border: 1px solid #E58E45;
  }
  .occupancy-about_status {
    font-size: 15px;
    color: #222222;
    margin: 15px;
  }
  .occupancy_content {
    margin: 15px 10px;
  }
  .occupancy-content_main {
    color: #999999;
    font-size: 12px;
    text-align: left;
    margin: 20px 0 0 20px;
  }
  .occupancy-theme {
    font-size: 12px;
    color: #999999;
    text-align: left;
    margin-left: 30px;
  }
  .occupancy_circle {
    font-size: 12px;
    line-height: 24px;
    text-align: left;
    overflow: hidden;
    display: flex;
    .nav-icon {
      color: #E58E45;
      height: 8px;
      margin-top: 8px;
    }
    .circlr-words {
      width: 350px;
      margin-left: 10px;
      color: #999999;
    }
  }
</style>