<template>
  <view class="box">
    <view class="box-seach">
      <u-search placeholder="按手机号搜索查询" v-model="keyword" border-color="#F94B78" height="70" margin="0 0 35rpx 0" placeholder-color="#9C9C9C" bg-color="#fff" :show-action="false"></u-search>
    </view>
    <view class="list-item" v-for="(item,index) in memberData" :key="index" @click.stop="handleBack(item)">
      <view class="item-title">
        <view class="item-phone">
          <view></view>
          <text>充值号码：{{item.userPhone}}</text>
        </view>
        <button v-show="item.bool" @click.stop="handleService(item.orderId)">申请退款</button>
      </view>
        <view class="item-text">
        <text>充值档次：{{item.grade}}</text>
        <text>日期：{{item.stringCreateTime}}</text>
        </view>
  </view>
  <u-navbar autoBack  title="购买纪录"></u-navbar>
  </view>
</template>

<script>
  import {
  	memberOrderInfo,memberApplyRefund
  } from '@/api/member.js';
  import { Debounce } from '@/utils/validate.js'
  export default {
    name: "member_record",
    data() {
      return {
        keyword:'',
        memberData:[]
      };
    },
    async onLoad() {
      await this.getList()
    },
    watch:{
      keyword :Debounce (function (){
        this.memberData.sort((a,b) =>{
            let aIndex = this.keyword.indexOf(a.userPhone)
            let bIndex = this.keyword.indexOf(b.userPhone)
             if(aIndex > bIndex) return -1
              if(aIndex < bIndex) return 1
          if(a.userPhone == b.userPhone){
              return a.stringCreateTime - b.stringCreateTime
          }else{
            if(a.stringCreateTime<b.stringCreateTime) return -1
            if(a.stringCreateTime>b.stringCreateTime) return 1
            return 0
          }
        })
      },1000)
      },
    methods: {
      handleBack(item){
        uni.navigateTo({
          url:`/pages/member_back/index?userPhone=${item.userPhone}&grade=${item.grade}`
        })
      },
      async getList(){
        let milliseconds = 2 * 3600 * 1000  // 7200000 毫秒
         let timestamp = new Date().getTime()
         const res = await memberOrderInfo()
        const arr = res.data.map((item) => {
           return {
             ...item,
             bool:item.createTime+milliseconds>timestamp
           }
         })
         this.memberData = arr
      },
     async handleService(orderId){
       await memberApplyRefund({orderId})
       this.$util.Tips({
       	title: '申请成功'
       });
       await this.getList()
      }
    }
  };
</script>

<style lang="scss" scoped>
  .box {
    margin-top: 10%;
      padding: 20% 40rpx;
      height: 100vh;
      background: url(../../static/images/memberBg.png);
      background-size: cover;
      background-repeat: no-repeat;
      background-attachment: fixed;
      .box-seach{
        z-index: 999;
        padding: 10% 40rpx;
        width: 100%;
        position: fixed;
        top:  3%;
        left: 0;
      }
      .list-item{
        margin-bottom: 26rpx;
        padding: 30rpx 16rpx 25rpx 16rpx;
        background: #FDF0F1;
        border-radius: 20rpx;
        display: flex;
        flex-direction: column;
        justify-content: space-between;
        .item-title{
          display: flex;
          justify-content: space-between;
          .item-phone{
            display: flex;
            align-items: center;
            font-size: 30rpx;
            color: #E91D51;
            view{
              border-radius: 3rpx;
              margin-right: 10rpx;
              width: 5rpx;
              height: 12rpx;
              background: #E91D51;
            }
          }
          button{
            padding: 6rpx ;
            font-size: 26rpx;
            background: rgb(22,155,213);
            color: #fff;
          }
        }

        .item-text{
          padding: 34rpx 12rpx;
          background: #fff;
          margin-top: 20rpx;
          display: flex;
          justify-content: space-between;
          font-size: 30rpx;
        }
      }
  }
</style>
