<template>
	<div class="cart">
		<h4>全部商品</h4>
		<div class="cart-main">
			<div class="cart-th">
				<div class="cart-th1">全部</div>
				<div class="cart-th2">商品</div>
				<div class="cart-th3">单价（元）</div>
				<div class="cart-th4">数量</div>
				<div class="cart-th5">小计（元）</div>
				<div class="cart-th6">操作</div>
			</div>
			<div class="cart-body">
				<ul class="cart-list" v-for="(item, index) in cartInfoList" :key="index">
					<li class="cart-list-con1">
						<input type="checkbox" name="chk_list" :checked="item.isChecked == 1" @change="changeshopcheck($event, item)" />
					</li>
					<li class="cart-list-con2">
						<img :src="item.imgUrl" />
						<div class="item-msg">{{ item.skuName }}</div>
					</li>
					<li class="cart-list-con4">
						<span class="price">{{ item.skuPrice }}.00</span>
					</li>
					<li class="cart-list-con5">
						<a href="javascript:void(0)" class="mins" @click="hanlder('jian', -1, item)">-</a>
						<input autocomplete="off" type="text" :value="item.skuNum" minnum="1" class="itxt" @change="hanlder('input', $event.target.value * 1, item)" />
						<a href="javascript:void(0)" class="plus" @click="hanlder('add', 1, item)">+</a>
					</li>
					<li class="cart-list-con6">
						<span class="sum">{{ item.skuNum * item.skuPrice }}</span>
					</li>
					<li class="cart-list-con7">
						<button class="sindelet" type="warn" @click="deletecart(item.skuId)">删除</button>
						<br />
						<button>移到收藏</button>
					</li>
				</ul>
			</div>
		</div>
		<div class="cart-tool">
			<div class="select-all">
				<input class="chooseAll" type="checkbox" :checked="isAllcheck && this.cartInfoList.length != 0" @change="isAllcheckchange" />
				<span>全选</span>
			</div>
			<div class="option">
				<a @click.prevent="deletecheck">删除选中的商品</a>
				<a>移到我的关注</a>
				<a>清除下柜商品</a>
			</div>
			<div class="money-box">
				<div class="chosed">
					已选择 <span>{{ totalNum }}</span
					>件商品
				</div>
				<div class="sumprice">
					<em>总价（不含运费） ：</em>
					<i class="summoney">{{ totalMoney }}</i>
				</div>
				<div class="sumbtn">
					<router-link class="sum-btn" to="/trade">结算</router-link>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex'
import _ from 'lodash' //依赖包已经有了
import throttle from 'lodash/throttle' //节流

export default {
	name: 'ShopCart',
	computed: {
		...mapGetters(['cartlist', 'aa']),
		// 组件接收来自vuex的数据也有可能是underfind
		cartInfoList() {
			return this.cartlist.cartInfoList || []
		},
		// 计算所有商品购买的总价
		totalMoney() {
			return this.cartInfoList.reduce((tot, item) => (tot += item.skuNum * item.skuPrice), 0)
			// let sum=0
			// this.cartInfoList.forEach(item=>{
			// 	sum+=item.skuNum*item.skuPrice
			// })
		},
		// 计算所有商品总件数
		totalNum() {
			return this.cartInfoList
				.filter((item, index) => item.isChecked == 1)
				.reduce((tot, item) => {
					return (tot += item.skuNum)
				}, 0)
		},
		// 全选按钮
		isAllcheck() {
			// 遍历数组所有的元素,只要有一个不符合条件,就会返回false
			return this.cartInfoList.every((item) => item.isChecked == 1)
		}
	},
	mounted() {
		this.getdata()
	},
	methods: {
		getdata() {
			this.$store.dispatch('getShopcartlist1')
		},
		hanlder: throttle(async function (type, chuandinum, item) {
			// type为了区分这三个元素 加 剑 input改变 都使用了同一个事件
			let num = chuandinum
			if (type == 'add') {
			} else if (type == 'jian') {
				if (item.skuNum <= 1) {
					alert('不能再减啦')
					num = 0
				}
			} else if (type == 'input') {
				console.log(typeof chuandinum)
				num = chuandinum - item.skuNum
				// 判断用户输入
				// 小于1,字符串
				if (chuandinum < 1 || isNaN(chuandinum)) {
					alert('服务器识别到你输入小于1和字符串的数!!!!!!!!!')
					num = 0 //给num传值为0  为0的话就是原封不动
				}
				// 出现小数点
				if (String(chuandinum).indexOf('.') != -1) {
					alert('服务器识别到你输入小于1和字符串的数!!!!!!!!!')
					num = parseInt(chuandinum) - item.skuNum
					// var num=0    //给num传值为0  为0的话就是原封不动
				}
			}
			// 3.try..catch主要被async和await使用,
			// 因为await等待的只是resolve结果,不能等待reject结果,
			// 失败了会直接抛出异常,所以需要用try--catch--捕获错误
			// 并且能够提升async和await回调函数的效率
			try {
				await this.$store.dispatch('addOrUpdateShopCart', { skuId: item.skuId, skuNum: num })
				this.getdata()
			} catch (error) {
				alert(error.message)
			}
		}, 500),
		// 根据商品id删除对应的数据
		async deletecart(id) {
			// 用try..catch主要针对的是async和await
			// 处理服务器的报错信息,
			// await等待的只是resolve成功的结果
			// 不能等待reject结果,一旦不用try,catch就会报错
			// 加了就能够自定义返回失败的报错信息
			try {
				// 用result接收成功返回的值
				let result = await this.$store.dispatch('deleteshopcart', id)
				console.log(result)
				this.getdata()
			} catch (error) {
				// faile 后台自定义失败的值
				alert(error.message)
			}
		},
		// 根据商品id切换商品的选中状态
		async changeshopcheck(e, item) {
			// e.target.checked 获取当前标签的选中状态
			let isCheckedx = e.target.checked ? '1' : '0'
			try {
				// 修改数据成功   result是返回Promise成功函数
				let result = await this.$store.dispatch('changeshopcartcheck', { skuID: item.skuId, isChecked: isCheckedx })
				this.getdata()
				alert(result)
			} catch (error) {
				// 修改数据失败  error.message是返回Promise失败函数
				alert(error.message)
			}
		},
		// 全选按钮修改所有商品的选中状态
		async isAllcheckchange(e) {
			let isChecked = e.target.checked ? '1' : '0'
			// try...catch是配合await使用的
			try {
				await this.$store.dispatch('isAllcheckchange', isChecked)
				this.getdata()
			} catch (error) {
				alert(error.message)
			}
		},
		// 删除选中的所有商品
		async deletecheck() {
			// try...catch捕获服务器的错误
			try {
				// 这里写result就是为了接收promise返回的成功结果
				let result = await this.$store.dispatch('deleteAllshopcart')
				alert(result)
				this.getdata()
			} catch (error) {
				alert(error.message)
			}
		}
	}
}
</script>

