<template>
	<view class="container">
		<view class="multiSpecifica_container" v-for="(item, index) in multiSpecificationList" :key="index">
			<view style="background: #fff;">
				<view class="multiSpecifica_container_imageItem" @click="clk(index)">
					<view class="multiSpecifica_container_imageItem_label">
						<view v-if="isBatchOperation" class="batchOperation" :class="{ selectEd: item.select }" @click.stop="selectGoods(item)">
							<view><span class="iconfont" v-if="item.select">&#xe64e;</span></view>
						</view>
						<view>商品图</view>
					</view>
					<view class="multiSpecifica_container_imageItem_value">
						<image :src="item.image" v-if="item.image" class="myimg2"></image>
						<view class="hanlerImage" v-else>
							<view><image src="../static/images/creamer.png" mode="widthFix"></image></view>
							<view>添加图片</view>
						</view>
					</view>
				</view>
				<view class="multiSpecifica_container_item">
					<view class="multiSpecifica_container_item_label flex-start">规格信息</view>
					<view class="multiSpecifica_container_item_value">
						<text class="attributes" v-for="(v,i) in Object.values(item.detail)" :key="i">{{v}}</text>
					</view>
				</view>
				<view class="multiSpecifica_container_item">
					<view class="multiSpecifica_container_item_label flex-start">售价</view>
					<view class="multiSpecifica_container_item_value"><input v-model="item.price" type="number" placeholder="请填写商品售价" /></view>
				</view>

				<view class="multiSpecifica_container_item">
					<view class="multiSpecifica_container_item_label flex-start">成本价</view>
					<view class="multiSpecifica_container_item_value"><input v-model="item.cost" type="number" placeholder="请填写商品成本价" /></view>
				</view>

				<view class="multiSpecifica_container_item">
					<view class="multiSpecifica_container_item_label flex-start">原价</view>
					<view class="multiSpecifica_container_item_value"><input v-model="item.ot_price" type="number" placeholder="请填写商品原价" /></view>
				</view>

				<view v-if="item.more_thanFlag">
					<view class="multiSpecifica_container_item">
						<view class="multiSpecifica_container_item_label flex-start">商品条码</view>
						<view class="multiSpecifica_container_item_value"><input v-model="item.bar_code" type="text" placeholder="请填写商品条码" /></view>
					</view>

					<view class="multiSpecifica_container_item">
						<view class="multiSpecifica_container_item_label flex-start">重量</view>
						<view class="multiSpecifica_container_item_value"><input v-model="item.weight" type="number" value="" placeholder="请填写商品重量" /></view>
					</view>

					<view class="multiSpecifica_container_item">
						<view class="multiSpecifica_container_item_label flex-start">体积</view>
						<view class="multiSpecifica_container_item_value"><input v-model="item.volume" type="number" placeholder="请填写商品体积" /></view>
					</view>

					<view class="multiSpecifica_container_item">
						<view class="multiSpecifica_container_item_label flex-start">佣金（一级）</view>
						<view class="multiSpecifica_container_item_value"><input v-model="item.extension_one" type="number" placeholder="请填写商品佣金" /></view>
					</view>

					<view class="multiSpecifica_container_item">
						<view class="multiSpecifica_container_item_label flex-start">佣金（二级）</view>
						<view class="multiSpecifica_container_item_value"><input v-model="item.extension_two" type="number" placeholder="请填写商品佣金" /></view>
					</view>
				</view>
			</view>
			<view class="more_than" @click="moreThan(item)" v-if="!item.more_thanFlag">更多</view>
		</view>

		<view class="handle" v-if="isBatchOperation">
			<view class="select_all" :class="{ selectAllEd: selectAllFlag }" @click="selectAll">
				<view><text class="iconfont" v-if="selectAllFlag">&#xe64e;</text></view>
				<view>全选</view>
			</view>

			<view class="change" @click="openChangeModel">修改</view>
		</view>

		<view class="handle" v-else>
			<view class="handle_button" @click="batchOperation">批量操作</view>
			<view class="handle_button save" @click="saveAttrValue">保存</view>
		</view>

		<!-- 弹框部分 -->

		<uni-popup ref="changePopup" type="bottom">
			<view class="changePopup_container">
				<view class="changePopup_container_title">
					<view>批量修改</view>
					<view @click="closeChangePopup"><span class="iconfont">&#xe62f;</span></view>
				</view>

				<scroll-view :scroll-y="true" class="scrollViewCon">
					<view class="changePopup_container_content">
						<view class="changePopup_container_content_item">
							<view class="changePopup_container_content_item_label">售价</view>
							<view class="changePopup_container_content_item_value"><input v-model="batchData.price" type="number" placeholder="0.00" /></view>
						</view>

						<view class="changePopup_container_content_item">
							<view class="changePopup_container_content_item_label">成本价</view>
							<view class="changePopup_container_content_item_value"><input v-model="batchData.cost" type="number" placeholder="0.00" /></view>
						</view>

						<view class="changePopup_container_content_item">
							<view class="changePopup_container_content_item_label">原价</view>
							<view class="changePopup_container_content_item_value"><input v-model="batchData.ot_price" type="number" placeholder="0.00" /></view>
						</view>
						<view class="popup_moreThan" @click="popupOpenModel = !popupOpenModel" v-if="!popupOpenModel">
							<text>展开</text>
							<text class="iconfont">&#xe8ca;</text>
						</view>

						<view v-if="popupOpenModel">
							<view class="changePopup_container_content_item">
								<view class="changePopup_container_content_item_label">商品条码</view>
								<view class="changePopup_container_content_item_value"><input v-model="batchData.bar_code" type="text" placeholder="0.00" /></view>
							</view>

							<view class="changePopup_container_content_item">
								<view class="changePopup_container_content_item_label">重量</view>
								<view class="changePopup_container_content_item_value"><input v-model="batchData.weight" type="text" placeholder="0.00" /></view>
							</view>

							<view class="changePopup_container_content_item">
								<view class="changePopup_container_content_item_label">体积</view>
								<view class="changePopup_container_content_item_value"><input v-model="batchData.volume" type="text" placeholder="0.00" /></view>
							</view>

							<view class="changePopup_container_content_item">
								<view class="changePopup_container_content_item_label">佣金（一级）</view>
								<view class="changePopup_container_content_item_value"><input v-model="batchData.extension_one" type="text" placeholder="0.00" /></view>
							</view>

							<view class="changePopup_container_content_item">
								<view class="changePopup_container_content_item_label">佣金（二级）</view>
								<view class="changePopup_container_content_item_value"><input v-model="batchData.extension_two" type="text" placeholder="0.00" /></view>
							</view>
						</view>
					</view>
				</scroll-view>

				<view class="handle_popup"><view class="handle_popup_button" @click="saveBachData">确认</view></view>
			</view>
		</uni-popup>
		<avatar @upload="doUpload" @getName="getImgName" quality="1" ref="avatar" selWidth="250upx" selHeight="250upx"></avatar>
	</view>
