<template>
  <view class="NumberWeight">
	  <!-- 订单分类 -->
	  <view class="nav" >
	    <view :class="['nav-item' ,selectNavId === item.id?'nav-item-selected':'']" v-for="(item,index) in navList"
	      :key="index" @click="selectNav(item.id)">
		  {{item.name}} 
		  {{item.id ==='signed' && count.signed >0 ? '('+count.signed + ')':''}} 
		  {{item.id ==='completed' && count.completed >0 ?'('+count.completed + ')':''}}
		  {{item.id ==='init' && count.init >0 ?'('+count.init + ')':''}}
		  {{item.id ==='delivered' && count.delivered >0 ?'('+count.delivered + ')':''}}
		</view>
	  </view>
	  
    <!-- 有订单列表 -->
    <block v-if="lists.length > 0">
      <!-- 订单列表 -->
      <view class="order-list" v-for="(item,index) in lists" :key="index">
        <MallShipmentsTemplate :item="item" />
        <view class="actions">
          <view class="nowPay" @click="goDetail(item.shipment_no)" >查看详情</view>
          <view v-if="item.can.cancel" @click="nowCancel(index,item.shipment_no)" class="nowPay">取消订单</view>
          <view v-if="item.can.sign && type==='1'" @click="nowSign(index,item.shipment_no)" class="nowPay">确认签收</view>
          <view v-if="item.can.refund" @click="nowRefund(item.shipment_no)" class="nowPay">申请退货</view>
          <view v-if="item.can.logistic" @click="nowLogistics(item.shipment_no)" class="nowPay">查看物流</view>
        </view>
      </view>
    </block>
    <!-- 没有订单列表 -->
    <no-list v-if="lists.length === 0" name='no-order' txt="暂无数据~" />
	
	<!-- <u-toast ref="uToast" /> -->
	<u-toast ref="uToast" />
  </view>
</template>

<script>
  import { MallShipmentsTemplate } from '@/components/mall-shipments-template/mall-shipments-template'
  import { mallShipmentsPostShop , mallShipmentsSign , mallShipmentsCancel } from '@/apis/interfaces/numberWeight'
  export default {
    components: {
      MallShipmentsTemplate
    },
    data() {
      return {
        lists: [],
		page:1,
		total:0,
		navList: [],
		type:'',// post 快递单  空为自提单
		selectNavId: 'init',
		count:{},// 订单数量
      };
    },
	onLoad(e) {
		console.log(e.type)
		this.type = e.type
		if(e.type === 'post'){
			this.navList = [
				{
				    name: '待发货',
				    id: 'init'
				  },
				  {
				    name: '已发货',
				    id: 'delivered'
				  },
				  {
				    name: '已签收',
				    id: 'signed'
				  },
				  {
				    name: '已完成',
				    id: 'completed'
				  }
			]
			uni.setNavigationBarTitle({
				title:'我的快递单'
			})
			this.selectNavId = 'init'
		}else{
			this.navList = [
				// {
				// 	name: '待提货',
				// 	id: 'init'
				// },
				{
					name: '已提货',
					id: 'signed'
				},
				{
					name: '已完成',
					id: 'completed'
				}
			]
			this.selectNavId = 'signed'
			uni.setNavigationBarTitle({
				title:'我的提货单'
			})
		}
		this.getList()
	},
	onShow(){
		console.log(uni.getStorageSync('refresh'),'getStorageSync')
		if(uni.getStorageSync('refresh')){
			this.reset()
		}
	},
	onUnload() {
		uni.setStorageSync('refresh',false)
	},
	onReachBottom() {
		if(this.total>this.lists.length){
			this.page = this.page + 1
			this.getList()
		}else{
			this.$refs.uToast.show({
			  title: '吼吼吼~我是有底的~',
			  type: 'error',icon:false,
			  duration: 3000
			})
		}
	},
    methods: {
		reset(){
			this.page =1
			this.total = 0
			this.lists = []
			this.getList()
			uni.setStorageSync('refresh',false)
		},
		// 选择订单
		selectNav(id) {
		  if (this.selectNavId !== id) {
		    this.selectNavId = id
			this.reset()
		  }
		},
		// 获取订单列表
		getList(){
			let data = {
				pageSize:4,
				page:this.page,
				state:this.selectNavId
			}
			let apiUrl = ''
			if(this.type === 'post'){
				apiUrl = 'mall/shipments/post'
			}else{
				apiUrl = 'mall/shipments/shop'
			}
			mallShipmentsPostShop(apiUrl,data).then(res=>{
				console.log(res.count)
				this.count = res.count
				this.lists = this.lists.concat(res.lists.data)
				this.total = res.lists.page.total
			}).catch(err=>{
				this.$refs.uToast.show({
				  title: err.message,
				  type: 'error',icon:false,
				  duration: 3000
				})
			})
		},
		// 取消提货单
		nowCancel(index,no){
			console.log(index,no)
			uni.showModal({
			    title: '哎呦，提醒你',
			    content: '是否确认要取消订单啊，取消后请去我的数权中查看',
			    success:  (res) =>{
			        if (res.confirm) {
			            mallShipmentsCancel(no).then(res=>{
			            	console.log(res)
							this.$refs.uToast.show({
							  title:res,
							  type: 'error',icon:false,
							  duration: 3000
							})
			            	this.lists.splice(index,1)
			            	this.total = this.total - 1
			            }).catch(err=>{
			            	this.$refs.uToast.show({
			            	  title: err.message,
			            	  type: 'error',icon:false,
			            	  duration: 3000
			            	})
			            })
			        } else if (res.cancel) {
						this.$refs.uToast.show({
						  title:'放弃了~',
						  type: 'error',icon:false,
						  duration: 3000
						})
			        }
			    }
			});
		
		},
		// 签收提货单
		nowSign(index,no){
			console.log(index,no)
			uni.showModal({
			    title: '哎呦，提醒你',
			    content: '是否确认已经收到商品了呀',
			    success:  (res) =>{
			        if (res.confirm) {
						console.log(no)
			            mallShipmentsSign(no).then(res=>{
			            	console.log(res)
							this.$refs.uToast.show({
							  title:res,
							  type: 'error',icon:false,
							  duration: 3000
							})
			            	this.lists.splice(index,1)
			            	this.total = this.total - 1
			            }).catch(err=>{
			            	this.$refs.uToast.show({
			            	  title: err.message,
			            	  type: 'error',icon:false,
			            	  duration: 3000
			            	})
			            })
			        
					} else if (res.cancel) {
						this.$refs.uToast.show({
						  title:'放弃了~',
						  type: 'error',icon:false,
						  duration: 3000
						})
			        }
			    }
			});
		},
		
		// 申请退货
		nowRefund(no){
			this.$Router.push({
			  name: 'MallShipmentsRefund',
			  params:{
				  no:no
			  }
			})
		},
		// 查看物流
		nowLogistics(no){
			this.$Router.push({
			  name: 'Orderlogistics',
			  params:{
				  no:no
			  }
			})
		},
		// 查看详情
		goDetail(no){
			this.$Router.push({
			  name: 'MallShipmentsInfo',
			  params:{
				  no:no
			  }
			})
		}
    }
  }
