<template>
  <view class="page">
    <cu-custom :isBack="true"></cu-custom>
		<view class="header" :style="[{top:topHeader + 'px'}]">
			<view class="header-title">
				<view class="header-title-main">
						<view class="margin-bottom-xs">{{title}}</view>
						<view class="point"></view>
				</view>
			</view>
			<swiper-tab :menuList="menuList" @changeTab="changeTab" :activeTab="currentIndex"></swiper-tab>
		</view>
		<scroll-view  scroll-y="true" class="scroll-main"
		:style="[{height:'calc(100vh - 74px - '+ topHeader+'px)'}]"
		:refresher-enabled="true"
		 :refresher-triggered="triggered"
		@refresherrefresh="onRefresh" @scrolltolower="loadMore">
			<view class="list" v-if="params.type<7">
				<view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in list" :key="index">
					<view class="cu-item" v-for="(course,i) in item.list" :key="i">
							<view class="card-header flex justify-between solid-bottom">
								 <view>{{index}}</view>
								 <view class="text-student course-status">
									  {{item.status|status}}
								 </view>
							</view>
							<view class="card flex">
								<view class="card-left">
									<img mode="scaleToFill" :src="course.image" alt="" class="card-image">
								</view>
								<view class="card-right flex-sub margin-left-sm">
									<view class="card-title">{{course.name}}</view>
									<view class="card-item margin-top-xs">
										 <text class="card-label">时间：</text>
										 <text class="card-text">{{course.attend_day}}</text>
									</view>
									<view class="card-item margin-top-xs" >
										 <text class="card-label">课时：</text>
										 <text class="card-text">{{course.class_total}}</text>
									</view>
									<view class="card-item margin-top-xs">
										 <text class="card-label">学生：</text>
										 <text class="card-text">{{course.student_name}}</text>
									</view>
									<view class="card-item margin-top-xs">
										 <text class="card-label">老师：</text>
										 <text class="card-text">{{course.teacher||'--'}}</text>
									</view>
								</view>
							</view>
							<view class="flex card-footer solid-bottom padding-bottom-xs">
										<view v-for="(prop,k) in course.prop" :key="k" class="margin-right-xs">
											<text class="card-label">{{prop.name}}：</text><text class="text-price">{{prop.money}}</text>
										</view>
							</view>
							<view class="card-bottom margin-top-xs flex justify-between">
								<view>
									<text class="text-price text-red">{{item.sum_money}}</text>
								</view>
								<view>
										<button @tap="dropCourse(course.order_info_id)" class="cu-btn round bg-student text-white" v-if="dropStatus.includes(item.status)&&course.is_return===0">退课</button>
										<button @tap="droping" class="cu-btn round sm line-cyan" v-if="dropStatus.includes(item.status)&&course.is_return===1">退课中</button>
										<button @tap="pay(item.order_id)" class="cu-btn round bg-student text-white margin-right-sm" v-if="item.status===0">立即付款</button>
										<button @tap="cancel(item.order_id)" class="cu-btn round bg-gray" v-if="item.status===0">取消</button>
								</view>
							</view>
					</view>
				</view>
			</view>
			<view class="list" v-else>
				<view class="cu-card margin-top margin-bottom shadow" v-for="(item,index) in list" :key="index">
						<view class="cu-item">
								<view class="card-header flex justify-between solid-bottom">
								 <view>{{item.code}}</view>
								 <view class="text-student course-status">
									  {{item.status|dropStatus}}
								 </view>
							</view>
							<view class="card flex">
									<view class="card-left">
										<img mode="scaleToFill" :src="item.image" alt="" class="card-image">
									</view>
									<view class="card-right flex-sub margin-left-sm">
										<view class="card-title">{{item.name}}</view>
										<view class="card-item margin-top-xs">
											<text class="card-label">时间：</text>
											<text class="card-text">{{item.attend_day}}</text>
										</view>
										<view class="card-item margin-top-xs" >
											<text class="card-label">课时：</text>
											<text class="card-text">{{item.class_total}}</text>
										</view>
										<view class="card-item margin-top-xs">
											<text class="card-label">学生：</text>
											<text class="card-text">{{item.student_name}}</text>
										</view>
										<view class="card-item margin-top-xs">
											<text class="card-label">老师：</text>
											<text class="card-text">{{item.teacher||'--'}}</text>
										</view>
									</view>
							</view>
							<view class="flex card-footer padding-bottom-xs">
									<view v-for="(prop,k) in course.prop" :key="k" class="margin-right-xs">
										<text class="card-label">{{prop.name}}：</text><text class="text-price">{{prop.money}}</text>
									</view>
							</view>
						</view>
				</view>
			</view>
		</scroll-view>
		<web-view v-if="showForm" :src="payurl"></web-view>
  </view>
</template>

