<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="生长期图片 : ">
						<div class="uploadProductImg">
							<!-- <div>
								<el-upload
									class="avatar-uploader"
									action
									:auto-upload="false"
									:show-file-list="false"
									:on-change="changeUpload1"
								>
									<img
										v-if="addSyForm.img1"
										:src="addSyForm.img1"
										class="avatar"
									/>
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div>休眠期</div>
							</div> -->
							<div>
								<el-upload
									class="avatar-uploader"
									action
									:auto-upload="false"
									:show-file-list="false"
									:on-change="changeUpload2"
								>
									<img
										v-if="addSyForm.img2"
										:src="$host+addSyForm.img2"
										class="avatar"
									/>
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div>萌芽、新梢生长期</div>
							</div>
							<div>
								<el-upload
									class="avatar-uploader"
									action
									:auto-upload="false"
									:show-file-list="false"
									:on-change="changeUpload3"
								>
									<img
										v-if="addSyForm.img3"
										:src="$host+addSyForm.img3"
										class="avatar"
									/>
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div>开花坐果期</div>
							</div>
							<div>
								<el-upload
									class="avatar-uploader"
									action
									:auto-upload="false"
									:show-file-list="false"
									:on-change="changeUpload4"
								>
									<img
										v-if="addSyForm.img4"
										:src="$host+addSyForm.img4"
										class="avatar"
									/>
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div>果实膨大期</div>
							</div>
							<div>
								<el-upload
									class="avatar-uploader"
									action
									:auto-upload="false"
									:show-file-list="false"
									:on-change="changeUpload5"
								>
									<img
										v-if="addSyForm.img5"
										:src="$host+addSyForm.img5"
										class="avatar"
									/>
									<i v-else class="el-icon-plus avatar-uploader-icon"></i>
								</el-upload>
								<div>成熟期</div>
							</div>
						</div>
					</el-form-item>
					<!-- <el-form-item label="视频通道 : " prop="areaName" class="videoAisle">
        <el-select v-model="addSyForm.areaName" placeholder="请选择视频通道" style="width: 100%;">
          <el-option
            v-for="item in fields"
            :label="item.label"
            :value="item.value"
            :key="item.value"
          ></el-option>
        </el-select>
      </el-form-item> -->
					<el-form-item>
						<el-button @click="cancel">取 消</el-button>
						<el-button type="primary" @click="growRecordSubm">确认</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 {
			cropperVisible: false,
			flag: null,
			addSyForm: {
				img1: '',
				img2: '',
				img3: '',
				img4: '',
				img5: ''
			},
			// 裁剪组件的基础配置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 展示看到的截图框宽高
			},
			addUserFormRules: {
				img1: [{ required: true, message: '请上传产品图片', trigger: 'change' }]
			}
		}
	},
	mounted() {
		this.getInfo()
	},
	methods: {
		getInfo() {
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.grow_info',
				data: this.qs.stringify({
					backcode: this.backcode
				})
			}).then((res) => {
				if (res.data.message == '') {
					let {
						photo2: img2,
						photo3: img3,
						photo4: img4,
						photo5: img5
					} = res.data.data
					this.addSyForm = {
						img2,
						img3,
						img4,
						img5
					}
				}
			})
		},
		growRecordSubm() {
			// let photo1 = this.addSyForm.img1 && this.addSyForm.img1
			let photo2 = this.addSyForm.img2 && this.addSyForm.img2
			let photo3 = this.addSyForm.img3 && this.addSyForm.img3
			let photo4 = this.addSyForm.img4 && this.addSyForm.img4
			let photo5 = this.addSyForm.img5 && this.addSyForm.img5
			this.$axios({
				method: 'POST',
				url: '/api/api_gateway?method=ascend.ascend_manage.grow_info',
				data: this.qs.stringify({
					backcode: this.backcode,
					// photo1,
					photo2,
					photo3,
					photo4,
					photo5
				})
			}).then((res) => {
				if (res.data.message == '') {
					this.$message.success('提交成功！')
				}
			})
		},
		changeUpload2(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.flag = 2
				this.cropperVisible = true
			})
		},
		changeUpload3(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.flag = 3
				this.cropperVisible = true
			})
		},
		changeUpload4(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.flag = 4
				this.cropperVisible = true
			})
		},
		changeUpload5(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.flag = 5
				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: '/api/api_gateway?method=base.bases.base_photo',
					data: form
				}).then((res) => {
					if (res.data.message == '') {
						switch (this.flag) {
							case 1:
								this.addSyForm.img1 = res.data.data.src
								break
							case 2:
								this.addSyForm.img2 = res.data.data.src
								break
							case 3:
								this.addSyForm.img3 = res.data.data.src
								break
							case 4:
								this.addSyForm.img4 = res.data.data.src
								break
							case 5:
								this.addSyForm.img5 = res.data.data.src
								break
						}
					}
				})
			})
		},
		//转成blob
		blobToFile(Blob, fileName) {
			Blob.lastModifiedDate = new Date()
			Blob.name = fileName
			return Blob
		},
		cancel() {
			this.$router.go(-1)
		}
	}
}
</script>

<style lang='less' scoped>
.productInfo {
	min-height: 600px;
	width: 700px;
	.uploadProductImg {
		display: flex;
		justify-content: space-between;
		> div {
			text-align: center;
			line-height: 30px;
		}
	}
	.videoAisle {
		width: 500px;
	}
}
.type-check {
	margin-bottom: 10px;
}
</style>