<template>
	<div class="trade-container">
		<h3 class="title">填写并核对订单信息</h3>
		<div class="content">
			<h5 class="receive">收件人信息</h5>
			<div class="address clearFix" v-for="(item, index) in addressmessage" :key="index">
				<!-- :class="{ selected: currentindex == index }" -->
				<span class="username" :class="{ selected: item.isDefault == 1 }">{{ item.consignee }}</span>
				<p @click="isSelected(item, addressmessage)">
					<span class="s1">{{ item.fullAddress }}</span>
					<span class="s2">{{ item.phoneNum }}</span>
					<span class="s3" v-if="item.isDefault == 1">默认地址</span>
				</p>
			</div>
			<div class="line"></div>
			<h5 class="pay">支付方式</h5>
			<div class="address clearFix" @click="chufa">
				<span class="username" :class="{ selected: currentindex == 1 }" :data-index="1">在线支付</span>
				<span class="username" style="margin-left: 5px" :class="{ selected: currentindex == 2 }" :data-index="2">货到付款</span>
			</div>
			<div class="line"></div>
			<h5 class="pay">送货清单</h5>
			<div class="way">
				<h5>配送方式</h5>
				<div class="info clearFix">
					<span class="s1">天天快递</span>
					<p>配送时间：预计8月10日（周三）09:00-15:00送达</p>
				</div>
			</div>
			<div class="detail">
				<h5>商品清单</h5>
				<ul class="list clearFix" v-for="(a, i) in detailArrayList" :key="i">
					<li>
						<img :src="a.imgUrl" alt="" class="image" />
					</li>
					<li>
						<p>{{ a.skuName }}</p>
						<h4>7天无理由退货</h4>
					</li>
					<li>
						<h3>￥{{ a.orderPrice }}</h3>
					</li>
					<li>X{{ a.skuNum }}</li>
					<li>有货</li>
				</ul>
			</div>
			<div class="bbs">
				<h5>买家留言：</h5>
				<textarea placeholder="建议留言前先与商家沟通确认" class="remarks-cont" v-model="textarea"></textarea>
			</div>
			<div class="line"></div>
			<div class="bill">
				<h5>发票信息：</h5>
				<div>普通发票（电子） 个人 明细</div>
				<h5>使用优惠/抵用</h5>
			</div>
		</div>
		<div class="money clearFix">
			<ul>
				<li>
					<b
						><i>{{ shoptotal }}</i
						>件商品，总商品金额</b
					>
					<span>¥{{ pricetotal | numFilter }}</span>
				</li>
				<li>
					<b>返现：</b>
					<span>0.00</span>
				</li>
				<li>
					<b>运费：</b>
					<span>0.00</span>
				</li>
			</ul>
		</div>
		<div class="trade">
			<div class="price">
				应付金额:　<span>¥{{ pricetotal | numFilter }}</span>
			</div>
			<div class="receiveInfo">
				寄送至:
				<span>{{ isSelecteditem.fullAddress }}</span>
				收货人：<span>{{ isSelecteditem.consignee }}</span>
				<span>{{ isSelecteditem.phoneNum }}</span>
			</div>
		</div>
		<div class="sub clearFix">
			<!-- to="/pay" -->
			<a class="subBtn" @click.prevent="ordemessage">提交订单</a>
		</div>
	</div>
</template>