</template>

<script>
import { Toast, setStorage, navigateBack, getStorage } from '../../../libs/uniApi.js';
import avatar from "@/components/yq-avatar/yq-avatar.vue";
import {TOKENNAME, HTTP_REQUEST_URL} from '@/config/app.js';
import store from '@/store';
export default {
	components: {
		avatar
	},
	data() {
		return {
			popupOpenModel: false,
			selectAllFlag: false,
			isBatchOperation: false, // 是否开始批量操作
			multiSpecificationList: [],
			addMultiSpecification: [],
			attrObj: '',
			index: 0,
			imgName: "",
			batchData: {
				price: '', //售价
				cost: '', // 成本价
				ot_price: '', // 原价
				bar_code: '', // 商品条码
				weight: '', // 重量
				volume: '', // 体积
				extension_one: '', // 一级佣金
				extension_two: '' //二级拥挤
			},
			a:{}
		};
	},
	onLoad(opt) {
		this.attrObj = opt.code;

		
	},
	onShow() {

		this.initData();
	},
	watch: {
		multiSpecificationList: {
			handler(val) {
				if (val.filter(item => item.select).length == val.length) {
					this.selectAllFlag = true;
				} else {
					this.selectAllFlag = false;
				}
			},
			deep: true
		},
		batchData:{
			handler(val){
				this.multiSpecificationList.bar_code=this.attrObj
				setStorage('attrValue', this.multiSpecificationList);
			},
			deep:true,
		
		}
	},
	methods: {
		initData() {
			if (getStorage('attrValue')) {
				this.multiSpecificationList = getStorage('attrValue');
			} else {
				this.multiSpecificationList = this.attrFormat(getStorage('modifyPriceData').template_value);
			}

			this.multiSpecificationList.forEach(item => {
				this.$set(item, 'more_thanFlag', false);
				this.$set(item, 'select', false);
				this.$set(item,'bar_code',this.attrObj)
			});
		},
		// 选择图片
		selectImage(item) {
			let that = this;
			that.$util.uploadImageOne('upload/image', function(res) {
				item.image = res.data.path;
			});
		},
		clk(index) {
			setStorage('attrValue', this.multiSpecificationList);
			let avatar = this.$refs.avatar;
			this.index = index;
			avatar.fChooseImg(1,{selWidth: '350upx', selHeight: '350upx', inner: true});
			
		},
		doUpload(rsp) {
			// console.log(rsp);
			let that = this;
			uni.uploadFile({
				url: HTTP_REQUEST_URL + '/api/upload/image/field',
				filePath: rsp.path,
				name: 'field',
				formData: {
					'filename': rsp.path,
					'name': that.imgName
				},
				header: {
					// #ifdef MP
					"Content-Type": "multipart/form-data",
					// #endif
					[TOKENNAME]: 'Bearer ' + store.state.app.token
				},
				success: (uploadFileRes) => {
					// console.log(uploadFileRes.data);
					let imgData = JSON.parse(uploadFileRes.data)
					that.multiSpecificationList[that.index]['image'] = imgData.data.path;
				},
				complete(res) {
					// console.log(res)
					// console.log(that.multiSpecificationList);
				}
			});		
		},
		getImgName(name){
			this.imgName = name
		},
		moreThan(item) {
			item.more_thanFlag = true;
		},
		// 批量操作
		batchOperation() {
			this.isBatchOperation = true;

			this.multiSpecificationList.forEach(item => {
				this.$set(item, 'select', false);
			});
		},
		// 点击全选
		selectAll() {
			this.selectAllFlag = !this.selectAllFlag;

			this.multiSpecificationList.forEach(item => {
				if (this.selectAllFlag) {
					this.$set(item, 'select', true);
				} else {
					this.$set(item, 'select', false);
				}
			});
		},
		// 单选
		selectGoods(item) {
			item.select = !item.select;
		},

		// 打开修改弹框
		openChangeModel() {
			if (!this.multiSpecificationList.filter(item => item.select).length) {
				Toast('请选择商品');
				return;
			}

			this.$refs.changePopup.open();
		},

		// 保存批量修改得数据
		saveBachData() {
			Object.keys(this.batchData).forEach(item => {
				this.multiSpecificationList.forEach(val => {
					if (val.select) {
						val[item] = this.batchData[item];
					}
				});
			});
			this.isBatchOperation = false;
			this.$refs.changePopup.close();
		},

		// 保存数据
		saveAttrValue() {
			setStorage('attrValue', this.multiSpecificationList);
			navigateBack(1);
		},

		// 关闭修改弹框
		closeChangePopup() {
			this.$refs.changePopup.close();
		},

		attrFormat(arr) {
			let data = [];
			const res = [];
			return format(arr);
			function format(arr) {
				if (arr.length > 1) {
					arr.forEach((v, i) => {
						if (i === 0) data = arr[i]['detail'];
						const tmp = [];
						data.forEach(function(vv) {
							arr[i + 1] &&
								arr[i + 1]['detail'] &&
								arr[i + 1]['detail'].forEach(g => {
									const rep2 = (i !== 0 ? '' : arr[i]['value'] + '_$_') + vv + '-$-' + arr[i + 1]['value'] + '_$_' + g;
									tmp.push(rep2);
									if (i === arr.length - 2) {
										const rep4 = {
											image: '',
											price: 0,
											cost: 0,
											ot_price: 0,
											bar_code: '',
											weight: 0,
											volume: 0,
											brokerage: 0,
											brokerage_two: 0
										};
										rep2.split('-$-').forEach((h, k) => {
											const rep3 = h.split('_$_');
											if (!rep4['detail']) rep4['detail'] = {};
											rep4['detail'][rep3[0]] = rep3.length > 1 ? rep3[1] : '';
										});
										// if(rep4.detail !== 'undefined' && rep4.detail !== null){
										Object.values(rep4.detail).forEach((v, i) => {
											rep4['value' + i] = v;
										});
										// }

										res.push(rep4);
									}
								});
						});
						data = tmp.length ? tmp : [];
					});
				} else {
					const dataArr = [];
					arr.forEach((v, k) => {
						v['detail'].forEach((vv, kk) => {
							dataArr[kk] = v['value'] + '_' + vv;
							res[kk] = {
								image: '',
								price: 0,
								cost: 0,
								ot_price: 0,
								bar_code: '',
								weight: 0,
								volume: 0,
								brokerage: 0,
								brokerage_two: 0,
								detail: { [v['value']]: vv }
							};
							// if(res[kk].detail !== 'undefined' && res[kk].detail !== null){
							Object.values(res[kk].detail).forEach((v, i) => {
								res[kk]['value' + i] = v;
							});
							// }
						});
					});
					data.push(dataArr.join('$&'));
				}
				return res;
			}
		}
	}
};
</script>

