<template>
	<view class="container">
		<Navbar title="订单" />
		<u-sticky bgColor="#fff">
			<u-tabs :current="current" :list="statusList" :is-scroll="false" lineColor="#EA5707"
				:activeStyle="activeStyle" :itemStyle="itemStyle" @change="tabChange"></u-tabs>
		</u-sticky>
		<view v-for="(item,index) in orderCardList" :key="item.id">
			<view class="orderCard" @click="goOrderDetaPage(item)">
				<view class="flex justify-between align-center">
					<view class="flex align-center w80" @click.stop="goStorePage(item)">
						<!--            <u-icon name="/static/images/home/shopTitle.png" size="20"></u-icon>-->
						<view
							:style="{ backgroundImage: 'url(/static/images/home/shopTitle.png)', backgroundSize:'100% 100%',width:'20px',height:'20px', backgroundRepeat: 'no-repeat'}">
						</view>
						<view class="margin-left-xs overflow-one-lines">
							{{item.fCzmc}}
						</view>
					</view>
					<view class="themeColor">
						{{item.fDdzt}}
					</view>
				</view>
				<u-divider></u-divider>
				<!--        ${$assignKeys(index)}-->
				<view v-for="(ddxpItem,index) of item.ddxqList" :key="`${$assignKeys(ddxpItem.id)}`"
					class="flex justify-between margin-top">
					<view class="" style="min-width: 80px;min-height: 80px">
						<u-image width="80px" height="80px"
							:src="ddxpItem.fTp?ddxpItem.fTp:'/static/images/gas-icon/gasicon.png'"></u-image>
					</view>
					<view class="w60 flex flex-direction  justify-between margin-left-sm">
						<view class="overflow-one-lines">
							{{ddxpItem.fSpmc}}
						</view>
						<view class="text-sm text-gray overflow-one-lines">
							规格8：{{ddxpItem.fMs}}
						</view>
						<view class="text-lg text-bold overflow-one-lines">
							￥{{ddxpItem.fDj}}
						</view>
					</view>
					<view class="flex flex-wrap justify-end">
						<view v-if="item.fPsfs" :class="[item.fPsfs=='自提'?'ztSty':'psSty','psfsSty']">
							{{item.fPsfs}}
						</view>
						<view class="flex align-end">X{{ddxpItem.fSl}}</view>
					</view>
				</view>
				<u-divider></u-divider>
				<view class="flex margin-top-lg">
					<view class="text-gray overflow-one-lines">
						订单编号：{{item.fDddh}}
					</view>
				</view>
				<view class="flex margin-top-sm">
					<view class="text-gray">
						备注信息：{{item.fMjly}}
					</view>
				</view>
				<view class="flex margin-top-lg margin-bottom-lg justify-end  ">
					<view class="text-gray">
						<!-- 共{{pageForm.ddxqList.length}}件商品 -->
						合计：
					</view>
					<view class="themeColor  overflow-one-lines">
						￥{{item.fDdje}}
					</view>
				</view>
				<view class="flex justify-end">
					<view class="margin-left-sm" v-if="item.fDdzt =='待配送' " @click.stop="goGasCancel(item)">
						<u-button shape="circle" color="">取消订单</u-button>
					</view>
				</view>
			</view>
			<!--			<orderCard  :orderitem="item"  @orderCancel="cancelOrderLoad"></orderCard>-->
		</view>
		<u-empty mode="list" icon="http://cdn.uviewui.com/uview/empty/list.png"
			v-if="!orderCardList.length &&!loading "></u-empty>
		<u-loadmore :status="status" marginTop="20" height="10" marginBottom="10"
			v-if="orderCardList.length>0 && !loading" />
		<u-loading-icon text="加载中" style="display: flex;align-items: center; margin-top: 100px;"
			:show="loading"></u-loading-icon>

		<!-- app不支持$route -->
		<!-- <TabBar :currentPagePath="this.$route.meta.pagePath"></TabBar> -->
		<TabBar :currentPagePath="'pages/order/order'"></TabBar>
	</view>
</template>

