<template>
	<view class="add-paper">
		<view>
			<uni-nav-bar left-icon="back" @clickLeft="back" statusBar fixed title="">
				<view class="add-paper-title">{{ title }}</view>
				<view slot="left"></view>
				<view slot="right"></view>
			</uni-nav-bar>
		</view>
		<view class="">
			<view class="add-paper-list">
				<view>
					<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
					<text class="add-paper-text">纸品名称</text>
				</view>
				<view class="add-paper-input">
					<qn-easyinput type="digit" :styles="{ disableColor: '#fff' }" v-model="form.name" :inputBorder="false" text="right" placeholder="请输入纸品名称"></qn-easyinput>
				</view>
			</view>
			<view class="add-paper-border"></view>
			<view class="add-paper-list">
				<view>
					<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
					<text class="add-paper-text">纸厂信息</text>
				</view>
				<view class="add-paper-input">
					<qn-easyinput
						type="digit"
						:styles="{ disableColor: '#fff' }"
						v-model="form.manufacturerName"
						:inputBorder="false"
						text="right"
						placeholder="请输入纸厂信息"
					></qn-easyinput>
				</view>
			</view>
			<view class="add-paper-border"></view>
			<view class="add-paper-list">
				<view>
					<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
					<text class="add-paper-text">品牌信息</text>
				</view>
				<view class="add-paper-input">
					<qn-easyinput
						type="digit"
						:styles="{ disableColor: '#fff' }"
						v-model="form.brandName"
						:inputBorder="false"
						text="right"
						placeholder="请输入纸品品牌名称"
					></qn-easyinput>
				</view>
			</view>
			<view class="add-paper-border"></view>
			<view class="add-paper-list">
				<view>
					<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
					<text class="add-paper-text">纸种信息</text>
				</view>
				<!-- categoryId -->
				<view class="" @click="paperpopupShow()">
					<text v-if="form.categoryId === null" class="add-paph-text">请选择纸种信息</text>
					<text v-else>{{ form.categoryName }}</text>
					<text><uni-icons type="right" color="#000000" size="18"></uni-icons></text>
				</view>
			</view>
			<view class="add-paper-border"></view>
			<view class="add-paper-list">
				<view>
					<text class="add-paper-start"><uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons></text>
					<text class="add-paper-text">是否主营</text>
				</view>
				<view><uni-data-checkbox v-model="form.isMainProduct" :localdata="range" @change="change"></uni-data-checkbox></view>
			</view>
		</view>
		<uGap></uGap>
		<view class="paper-price ">
			<view class="paper-price-main">
				<text class="paper-price-title">纸品售价</text>
				<text class="paper-price-subtitle">(不设置最低起送量则不限制其送量要求)</text>
			</view>
			<view class="paper-price-form" v-for="(item, index) in skuList" :key="index">
				<view class="paper-price-item">
					<view class="label flex">
						<view class="dian"></view>
						<view class="paper-price-title">纸品售价{{ index + 1 }}</view>
					</view>
					<view class="delete-text" @click="deletePrice()">删除</view>
				</view>
				<view class="paper-price-item">
					<view class="label">
						<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
						<text class="label_text">纸品克重：</text>
					</view>
					<view class="label_value">
						<qn-easyinput
							type="digit"
							:styles="{ disableColor: '#F7F8FA', borderBottom: '1px solid red' }"
							v-model="item.weight"
							:inputBorder="false"
							text="right"
							placeholder="请输入纸品克重"
						></qn-easyinput>
					</view>
				</view>
				<view class="paper-price-item">
					<view class="label">
						<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
						<text class="label_text">是否特价：</text>
					</view>
					<view class="label_value"><uni-data-checkbox style="float: right;padding-top: 24rpx" v-model="item.isPromoting" :localdata="range"></uni-data-checkbox></view>
				</view>
				<view class="paper-price-item">
					<view class="label">
						<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
						<text class="label_text">库存单位：</text>
					</view>
					<view class="label_value label-select" @click="popueShow(index)">
						<text class="paper-price-title  text-right">{{ item.stockUnit === '1' ? '张' : '吨' }}</text>
						<uni-icons type="bottom" color="#000000" size="18"></uni-icons>
					</view>
				</view>
				<view class="paper-price-item">
					<view class="label">
						<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
						<text class="label_text">账期售价：</text>
					</view>
					<view class="label_value flex">
						<qn-easyinput
							type="digit"
							:styles="{ disableColor: '#F7F8FA', borderBottom: '1px solid red' }"
							v-model="item.listPrice"
							:inputBorder="false"
							text="right"
							placeholder="请输入账期售价"
						></qn-easyinput>
						<view class="paper-price-title text-left">元/张</view>
					</view>
				</view>
				<view class="paper-price-item">
					<view class="label">
						<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
						<text class="label_text">纸品库存：</text>
					</view>
					<view class="label_value flex">
						<qn-easyinput
							type="digit"
							:styles="{ disableColor: '#F7F8FA', borderBottom: '1px solid red' }"
							v-model="item.stock"
							:inputBorder="false"
							text="right"
							placeholder="请输入纸品库存"
						></qn-easyinput>
						<view class="paper-price-title text-left">张</view>
					</view>
				</view>
				<view class="paper-price-item">
					<view class="label">
						<uni-icons custom-prefix="iconfont" type="icon-required" size="14" color="#F5222D"></uni-icons>
						<text class="label_text">最低起送量：</text>
					</view>
					<view class="label_value flex">
						<qn-easyinput
							type="digit"
							:styles="{ disableColor: '#F7F8FA', borderBottom: '1px solid red' }"
							v-model="item.minimum"
							:inputBorder="false"
							text="right"
							placeholder="请输入最低起送量"
						></qn-easyinput>
						<view class="paper-price-title  text-left">张</view>
					</view>
				</view>
			</view>
			<button type="primary" class="add-Btn" plain="true" @click="addPriceClick()">＋ 新增售价</button>
		</view>
		<uGap></uGap>
		<view class="paper-price">
			<view class="paper-price-image-title"><text class="paper-price-title">纸品图片</text></view>
			<view class="paper-price-image">
				<uni-file-picker
					v-model="imgList"
					file-mediatype="image"
					mode="grid"
					file-extname="png,jpg"
					:limit="6"
					:image-styles="imageStyles"
					@progress="progress"
					@success="success"
					@fail="fail"
					@select="select"
					@delete="deleteImage"
				>
					<image class="paper-upload-image" src="../../static/imgs/trade/uploadImage.png" mode=""></image>
				</uni-file-picker>
			</view>
		</view>
		<uGap></uGap>
		<view class="paper-price">
			<view class="paper-price-image-title"><text class="paper-price-title">商品卖点</text></view>
			<view class="paper-price-image ">
				<qn-easyinput
					class="paper-price-textArea"
					:maxlength="200"
					:styles="{ disableColor: '#F7F8FA' }"
					v-model="form.remark"
					:inputBorder="false"
					type="textarea"
					placeholder="请输入商品卖点"
				></qn-easyinput>
			</view>
		</view>

		<uGap></uGap>
		<view class="paper-price">
			<view class="paper-price-image-title"><text class="paper-price-title">商品描述</text></view>
			<view class="paper-price-image ">
				<qn-easyinput
					class="paper-price-textArea"
					:maxlength="200"
					:styles="{ disableColor: '#F7F8FA' }"
					v-model="form.remark"
					:inputBorder="false"
					type="textarea"
					placeholder="请输入商品描述"
				></qn-easyinput>
			</view>
		</view>
		<uGap></uGap>
		<view class="paper-price">
			<view class="paper-price-image-title"><text class="paper-price-title">送货说明</text></view>
			<view class="paper-price-image ">
				<qn-easyinput
					class="paper-price-textArea"
					:maxlength="200"
					:styles="{ disableColor: '#F7F8FA' }"
					v-model="form.remark"
					:inputBorder="false"
					type="textarea"
					placeholder="请输入送货说明"
				></qn-easyinput>
			</view>
		</view>
		<uGap></uGap>
		<view class="paper-price">
			<view class="paper-price-image-title"><text class="paper-price-title">其他说明</text></view>
			<view class="paper-price-image ">
				<qn-easyinput
					class="paper-price-textArea"
					:maxlength="200"
					:styles="{ disableColor: '#F7F8FA' }"
					v-model="form.remark"
					:inputBorder="false"
					type="textarea"
					placeholder="请输入其他说明"
				></qn-easyinput>
			</view>
		</view>
		<uGap></uGap>
		<view class="uploud-btn">
			<view class=""><button type="primary" class="btn-class" plain="true" @click="addPriceClick()">取消</button></view>
			<view class=""><button type="primary" class="btn-class-upload" @click="uploadPrice()">上架出售</button></view>
		</view>
		<uni-popup ref="popup" type="bottom">
			<view class="popup_modal">
				<slot name="title"><view class="popup_modal-title">可选择已录入公司</view></slot>
				<scroll-view scroll-y="true" class="popup_modal-scroll">
					<view @click="selectValeu(item)" class="popup_modal-scroll-item" v-for="item in searchList" :key="item.id">{{ item.name }}</view>
				</scroll-view>
			</view>
		</uni-popup>
		<uni-popup ref="paperpopup" type="bottom">
			<view class="popup_modal">
				<slot name="title"><view class="popup_modal-title">选择纸种</view></slot>
				<scroll-view scroll-y="true" class="popup_modal-scroll">
					<view @click="paperSelectChange(item)" class="popup_modal-scroll-item" v-for="item in paperList" :key="item.id">{{ item.name }}</view>
				</scroll-view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
