<template>
	<view
		class="refund"
		:style="{ backgroundColor: orderList.length === 0 ? '#fff' : '' }"
	>
		<!--订单列表-->
		<scroll-view class="list-scroll-content" scroll-y>
			<!-- 订单列表 -->
			<view
				v-for="(item, index) in orderList"
				:key="index"
				class="rf-order-item"
			>
				<view class="i-top b-b">
					<text class="time">订单号：{{ item.orderCode }}</text>
					<text class="state">{{ item.status | orderStatusFilter }}</text>
				</view>
				<view
					class="goods-box-single"
					@tap="navTo(`/pages/product/product?id=${goodsItem.spuId}&skuId=${goodsItem.skuId}`)"
					v-for="(goodsItem, goodsIndex) in item.orderSkus"
					:key="goodsIndex"
				>
					<image
						class="goods-img"
						:src="goodsItem.skuImage"
						mode="aspectFill"
					></image>
					<view class="right">
						<text class="title in2line">{{ goodsItem.skuName }}</text>
						<text class="attr-box">{{ goodsItem.skuSpecs || singleSkuText }}</text>
						<text class="price" :class="'text-' + themeColor.name">{{ moneySymbol }}{{ goodsItem.price }} * {{ goodsItem.num }}</text>
					</view>
				</view>
				<view class="price-box">
					共
					<text class="num">{{ item.orderSkus.length }}</text>
					件商品
				</view>
				<view class="action-box b-t">
					<button
						class="action-btn"
						:class="'bg-' + themeColor.name"
						@tap="navTo(`/pages/order/detail?id=${item.orderId}`)"
					>
						订单详情
					</button>
					<button v-if='item.status==6'
          						class="action-btn"
          						:class="'bg-' + themeColor.name"
          						@tap="showColorModal(item)"

          					>
          						填写物流
          					</button>
				</view>
			</view>
			<rf-load-more
				:status="loadingType"
				v-if="orderList.length > 0"
			></rf-load-more>
		</scroll-view>

		<rf-empty
			:info="'快去商城逛逛吧'"
			v-if="orderList.length === 0 && !loading"
		></rf-empty>
		<!--加载动画-->
		<rfLoading isFullScreen :active="loading"></rfLoading>

		<!-- 选择颜色模态框 -->
  			<view class="cu-modal" :class="{ show: colorModal }">
  				<view class="cu-dialog">
  				<view class="login-type-form">
  					<view class="input-item">
            							<text class="tit">快递公司</text>
            							<input
            								type="text"
            								name="logisCompanyName"
            								v-model="loginParams.logisCompanyName"
            								placeholder="请输入快递公司"
            								maxlength="11"

            							/>
            						</view>
            						<view class="input-item" >
            							<text class="tit">运单号</text>
            							<input
            								name="waybillCode"
            								type="text"
            								v-model="loginParams.waybillCode"
            								placeholder="请输入运单号"
            								maxlength="20"
            							/>
            						</view>


            						<button
            							class="confirm-btn"
            							:class="'bg-' + themeColor.name"
            							:disabled="btnLoading"
            							:loading="btnLoading"
            							@tap="toLogin"
            						>
            							保存
            						</button>
            					</view>
            					</view>
  				</view>
  			</view>
  			</view>
</template>

<script>
/**
 * @des 售后订单管理
 *
 * @author 237524947@qq.com
 * @date 2020-01-15 11:54
 * @copyright 2019
 */
