<template>
	<view class="conetnt" style="">
		<view class="searchBox">
			<input type="text" value="" placeholder="搜索" @input="bindInput" />
		</view>
		<view class="contentTop">
			<view class="topTab">
				共<text style="color:#FF2F2F;">{{list.length}}</text>
				件商品
			</view>
			<view :class="editShow?'activeText':'editText'" @click="edit">
				{{editShow?'完成':'管理'}}
			</view>
		</view>
		<view class="noData" v-if="noData">
			暂无数据
		</view>
		<!-- 商品 -->
		<view class="goodsData" v-else>
			<view class="itemGooddata" v-for="(item, index) in list" :key="index">
				<label class="uni-list-cell uni-list-cell-pd radioLable" v-if="editShow">
					<view>
						<radio :value="item.value" :checked="true" @click="GoodChang(item.id,index)" v-if="item.flag" />
						<radio :value="item.value" :checked="false" @click="GoodChang(item.id,index)"
							v-if="!item.flag" />
					</view>
				</label>
				<view @click="goXiangqing(item.goods.id)" style="display: flex;">
					<view class="goodPic">
						<image :src="item.goods.image" mode=""></image>
					</view>
					<view class="infoBox">
						<view class="goodtitle">
							{{item.title}}
						</view>
						<view class="priceBox">
							<text
								style="font-size: 24rpx;padding-left: 8rpx;color: #969799;">销量{{item.total_sales}}单</text>
						</view>
						<view class="delPrice">
							<text style="color:#F85317;font-size: 24rpx;margin-right: -4rpx;">￥</text>
							<text style="color:#F85317;font-size: 32rpx;">{{item.price}}</text>
						</view>
					</view>
				</view>

			</view>
		</view>
		<view class="delBox" v-if="editShow">
			<view class="" style="align-items: center;" @click="mainSelect">
				<image src="../../static/ic_38_1@2x.png" mode="" style="width: 24rpx;height: 24rpx;margin-right: 20rpx;"
					v-if="!noMainSelect"></image>
				<image src="../../static/ic_37@2x.png" mode="" style="width: 24rpx;height: 24rpx;margin-right: 20rpx;"
					v-else></image>
				全选
			</view>
			<view class="delBtn" @click="del">
				删除
			</view>
		</view>
	</view>
</template>

<script>
	import request from '../../utils/request.js'
	export default {
		data() {
			return {
				pageNum: 1,
				inputValue: '',
				type: 4,
				editShow: false,
				noData: true,
				noMainSelect: false, //是否全选
				list: [], //收藏列表
				delIdList: [], //删除id
			}
		},
		onReachBottom() {
			this.pageNum += 1
			this.collectList()
		},
		onShow() {
			this.collectList()
		},
		onLoad() {},
		methods: {
			bindInput(e) {
				this.inputValue = e.detail.value
				this.collectList()
			},
			//商品详情
			goXiangqing(id) {
				uni.navigateTo({
					url: '/pages/index/goodDeatil?id=' + id
				})
			},
			//商品radio
			GoodChang(id, indexs) {
				let that = this
				let lists = that.list
				lists.forEach((item, index) => {
					if (index == indexs) {
						item.flag = !item.flag
						if (item.flag && that.delIdList.indexOf(id) == -1) {
							that.delIdList.push(item.id)
							if(that.delIdList.length==that.list.length){
								this.noMainSelect=true
							}
						} else {
							that.delIdList.forEach((items, indexs) => {
								if (items == id) {
									this.delIdList.splice(indexs, 1)
									this.noMainSelect=false
								}
							})
						}
					}
				})
			},
			//编辑
			edit() {
				this.editShow = !this.editShow
			},
			//全选
			mainSelect() {
				this.noMainSelect = !this.noMainSelect
				if (this.noMainSelect) {
					this.list.forEach((item, index) => {
						item.flag = true
						this.delIdList.push(item.id)
					})
				} else {
					this.list.forEach((item, index) => {
						item.flag = false
						this.delIdList=[]
					})
				}
			},
			//删除
			del() {
				let that = this
				if (this.delIdList.length == 0) {
					uni.showToast({
						title: '请选择商品',
						icon: 'none'
					})
				} else {
					uni.showModal({
						title: '提示',
						content: '确定删除吗？',
						success: function(res) {
							if (res.confirm) {
								let postData = {
									type: that.type,
									id: that.delIdList.join(',')
								}
								request.get('/api/collection/delete', postData).then(res => {
									if (res.code == 1) {
										that.delIdList = []
										that.editShow = false
										that.collectList()
									}
								}).catch(err => {

								})
							} else if (res.cancel) {
								console.log('用户点击取消');
							}
						}
					});
				}
			},
			//收藏列表
			collectList() {
				let postData = {
					page: this.pageNum,
					keywords: this.inputValue
				}
				request.get('/api/collection/index', postData).then(res => {
					this.list = res.data.data
					if (this.list.length == 0) {
						this.noData = true
					} else {
						this.noData = false
					}
					let lists = this.list
					lists.forEach((item, index) => {
						item.flag = false
					})
					this.list = lists
				}).catch(err => {

				})
			}
		}
	}
