<template>
  <view class="page-container">
    <view class="order-recird card">
      <view class="card-content">
        <view v-for="(item, index) in list" :key="index" class="record-item">
          <view class="flex-row">
            <text class="title">订单号：</text>
            <text class="value">{{ item.order_code }}</text>
          </view>
          <view class="flex-row">
            <text class="title">订单名称：</text>
            <text class="value">{{ item.order_name }}</text>
          </view>
          <view class="flex-row">
            <text class="title">订单金额：</text>
            <text class="money value">{{ item.order_price }}</text>
          </view>
          <view class="flex-row">
            <text class="title">订单状态：</text>
            <view class="status value flex-row">
              <u-tag v-if="item.order_status == 1" text="支付成功" plain type="success"></u-tag>
              <u-tag v-else text="未支付" plain></u-tag>
            </view>
          </view>
          <view class="flex-row">
            <text class="title">支付方式：</text>
            <view class="value">{{ item.order_pay_name }}</view>
          </view>
          <view class="flex-row">
            <text class="title">订单时间：</text>
            <text class="value">{{ formatTime(item.order_time) }}</text>
          </view>
          <view v-if="item.order_pay_time > 0" class="flex-row">
            <text class="title">支付时间：</text>
            <text class="value">{{ formatTime(item.order_pay_time) }}</text>
          </view>
          <navigator v-if="item.order_status != 1" :url="'/pages/feedback/feedback?type=3&orderId='+ item.order_code" hover-class="none" class="button">已支付未到账？反馈给小编</navigator>
        </view>
      </view>
      <view class="load-more">
        <u-loadmore :status="loadStatus" loading-icon="semicircle" />
      </view>
    </view>
  </view>
</template>

<script>
import { user } from '@/utils/api'

export default {
  data() {
    return {
      list: [],
      page: 1,
      count: 0,
      refreshTriggered: false,
      loadStatus: 'loadmore'
    }
  },
  onPullDownRefresh() {
    this.refreshTriggered = true
    this.loadStatus = 'loadmore'
    this.page = 1
    this.list = []
    this.getData()
  },
  onReachBottom() {
    this.getData()
  },
  async onLoad() {
    await this.$onLaunched
    const token = getApp().globalData.userToken
    if (!token) {
      uni.redirectTo({
        url: '/pages/user/login'
      })
    } else {
      this.getData()
    }
  },
  methods: {
    async getData() {
      if (this.loadStatus === 'nomore' || this.loadStatus === 'loading') {
        return
      }
      this.loadStatus = 'loading'
      await user.orderList(this.page).then(res => {
        if (res.code == 1) {
          if (res.data.page < res.data.page_total) {
            this.loadStatus = 'loadmore'
            this.page++
          } else {
            this.loadStatus = 'nomore'
          }
          this.list = this.list.concat(res.data.list)
          this.count = res.data.count
        } else {
          this.loadStatus = 'loadmore'
        }
      }).catch(e => {
        this.loadStatus = 'loadmore'
      })
      if (this.refreshTriggered) {
        this.refreshTriggered = false
        uni.stopPullDownRefresh()
      }
    }
  }
}
</script>

<style lang="scss">
.page-container {
  padding: 15px 0;
  .order-recird {
    margin: 0 15px;
    .record-item {
      font-size: 14px;
      margin-bottom: 15px;
      padding-bottom: 15px;
      border-bottom: 1px solid #eef0f3;
      &:last-child {
        margin-bottom: 0;
      }
      .flex-row {
        min-height: 26px;
        margin: 2px 0;
        .title {
          height: 26px;
          line-height: 26px;
          color: #8c8c8c;
        }
        .value {
          line-height: 26px;
          flex: 1 1 0%;
        }
        .money {
          color: #fd6202;
        }
      }
      .button {
        margin-top: 10px;
        height: 40px;
        line-height: 40px;
        text-align: center;
        font-size: 13px;
        color: $uni-color-error;
        border: 1px solid #ebedf0;
        border-radius: 3px;
      }
    }
  }
}
</style>