import rfLoadMore from '@/components/rf-load-more/rf-load-more.vue';
import { backorderlist ,fillthelogistics} from '@/api/product';
import mConstData from '@/config/constData.config';
export default {
	components: {
		rfLoadMore
	},
	data() {
		return {
		loginParams: {
    				id: 0,
    				logisCompanyName: '',
    				waybillCode: ''
    			},
			loadingType: 'more',
			btnLoading: false,
			orderList: [],
			pageNum :0,
			colorModal: false,
			moneySymbol: this.moneySymbol,
			loading: true,
			singleSkuText: this.singleSkuText
		};
	},
	filters: {
		// 状态显示格式化
		orderStatusFilter(orderStatus) {
			let state;
			mConstData.refundStatus.forEach(orderItem => {
				if (orderItem.key === parseInt(orderStatus, 10)) {
					state = orderItem.value;
				}
			});
			return state;
		}
	},
	onShow() {
		this.initData();
	},
	// 下拉刷新
	onPullDownRefresh() {
		this.pageNum = 0;
		this.orderList.length = 0;
		this.getOrderList('refresh');
	},
	// 加载更多
	onReachBottom() {
  if (this.loadingType === 'nomore') return;
		this.pageNum++
		this.getOrderList();
	},
	methods: {
	// 提交表单
  		async toLogin() {

  		this.btnLoading = true;
      			await this.$http
      				.get(`${fillthelogistics}`, this.loginParams)
      				.then(r => {
      				this.btnLoading = false;
      				this.colorModal = false;
      				if(r==1){
      					this.initData();
      				}else{
      					this.$mHelper.toast('填写失败');
      				}


      				})
      				.catch(() => {
      					this.btnLoading = false;
      				});
  		},
	showColorModal(item) {
this.loginParams.id=item.id;
  				console.log(item)
  				this.colorModal = true;
  			},
		// 跳转页面
		navTo(route) {
			this.$mRouter.push({ route });
		},
		// 数据初始化
		initData() {
			this.orderList.length = 0;
			this.pageNum = 0;
			this.getOrderList();
		},
		// 获取订单列表
		async getOrderList(type) {
			const params = {};
			params.pageNum = this.pageNum ;
			params.synthesize_status = -1;
			await this.$http
				.get(`${backorderlist}`, params)
				.then(r => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
					this.loadingType = r.list.length === 10 ? 'more' : 'nomore';
					this.orderList = [...this.orderList, ...r.list];
				})
				.catch(() => {
					this.loading = false;
					if (type === 'refresh') {
						uni.stopPullDownRefresh();
					}
				});
		}
	}
};
</script>

<style lang="scss">
.list-scroll-content {
	height: 100%;
}
.uni-swiper-item {
	height: auto;
}
.input-item {
		display: flex;
		flex-direction: column;
		align-items: flex-start;
		justify-content: center;
		padding: 0 30upx;
		background: $page-color-light;
		height: 120upx;
		border-radius: 4px;
		margin-bottom: 50upx;

		&:last-child {
			margin-bottom: 0;
		}

		.tit {
			height: 50upx;
			line-height: 56upx;
			font-size: $font-sm + 2upx;
			color: $font-color-base;
		}

		input {
			height: 60upx;
			font-size: $font-base + 2upx;
			color: $font-color-dark;
			width: 100%;
		}
	}
	.input-item-sms-code {
		position: relative;
		width: 100%;
		.sms-code-btn {
			position: absolute;
			color: #111;
			right: 20upx;
			bottom: 20upx;
			font-size: 28upx;
		}

		.sms-code-resend {
			color: #999;
		}

		.sms-code-btn:after {
			border: none;
			background-color: transparent;
		}
	}
	.forget-section {
		font-size: $font-sm + 2upx;
		color: $font-color-spec;
		text-align: center;
		margin-top: 40upx;
	}
		.login-type-form {
  				width: 80%;
  				margin: 50upx auto;
  				.input-item {
  					position: relative;
  					height: 90upx;
  					line-height: 90upx;
  					margin-bottom: $spacing-lg;
  					.iconfont {
  						font-size: 50upx;
  						position: absolute;
  						left: 0;
  					}
  					.login-type-input {
  						height: 90upx;
  						padding-left: 80upx;
  						border-bottom: 1upx solid rgba(0, 0, 0, .1);
  					}
  					.sms-code-btn, sms-code-resend {
  						width: 240upx;
  						font-size: $font-base - 2upx;
  					}
  				}
  			}
  			.login-type-tips {
  				padding: 0 50upx;
  				display: flex;
  				justify-content: space-between;
  			}
  			.confirm-btn {
  				height: 80upx;
  				line-height: 80upx;
  			}
</style>