<style lang="scss" scoped>
.container {
	padding-top: 20rpx;
	padding-bottom: 140rpx;
}
.multiSpecifica_container {
	width: 710rpx;
	margin: auto;
	border-radius: 10px;
	margin-bottom: 30rpx;
	> view {
		padding: 0 30rpx;
		background: #ffffff;
	}
	&_imageItem {
		display: flex;
		padding: 17rpx 0 15rpx 0;
		border-bottom: 1px solid #eeeeee;
		&_label {
			flex: 0.25;
			white-space: nowrap;
			padding-top: 10rpx;
			display: flex;
			align-items: center;
			.batchOperation {
				> view {
					border: 1px solid #cccccc;
					border-radius: 50%;
					width: 38rpx;
					height: 38rpx;
					margin-right: 20rpx;
					display: flex;
					align-items: center;
					justify-content: center;
				}
			}

			.selectEd {
				> view {
					border: none;
					border-radius: 50%;
					width: 38rpx;
					height: 38rpx;
					margin-right: 20rpx;
					background: #e93323;
					color: #fff;
				}
			}
		}
		&_value {
			flex: 0.75;
			overflow: hidden;
			image {
				width: 120rpx;
				max-height: 120rpx;
				border-radius: 8rpx;
			}
		}
	}
	.attributes{
		display: inline-block;
		margin-right: 3rpx;
		&:not(:last-child) {
			&:after{
				content: '/';
				display: inline-block;
			}
		}
		
		
	}
	&_item {
		display: flex;
		align-items: center;
		padding: 32rpx 0;
		border-bottom: 1px solid #eeeeee;
		&_label {
			flex: 0.25;
			white-space: nowrap;
		}
		&_value {
			flex: 0.75;
			image {
				width: 120rpx;
			}
		}
	}
}

