<template>
	<div>
		<el-card class="box-card">
			<div class="productInfo">
				<el-form
					ref="addUserFormRef"
					:model="addSyForm"
					label-width="100px"
					:rules="addUserFormRules"
				>
					<el-form-item label="产品图片 : " prop="imgSrc">
						<el-upload
							class="avatar-uploader"
							action
							:auto-upload="false"
							:show-file-list="false"
							:on-change="changeUpload"
						>
							<img
								v-if="addSyForm.imgSrc"
								:src="$host+addSyForm.imgSrc"
								class="avatar"
							/>
							<i v-else class="el-icon-plus avatar-uploader-icon"></i>
						</el-upload>
					</el-form-item>
					<el-form-item label="产品介绍 : " prop="intro">
						<el-input v-model="addSyForm.intro"></el-input>
					</el-form-item>
					<el-form-item>
						<el-button @click="cancel">取 消</el-button>
						<el-button type="primary" @click="addUserSubm">确认</el-button>
					</el-form-item>
				</el-form>
			</div>
		</el-card>
		<!-- vueCropper 剪裁图片实现-->
		<el-dialog title="图片剪裁" :visible.sync="cropperVisible" append-to-body>
			<div class="cropper-content">
				<div style="width: 100%; height: 500px">
					<vueCropper
						ref="cropper"
						:img="option.img"
						autoCrop
						centerBox
						fixed
						:fixedNumber="option.fixedNumber"
						:outputSize="option.size"
						:outputType="option.outputType"
					></vueCropper>
				</div>
			</div>
			<div slot="footer" class="dialog-footer">
				<el-button @click="cropperVisible = false">取 消</el-button>
				<el-button type="primary" @click="finish">确认</el-button>
			</div>
		</el-dialog>
	</div>
</template>

<script>
export default {
	props: {
		backcode: {
			type: String,
			required: true
		}
	},
	data() {
		return {
			cutBtn: 0,
			addSyForm: {
				intro: '',
				imgSrc: ''
			},
			addUserFormRules: {
				imgSrc: [
					{ required: true, message: '请上传产品图片', trigger: 'change' }
				],
				intro: [{ required: true, message: '请输入产品介绍', trigger: 'blur' }]
			},
			// 裁剪组件的基础配置option
			option: {
				img: '', // 裁剪图片的地址
				info: true, // 裁剪框的大小信息
				outputSize: 0.8, // 裁剪生成图片的质量
				outputType: 'jpeg', // 裁剪生成图片的格式
				// canScale: false, // 图片是否允许滚轮缩放
				// autoCrop: true, // 是否默认生成截图框
				// autoCropWidth: 300, // 默认生成截图框宽度
				// autoCropHeight: 200, // 默认生成截图框高度
				// fixedBox: true, // 固定截图框大小 不允许改变
				fixed: true, // 是否开启截图框宽高固定比例
				fixedNumber: [10, 7], // 截图框的宽高比例
				full: true, // 是否输出原图比例的截图
				canMoveBox: false, // 截图框能否拖动
				original: false, // 上传图片按照原始比例渲染
				centerBox: false, // 截图框是否被限制在图片里面
				infoTrue: true // true 为展示真实输出图片宽高 false 展示看到的截图框宽高
			},
			cropperVisible: false
		}
	},
	mounted() {
		this.getInfo()
	},
	methods: {
		getInfo() {
			this.$axios({
				method: 'POST',
				url: '/product_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				if (res.status == 200) {
					let { productphoto, productdesc } = res.data
					this.addSyForm.intro = productdesc
					this.addSyForm.imgSrc = productphoto
				}
			})
		},
		// 上传按钮   限制图片大小
		changeUpload(file, fileList) {
			const isLt5M = file.size / 1024 / 1024 < 5
			if (!isLt5M) {
				this.$message.error('上传文件大小不能超过 5MB!')
				return false
			}
			// 上传成功后将图片地址赋值给裁剪框显示图片
			this.$nextTick(() => {
				this.option.img = URL.createObjectURL(file.raw)
				this.cropperVisible = true
			})
		},
		// 点击裁剪，这一步是可以拿到处理后的地址
		finish() {
			// 获取截图的base64 数据
			this.$refs.cropper.getCropBlob((data) => {
				var form = new FormData()
				let file = this.blobToFile(data, 'filename.jpg')
				form.append('img_file', file)
				this.cropperVisible = false
				this.$axios({
					method: 'POST',
					url: '/base_photo',
					data: form
				}).then((res) => {
					this.addSyForm.imgSrc = res.data.src
				})
			})
		},
		//转成file
		blobToFile(Blob, fileName) {
			Blob.lastModifiedDate = new Date()
			Blob.name = fileName
			return Blob
		},
		addUserSubm() {
			this.$refs.addUserFormRef.validate((valid) => {
				if (valid) {
					this.$axios({
						method: 'POST',
						url: '/product_info',
						data: this.qs.stringify({
							backcode: this.backcode,
							productphoto: this.addSyForm.imgSrc, 
							productdesc: this.addSyForm.intro
						})
					}).then((res) => {
						if (res.status == 200){
							this.$message.success('提交成功!')
						}
					})
				}
			})
		},
		cancel() {
			this.$router.go(-1)
		}
	}
}
</script>
<style lang='less' scoped>
.productInfo {
	min-height: 600px;
	width: 500px;
}
.type-check {
	margin-bottom: 10px;
}
</style>