<template>
	<div>
		<Myheader></Myheader>
		<div class="rc-top"></div>
		<tabs :crumbs="crumbs"></tabs>
		<div class="online bold"></div>
		<div class="usercontshow rc-max-width--xl">
			<div class="rc-headera">
				<span v-for="(item, index) in discountlist" :key="index" @click="selectGoods(item, index)" :class="activeIndex == index ? 'active' : 'unactive'">
					{{ item.title }}
				</span>
			</div>
			<div class="online bold" style="height:8px;margin-top:0"></div>
			<div class="rc-userheader">
				<span v-for="(item, index) in message" :key="index">{{ item.title }}</span>
			</div>

			<div class="rc-center" v-for="(item, index) in useralllist" :key="index">
				<div class="rc-usermaina">
					<div class="rc-title">
						<div>
							<i>订单编号:</i>
							<span>{{ item.orderNumber }}</span>
						</div>
						<div class="rc-usertitle">
							<strong>订单状态:</strong>
							<em>
								{{ item.status == '0' ? '待付款' : item.status == '1' ? '待收货' : item.status == '2' ? '已完成' : item.status == '3' ? '已取消' : '异常订单' }}
							</em>
						</div>
					</div>
					<div class="rc-usermain">
						<div class="rc-image"><img :src="item.picFile" alt="" /></div>
						<div class="rc-right" @click="usertiaozhuan(item)">
							<div class="rc-usercenter">
								<em>{{ item.productName }}</em>
								<div class="rc-userright">
									<span>规格:{{ item.specifications }}</span>
								</div>
							</div>
							<div class="rc-userbottom">
								<span>数量:{{ item.pcs }}件</span>
								<i>￥{{ item.ecPrice }}</i>
							</div>
							<div class="rc-userbottomm">
								<i>￥{{ item.ecPrice }}</i>
								<span>{{ item.pcs }}</span>
								<i>￥{{ item.salesAmount }}</i>
							</div>
						</div>

						<div class="pc-bottom">
							<span v-if="item.status != 1" @click="userpay(item, index)">
								{{
									item.status == '0'
										? '取消订单'
										: item.status == '1'
										? '确认收货'
										: item.status == '2'
										? '再次购买'
										: item.status == '3'
										? '再次购买'
										: '异常订单'
								}}
							</span>
							<span @click="userfind(item)">
								{{
									item.status == '0'
										? '立即支付'
										: item.status == '1'
										? '查看订单'
										: item.status == '2'
										? '查看订单'
										: item.status == '3'
										? '查看订单'
										: '异常订单'
								}}
							</span>
						</div>
					</div>
					<div class="online" style="display:none"></div>
					<div class="rc-usermain rc-price">
						<div class="rc-price priceleft">
							<span>数量:</span>
							<em>共{{ item.lengthnum }}件商品</em>
						</div>
						<div class="rc-price priceright">
							<strong>总计:</strong>
							<i>￥{{ item.salesAmount }}</i>
						</div>
					</div>

					<div class="rc-bottom">
						<span @click="userpay(item, index)">
							{{ item.status == '0' ? '取消订单' : item.status == '1' ? '确认收货' : item.status == '2' ? '再次购买' : item.status == '3' ? '再次购买' : '异常订单' }}
						</span>
						<span @click="userfind(item)">
							{{ item.status == '0' ? '立即支付' : item.status == '1' ? '查看订单' : item.status == '2' ? '查看订单' : item.status == '3' ? '查看订单' : '异常订单' }}
						</span>
					</div>
				</div>

				<div class="online bold"></div>
			</div>
		</div>
		<el-dialog :visible.sync="showPaytypeWarning" :close-on-click-modal="false">
			<div class="ts-warning-popup">
				<div class="title rc-full-width"><img src="../../assets/error.png" alt="" /></div>
				<div class="content rc-full-width rc-text--center rc-margin-y--md">
					<h3>温馨提示</h3>
					<span class="">{{ paytypeWarning.message }}</span>
				</div>
				<div class="qrcode rc-center"><vue-qr :text="qrtext" :size="200"></vue-qr></div>
			</div>
		</el-dialog>
		<MyFooter></MyFooter>
	</div>