.more_than {
	display: flex;
	align-items: center;
	justify-content: center;
	margin: auto;
	margin-top: 20rpx;
	// width: 710rpx;
	height: 84rpx;
	background: #ffffff;
	border-radius: 10rpx;
}

.handle {
	position: fixed;
	bottom: 0;
	left: 0;
	width: 100%;
	height: 126rpx;
	background: #ffffff;
	display: flex;
	align-items: center;
	justify-content: space-between;
	padding: 0 30rpx;
	z-index: 10;
	&_button {
		width: 330rpx;
		height: 86rpx;
		border-radius: 43rpx;
		background: #fd6523;
		color: #ffffff;
		font-size: 32rpx;
		display: flex;
		align-items: center;
		justify-content: center;
	}
	.save {
		background: #e93323;
	}

	.select_all {
		display: flex;
		align-items: center;
		> view:nth-child(1) {
			border: 1px solid #cccccc;
			border-radius: 50%;
			width: 38rpx;
			height: 38rpx;
			margin-right: 24rpx;
			display: flex;
			align-items: center;
			justify-content: center;
		}
		> view:nth-child(2) {
			color: #282828;
			font-size: 28rpx;
			font-weight: 500;
		}
	}

	.change {
		display: flex;
		align-items: center;
		justify-content: center;
		color: #e93323;
		width: 180rpx;
		height: 70rpx;
		border: 1px solid #e93323;
		border-radius: 35rpx;
		font-size: 30rpx;
	}

	.selectAllEd {
		> view:nth-child(1) {
			background: #e93323;
			border: none;
			color: #fff;
		}
	}
}