<script>
import { _orderCenter, _dropList, _payOrder, _dropCourse, _cancelOrder } from '@/api/course'
import swiperTab from '@/components/swiper-tab.vue'
export default {
  components: {
    swiperTab
  },
  data () {
    return {
      title: '订单',
      topHeader: this.globalCustomBarHeight,
      noMore: false, // 加载判断
      triggered: false, // 下拉
      showForm: false, // 支付弹窗
      payurl: '',
      menuList: ['全部订单', '待付款', '已付款', '退课售后'],
      currentIndex: 0,
      list: [],
      dropStatus: [1, 4],
      orderTypes: {
        0: 5,
        1: 0,
        2: 1,
        3: 7
      },
      params: {
        type: 5,
        page: 1
      }
    }
  },
  filters: {
    status: function(value) {
      switch (value) {
        case 0:
          return '未付款'
        case 1:
          return '已付款'
        case 2:
          return '申诉'
        case 3:
          return '已取消'
        case 4:
          return '部分退课'
        case 5:
          return '全部退课'
        case 6:
          return '正在付款'
        default:
          return '状态未知'
      }
    },
    dropStatus(v) {
      return v === 0 ? '审核中' : v === 1 ? '审核通过' : '驳回'
    }
  },
  onLoad (option) {
    if (option.type) {
      const index = decodeURIComponent(option.type)
      this.changeTab(index)
    } else {
      this.get_list()
    }
  },
  methods: {
    refresh() {
      this.currentIndex = 0
      this.params.page = 1
      this.params.type = 5
      this.get_list()
    },
    onRefresh() {
      this.triggered = true
      this.refresh()
      setTimeout(() => {
        this.triggered = false
      }, 1000)
    },
    loadMore() {
      if (this.noMore) {
        uni.showToast({ title: '没有更多了', icon: 'none' })
        return false
      }
      this.params.page++
      this.get_list()
    },
    get_list() {
      if (this.params.type < 7) {
        this.get_orders()
      } else {
        this.get_drops()
      }
    },
    get_orders() {
      _orderCenter(this.params).then(res => {
        if (this.params.page > 1) {
          if (Object.keys(res.data).length < this.page_size) this.noMore = true
          this.list = Object.assign({}, this.list, res.data)
        } else {
          this.noMore = false
          this.list = res.data
        }
      })
    },
    get_drops() {
      _dropList({ page: this.params.page }).then(res => {
        if (this.params.page > 1) {
	        if (!res.data.drop_course_data) {
            this.noMore = true
            return
          }
          if (res.data.drop_course_data.length < this.page_size) this.noMore = true
          this.list = this.list.concat(res.data.drop_course_data)
        } else {
          this.noMore = false
          this.list = res.data.drop_course_data || []
        }
      })
    },
    droping() {
      this.changeTab(3)
    },
    dropCourse(id) {
      const params = { order_info_id: id, refund_explanation: '', type_id: 0 }
      const _self = this
      uni.showModal({
        title: '提示',
        content: '确定要删除？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            _dropCourse(params).then(res => {
              uni.showToast({ title: '已经发起退课,请耐心等待', icon: 'none' })
              _self.refresh()
            })
          }
        }
      })
    },
    pay(id) {
      const _self = this
      uni.showModal({
        title: '温馨提示：',
        content: '1、感谢您的购买;\n' +
                  '2、退费规则请咨询客服;\n' +
                  '3、本平台对以上细则有最终解释权。',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            _payOrder({ order_id: id, pay_type: 'wechat', trade_type: 'JSAPI' }).then(res => {
              if (res.code === 0) {
                return false
              }
              if (res.code === 200) {
                uni.showToast({ title: res.msg, icon: 'success', duration: 2000 })
                _self.changeTab(2)
                return true
              }
              if (res.code === 301) {
                _self.showForm = true
                _self.payurl = res.data
                return true
              }
              // 进行支付
              uni.requestPayment({
                timeStamp: res.data.timeStamp,
                nonceStr: res.data.nonceStr,
                package: res.data.package,
                signType: res.data.signType,
                paySign: res.data.paySign,
                success: function (res) {
                  _self.refresh()
                }
              })
            })
          }
        }
      })
    },
    cancel(id) {
      const _self = this
      uni.showModal({
        title: '提示',
        content: '确定取消？',
        cancelText: '取消',
        confirmText: '确定',
        success: res => {
          if (res.confirm) {
            _cancelOrder({ order_id: id }).then(res => {
              uni.showToast({ title: res.msg, icon: 'none' })
              _self.refresh()
            })
          }
        }
      })
    },
    changeTab(index) {
      this.params.page = 1
      this.currentIndex = index
      this.params.type = this.orderTypes[index]
      this.get_list()
    }
  }
}
</script>

<style lang="scss">
@import '~@/common/css/mixin.scss';
.scroll-main{
	margin-top:74px;
	padding:20rpx;
}
.cu-card{
	.cu-item{
		margin-top:10rpx;
		padding:20rpx;
		margin:0;
	}
}
.card-header{
	padding-bottom:10px;
  @include title(10px,18px);
}
.card{
	&-title{
		font-size:16px;
	}
	&-image{
		width:35vw;
		height:35vw;
		border-radius:10rpx;
	}
	&-label{
		color:#999;
	}
	&-text{
		color:#333;
	}
}
.course-status{
	font-size:14px;
	font-weight:normal;
}
</style>
