<template>
	<view>
		<loadlogo v-if="!loadlogo" />
		<view class="container" v-if="loadlogo">
			<far-bottom></far-bottom>
			<view class="header">
				<view class="tabBar b-f dis-flex">
					<view class="tabBar-item p-r f-24 col-9 t-c" :class="{'tabBar-active-text':currentTab === item.typeTab}" v-for="(item,index) in tabBar"
					 @click="curtabBar(item.typeTab)">{{item.title}}
						<view :class="{'active':currentTab === item.typeTab}"></view>
					</view>
				</view>
			</view>
			<view class="content">
				<view class="search-main m-top-btm40">
					<view class="client-total m-btm30">
						<view class="f-24 col-9 m-right20">退款 {{refunded_order}} 已结算 {{settled_order}} 未结算 {{unsettled_order}}</view>
					</view>
					<view class="search-box dis-flex flex-y-center">
						<view class="search-input p-left-right-30 ">
							<input type="number" value="" placeholder="输入订单号查询" placeholder-style="color:#999999;" class="f-24" v-model="searchText" />
						</view>
						<view class="search-btn col-f f-24 t-c" @click="search">搜索</view>
					</view>
				</view>
				<block v-if="!!list && list.length>0">
					<view class="order-list-box">
						<view class="scroll-view" >
							<view class="order-list">
								<view class="order-item b-f bor-radius-10upx padding-box-all m-btm30" v-for="(item,index) in list">
									<view class="user-detail p-r dis-flex flex-y-center">
										<view class="user-avatar m-right30" :style="{'background-image':'url('+item.avatar+')'}"></view>
										<view class="user-nickname">
											<view class="f-24 col-9 scale-us m-btm10">下单用户</view>
											<view class="f-24 col-3">{{item.nickname}}</view>
											<view class="order-status f-24">{{item.status==='0'?orderStatus[3]['title']:(item.status==='1'? orderStatus[0]['title']:(item.status==='2'? orderStatus[1]['title']:orderStatus[2]['title']))}}</view>
										</view>
									</view>
									<view class="order-goods dis-flex border-line border-bottom">
										<view class="goods-image bor-radius-10upx m-right30" :style="{'background-image':'url('+item.goods_logo+')'}"></view>
										<view class="goods-detail">
											<view class="goods-title twolist-hidden col-3 f-24">{{item.goods_name}}</view>
											<view class="f-24 col-9 goods-now-price">实付金额 ￥{{item.orderprice}}</view>
											<view class="f-28 commission-price">{{dealer_Info.yjtext}} ￥{{item.commission}}</view>
										</view>
									</view>
									<view class="order-detail">
										<view class="order-number dis-flex flex-y-center flex-x-between">
											<view class="col-9 f-24">订单号：{{item.orderno}}</view>
											<view class="copy-btn t-c col-9 f-24" @click="copy_orderno(item.orderno)">复制</view>
										</view>
										<view class="f-24 col-9 m-top-btm20">支付时间：{{item.paytime}}</view>
										<view class="f-24 col-9" v-if="!!item.use_time&&item.use_time.length>0">{{item.consumption_type===1?'收货时间':(item.consumption_type===2?'核销时间':'使用时间')}}：{{item.use_time[0]}}</view>
									</view>
								</view>
							</view>
							<load-more :isMore="loadingMore"></load-more>
						</view>
					</view>
				</block>
				<block v-else>
					<noneMores></noneMores>
				</block>
			</view>
		</view>
	</view>