<script>
import { mapState, mapGetters } from 'vuex'
export default {
	name: 'Trade',
	mounted() {
		this.$store.dispatch('getaddress')
		this.$store.dispatch('getordermessage')
	},
	data() {
		return {
			currentindex: 1,
			// 收集买家留言
			textarea: '',
			// 订单号
			orderID: ''
		}
	},
	computed: {
		...mapState({
			addressmessage: (state) => {
				return state.address.addressmessage || []
			},
			ordermessage: (state) => {
				return state.address.ordermessage || {}
			}
		}),
		...mapGetters(['detailArrayList']),
		// currentitem() {
		// 	return this.addressmessage[this.currentindex]
		// }
		// 当前选中的一项
		isSelecteditem() {
			// 通过find找出符合条件的那一项
			// {}：至少是一个空对象
			return this.addressmessage.find((item) => item.isDefault == 1) || {}
		},
		// 计算商品的总件数
		shoptotal() {
			return this.detailArrayList.reduce((tot, item) => (tot += item.skuNum), 0)
		},
		// 计算商品的总价格
		pricetotal() {
			return this.detailArrayList.reduce((tot, item) => (tot += item.skuNum * item.orderPrice), 0)
		}
	},
	// 过滤器
	filters: {
		// 保留两位小数
		numFilter(value) {
			let newVal = parseInt(value).toFixed(2)
			return newVal
		}
	},
	methods: {
		// // 切换selected被选中的项
		// isSelected(index) {
		// 	this.currentindex = index
		// }
		isSelected(item, addressmessage) {
			// 第一个参数是当前项,addressmessage是所有项
			// 排他思想:遍历所有项都变成0，自己变成1
			addressmessage.forEach((item) => (item.isDefault = 0))
			item.isDefault = 1
		},
		chufa(event) {
			// 通过自定义属性+事件委派:解决需要绑定多个事件的问题
			// event.target.dataset能获取到当前节点下所有的自定义属性
			this.currentindex = event.target.dataset.index
		},
		async ordemessage() {
			// 交易编号
			const { tradeNo } = this.ordermessage.tradeNo
			// 交易数据
			let params = {
				// 姓名
				consignee: this.isSelecteditem.consignee,
				// 电话
				consigneeTel: this.isSelecteditem.phoneNum,
				// 地址
				deliveryAddress: this.isSelecteditem.fullAddress,
				// 支付方式 (ONLINE代表在线)
				paymentWay: 'ONLINE',
				// 备注
				orderComment: this.textarea,
				// 存储多个商品对象的数组
				orderDetailList: this.detailArrayList
			}
			let result = await this.$API.postorder(tradeNo, params)
			console.log(result)
			// 提交订单成功返回一个订单号 要传递给pay支付页
			if (result.code == 200) {
				alert('提交订单成功')
				this.orderID = result.data
				// 路由传参 +路由传参  1.params 2.query 3.会话存储
				this.$router.push({ name: 'pay', query: { orderID: this.orderID } })
			} else if (result.code == 201) {
				alert(result.message)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.image {
	width: 100px;
	height: 100px;
}
.trade-container {
	.title {
		width: 1200px;
		margin: 0 auto;
		font-size: 14px;
		line-height: 21px;
	}

	.content {
		width: 1200px;
		margin: 10px auto 0;
		border: 1px solid rgb(221, 221, 221);
		padding: 25px;
		box-sizing: border-box;

		.receive,
		.pay {
			line-height: 36px;
			margin: 18px 0;
		}

		.address {
			padding-left: 20px;
			margin-bottom: 15px;

			.username {
				float: left;
				width: 100px;
				height: 30px;
				line-height: 30px;
				text-align: center;
				border: 1px solid #ddd;
				position: relative;
			}

			.username::after {
				content: '';
				display: none;
				width: 13px;
				height: 13px;
				position: absolute;
				right: 0;
				bottom: 0;
				background: url(./images/choosed.png) no-repeat;
			}

			.username.selected {
				border-color: #e1251b;
			}

			.username.selected::after {
				display: block;
			}

			p {
				width: 610px;
				float: left;
				line-height: 30px;
				margin-left: 10px;
				padding-left: 5px;
				cursor: pointer;

				.s1 {
					float: left;
				}

				.s2 {
					float: left;
					margin: 0 5px;
				}

				.s3 {
					float: left;
					width: 56px;
					height: 24px;
					line-height: 24px;
					margin-left: 10px;
					background-color: #878787;
					color: #fff;
					margin-top: 3px;
					text-align: center;
				}
			}

			p:hover {
				background-color: #ddd;
			}
		}

		.line {
			height: 1px;
			background-color: #ddd;
		}

		.way {
			width: 1080px;
			height: 110px;
			background: #f4f4f4;
			padding: 15px;
			margin: 0 auto;

			h5 {
				line-height: 50px;
			}

			.info {
				margin-top: 20px;

				.s1 {
					float: left;
					border: 1px solid #ddd;
					width: 120px;
					height: 30px;
					line-height: 30px;
					text-align: center;
					margin-right: 10px;
				}

				p {
					line-height: 30px;
				}
			}
		}

		.detail {
			width: 1080px;

			background: #feedef;
			padding: 15px;
			margin: 2px auto 0;

			h5 {
				line-height: 50px;
			}

			.list {
				display: flex;
				justify-content: space-between;

				li {
					line-height: 30px;

					p {
						margin-bottom: 20px;
					}

					h4 {
						color: #c81623;
						font-weight: 400;
					}

					h3 {
						color: #e12228;
					}
				}
			}
		}

		.bbs {
			margin-bottom: 15px;

			h5 {
				line-height: 50px;
			}

			textarea {
				width: 100%;
				border-color: #e4e2e2;
				line-height: 1.8;
				outline: none;
				resize: none;
			}
		}

		.bill {
			h5 {
				line-height: 50px;
			}

			div {
				padding-left: 15px;
			}
		}
	}

	.money {
		width: 1200px;
		margin: 20px auto;

		ul {
			width: 220px;
			float: right;

			li {
				line-height: 30px;
				display: flex;
				justify-content: space-between;

				i {
					color: red;
				}
			}
		}
	}

	.trade {
		box-sizing: border-box;
		width: 1200px;
		padding: 10px;
		margin: 10px auto;
		text-align: right;
		background-color: #f4f4f4;
		border: 1px solid #ddd;

		div {
			line-height: 30px;
		}

		.price span {
			color: #e12228;
			font-weight: 700;
			font-size: 14px;
		}

		.receiveInfo {
			color: #999;
		}
	}

	.sub {
		width: 1200px;
		margin: 0 auto 10px;

		.subBtn {
			float: right;
			width: 164px;
			height: 56px;
			font: 700 18px '微软雅黑';
			line-height: 56px;
			text-align: center;
			color: #fff;
			background-color: #e1251b;
		}
	}
}
</style>
