<template>
  <view sytle="height:100%;background: #fff;">
    <GList
      v-if="dataList.length !== 0"
      style="background: #F3F4F6;height: 100vh;"
    >
      <view class="px-30 py-28">
        <view
          v-for="(item, index) in dataList"
          :key="index"
          class="pay-item mb-24"
        >
          <view
            class="pay-item-header flex-center"
            :class="{ status: item.status === 0 }"
          >
            <text class="pay-item-header-text">
              充值{{ item.money || 0 }}元{{
                item.status === 1 ? '已支付' : '未支付'
              }}
            </text>
          </view>
          <view class="pay-item-bottom">
            <view
              class="flex-row mb-20 mt-8"
              style="justify-content: space-between;"
            >
              <text class="pay-item-bottom-left">
                订单号码
              </text>
              <text class="pay-item-bottom-right">
                {{ item.out_trade_no }}
              </text>
            </view>
            <view
              class="flex-row"
              style="justify-content: space-between;"
            >
              <text class="pay-item-bottom-left">
                下单时间
              </text>
              <text class="pay-item-bottom-right">
                {{ item.create_time }}
              </text>
            </view>
          </view>
        </view>
      </view>
    </GList>
    <view
      v-else
      class="flex-1 flex-center"
      style="height: 100%;background-color: #ffffff;"
    >
      <GNoData
        image="pay-noData"
        text="暂无充值记录~"
      />
    </view>
  </view>
</template>

<script>
import { rechargerecord } from '@/api/index.js';
export default {
	data() {
		return {
			dataList: []
		};
	},
	created() {
		this.$showLoading(true);
		this.getDataList();
	},
	methods: {
		getDataList() {
			rechargerecord().then(res => {
				this.dataList = res || [];
				this.$showLoading(false);
			});
		}
	}
};
</script>

<style lang="scss">
.dataItem {
	flex-direction: row;
	justify-content: space-between;
	align-items: center;
}
.pay-text {
	font-size: 36rpx;
	font-weight: bold;
	color: #000000;
}
.pay-unit {
	font-size: 30rpx;

	font-weight: 400;
	color: #666666;
}
.pay-status-1 {
	font-size: 30rpx;

	font-weight: 500;
	color: #333333;
}
.pay-item {
	height: 264rpx;
	background-image: url('https://diyyhdapi.qinjiu8.com/payBackgrunp.png');
	background-size: 100% 100%;
	.pay-item-header {
		height: 104rpx;
		.pay-item-header-text {
			font-size: 36rpx;
			font-weight: bold;
			color: #000000;
		}
	}
	.pay-item-bottom {
		padding: 24rpx;
		justify-content: space-between;
		.pay-item-bottom-left {
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
		}
		.pay-item-bottom-right {
			font-size: 30rpx;
			font-weight: 400;
			color: #333333;
		}
	}
	&.status {
		.pay-item-header-text {
			color: #ce3636;
		}
	}
}
</style>
