<template>
  <view class="content">
    <view>
		<u-tabs ref="uTabs" name="name" count="count" :list="tabList" :current="current" @change="tabsChange" :is-scroll="false" swiperWidth="750"></u-tabs>
	</view>
    <view class="order-view">
        <u-loading class="loading" :show="isLoading" size="36"></u-loading>
        <no-content-tips :src="'/static/order_empty.png'" :isShow="(!isLoading && orderList.length === 0)" :tips="'暂时没有订单哦~'" />
        <view class="card item-card" v-for="item in orderList" :key="item.id">
          <view id="item-top">
              <u-icon color="#3F66EC" name="clock"></u-icon>下单时间：{{ $u.timeFormat(item.orderTime, 'yyyy-mm-dd hh-MM') }}
              <text v-if="item.type === 3" class="order-status-text close-text">已关闭</text>
              <text v-else-if="item.type === 2" class="order-status-text pay-text">已支付</text>
              <text v-else class="order-status-text pay-text">待支付</text>
          </view>
          
          <img class="order-pic" src="@/static/logo.png"/>
            <view class="order-text-view">
              <view class="order-title">
                  <view class="title-view">
                      <text class="text-title">{{ item.title }}</text>
                  </view>
                  <view class="cost-view">
                      <text class="text-cost">￥{{ item.price }}</text>
                  </view>
              </view>
            <text class="text-info">学生名称：{{ item.studentName }}</text>
            <text class="text-info">学生年级：{{ item.studentGrade }}</text>
            <view class="bottom-btn-view">
                <u-button class="btn" size="mini" :plain="true" v-if="item.type === 1 || item.type === 2" shape="circle">取消支付</u-button>
                <u-button class="btn" size="mini" :plain="true" v-if="item.type === 1" type="primary" shape="circle">立即支付</u-button>
            </view>
          </view>
        </view>
    </view>
  </view>
</template>

<script>
import noContentTips from '@/components/common/noContentTips.vue'

export default {
  data: () => ({
    orderList: [
    ],
    tabList: [{
        id: '1',
		name: '全部',
        count: 0
	}, {
        id: '2',
	    name: '已支付',
        count: 0
	}, {
        id: '3',
		name: '待支付',
        count: 0
	}, {
        id: '4',
		name: '已取消',
        count: 0
	}],
    current: 0, // tabs组件的current值，表示当前活动的tab选项
    isLoading: false
  }),
  components: {
      "no-content-tips": noContentTips
  },
  computed: {},
  methods: {
	tabsChange(index) {
        this.current = index
        this.isLoading = true
        this.orderList = []
        window.setTimeout(() => {
          this.isLoading = false
          this.orderList = [
          {
            id: '1',
            title: '花样跳绳（B）',
            studentName: '乐小伴',
            studentGrade: '三年级-1班',
            price: 800,
            orderTime: '',
            type: 1
          },
          {
            id: '2',
            title: '花样跳绳（B）',
            studentName: '乐小伴',
            studentGrade: '三年级-1班',
            price: 800,
            orderTime: '',
            type: 2
          },
          {
            id: '3',
            title: '花样跳绳（B）',
            studentName: '乐小伴',
            studentGrade: '三年级-1班',
            price: 800,
            orderTime: '',
            type: 3
          }
        ]
        for(let i=0;i<this.orderList.length;i++){
          this.orderList[i].orderTime = new Date(2021,2-1,2,14,30)
      }
        },1000)
    },
	// scroll-view到底部加载更多
	onreachBottom() {
        
	}
  },
  watch: {},

  // 组件周期函数--监听组件挂载完毕
  mounted() {
      
  },
  // 组件周期函数--监听组件数据更新之前
  beforeUpdate() {},
  // 组件周期函数--监听组件数据更新之后
  updated() {},
  // 组件周期函数--监听组件激活(显示)
  activated() {},
  // 组件周期函数--监听组件停用(隐藏)
  deactivated() {},
  // 组件周期函数--监听组件销毁之前
  beforeDestroy() {}
}
</script>

<style scoped>
.card {
    margin: 0 auto;
    background: #FFFFFF;
    border: 1px solid rgba(255, 255, 255, 0.5);
    box-shadow: 0px 0px 15px 1px #F0F0F0;
    border-radius: 10px;
}
.item-card {
    margin: 20rpx auto;
    width: 677rpx;
    height: 280rpx;
    align-items: center;
}
.order-pic {
    margin-left: 30rpx;
    width: 220rpx;
    height: 170rpx;
}
.order-text-view {
    margin-left: 30rpx;
    display: inline-block;
}
.text-info {
    font-size: 20rpx;
    font-weight: 400;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
	white-space: nowrap;
    display: block;
}
.text-title {
    width: 300rpx;
    font-size: 28rpx;
    font-weight: bold;
    color: #333333;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.text-cost {
    font-size: 28rpx;
    font-weight: 400;
    color: #EB564F;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
#item-top {
    font-size: 20rpx;
    width: 600rpx;
    font-weight: 400;
    color: #0251FF;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    margin: 20rpx 30rpx;
}
.order-status-text {
    float: right;
}
.close-text {
    color: #999;
}
.pay-text {
    color: #EC655B;
}
.order-title {
    margin-bottom: 30rpx;
}
.title-view {
    display: inline-block;
    width: 260rpx;
}
.cost-view {
    display: inline-block;

}
.bottom-btn-view {
    margin-top: 20rpx;
    text-align: right;
    width: 380rpx;
}
.btn {
    margin-right: 20rpx;
}
.loading {
  margin: 40% 49%;
}
</style>