.changePopup_container {
	background: #fff;
	border-radius: 16rpx 16rpx 0 0;

	.scrollViewCon {
		max-height: 668rpx;
	}

	&_title {
		display: flex;
		justify-content: flex-end;
		padding: 40rpx 20rpx;
		position: relative;
		> view:nth-child(1) {
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
		> view:nth-child(2) {
			position: relative;
			z-index: 10;
		}
	}

	&_content {
		padding: 0 30rpx;
		&_item {
			margin-bottom: 20rpx;
			height: 80rpx;
			background: #f5f5f5;
			border-radius: 10rpx;
			display: flex;
			align-items: center;
			padding: 0 30rpx;
			&_label {
				flex: 0.3;
				color: #666666;
				font-size: 26rpx;
			}
			&_value {
				flex: 0.7;
				display: flex;
				justify-content: flex-end;
				input {
					text-align: right;
				}
			}
		}

		.popup_moreThan {
			margin-top: 18rpx;
			display: flex;
			align-items: center;
			justify-content: flex-end;
			color: #e93323;
			padding-right: 20rpx;
			> span:nth-child(1) {
				display: inline-block;
				margin-right: 10rpx;
				font-size: 24rpx;
			}
		}
	}

	.handle_popup {
		height: 126rpx;
		background: #ffffff;
		display: flex;
		align-items: center;
		justify-content: center;
		&_button {
			width: 580rpx;
			height: 86rpx;
			background: #e93323;
			border-radius: 43rpx;
			color: #ffffff;
			font-size: 32rpx;
			display: flex;
			justify-content: center;
			align-items: center;
		}
	}
}

.hanlerImage {
	position: relative;
	width: 126rpx;
	height: 126rpx;
	border: 1px solid #dddddd;
	display: flex;
	flex-direction: column;
	justify-content: center;
	border-radius: 8rpx;
	text-align: center;
	> image {
		height: 100%;
		margin: auto;
	}
	> view:nth-child(1) {
		height: 37rpx;
		margin-bottom: 8rpx;
		display: flex;
		justify-content: center;
		image {
			width: 45rpx;
			display: block;
		}
	}
	> view:nth-child(2) {
		text-align: center;
		color: #bbbbbb;
		font-size: 24rpx;
	}
}
</style>