</script>

<style lang="scss" scoped>
  page {
    width: 100%;
    height: 100%;
  }

  .NumberWeight {
    width: 100%;
    min-height: 100vh;
    box-sizing: border-box;
    background-color: #F7F7F7;

    // 订单nav
    .nav {
      display: flex;
      flex-direction: row;
      align-items: center;
      justify-content: space-around;
      box-sizing: border-box;
      font-size: $title-size*0.95;
      padding: 0 30rpx;
      background-color: #fff;
      color: #666;
      border-top: solid 20rpx #f7f7f7;
	  position: sticky;
	  top: 0rpx;
	  z-index: 10000;

      .nav-item {
        border-bottom: solid 4rpx #fff;
        padding: 30rpx 10rpx;
      }

      .nav-item-selected {
        border-bottom: solid 4rpx $main-color;
        color: $main-color;
      }
    }

    // 订单列表
    .order-list {
      background-color: #fff;
      border-radius: 20rpx;
      min-height: 300rpx;
      margin: 30rpx 20rpx 0 20rpx;
      padding:30rpx 30rpx 20rpx 30rpx ;
	  // border-top: solid 4rpx #cacaca;

      // 操作信息
      .actions {
        display: flex;
        flex-direction: row;
        align-items: center;
        justify-content: flex-end;
        box-sizing: border-box;
        flex-wrap: wrap;
        flex: 1;
        font-size: 28rpx;
        color: #fff;
		border-top: solid 1rpx #EFF4F2;
        .nowPay {
          padding: 4rpx 20rpx;
          border-radius: 40rpx;
          margin-left: 20rpx;
          margin-top: 20rpx;
          // background-color: $main-color;
		  color: #999;
		  border:solid 1rpx #cacaca;
        }

        .cancelOrder {
          padding: 10rpx 30rpx;
          border-radius: 40rpx;
          margin-left: 20rpx;
          margin-top: 20rpx;
          background-color: #DD524D;
        }

        .logistics {
          background-color: $main-color;
          padding: 10rpx 30rpx;
          border-radius: 40rpx;
          margin-left: 20rpx;
          margin-top: 20rpx;
        }

        .sign {
          background-color: #DD524D;
          padding: 10rpx 30rpx;
          border-radius: 40rpx;
          margin-left: 20rpx;
          margin-top: 20rpx;
        }

        .evaluate {
          background-color: $main-color;
          padding: 10rpx 30rpx;
          border-radius: 40rpx;
          margin-left: 20rpx;
          margin-top: 20rpx;
        }
      }
    }
  }
</style>