<style lang="less" scoped>
.cart {
	width: 1200px;
	margin: 0 auto;

	h4 {
		margin: 9px 0;
		font-size: 14px;
		line-height: 21px;
	}

	.cart-main {
		.cart-th {
			background: #f5f5f5;
			border: 1px solid #ddd;
			padding: 10px;
			overflow: hidden;

			& > div {
				float: left;
			}

			.cart-th1 {
				width: 25%;

				input {
					vertical-align: middle;
				}

				span {
					vertical-align: middle;
				}
			}

			.cart-th2 {
				width: 25%;
			}

			.cart-th3,
			.cart-th4,
			.cart-th5,
			.cart-th6 {
				width: 12.5%;
			}
		}

		.cart-body {
			margin: 15px 0;
			border: 1px solid #ddd;

			.cart-list {
				padding: 10px;
				border-bottom: 1px solid #ddd;
				overflow: hidden;

				& > li {
					float: left;
				}

				.cart-list-con1 {
					width: 15%;
				}

				.cart-list-con2 {
					width: 35%;

					img {
						width: 82px;
						height: 82px;
						float: left;
					}

					.item-msg {
						float: left;
						width: 150px;
						margin: 0 10px;
						line-height: 18px;
					}
				}

				.cart-list-con3 {
					// width: 20.8333%;

					.item-txt {
						text-align: center;
					}
				}

				.cart-list-con4 {
					width: 10%;
				}

				.cart-list-con5 {
					width: 17%;

					.mins {
						border: 1px solid #ddd;
						border-right: 0;
						float: left;
						color: #666;
						width: 6px;
						text-align: center;
						padding: 8px;
					}

					input {
						border: 1px solid #ddd;
						width: 40px;
						height: 33px;
						float: left;
						text-align: center;
						font-size: 14px;
					}

					.plus {
						border: 1px solid #ddd;
						border-left: 0;
						float: left;
						color: #666;
						width: 6px;
						text-align: center;
						padding: 8px;
					}
				}

				.cart-list-con6 {
					width: 10%;

					.sum {
						font-size: 16px;
					}
				}

				.cart-list-con7 {
					width: 13%;
					display: flex;
					width: 119px;
					justify-content: space-around;
					a {
						color: #666;
					}
				}
			}
		}
	}

	.cart-tool {
		overflow: hidden;
		border: 1px solid #ddd;

		.select-all {
			padding: 10px;
			overflow: hidden;
			float: left;

			span {
				vertical-align: middle;
			}

			input {
				vertical-align: middle;
			}
		}

		.option {
			padding: 10px;
			overflow: hidden;
			float: left;

			a {
				float: left;
				padding: 0 10px;
				color: #666;
			}
		}

		.money-box {
			float: right;

			.chosed {
				line-height: 26px;
				float: left;
				padding: 0 10px;
			}

			.sumprice {
				width: 200px;
				line-height: 22px;
				float: left;
				padding: 0 10px;

				.summoney {
					color: #c81623;
					font-size: 16px;
				}
			}

			.sumbtn {
				float: right;

				a {
					display: block;
					position: relative;
					width: 96px;
					height: 52px;
					line-height: 52px;
					color: #fff;
					text-align: center;
					font-size: 18px;
					font-family: 'Microsoft YaHei';
					background: #e1251b;
					overflow: hidden;
				}
			}
		}
	}
}
</style>