import { back, go2 } from '@/utils/hook.js'
import qnEasyinput from '@/components/qn-easyinput/qn-easyinput.vue'
import uGap from '@/components/u-gap/u-gap.vue'
import { getCategoryList, createProduct, getSupplierDteail, updateProduct } from '@/apis/add-paper.js'
const validateFields = ['name', 'isMainProduct', 'manufacturerName', 'brandName', 'categoryId']
const validatePriceFields = ['isPromoting', 'listPrice', 'minimum', 'stock', 'stockUnit', 'weight']
export default {
	components: {
		uGap,
		qnEasyinput
	},
	data() {
		return {
			title: '添加纸品',
			form: {
				name: null,
				isMainProduct: 0,
				manufacturerName: null,
				brandName: null,
				categoryId: null
			},
			imageStyles: {
				width: 100,
				height: 100,
				border: {
					color: '#f1f1f1',
					width: 1,
					style: 'solid',
					radius: '2rpx'
				}
			},
			range: [{ value: 0, text: '是' }, { value: 1, text: '否' }],
			placeholderStyle: 'text-align: right;',
			searchList: [
				{
					name: '张',
					id: '1'
				},
				{
					name: '吨',
					id: '2'
				}
			],
			paperList: [],
			skuList: [
				{
					isPromoting: 0,
					listPrice: null,
					minimum: null,
					stock: null,
					stockUnit: '1',
					weight: null
				}
			],
			imgList: [],
			priceIndex: 0,
			eidtFor: 0
		}
	},
	onLoad(option) {
		if (option) {
			this.title = option.title
		}
		this.eidtFor = 0
		if (this.title === '编辑纸品') {
			this.getDteailList()
			this.eidtFor = 1
		}
		this.getCategoryListQuery()
	},
	watch: {
		['form.name'](val) {
			this.form.id = null
			console.log(111)
		}
	},
	methods: {
		back,
		popueShow(item) {
			this.priceIndex = item
			this.$refs.popup.open('bottom')
		},
		selectValeu(item) {
			this.$set(this.skuList[this.priceIndex], 'stockUnit', item.id)
			this.$refs.popup.close()
		},
		paperSelectChange(item) {
			this.$set(this.form, 'categoryName', item.name)
			this.$set(this.form, 'categoryId', item.id)
			this.$refs.paperpopup.close()
		},
		paperpopupShow() {
			this.$refs.paperpopup.open('bottom')
		},
		//获取详情
		getDteailList(res) {
			var params = {
				mallSupplierIds : null,
				productId : null
			}
			this.getSupplierDteail(params).then(res => {
				if (res) {
					this.form = res
					this.skuList = res.skuList
					this.imgList = res.imgList
				}
			})
		},
		//新增售价
		addPriceClick() {
			this.skuList.push({
				isPromoting: 0,
				listPrice: null,
				minimum: null,
				stock: null,
				stockUnit: '1',
				weight: null,
				categoryId: null
			})
		},
		// 删除售价
		deletePrice(value) {
			this.skuList.splice(value, 1)
		},
		// 上传进度
		progress() {},
		// 上传成功回调
		success(item) {
			console.log(item)
		},
		// 上传失败回调
		fail(item) {
			console.log(item)
		},
		// 图片选择事件
		select(item) {
			console.log(item)
			console.log(this.imgList)
			this.imgList.push(item.tempFiles[0])
		},
		// 删除图片
		deleteImage(item) {
			console.log('deleteImage', item)
			for (let i = 0; i < this.imgList.length; i++) {
				if (this.imgList[i].uuid === item.tempFile.uuid) {
					this.imgList.splice(i, 1)
				}
			}
			console.log(this.imgList)
		},
		uploadPrice() {
			for (let i = 0; i < validateFields.length; i++) {
				if (this.form[validateFields[i]] === null || this.form[validateFields[i]] === '') {
					uni.showToast({
						title: '请完善信息',
						icon: 'none'
					})
					return
				}
			}
			for (let j = 0; j < validatePriceFields.length; j++) {
				for (let z = 0; z < this.skuList.length; z++) {
					if (this.skuList[z][validatePriceFields[j]] === null || this.skuList[z][validatePriceFields[j]] === '') {
						uni.showToast({
							title: '请完善信息',
							icon: 'none'
						})
						return
					}
				}
			}
			var params = {
				...this.form,
				skuList: this.skuList,
				imgList: this.imgList
			}
			if (this.eidtFor === 0) {
				createProduct(params).then(res => {
					if (res) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
						setTimeout(() => {
							back()
						}, 1000)
					}
				})
			} else {
				updateProduct(params).then(res => {
					if (res) {
						uni.showToast({
							title: '更新成功',
							icon: 'success'
						})
						setTimeout(() => {
							back()
						}, 1000)
					}
				})
			}
		},
		//获取纸品列表
		getCategoryListQuery() {
			getCategoryList().then(res => {
				if (res) {
					this.paperList = res
					console.log(res)
				}
			})
		}
	}
}
</script>