<script>
	import login from '../../api/login';
	import orderCard from './components/orderCard.vue'
	export default {
		components: {
			orderCard
		},
		props: {

		},
		data() {
			return {
				loading: false,
				activeStyle: {
					'color': '#EA5707',
					'fontSize': '16px',
					'fontWeight': 'bold'
				},
				itemStyle: {
					'width': '75px',
					'height': '60px',
				},
				orderCardList: [],
				pageParams: {
					currentPage: 1,
					size: 10,
					currentZt: ''
				},
				status: "loadmore",
				current: 0,
				// current:'全部',
				statusList: [{
					name: '全部',
					id: '全部'
				}, {
					name: '待付款',
					id: 1
				}, {
					name: '待配送',
					id: 2
				}, {
					name: '配送中',
					id: 3
				}, {
					name: '已完成',
					id: 4
				}, ],
				total: null,
			}
		},
		computed: {

		},
		onPullDownRefresh() {
			this.orderCardList = [];
			this.pageParams.currentPage = 1;
			//调用获取数据方法
			this.getOrderList()
			setTimeout(() => {
				//结束下拉刷新
				uni.stopPullDownRefresh();
			}, 500);
		},
		onReachBottom() {
			let allTotal = this.pageParams.currentPage * this.pageParams.size
			if (allTotal < this.total) {
				//当前条数小于总条数 则增加请求页数
				this.pageParams.currentPage++;
				this.status = 'loading';
				setTimeout(() => {
					this.getOrderList()
				}, 500)
			} else {
				this.status = 'nomore'
				// console.log('已加载全部数据')
			}
		},
		mounted() {
			this.getDictOrder();
			// this.getOrderList();
		},
		async onLoad(options) {
			console.log('options=====', options)
			await this.getOrderList();

			uni.$on('onload', status => {
				console.log("onload刷新", status);
				if (status) {
					this.getOrderList()
				}
			});

		},
		async onShow() {
			const orderCardType = uni.getStorageSync('orderCardType');
			console.log("当前", this.pageParams.currentZt);
			let isChange = this.pageParams.currentZt === orderCardType; //记录状态是否发生改变
			if (orderCardType) {
				this.pageParams.currentZt = orderCardType;
				switch (orderCardType) {
					case '全部':
						this.current = 0;
						break;
					case '待配送':
						this.current = 1;
						break;
					case '配送中':
						this.current = 2;
						break;
				}
				console.log('打印orderCardType', orderCardType);
			} else {
				this.current = 0;
				this.pageParams.currentZt = '';
			}
			this.pageParams.currentPage = 1;
			if (!isChange) { //如果状态发生改变后刷新
				await this.getOrderList();
			}
		},
		methods: {
			//用户取消订单
			async goGasCancel(val) {
				let paramsData = {
					ddid: val.id
				};
				this.$modal.confirm('确认取消订单？', '提示').then(async () => {
					let cancelOrderResult = await this.$api.orderApi.cancelOrder(paramsData);
					if (cancelOrderResult.code == 200) {
						this.$modal.msgSuccess('订单取消成功!');
						this.getOrderList();
					} else {
						this.$modal.msgError('会员信息修改失败!');
					}
				}).catch(() => {
					console.log("取消");
				});

			},
			goStorePage(val) {
				let czid = val.fCzid;
				console.log('打印czid', czid)
				uni.navigateTo({
					url: "/pages/home/storeDetails?czid=" + czid
				})
			},
			goGasDetailPage() {
				uni.navigateTo({
					url: "/pages/home/gasDetail"
				})
			},
			goOrderDetaPage(val) {
				// console.log('打印this.pageForm.id', this.pageForm);
				uni.navigateTo({
					url: `/pages/order/orderDetail?id=${val.id}`
				})
			},
			cancelOrderLoad() {
				this.getOrderList();
			},
			async getDictOrder() {
				let query = [{
					key: 'NAME_',
					value: '订单状态'
				}]
				console.log(query);
				let queryJson = JSON.stringify(query);
				console.log(queryJson);
				const result = await this.$api.dictApi.getDict(queryJson, 'ztyd');
				let {
					rows
				} = result;
				let statusArray = [];
				statusArray = rows.length > 0 ? rows.map((item) => {
					return {
						name: item.NAME_,
						id: item.NAME_
					}
				}) : [];
				statusArray.unshift({
					name: '全部',
					id: '全部'
				});
				this.statusList = statusArray;
				console.log('大于this.statusList', this.statusList);

			},
			async getOrderList() {
				this.loading = true;
				let params = {
					current: this.pageParams.currentPage,
					size: 10,
				}
				if (this.pageParams.currentZt) {
					if (this.pageParams.currentZt == '全部') {
						params.zt = '';
					} else {
						params.zt = this.pageParams.currentZt;
					}
				}
				// setTimeout(async()=>{
				let result = await this.$api.orderApi.getOrderList(params);
				let {
					code,
					value
				} = result;
				// let { current, records,size,total} = value;
				// this.orderCardList = records;
				if (code == 200) {
					let {
						current,
						records,
						size,
						total
					} = value;
					let allTotal = this.pageParams.currentPage * this.pageParams.size
					this.total = total;
					const newlist = records;
					if (this.pageParams.currentPage === 1) {
						this.orderCardList = newlist;
					} else {
						this.orderCardList.push(...newlist)
					}
					if (this.orderCardList.length < allTotal) {
						this.status = 'nomore'
					}
					this.orderCardList.map(async (item) => {
						item.ddxqList.map(async (vitem) => {
							let JsonParse = JSON.parse(vitem.fTp);
							let images = await this.$getPhotoUrl(JsonParse[0].response.fileId);
							vitem.fTp = images;
							this.$forceUpdate();
						});
						this.$forceUpdate();
					});
					this.loading = false;
					// this.orderCardList =JSON.parse(JSON.stringify(this.orderCardList));
					console.log('打印this.orderCardList', this.orderCardList)
				}

				// },2000)
				// let queryJson = JSON.stringify(params);

			},
			tabChange(e) {
				this.current = e.index;
				this.pageParams.currentZt = e.name;
				this.pageParams.currentPage = 1;
				this.orderCardList = [];
				this.getOrderList();
			},
			openScan() {
				this.$refs.scanCode.open();
			},
			close() {
				this.$refs.scanCode.close();
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		padding-bottom: 60px;

		// background-color: #f1f1f1 !important;
		::v-deep.u-tabbar__placeholder {
			display: none;

		}
	}

	.tabCss {
		// font-weight: ;
	}
</style>
<style lang="scss" scoped>
	.orderCard {
		margin: 10px;
		padding: 10px;
		background: #fff;
		border-radius: 15px;

		.psfsSty {
			width: 70px;
			height: 23px;
			border-radius: 5px;
			text-align: center;
			line-height: 23px;
			font-size: 12px;
		}

		.ztSty {
			font-family: "苹方 中等", 苹方, sans-serif;
			font-weight: 400;
			font-style: normal;
			color: rgb(0, 174, 170);
			background-color: #e6f7f7;
		}

		.psSty {
			font-family: "苹方 中等", 苹方, sans-serif;
			font-weight: 400;
			font-style: normal;
			color: rgb(255, 165, 0);
			background-color: #fff6e6;
		}
	}
</style>