<template>
	<div class="user-main">
		<Myheader></Myheader>
		<div class="rc-top"></div>
		<div class="rc-main" v-for="(item, index) in goldmedal" :key="item.id">
			<div class="online bold"></div>
			<div class="rc-receiving useruantity">
				<em>{{ item.status == '0' ? '待付款' : item.status == '1' ? '待收货' : item.status == '2' ? '已完成' : item.status == '3' ? '已取消' : '异常订单' }}</em>
				<span>{{ orderstatus }}</span>
			</div>
			<div class="online bold"></div>
			<div class="delivery useruantity" v-if="isshow">
				<div class="to-delivery">
					<img src="../../static/images/delivery.png" alt="" />
					<span>{{ trackingstates }}</span>
					<!-- <i>2021-1-21</i> -->
				</div>
				<div class="bo-delivery">
					<!-- <span> 广州天河—刘某某【15124617917】正在派送中</span>     -->
					<!-- {{ logisticsCompany }}              -->
				</div>
				<div class="viewdetails">
					<span>查看详情</span>
					<img :src="leftico" alt="" />
				</div>
			</div>
			<div class="online bold" v-if="isshow"></div>
			<div class="mypersonal useruantity">
				<div class="my-delivery">
					<span>{{ item.addressUserName }}</span>
					<i>{{ item.addressPhoneNumber }}</i>
				</div>
				<div class="per-delivery">
					<span>{{ item.addressProvinceName }}{{ item.addressCityName }}{{ item.addressCountyName }}</span>
				</div>
			</div>
			<div class="online bold"></div>
			<div>
				<div class="rc-center">
					<div class="rc-usermain useruantity" v-for="(userlist, index) in item.orderDetailList" :key="index">
						<div class="rc-image"><img :src="userlist.picFile" alt="" /></div>
						<div class="rc-right">
							<div class="rc-usercenter">
								<em>{{ userlist.productName }}</em>
								<div class="rc-userright">
									<span>规格:{{ userlist.specifications }}</span>
								</div>
							</div>
							<div class="rc-userbottom">
								<span>数量:{{ userlist.pcs }}件</span>
								<i>￥{{ userlist.ecPrice }}</i>
							</div>
							<!-- <div class="rc-userbottomm">
                <i>￥{{ item.userprice }}</i>
                <span>{{ item.orderstype }}</span>
                <i>￥{{ item.userprice }}</i>
              </div> -->
						</div>
					</div>
					<div class="online bold"></div>
				</div>
				<div class="rc-merchandise ">
					<div class="rc-merchandise ">
						<ul>
							<li>
								<span>商品总价:</span>
								<i>￥{{ item.salesAmount }}</i>
							</li>
							<li>
								<span>配送费用:</span>
								<i>{{ shopprice.distribution }}</i>
							</li>
							<li>
								<span>活动促销:</span>
								<i>{{ shopprice.promotion }}</i>
							</li>
							<li>
								<span>实际付款:</span>
								<i>{{ shopprice.payment }}</i>
							</li>
						</ul>
					</div>
				</div>

				<div class="rc-payment">
					<div class="rc-payment">
						<ul>
							<li>
								<span>订单编号:</span>
								<i>{{ item.orderNumber }}</i>
							</li>
							<li>
								<span>下单时间:</span>
								<i>{{ logisticsDate }}</i>
							</li>
							<li>
								<span>付款方式:</span>
								<i>{{ information.paytypeText }}</i>
							</li>
							<li>
								<span>配送方式:</span>
								<i>{{ information.distribution }}</i>
							</li>
							<li>
								<span>快递单号:</span>
								<div class="u-trackingnumber">
									<i>{{ logisticsNumber }}</i>
									<!-- <img :src="information.catimage" alt=""> -->
								</div>
							</li>
						</ul>
					</div>

					<div class="rc-foot">
						<div class="rc-foo">
							<div style="">
								<i>合计金额:</i>
								<em>￥{{ usersalesAmount }}</em>
							</div>
							<div class="rc-md-up ts-button-container rc-padding-y--md">
								<span class="ts-standard-btn ts-standard-btn--two" @click="userpay(item)">{{ customer }}</span>
								<span class="ts-standard-btn" @click="onceagain(item)">{{ payorsucess }}</span>
							</div>
						</div>
					</div>
				</div>
			</div>
		</div>
		<div class="rc-full-width rc-md-down ts-button-container rc-padding-y--md rc-margin-top--md">
			<span class="ts-standard-btn ts-standard-btn--two" @click="userpay(item)">{{ customer }}</span>
			<i class="ts-standard-btn" @click="onceagain()">{{ payorsucess }}</i>
		</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>
		</el-dialog>
		<MyFooter></MyFooter>
	</div>
