<template>
	<div>

		<div class="tab-header webtop">
			<!-- 标题 -->
			<div>商品信息</div>
			<!-- start 添加修改按钮 -->
			<div>
				<el-button type="primary" size="small" :disabled="submitdisabled" @click="saveOrUpdate">保存</el-button>
				<el-button type="info" size="small" @click="handleReturn()">关闭</el-button>
			</div>
			<!-- end 添加修改按钮 -->
			<!-- end 详情按钮 -->
		</div>

		<div class="listconadd">

			<el-card class="box-card">
				<div class="item">
					<span class="item_text">名称：</span>
					<el-input v-model="formobj.name" placeholder="" class="item_input" clearable />
				</div>
				<div class="item">
					<span class="item_text">编码：</span>
					<el-input v-model="formobj.code" placeholder="" class="item_input" clearable
						oninput="value=value.replace(/[^A-Za-z0-9]/g, '')" />
				</div>
				<div class="item">
					<span class="item_text">条码：</span>
					<el-input v-model="formobj.barcode" placeholder="" class="item_input" clearable
						oninput="value=value.replace(/[^0-9]/g,'')" />
				</div>
				<div class="item">
					<span class="item_text">价格 (元/斤)：</span>
					<el-input v-model="formobj.price" placeholder="" class="item_input" clearable
						oninput="value=value.replace(/[^\d.]/g, '').replace(/\.{2,}/g, '.').replace('.', '$#$').replace(/\./g, '').replace('$#$', '.').replace(/^(\-)*(\d+)\.(\d\d).*$/, '$1$2.$3').replace(/^\./g, '')" />
				</div>
				<!-- <div class="item">
					<span class="item_text">标准单位：</span>
					<el-input  v-model="formobj.unitName" placeholder="例如：份" :readonly="true" class="item_input" clearable />
				</div> -->
				<div class="item">
					<span class="item_text">商品单位：</span>
					<el-input type="hidden" v-model="formobj.specificationUnit" placeholder="例如：斤/瓶/袋/箱/盒" class="item_input" clearable />
				</div>
				<div class="item">
					<span class="item_text">规格 (斤/份)：</span>
					<el-input v-model="formobj.weight" placeholder="例如：30" class="item_input" clearable oninput="value=value.replace(/[^0-9]/g,'')" />
				</div>
				<div class="item">
					<span class="item_text">规格描述：</span>
					<el-input v-model="formobj.remarks" placeholder="例如：一份30斤" class="item_input" clearable />
				</div>
				<div class="item">
					<span class="item_text">商品简介：</span>
					<el-input v-model="formobj.content" placeholder="商品简介" class="item_input" clearable />
				</div>

				<div class="item" style="margin-bottom: 100px;margin-top: 100px;">
					<span class="item_text">图片：</span>
					<upload style="margin-top: 20px;" class="item_input" ref="uploadImg2" v-model="imgList" :limit="1"
						@change="backData" bucket="map" :class="{ hide: hideUploadBtn }"
						:upload-data="{ type: '0001' }"></upload>
				</div>

				<div>
					<span class="item_text">商品详情：</span>
					<editor :height="300" :minHeight="100" :value="formobj.appContent" @input="editinput"></editor>
				</div>

			</el-card>

		</div>

	</div>
</template>

<script>
	import req from '@/api/commodity/commodity.js'
	import upload from '@/components/uploadFile/upload_yanchejianchaTuBiao.vue'
	import Editor from '@/components/Editor'

	export default {
		components: {
			upload,
			Editor
		},
		data() {
			return {
				imgList: [


				],
				submitdisabled: false,
				formobj: {
					sid: "",
					name: '',
					code: '',
					barcode: '',
					price: "",
					unitName: "份",
					specificationUnit:"",
					weight:"",
					remarks: "",
					content: "",
					picUrl: "",
					appContent: ''
				},
				hideUploadBtn: false,
			}
		},
		methods: {
			backData(value) {
				console.log("backData》》》》", value)
				console.log("imgList", this.imgList)

				if (this.imgList.length > 0) {
					this.formobj.picUrl = this.imgList[0].url
				} else {
					this.formobj.picUrl = ""
				}

				this.hideUploadBtn = this.imgList.length != 0;
				console.log("this.hideUploadBtn", this.hideUploadBtn)
			},

			saveOrUpdate() {
				console.log('>>>>>>>>>saveOrUpdate', this.formobj)
				req.saveGoods(this.formobj)
					.then(resp => {
						if (resp.success) {
							this.$message({
								showClose: true,
								type: 'success',
								message: resp.msg
							})
							this.handleReturn('true')
						} else {
							// 根据resp.code进行异常情况处理
						}
					})
					.catch(() => {})
			},
			handleReturn(isreload) {
				if (isreload === 'true') this.$emit('reloadlist')
				this.imgList = []
				this.formobj = {
					sid: "",
					name: '',
					code: '',
					barcode: '',
					price: "",
						unitName: "份",
					specificationUnit:"",
					weight:"",
					remarks: "",
					content: "",
					picUrl: "",
					appContent: ''
				}
				this.$emit('doback')
			},

			showAdd() {
				console.log(this.imgList, 88888888)
			},
			showEdit(row) {
				req.goodsInit(row.sid)
					.then(resp => {
						if (resp.success) {
							this.formobj = resp.data
							this.imgList = []
							if (resp.data.picUrl != '')
								this.imgList.push({
									url: resp.data.picUrl
								})

							this.hideUploadBtn = this.imgList.length != 0;
							console.log("this.hideUploadBtn", this.hideUploadBtn)
						}
					})
					.catch(e => {
						this.formobj = row
						this.imgList = []
						if (resp.data.picUrl != '')
							this.imgList.push({
								url: formobj.picUrl
							})

						this.hideUploadBtn = this.imgList.length != 0;
						console.log("this.hideUploadBtn", this.hideUploadBtn)
					})
			},
			editinput(text) {
				this.formobj.appContent = text
			}
		}
	}
</script>
<style lang="scss" scoped>
	// 隐藏上传组件

	::v-deep .hide {
		.el-upload--picture-card {
			display: none !important;
		}
	}

	.box-card {
		margin-left: 60px;
		margin-right: 60px;
		min-width: 70%;
		margin-top: 20px;

		.item {
			display: flex;
			flex-direction: row;
			align-items: center;
			margin-top: 15px;
			height: 40px;
			line-height: 40px;

			.item_text {
				flex: 0.8;
				font-size: 18px;
				text-align: right;
			}

			.item_input {
				flex: 4;
				font-size: 16px;
				margin-left: 10px;
				margin-right: 80px;
			}

			.item_left_input {
				width: 20%;
			}

			.item_left_text {
				height: 30px;
				margin-left: 20px;
				line-height: 30px;
				color: #018AD2;
				padding: 0px 15px;
				border: 1.5px solid #018AD2;
				border-radius: 5px;

			}

			.item_right {
				flex: 1;
				justify-items: center;

				.item_right_list_text {
					font-size: 16px;
				}

				.item_right_list_delect {
					color: #5E94FF;
					margin-left: 20px;
					font-size: 16px;
					text-decoration: underline;
				}
			}

		}

	}
</style>