<!--
 * @Author: your name
 * @Date: 2019-12-18 20:15:42
 * @LastEditTime: 2019-12-19 15:54:45
 * @LastEditors: Please set LastEditors
 * @Description: In User Settings Edit
 * @FilePath: \hls-xcmg-vue-app\src\pages\contractCreate\pick-lessee.vue
 -->
<template>
  <h-view id="picker">
    <h-header :proportion="[5,1,1]" class="bar-custom">
      <div slot="left" class="h-header-btn">
        <img src="@/assets/userBind/arrow.png" @click="$routeGo()">
        <span>选择承租人</span>
      </div>
    </h-header>
    <!-- 搜索 -->
    <div class="search">
      <input type="text" placeholder="请输入承租人名称/证件号码">
    </div>
    <scroll
      ref="scroll"
    >
      <div class="wrap">
        <div v-for="(item,index) in showLists" :key="index" class="contract-lists" >
          <!-- <div class="pro-code" @click="goDetails(item)">
            <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
            <p>
              <span>合同号</span>
              <span>{{ item.project_number }}</span>
            </p>
          </div> -->
          <div class="box">
            <img src="@/assets/distributorSign/fileIcon.png" alt="" class="file-icon">
            <div><p>承租人名称</p><p>{{ '张三' }}</p></div>
            <div><p>证件号</p><p>{{ '152104199108211334' }}</p></div>
          </div>
        </div>
      </div>
    </scroll>
    <bottom-tab>
      <tab-button class="footer">
        确认创建
      </tab-button>
    </bottom-tab>
  </h-view>
</template>

<script>
export default {
  name: '',
  data () {
    return {
      showLists: [
        { project_number: '201903022001', bp_name: 'zhangsan', total_price: '1000000', confirm_start_date: '2019-12-18' },
        { project_number: '201903022001', bp_name: 'zhangsan', total_price: '1000000', confirm_start_date: '2019-12-18' },
        { project_number: '201903022001', bp_name: 'zhangsan', total_price: '1000000', confirm_start_date: '2019-12-18' },
      ],
    }
  },
  computed: {},
  watch: {},
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.lesseeQuery()
    })
  },
  methods: {
    // 承租人查询
    lesseeQuery () {
      let vm = this
      let url = process.env.basePath + 'prj_bp_master_query'
      let param = { }
      vm.hlsPopup.showLoading('请稍候')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        console.log('承租人', res)
        if (res.result === 'S') {
          // vm.certification_status = res.info.certification_status
        }
      })
    },
  },
}
</script>
<style lang='less'>
#picker {
    .search {
      background-color: #fff;
      padding: 8px 12px;
      position: absolute;
      width: 100%;
      z-index: 100;
      margin-bottom: 8px;
      input {
        padding-left: 12px;
        border-radius: 4px;
        height: 36px;
        width: 100%;
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        line-height: 36px;
        background: url("../../assets/contractStart/search1.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
      }

      input::placeholder {
        font-family: PingFangSC-Regular;
        font-size: 14px;
        color: #888C8F;
        letter-spacing: 0;
      }
      input:focus {
        background: url("../../assets/contractStart/search2.png") 320px no-repeat;
        background-size: 16px 16px;
        background-color: rgba(239, 239, 239, 0.55);
        border: 2px solid #bcc6ff;
      }
    }
    .wrap {
      width: 100%;
      padding: 8px;
      .contract-lists {
        width: 100%;
        background: #fff;
        margin-bottom: 8px;
        border-radius: 2px;
        position: relative;
        .box {
          height: 68px;
          margin-left: 50px;
          margin-right: 19px;
          .file-icon {
            width: 30px;
            height: 30px;
            position: absolute;
            left: 10px;
            top: 8px;
          }
          div {
            width: 100%;
            height: 32px;
            position: relative;
            p {
              height: 32px;
              line-height: 32px;
              position: absolute;
              font-family: PingFangSC-Regular;
              font-size: 14px;
              letter-spacing: 0;
            }
            p:nth-of-type(1){
              left: 0;
              color: rgba(75,74,75,0.60);
            }
            p:nth-of-type(2){
              right: 0;
              color: #4B4A4B;
            }
          }
        }
      }
    }
    .bottom-tab-button{
    background: @headerColor;
    border-radius: 4px;
    color:white;
    height: 40px;
    margin: 4px 2% 0 2%;
  }
    .content{
      position: absolute;
      top:0;
    }
    .scrollContent{
     padding-top: 1.92rem;
      padding-bottom: 20px;
    }
}
  .platform-ios {
    #picker {
      .scrollContent {
        padding-top: 2.32rem;
      }
    }
  }
  // iPhoneX适配
  @media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
    .platform-ios {
      #picker {
        .scrollContent {
          padding-top: 2.72rem;
        }
      }
    }
  }
  // iPhoneXR适配
  @media (device-width: 414px) and (device-height: 896px) {
    .platform-ios {
      #picker {
        .scrollContent {
          padding-top: 2.72rem;
        }
        .search {
        input {
          background: url("../../assets/contractStart/search1.png") 320px
            no-repeat;
          background-size: 16px 16px;
          background-color: rgba(239, 239, 239, 0.55);
          padding: 8px 12px;
          border-radius: 4px;
          width: 100%;
          font-family: PingFangSC-Regular;
          font-size: 14px;
          color: #888c8f;
        }
      }
      }
    }
  }
</style>