</template>

<script>
import Myheader from '~/components/header.vue';
import { mapMutations, mapState } from 'vuex';
import MyFooter from '~/components/rc-footer.vue';
import Vue from 'vue';
let vm = new Vue();
import formatConversion from '../../static/js/date';
import { userin, selectaddress, canceldanhao, generateOrderWX, repayOrde } from '../../ajax/getData';

import util from '@/ajax/util';

export default {
	data() {
		return {
			util,
			paytypeWarning: { result: true, message: '' },
			showPaytypeWarning: false,
			goldmedal: [],
			userproductId: '',
			logisticsDate: '',
			addressPhoneNumber: '',
			
			logisticsNumber: '',
			customer: '', //联系客服或者取消订单
			payorsucess: '', //立即支付或者再次购买，
			addressUserName: '',
			logisticsCompany: '', //物流公司
			orderstatus: '',
			goldastates: '',

			userisdelivery: '待收货',
			userdelivery: '派送中',
			isshow: true,
			usersalesAmount: '',
			leftico: require('../../assets/image/rc-left.png'),
			orderNumber: '',
			// userdata: '',
			// usermessage: null,
			// userid: null,
			// userphone: '',
			trackingstates: '', //运输状态
			useralllist: [],
			delivery: [],

			useraddress: [],
			shopprice: {},
			information: {
				paytypeText: '',
				distribution: '快递',
				catimage: require('../../assets/image/rc-left.png')
			}
		};
	},
	methods: {
		...mapMutations(['checkIsLogin']),
		refreshDesktopNav: function() {
			RCDL.navigation.currentState = null;
			RCDL.navigation.rebuild();
		},
		//取消订单
		async canceldanhao(orderNumber) {
			let data = await canceldanhao(this.userphone, this.orderNumber);
			if (data) {
				this.$message({
					type: 'warning',
					message: '取消订单成功'
				});
				setTimeout(() => {
					this.$router.push({
						path: '/personal/useraddress',
						query: {
							stype: 1
						}
					});
				}, 500);
			}
		},
		userpay() {
			if (this.goldastates == 0) {
				if (confirm('确认要取消该订单嘛？')) {
					this.canceldanhao();
				}
			} else if ((this.customer = '联系客服申请售后')) {
				var option = {
					customer: {
						id: '',
						name: '',
						email: '',
						mobile: '',
						memberId: this.userdata.id
					}
				};
				dis_livchat(option);
			}
		},
		//订单支付和再次购买
		onceagain(item) {
			this.paytypeWarning = this.util.checkPaytypeValidated(this.paytype);
			this.showPaytypeWarning = !this.paytypeWarning.result;
			if (this.paytypeWarning.result) {
				if (this.payorsucess == '立即支付') {
					this.getwei(item);
				} else {
					_hmt.push([
						'_trackCustomEvent',
						'order_repay',
						{
							status: 'fail'
						}
					]);
					this.$router.push({
						path: '/productdetails/producted',
						query: {
							stype: 1,
							productCode: this.userproductId
						}
					});
				}
			}
		},
		async orderquantity(orderNumber) {
			let data = await userin(orderNumber);
			if (data) {
				this.goldmedal = data;
				for (let i = 0; i < this.goldmedal.length; i++) {
					this.goldastates = this.goldmedal[i].status;
					this.userproductId = this.goldmedal[i].orderDetailList[0].productId;
					this.logisticsNumber = this.goldmedal[i].orderDetailList[0].logisticsNumber; //物流单号
					this.trackingstates = this.goldmedal[i].orderDetailList[0].status; //运输状态
					if (this.trackingstates == 0) {
						this.trackingstates = '运输中';
					} else if (this.trackingstates == 1) {
						this.trackingstates = '已签收';
					} else if (this.trackingstates == 2) {
						this.trackingstates = '未发货';
					}
					this.logisticsDate = this.formatConversion(this.goldmedal[i].orderDate); //时间戳
					this.logisticsCompany = this.goldmedal[i].orderDetailList[0].logisticsCompany; //物流公司
					this.orderNumber = this.goldmedal[i].orderNumber;
					this.usersalesAmount = this.goldmedal[i].salesAmount;
					this.addressUserName = this.goldmedal[i].addressUserName;
					this.addressPhoneNumber = this.goldmedal[i].addressPhoneNumber;
					this.paytype = this.goldmedal[i].paytype;
					this.information.paytypeText = this.util.getTextByPaytype(this.paytype);
					this.updateButtonByOrderStatus(this.goldmedal[i].status);
				}
			}
		},
		//订单立即支付
		async getwei(user) {
			let data = await this.repayOrde(this.orderNumber);
			let loginedUser = this.$store.state.userInfo;
			if (data.code == 1) {
				let userPayData = {
					userprice: this.usersalesAmount,
					orderId: this.orderNumber,
					userinformation: this.addressUserName + ' ' + this.addressPhoneNumber,
					wxPay: data.msg
				};
				_hmt.push([
					'_trackCustomEvent',
					'order_repay',
					{
						status: 'success',
						member_id: loginedUser.data.id
					}
				]);
				this.$router.push({
					path: '/personal/userpay',
					query: {
						userData: this.orderNumber,
						stype: 1,
						userPayData: JSON.stringify(userPayData)
					}
				});
			} else {
				_hmt.push([
					'_trackCustomEvent',
					'order_repay',
					{
						status: 'fail - ' + this.orderNumber,
						member_id: loginedUser.data.id
					}
				]);
				this.$message({
					type: 'error',
					message: '订单数据错误，请联系客服进行处理'
				});
			}
		},
		async repayOrde(ordernumber) {
			let payType = this.util.pickPaytype();
			let res = await repayOrde(ordernumber, payType);
			if (res) {
				return res;
			}
		},
		async editaddress(user) {
			//  user.data.id=844350;
			let data = await selectaddress(this.userid);
			let list = [];
			this.useraddress = data.data;
			for (let i = 0; i < this.useraddress.length; i++) {
				if (this.useraddress[i].isDefault == true) {
					list.push(this.useraddress[i]);
				}
			}
			this.useraddress = list;
			console.log(this.useraddress[0].recipient);

			// console.log(this.list);
		},
		updateButtonByOrderStatus(status) {
			if (status == 2) {
				this.orderstatus = '您的订单已完成';
				this.isshow = false;
				this.userisdelivery = '待发货';
				this.customer = '联系客服申请售后';
				this.payorsucess = '再次购买';
			} else if (status == 0) {
				this.orderstatus = '您的订单还未付款，请尽快付款！';
				this.isshow = false;
				this.userisdelivery = '待付款';
				this.customer = '取消订单';
				this.payorsucess = '立即支付';
			} else if (status == 1) {
				this.orderstatus = '您的订单已发出，请耐心等候。';
				this.isshow = true;
				this.userisdelivery = '待收货';
				this.customer = '联系客服申请售后';
				this.payorsucess = '再次购买';
			} else if (status == 3) {
				this.orderstatus = '您的订单已取消！';
				this.isshow = false;
				this.userisdelivery = '已取消';
				this.customer = '联系客服申请售后';
				this.payorsucess = '再次购买';
			}
		},
		resetData(){
			if(this.userdata && this.loginState){
				this.editaddress(this.userid);
				this.orderNumber = this.$route.query.orderNumber;
				this.orderquantity(this.orderNumber);
			}
		}
	},
	mounted() {
		this.resetData();
		return false;
		// this.checkIsLogin();
		// this.userdata = this.$store.state.userInfo;
		// this.usermessage = JSON.parse(localStorage.getItem('userInfo'));
		// this.userid = this.usermessage.data.id;
		// this.userphone = this.usermessage.data.mobile;
		// this.editaddress(this.userid);
		// this.orderNumber = this.$route.query.orderNumber;
		// this.orderquantity(this.orderNumber);
	},
	components: {
		Myheader,
		MyFooter
	},
	computed : {
		...mapState({
			userdata : state => state.user.userInfo,
			usermessage : state => state.user.userInfo,
			userid :  state => state.user.userInfo.id,
			userphone :  state => state.user.userInfo.mobile,
			loginState : state => state.login.loginState,
		})
	},
	watch : {
		userdata(){
			this.resetData();
		}
	}
};
</script>

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