</template>
<script>
	import App from '@/common/js/app.js'
	import Loadlogo from '@/components/template/loadlogo'
	import loadMore from '@/components/template/loadmore.vue'
	import noneMores from '@/components/template/nonemores.vue';
	export default {
		data() {
			return {
				currentTab: '0',
				loadlogo: false, //页面是否加载完成,
				loadingMore: false, //列表加载更多
				current_page: 1, //当前页数
				searchText: '', //搜索订单号
				list: [], //我的推广商品列表
				page_total: null, //总共页数
				unsettled_order: null, //	未结算数量
				settled_order: null, //	已结算数量
				refunded_order: null, //退款数量
				slide_Top: 0, // 滚动距离
				tabBar: [{
						title: '全部',
						typeTab: '0',
					},
					{
						title: '未结算',
						typeTab: '1',
					},
					{
						title: '已结算',
						typeTab: '2',
					},
					{
						title: '已退款',
						typeTab: '3',
					},
				],
				orderStatus: [{
						title: '未结算',
						Status: 'not'
					},
					{
						title: '已结算',
						Status: 'alerea'
					},
					{
						title: '已退款',
						Status: 'refund'
					},
					{
						title: '暂未结算',
						Status: 'settle'
					}
				]
			}
		},
		onLoad(options) {
			this.searchText = options.order_no;
		},
		components: {
			loadMore,
			Loadlogo,
			noneMores
		},
		computed: {
			dealer_Info() {
				if (!!uni.getStorageSync('TextSubstitution')) {
					return uni.getStorageSync('TextSubstitution')
				}
			}
		},
		onShow() {

		},
		mounted() {
			this.getGenerList();
		},
		methods: {
			//推广订单列表
			getGenerList(state = 0, page = 1, isPage = false) {
				let _this = this,
					requestData = {
						order_no: _this.searchText || '',
						page,
						state,
					};
				App._post_form('&p=distribution&do=disOrder', requestData, res => {
					let ShopData = res.data;
					if (isPage) {
						if (ShopData.list.length > 0) {
							_this["list"].push(...ShopData.list);
						} else {
							_this.loadingMore = true;
						}
					} else {
						_this.setData(ShopData)
						_this.loadingMore = ShopData.list.length === 0 || _this.current_page === ShopData.page_total;
					}
				}, false, () => {
					uni.hideLoading();
					_this.loadlogo = true;
				})
			},
			//选项
			curtabBar(current) {
				let _this = this;
				uni.showLoading({})
				_this.slide_Top = 0;
				_this.current_page = 1;
				_this.currentTab = current;
				_this.searchText = '';
				_this.getGenerList(current);
			},
			/**
			 * 滑动高度 
			 */
			scrolly(e) {
				this.slide_Top = e.detail.scrollTop;
			},
			//加载更多
			ReachBottom() {
				
			},
			// 搜索
			search() {
				uni.showLoading({})
				this.current_page = 1;
				this.currentTab = '0';
				this.getGenerList(this.currentTab);
			},
			// 剪切板
			copy_orderno(copyText) {
				//#ifdef H5
					App.clipboard(copyText);
				//#endif
				uni.setClipboardData({
					data: copyText,
					success: function(data) {
						App.showSuccess('复制成功')
					}
				})
			}
		},
		onReachBottom() {
			debugger
			let _this = this;
			if (_this.current_page >= _this.page_total) {
				_this.loadingMore = true;
				return false;
			}
			_this.getGenerList(_this.currentTab, ++_this.current_page, true);
		}
	}
</script>

<style lang="scss">
	page {
		background-color: #f7f7f7;
	}

	//头部
	.header {

		// 导航
		.tabBar {
			width: 100%;

			.tabBar-active-text {
				font-size: 30upx;
				color: #333333;
			}

			.tabBar-item {
				width: 25%;
				height: 96upx;
				line-height: 96upx;

				.active {
					position: absolute;
					bottom: 0;
					left: 50%;
					transform: translateX(-50%);
					background-color: #FF4444;
					width: 50upx;
					height: 8upx;
					border-radius: 20upx;
				}
			}

		}
	}

	//内容
	.content {
		padding: 0 30upx;

		// 搜索栏内容
		.search-main {
			.search-box {
				.search-input {
					margin-right: 40upx;
					background-color: #EEEEEE;
					height: 60upx;
					border-radius: 30upx;
					flex: 1;

					input {
						width: 100%;
						height: 100%;
					}
				}

				.search-btn {
					width: 90upx;
					line-height: 60upx;
					height: 60upx;
					background: #FF4444;
					border-radius: 30upx;
				}
			}
		}

		//订单列表内容
		.order-list-box {
			.scroll-view {
				height: 70vh;

				.order-list {
					.order-item {

						// 用户信息 订单状态
						.user-detail {
							.user-avatar {
								width: 80upx;
								height: 80upx;
								background-repeat: no-repeat;
								background-size: 80upx 80upx;
								border-radius: 50%;
								flex-shrink: 0;
							}

							.user-nickname {
								.scale-us {
									transform: scale(.95);
								}

								.order-status {
									position: absolute;
									right: 0;
									top: 50%;
									transform: translateY(-50%);
									color: #FE504F;
								}
							}
						}

						// 订单商品
						.order-goods {
							padding: 30upx 0;

							.goods-image {
								width: 150upx;
								height: 150upx;
								background-repeat: no-repeat;
								background-size: 150upx 150upx;
								flex-shrink: 0;
							}

							.goods-detail {
								.goods-title {
									height: 2.6em;
								}

								.goods-now-price {
									margin: 11upx 0 8upx;
								}

								.commission-price {
									color: #FF4444
								}
							}
						}

						// 订单详情
						.order-detail {
							padding-top: 40upx;

							.order-number {
								.copy-btn {
									width: 80upx;
									height: 40upx;
									line-height: 40upx;
									border: 1px solid #BFBFBF;
									border-radius: 8upx;
								}
							}
						}
					}
				}
			}
		}
	}


	//提示图

	.no-shop-image {
		.not-image {
			margin: 20% auto 0;
			width: 400upx;
			height: 200upx;
			background-image: url('https://s10.mogucdn.com/p2/161213/upload_27e7gegi3f9acl5e05f3951if5855_514x260.png');
			background-size: 400upx 200upx;
			background-repeat: no-repeat;
		}
	}
</style>
