/**
* @Author Sean
* @Date 2019/10/22
*/
<template>
  <h-view id="reimburse" class="public-style" style="height: 100%">
    <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 has-header">
      <input v-model="keyWords" type="text" placeholder="请输入还款金额" >
    </div>
    <scroll ref="scroll" :updateData="[showList]" :pullUp="true" @pullingUp="loadMore">
      <section class="reimburse-wrap">
        <list-item
          v-for="(list,index) in showList"
          :key="index"
          @click.native="godetail(list.order_id)"
        >
          <item>
            <img slot="left-icon" src="@/assets/reimburseMyself/reimburse.png" class="left-icon" >
            <div slot="name">还款金额</div>
            <div slot="content" class="money-font">{{ list.order_amount|currency }}</div>
          </item>
          <item>
            <div slot="left-icon" class="left-icon" />
            <div slot="name" class="time-font">还款时间</div>
            <div slot="content" class="time-font">{{ list.order_date }}</div>
          </item>
        </list-item>
      </section>
    </scroll>
    <div v-if="showList.length === 0">
      <div class="display">
        <img src="@/assets/messageCenter/noMsg.png" alt="">
      </div>
    </div>
  </h-view>
</template>

<script>
export default {
  data () {
    return {
      reimburseList: [],
      searchList: [],
      showList: [],
      keyWords: '',
      pagenum: 1,
      searchPagenum: 1,
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      // if (from.name === 'MyInfo') {
      vm.pagenum = 1
      vm.searchPagenum = 1
      vm.getList()
      // }
    })
  },
  watch: {
    keyWords (newVal, oldVal) {
      this.search()
    },
  },
  methods: {
    godetail (e) {
      this.$router.push({
        name: 'ReimburseDetail',
        params: {
          order_id: e,
        },
      })
    },
    loadMore () {
      if (this.keyWords) {
        this.searchMore()
      } else {
        this.getList()
      }
    },
    searchMore () {
      let vm = this
      let url = process.env.basePath + 'my_repayment_query'
      let param = {
        user_phone: window.localStorage.getItem('user_phone'),
        pagesize: 10,
        pagenum: vm.searchPagenum,
        searchInput: vm.keyWords,
      }
      vm.hlsPopup.showLoading('数据加载中，请稍候!')
      vm.hlsHttp.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.searchList.push(array[index])
            })
            vm.searchPagenum++
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.searchList.push(array[index])
            })
            vm.searchPagenum++
            vm.$refs.scroll.update(false)
          }
          vm.showList = vm.searchList
        }
      })
    },
    search () {
      let vm = this
      vm.searchPagenum = 2
      vm.$refs.scroll.scrollToTop()
      let randomString = Math.floor(Math.random() * 21)
      let url =
        process.env.basePath +
        'my_repayment_query' +
        '&index' +
        `'${randomString}'`
      let param = {
        user_phone: window.localStorage.getItem('user_phone'),
        searchInput: vm.keyWords,
        pagesize: 10,
        pagenum: 1,
      }
      vm.hlsPopup.showLoading('数据加载中，请稍候!')
      vm.hlsHttp.post(url, param).then(function (res) {
        vm.hlsPopup.hideLoading()
        if (res.result === 'S') {
          vm.searchList = res.lists
          vm.showList = res.lists
          vm.$refs.scroll.update(false)
        }
      })
    },
    getList () {
      let vm = this
      let url = process.env.basePath + 'my_repayment_query'
      let param = {
        user_phone: window.localStorage.getItem('user_phone'),
        pagesize: 10,
        pagenum: vm.pagenum,
      }
      vm.hlsPopup.showLoading('数据加载中，请稍候!')
      vm.hlsHttp.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.reimburseList.push(array[index])
            })
            vm.pagenum++
            vm.$refs.scroll.update(true)
          } else if (returnData.length === 10) {
            vum.forEach(returnData, function (data, index, array) {
              vm.reimburseList.push(array[index])
            })
            vm.pagenum++
            vm.$refs.scroll.update(false)
          }
          vm.showList = vm.reimburseList
        }
      })
    },
  },
}
</script>

<style lang="less" rel="stylesheet">
#reimburse {
  .display {
    position: fixed;
      width: 100%;
      height: 100%;
    // top: 0;
    img {
      width: 100%;
      height: 100%;
      // margin-top: -70px;
    }
  }
  .h-header-btn {
    img {
      width: 16px;
      height: 16px;
      margin-left: 4px;
    }
    span {
      font-family: PingFangSC-Semibold;
      margin-left: 16px;
      font-size: 17px;
      letter-spacing: 0.61px;
      line-height: 24px;
    }
  }
  .search {
    background-color: #fff;
    padding: 8px 12px;
    position: absolute;
    width: 100%;
    height: 1.02rem;
    z-index: 100;
    // margin-top: 52px;
    margin-bottom: 8px;
    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;
      border-radius: 4px;
      height: 36px;
      line-height: 36px;
      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{
  //   margin-top: 10px;
  // }
  // .scrollContent{
  //   padding-bottom: 70px;
  // }
  .reimburse-wrap {
    margin: 10px;
  }
  .hls-item .contents .add-name .left-icon {
    width: 30px;
  }
  .add-name {
    .time-font {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(56, 63, 69, 0.6);
    }
  }
  .add-content {
    .money-font {
      font-family: Verdana-Bold;
      font-size: 15px;
      color: #1d3fff;
    }
    .time-font {
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: rgba(56, 63, 69, 0.6);
    }
  }
  .content {
    position: absolute;
    top: 0;
  }
  .scrollContent {
    padding-top: 1.92rem;
    padding-bottom: 20px;
  }
  .tab-style {
    width: 100%;
    position: absolute;
  }
}
.platform-ios {
  #reimburse {
    .scrollContent {
      padding-top: 2.2rem;
    }
  }
}

@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #reimburse {
      .scrollContent {
        padding-top: 2.62rem;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #reimburse {
      .scrollContent {
        padding-top: 2.62rem;
      }
      .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;
      // height: 36px;
      width: 100%;
      font-family: PingFangSC-Regular;
      font-size: 14px;
      color: #888c8f;
    }
      }
    }
  }
}
</style>
