<template>
  <h-view v-if="showFlag" id="add-person">
    <h-header :proportion="[1,4,1]" class="bar-custom">
      <span slot="center" style="color:#fff">添加担保人</span>
      <span slot="right" style="color:#fff" @click="showFlag=false">取消</span>
    </h-header>
    <div class="search has-header">
      <input v-model="keyWord" placeholder="请输入担保人名称/证件号码" >
    </div>
    <scroll ref="scroll" :updateData="[undertakeList]" :pullUp="true" @pullingUp="loadMore">
      <list-item :item-height="68" class="item">
        <item v-for="(item,index) in undertakeList" :key="index" @click.native="addUndertake(item)">
          <img slot="left-icon" src="@/assets/contractCreate/name.png" class="left-icon" >
          <div slot="name">
            担保人名称
            <br >证件号
          </div>
          <div slot="content">
            <input v-model="item.bp_guta_name" placeholder="暂无信息" readonly >
            <input v-model="item.id_card_no" placeholder="暂无信息" readonly >
          </div>
        </item>
      </list-item>
    </scroll>
  </h-view>
</template>
<script>
export default {
  props: {
    bp_agent_id: {
      type: String,
      default: '',
    },
  },
  data () {
    return {
      undertakeList: [], // 担保人列表
      selectUdertake: {},
      pagenum: 1,
      keyWord: '',
      showFlag: false,
    }
  },
  watch: {

  },
  methods: {
    show () {
      this.showFlag = true
    },
    init () {
      this.undertakeList = []
      this.selectUdertake = []
      this.pagenum = 1
      this.keyWord = ''
    },
    unshow () {
      this.showFlag = false
    },
    loadMore () {
      if (this.keyWord) {
        this.searchUndertake()
      } else {
        this.getUndertake()
      }
    },
    searchUndertake () {
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url =
        process.env.basePath +
        'prj_bp_guta_query' +
        '&index' +
        `'${randomString}'`
      let param = {
        bp_agent_id: vm.bp_agent_id,
        pagesize: 10,
        pagenum: vm.pageNumSearch,
        searchInput: vm.keyWord,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.undertakeList = returnData
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.undertakeList = returnData
            })
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.undertakeList.push(array[index])
            })
            vm.pageNumSearch++
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
    addUndertake (e) {
      this.selectUdertake = e
      this.$emit('addUnder', this.selectUdertake)
      setTimeout(() => {
        this.showFlag = false
      }, 100)
    },
    getUndertake () { // 担保人查询
      let vm = this
      let randomString = Math.floor(Math.random() * 21)
      let url =
        process.env.basePath +
        'prj_bp_guta_query' +
        '&index' +
        `'${randomString}'`
      let param = {
        bp_agent_id: vm.bp_agent_id,
        pagesize: 10,
        pagenum: vm.pageNum,
        searchInput: vm.keyWord,
      }
      hlsPopup.showLoading('请稍候')
      vm.$post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          let returnData = []
          returnData = res.lists
          if (returnData.length === 0) {
            vm.$refs.scroll.update(true)
          } else if (returnData.length > 0 && returnData.length < 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.undertakeList.push(array[index])
            })
            vm.pagenum++
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.undertakeList.push(array[index])
            })
            vm.pagenum++
            vm.$refs.scroll.update(false)
          }
        } else {
          hlsPopup.showLongCenter(res.message)
        }
      })
    },
  },
}
</script>
<style lang="less">
#add-person {
  position: absolute;
  top:0;
  z-index:999;
  .item {
    width: 359px;
    margin: 0 auto;
  }
  .search {
    background-color: #fff;
    padding: 8px 12px;
    width: 100%;
    height: 1.02rem;
    z-index: 100;
    input {
      background: url("../../assets/contractStart/search1.png") 320px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
      padding-left: 12px;
      height: 36px;
      line-height: 36px;
      border-radius: 4px;
      width: 100%;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #888c8f;
    }

    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;
    }
  }
   .content {
    position: absolute;
    top: 0;
  }
   .scrollContent {
       padding-top: 1rem;
    padding-bottom: 120px;
  }
  .tab-style {
    width: 100%;
    position: absolute;
  }
}
.platform-ios {
  #confirmList {
    .scrollContent {
      padding-top: 1.4rem;
    }
  }
}
@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #person {
      .scrollContent {
        padding-top: 1.8rem;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #person {
      .scrollContent {
        padding-top: 1.8rem;
      }
      .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>