</template>

<script>
import Myheader from '~/components/header.vue';
import MyFooter from '~/components/rc-footer.vue';
import tabs from '~/components/tabs.vue';
import util from '@/ajax/util';
import { customerorders, userindent, canceldanhao, repayOrde, generateOrderWX } from '../../ajax/getData';
import { mapMutations, mapState } from 'vuex';
import vueQr from 'vue-qr';
export default {
	data() {
		return {
			util,
			paytypeWarning: { result: true, message: '' },
			showPaytypeWarning: false,
			crumbs: [
				{
					path: '/personal/mypersonal/'
				},
				{
					path: '/personal/useraddress/'
				}
			],
			activeIndex: 0,
			userstype: '',
			alllist: [],
			obligation: [], //待付款
			pending: [], //待发货
			receiving: [], //待收货
			allmessage: [],
			useralllist: [],
			usertitle: '',
			useraliset: [],
			// userdata: [],
			buttontitle: '再次购买',
			discountlist: [
				{
					title: '全部'
				},
				{
					title: '待付款'
				},
				{
					title: '待发货'
				},
				{
					title: '待收货'
				}
			],

			message: [
				{
					title: '商品'
				},
				{
					title: '单价/元'
				},
				{
					title: '数量'
				},
				{
					title: '实付款/元'
				},
				{
					title: '操作'
				}
			],

			goldmedal: [
				{
					ordernumber: '',
					orderstype: 1,
					usereat: '',
					ordernum: 0,
					num: '',
					specification: '',
					buttontitle: '',
					userprice: '',
					catimage: ''
				}
			],
			qrtext : '', //二维码内容
		};
	},
	computed: {
		...mapState({
			userInfo: state => state.user.userInfo,
			userdata: state => state.user.userInfo.mobile,
			loginState: state => state.login.loginState
		})
	},
	watch: {
		userInfo(newVal) {
			this.resetData();
		}
	},
	mounted() {
		// this.checkIsLogin();

		this.userstype = this.$route.query.stype;
		this.resetData();
		// this.userdata = user.data.mobile;
	},
	components: {
		Myheader,
		MyFooter,
		tabs,
		vueQr
	},
	methods: {
		...mapMutations(['changemessage', 'checkIsLogin']),
		async indet(mobile, stype) {
			let data = await userindent(mobile, undefined, 1, 100);
			this.activeIndex = stype;
			this.goldmedal = data;
			this.alllist = [];
			this.allmessage = [];
			this.useralllist = [];
			this.obligation = [];
			this.receiving = [];
			this.pending = [];
			for (let i = 0; i < this.goldmedal.length; i++) {
				if (!this.goldmedal[i].orderDetailList.length) continue;
				this.useralllist.push(this.goldmedal[i].orderDetailList[0]);
				this.alllist.push(this.goldmedal[i].orderDetailList[0]);
				this.allmessage.push(this.goldmedal[i].orderDetailList[0]);
				if (this.goldmedal[i].status == 0) {
					this.obligation.push(this.goldmedal[i].orderDetailList[0]);
				} else if (this.goldmedal[i].status == 1) {
					this.receiving.push(this.goldmedal[i].orderDetailList[0]);
				} else if (this.goldmedal[i].status == 2) {
					this.pending.push(this.goldmedal[i].orderDetailList[0]);
				}
			}
			for (let y = 0; y < this.goldmedal.length; y++) {
				if (!this.useralllist[y]) {
					this.useralllist[y] = {};
				}
				if (!this.goldmedal[y].orderDetailList) continue;
				
				// let item = {
				// 	...this.useralllist[y],
				// 	...this.goldmedal[y],
				// 	phoneNumber : this.goldmedal[y].addressPhoneNumber,
				// 	lengthnum : this.goldmedal[y].orderDetailList.length
				// }
				// this.useralllist[y] = item;
				this.useralllist[y].orderNumber = this.goldmedal[y].orderNumber;
				this.useralllist[y].status = this.goldmedal[y].status;
				this.useralllist[y].addressUserName = this.goldmedal[y].addressUserName;
				this.useralllist[y].phoneNumber = this.goldmedal[y].addressPhoneNumber;
				this.useralllist[y].paytype = this.goldmedal[y].paytype;
				this.useralllist[y].salesAmount = this.goldmedal[y].salesAmount;
				this.useralllist[y].lengthnum = this.goldmedal[y].orderDetailList.length;
				let item = this.goldmedal[y];
				let orderDetail = item.orderDetailList[0];
				this.useralllist[y].payInfo = [
					{
						basePoint: item.item,
						productName: orderDetail.productName,
						buyCount: orderDetail.pcs,
						productCode: orderDetail.productCode,
						payAmount: orderDetail.ecPrice,
						memberId: this.userInfo.id,
						phoneNumber: item.phoneNumber,
						orderAddress: {
							addressPhoneNumber: item.addressPhoneNumber,
							addressUserName: item.addressUserName,
							addressProvinceName: item.addressProvinceName,
							addressCityName: item.addressCityName,
							addressCountyName:item.addressCountyName,
							addressDetailInfo: item.addressDetailInfo,
						}
					}
				]
				
			}

			if (this.userstype == 1) {
				this.useralllist = this.obligation;
			} else if (this.userstype == 2) {
				this.useralllist = this.pending;
			} else if (this.userstype == 0) {
				this.useralllist = this.allmessage;
			} else if (this.userstype == 3) {
				this.useralllist = this.receiving;
			}
			/* 过滤空的数据 */
			let filterArr = this.useralllist.filter(val => {
				return val != undefined;
			});
			console.log(this.useralllist,'2222');
			this.useralllist = filterArr;
		},
		//订单立即支付
		async getwei(item) {
			let payType = this.util.pickPaytype();
			let data = await this.repayOrde(item.orderNumber, payType);
			if (data.code == 1) {
				let userPayData = {
					userprice: item.salesAmount,
					orderId: item.orderNumber,
					userinformation: item.addressUserName + ' ' + item.phoneNumber,
					wxPay: data.msg
				};
				this.$router.push({
					path: '/personal/userpay',
					query: {
						userData: item.orderNumber,
						stype: 1,
						userPayData: JSON.stringify(userPayData)
					}
				});
			} else {
				this.$message({
					type: 'error',
					message: '订单数据错误，请联系客服进行处理'
				});
			}
		},
		async repayOrde(ordernumber) {
			let payType = this.util.pickPaytype();
			let res = await repayOrde(ordernumber, payType);
			if (res) {
				return res;
			}
		},
		usertiaozhuan(item) {
			this.$router.push({
				path: '/myorder/usertion',
				query: {
					stype: item.status,
					orderNumber: item.orderNumber
				}
			});
		},

		async canceldanhao(orderNumber) {
			let data = await canceldanhao(this.userdata, orderNumber);
			if (data) {
				this.$message({
					type: 'warning',
					message: '取消订单成功'
				});
				/* 这个在全部变量去除的时候 记得加 */
				//      setTimeout(() => {
				//          this.indet(this.userdata);
				//          this.activeIndex=0;
				//          this.useralllist=[];
				// console.log('2222');
				//      }, 500);
			}
		},

		userpay(item, index) {
			if (item.status == 0) {
				if (confirm('确认取消该订单嘛？')) {
					this.canceldanhao(item.orderNumber);
					setTimeout(() => {
						this.indet(this.userdata);
						this.useralllist = [];
						this.alllist = [];
						this.allmessage = [];
						this.obligation = [];
						this.receiving = [];
						this.pending = [];
					}, 500);
				}
			} else if (item.status == 1) {
				//确认收货
			}

			if (item.buttontitle == '立即支付') {
				this.$router.push({
					path: '/personal/userpay',
					query: {
						stype: 1
					}
				});
			} else if (item.status == 3) {
				this.$router.push({
					path: '/productdetails/producted',
					query: {
						stype: 1,
						productCode: item.productId
					}
				});
			}
		},
		selectGoods(item, index) {
			let list = [];
			this.activeIndex = index;
			if (item.title == '待付款') {
				list = this.obligation;
			} else if (item.title == '待收货') {
				list = this.receiving;
			} else if (item.title == '待发货') {
				this.useralllist = this.pending;
				list = this.pending;
			} else if (item.title == '全部') {
				list = this.alllist;
			}
			this.useralllist = [];
			for (var i = 0; i < this.useralllist.length; i++) {
				this.useralllist[i].orderNumber = this.goldmedal[i].orderNumber;
				this.useralllist[i].status = this.goldmedal[i].status;
				this.useralllist[i].addressUserName = this.goldmedal[i].addressUserName;
				this.useralllist[i].phoneNumber = this.goldmedal[i].phoneNumber;
				this.useralllist[i].salesAmount = this.goldmedal[i].salesAmount;
				this.useralllist[i].lengthnum = this.goldmedal[i].orderDetailList.length;
				let item = this.goldmedal[i];
				let orderDetail = item.orderDetailList[0];
				this.useralllist[y].payInfo = [
					{
						basePoint: item.item,
						productName: orderDetail.productName,
						buyCount: orderDetail.pcs,
						productCode: orderDetail.productCode,
						payAmount: orderDetail.ecPrice,
						memberId: this.userInfo.id,
						phoneNumber: item.phoneNumber,
						orderAddress: {
							addressPhoneNumber: item.addressPhoneNumber,
							addressUserName: item.addressUserName,
							addressProvinceName: item.addressProvinceName,
							addressCityName: item.addressCityName,
							addressCountyName:item.addressCountyName,
							addressDetailInfo: item.addressDetailInfo,
						}
					}
				]
				
				
			}
			this.useralllist = list.filter(val => {
				return val != undefined;
			});
		},
		async userfind(item) {
			// let params = [
			// 	{
			// 		basePoint: 0,
			// 		productName: '幼猫全价粮',
			// 		buyCount: 1,
			// 		productCode: '2003004003',
			// 		payAmount: 90,
			// 		memberId: 886750,
			// 		phoneNumber: '15766132405',
			// 		orderAddress: {
			// 			addressPhoneNumber: '15766132404',
			// 			addressUserName: '测试',
			// 			addressProvinceName: '安徽省',
			// 			addressCityName: '蚌埠市',
			// 			addressCountyName: '怀远县',
			// 			addressDetailInfo: '12123134444'
			// 		}
			// 	}
			// ];
			// console.log(item,'222');
			// return false;
			let { msg } = await generateOrderWX(item.payInfo, 1);
			this.qrtext = msg;
			// return false;
			this.paytypeWarning = this.util.checkPaytypeValidated(item.paytype);
			this.showPaytypeWarning = !this.paytypeWarning.result;
			let user = this.userInfo;
			if (this.paytypeWarning.result) {
				if (item.status == 0) {
					_hmt.push([
						'_trackCustomEvent',
						'order_repay',
						{
							status: 'success',
							member_id: user.id
						}
					]);
					this.getwei(item);
				} else {
					this.$router.push({
						path: '/myorder/usertion',
						query: {
							stype: item.status,
							orderNumber: item.orderNumber
						}
					});
				}
			} else {
				_hmt.push([
					'_trackCustomEvent',
					'order_repay',
					{
						status: 'fail',
						member_id: user.id
					}
				]);
			}
		},
		usertwo() {
			this.$router.push({
				path: '/myorder/userrecord',
				query: {
					stype: 1
				}
			});
		},
		/* 页面初始化设置数据 */
		resetData() {
			let stype = this.$route.query.stype;
			if (this.userInfo && this.loginState) {
				this.indet(this.userdata, stype);
			} else {
				if (!this.loginState) {
					this.$message({
						type: 'warning',
						message: '请先去登录'
					});
				}
				return;
			}
		}
	}
};
</script>

<style lang="less" scoped>
@import url('../../assets/css/orderquantity.less');
</style>