</script>

<style>
	/* @import url("/common/collect.css"); */
	.conetnt {
		min-height: 100vh;
		background-color: #F7F8FA;
		padding-top: 190rpx;
	}

	.searchBox {
		height: 104rpx;
		background-color: #fff;
		padding: 16rpx 32rpx;
		box-sizing: border-box;
		position: fixed;
		top: 0;
		left: 0;
		width: 100%;
	}

	input {
		width: 100%;
		height: 72rpx;
		background: #f7f8fa;
		border-radius: 38rpx;
		padding: 0 20rpx;
		box-sizing: border-box;
		font-size: 28rpx;
	}

	.infoBox {
		flex: 1;
	}

	.priceBox {
		margin-top: 16rpx;
	}

	.contentTop {
		display: flex;
		position: fixed;
		top: 100rpx;
		left: 0;
		justify-content: space-between;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
		width: 100%;
		background-color: #F7F8FA;
	}

	.itemGooddata {
		background-color: #fff;
		padding: 32rpx;
		box-sizing: border-box;
		margin-bottom: 32rpx;
		display: flex;
	}

	.infoBox {
		margin-left: 16rpx;
	}

	.goodtitle {
		color: #323233;
		font-size: 26rpx;
	}

	.delPrice {
		text-align: right;
	}

	.topTab {
		display: flex;
		align-items: center;
		font-size: 28rpx;
		color: #969799;
		width: 50%;
	}

	.active {
		color: #000000;
		border-bottom: 4rpx solid #FF793F;
	}

	.editText {
		font-size: 28rpx;
		color: #323233;
	}

	.activeText {
		color: #F85317;
		font-size: 28rpx;
	}

	.listData {
		margin-top: 70rpx;
	}

	.itemData {
		display: flex;
		padding: 24rpx 32rpx;
		box-sizing: border-box;
	}

	.goodPic image {
		width: 152rpx;
		height: 152rpx;
		border-radius: 16rpx;
	}

	.textBox {
		padding-right: 24rpx;
		box-sizing: border-box;
	}

	.title {
		font-size: 30rpx;
		color: #323233;
		font-weight: 600;
		padding: 6rpx 0;
		box-sizing: border-box;
	}

	.desc {
		font-size: 28rpx;
		color: #646566;
		display: -webkit-box;
		-webkit-box-orient: vertical;
		-webkit-line-clamp: 3;
		overflow: hidden;
	}

	.picBox {
		display: flex;
		flex-direction: column-reverse;
	}

	.picBox image {
		width: 132rpx;
		height: 132rpx
	}

	.radioLable {
		display: flex !important;
		align-items: center !important;
	}

	radio {
		transform: scale(0.7);
	}

	.delBox {
		position: fixed;
		bottom: 0;
		left: 0;
		padding: 32rpx;
		box-sizing: border-box;
		text-align: right;
		width: 100%;
		z-index: 2;
		display: flex;
		justify-content: space-between;
		background-color: #fff;
	}

	.delBtn {
		width: 148rpx;
		height: 56rpx;
		border: 2rpx solid #fa4936;
		border-radius: 179rpx;
		text-align: center;
		color: #FA4936;
		line-height: 56rpx;
		font-size: 26rpx;
	}

	.noData {
		width: 100%;
		height: 300rpx;
		line-height: 300rpx;
		color: #bfbfbf;
		font-size: 28rpx;
		text-align: center;
	}
</style>