<style lang="scss">
.add-paper {
	.image {
		width: 28rpx;
		height: 28rpx;
	}
	.add-paper-title {
		width: 100%;
		font-size: 36rpx;
		color: #000000;
		letter-spacing: 0;
		text-align: center;
		font-weight: 500;
	}
	.add-paper-list {
		height: 88rpx;
		background: #ffffff;
		display: flex;
		justify-content: space-between;
		align-items: center;
		padding-left: 32rpx;
		padding-right: 32rpx;
	}
	.add-paper-text {
		font-size: 28rpx;
		color: #000000;
		letter-spacing: 0;
		font-weight: 400;
	}
	.add-paper-start {
		font-size: 28rpx;
		color: #f5222d;
		letter-spacing: 0;
		font-weight: 400;
	}
	.add-paper-input {
		width: 40%;
	}
	.add-paph-text {
		font-size: 28rpx;
		color: #888888;
		letter-spacing: 0;
		text-align: right;
		font-weight: 400;
	}
	.add-paper-border {
		border-bottom: 2rpx solid #d8d8d8;
		margin-left: 16px;
	}
	.paper-price {
		background-color: #ffffff;
		padding-bottom: 20rpx;
		.paper-price-form {
			background: #f7f8fa;
			border-radius: 8rpx;
			margin: 22rpx 32rpx;
			padding: 22rpx 32rpx;
			line-height: 60rpx;
			margin-bottom: 30rpx;
		}
		.paper-price-item {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: space-between;
			.flex {
				display: flex;
				margin-left: 4px;
				align-items: center;
			}
		}
		.delete-text {
			font-size: 28rpx;
			color: #f5222d;
			letter-spacing: 0;
			font-weight: 400;
		}
		.paper-price-main {
			padding: 22rpx 32rpx;
			height: 88rpx;
			align-items: center;
			border-bottom: 2rpx solid #dddddd;
		}
		.paper-price-image-title {
			padding: 22rpx 32rpx;
			align-items: center;
		}
		.paper-price-image {
			padding: 22rpx 32rpx;
		}
		.paper-upload-image {
			width: 184rpx;
			height: 184rpx;
			background: rgba(220, 222, 224, 0.5);
			border-radius: 10rpx;
		}
		.paper-price-textArea {
			background: #f7f8fa;
			border-radius: 20rpx;
			padding: 10rpx;
		}
		.paper-price-title {
			font-size: 28rpx;
			color: #000000;
			letter-spacing: 0;
			font-weight: 600;
		}
		.paper-price-subtitle {
			font-size: 24rpx;
			color: #888888;
			font-weight: 400;
		}
		.dian {
			background: #adbac9;
			width: 10rpx;
			height: 10rpx;
			border-radius: 50%;
			// margin-top: 28rpx;
			margin-right: 10rpx;
		}
		.label_text {
			font-size: 28rpx;
			color: #888888;
			letter-spacing: 0;
			font-weight: 400;
		}
		.label_value {
			padding-bottom: 5rpx;
			border-bottom: 2rpx solid #d8d8d8;
			width: 65%;
			text-align: right;
		}
		.label-select {
			display: flex;
			align-items: center;
			justify-content: flex-end;
		}
		.text-left {
			margin-left: 10rpx;
		}
		.text-right {
			margin-right: 10rpx;
		}
	}
	.popup_modal {
		width: 750rpx;
		height: 600rpx;
		background-color: #fff;
		border-radius: 10rpx 10rpx 0 0;
		.popup_modal-title {
			display: flex;
			flex-direction: row;
			align-items: center;
			justify-content: center;
			width: 750rpx;
			height: 88rpx;
			font-weight: 600;
			border-bottom: 2rpx solid #d8d8d8;
		}
		.popup_modal-scroll {
			width: 750rpx;
			height: 600rpx;
			.popup_modal-scroll-item {
				display: flex;
				flex-direction: row;
				align-items: center;
				justify-content: center;
				width: 750rpx;
				height: 88rpx;
				padding: 0rpx 32rpx;
				border-bottom: 2rpx solid #d8d8d8;
			}
		}
	}
	.add-Btn {
		margin: 10rpx 32rpx;
	}
	.btn-class {
		height: 88rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		width: 150px;
	}
	.btn-class-upload {
		height: 88rpx;
		border-radius: 10rpx;
		line-height: 80rpx;
		width: 200px;
	}
	.uploud-btn {
		display: flex;
		justify-content: space-between;
		padding: 10rpx 32rpx;
		background-color: #ffffff;
	}
	.paper-backColor {
		background-color: rgba(220, 222, 224, 1);
	}
}
</style>
