<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="hinput">
      <input v-model="keyWords" type="text" placeholder="请输入退款金额" >
    </div>
    <scroll ref="scroll" :updateData="[reimburseList]" :pullUp="true">
      <section class="reimburse-wrap">
        <list-item
          v-for="(list,index) in reimburseList"
          :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.orderamount | 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>
  </h-view>
</template>
<script>
export default {
  data () {
    return {
      reimburseList: [
        {
          order_date: '2019/10/24',
          orderamount: '0',
          order_id: '16',
        },
      ],
      keyWords: '',
    }
  },
  beforeRouteEnter (to, from, next) {
    next(vm => {
      vm.getList()
    })
  },
  methods: {
    godetail (e) {
      this.$router.push({
        name: 'DrawbackDetail',
        params: {
          order_id: e,
        },
      })
    },
    getList () {
      let vm = this
      //   let url = process.env.basePath + 'my_repayment_query'
      //   let param = {
      //     user_phone: window.localStorage.getItem('user_phone'),
      //   }
      //   vm.hlsPopup.showLoading('数据加载中，请稍后!')
      //   vm.hlsHttp.post(url, param).then(function (res) {
      //     vm.hlsPopup.hideLoading()
      //     if (res.result === 'S') {
      //   vm.reimburseList = res.lists
      // this.reimburseList = [
      //   {
      //     order_date: '2019/10/24',
      //     orderamount: '0',
      //     order_id: '16',
      //   },
      // ]
      if (vm.reimburseList.length >= 0 && vm.reimburseList.length < 10) {
        vm.$refs.scroll.update(true)
      }
    //     }
    //   })
    },
  },
}
</script>

<style lang="less">
#reimburse {
  .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;
    }
  }
  .hinput {
    position: relative;
    z-index: 50;
    width: 100%;
    height: 68px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 3px;
    background: #fff;
    input {
      width: 351px;
      height: 36px;
      line-height: 36px;
      padding-left:12px;
      margin: 0 auto;
      opacity: 0.4;
      border: none;
      background: url("../../assets/drawback/uncheck.png") 310px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
    }
    input:focus {
      background-color: #fff;
      background: url("../../assets/drawback/check.png") 310px no-repeat;
      background-size: 16px 16px;
      border: 1px solid #1d3fff;
    }
  }
  .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: 2.05rem;
    padding-bottom: 20px;
  }
  .tab-style {
    width: 100%;
    position: absolute;
  }
}
.platform-ios {
  #reimburse {
    .scrollContent {
      padding-top: 2.45rem;
    }
  }
}

@media (device-width: 375px) and (device-height: 812px) and (-webkit-min-device-pixel-ratio: 3) {
  .platform-ios {
    #reimburse {
      .scrollContent {
        padding-top: 3.05rem;
      }
    }
  }
}
// iPhoneXR适配
@media (device-width: 414px) and (device-height: 896px) {
  .platform-ios {
    #reimburse {
      .scrollContent {
        padding-top: 3.05rem;
      }
       .hinput {
 input {
      width: 351px;
      // height: 36px;
      padding:8px 20px;
      margin: 0 auto;
      opacity: 0.4;
      border: none;
      background: url("../../assets/drawback/uncheck.png") 310px no-repeat;
      background-size: 16px 16px;
      background-color: rgba(239, 239, 239, 0.55);
    }
       }
    }
  }
}
</style>
