<template>
	<view>
		<u-navbar :is-back="true" back-text="返回" :back-text-style="{color:'#fff'}" back-icon-color="#fff" title="操作上传"
			:background="background" title-color="#fff">
		</u-navbar>
		<view class="task_type">
			<text class="tit">类型</text>
			<view class="btn-box" v-if="taskInfo.flag==0">
				<text :class="['btn',btnAct==index?'active':'']" v-for="item,index in btns" :key="index"
					@click="selectTask(index)">{{item.text}}</text>
			</view>
			<view class="btn-box" v-else>
				<text class="btn active">{{taskInfo.task_type | task_type}}</text>
			</view>
		</view>
		<u-form :model="form" ref="uForm">
			<view class="data_con">
				<view class="tit">
					数据
				</view>
				<view class="data-box">
					<u-form-item label="基地">
						<u-input disabled v-model="taskInfo.base_name" />
					</u-form-item>
					<u-form-item label="地块">
						<u-input disabled v-model="taskInfo.massif_name" />
					</u-form-item>
					<u-form-item label-position="top" label="任务详情" v-if="taskInfo.task_content" label-width="150">
						<u-input disabled v-model="taskInfo.task_content" />
					</u-form-item>
					<u-form-item label-position="top" label="操作描述" label-width="150">
						<u-input v-model="form.op_content" type="textarea" :auto-height="true" />
					</u-form-item>
				</view>
			</view>
			<view class="data_con"
				v-if="this.btnAct==1||this.btnAct==2||taskInfo.task_type=='fertilize'||taskInfo.task_type=='spray'">
				<view class="tit">
					投入品
				</view>
				<view class="data-box">
					<u-form-item label="名称">
						<u-input v-model="form.material_name" :select-open="selectShow" type="select"
							placeholder="请选择物料名称" @click="selectMaterial" />
					</u-form-item>
					<template v-if="form.material_name">
						<u-form-item label="单位">
							<u-input v-model="form.material_unit" />
						</u-form-item>
						<u-form-item label="库存">
							<u-input v-model="form.surplus_stock" />
						</u-form-item>
						<u-form-item label="用量">
							<u-input v-model="form.material_num" placeholder="请输入物料用量" />
						</u-form-item>
					</template>

				</view>
			</view>
			<view class="data_con">
				<view class="tit">
					图片
				</view>
				<u-upload name="img_file" @on-choose-complete="chooseComplete" @on-list-change="listChangeFun"
					@on-success="onSuccess" :auto-upload='true' max-count="3" :form-data="uploadParam" :action="action"
					:file-list="fileList"></u-upload>
			</view>
			<view class="subm_btn">
				<u-button @click="submitFun" shape="circle" type="success">提交</u-button>
			</view>

		</u-form>
		<u-select mode="single-column" :list="materialList" v-model="selectShow" @confirm="selectConfirm">
		</u-select>
	</view>
</template>

<script>
	import {
		mapState
	} from 'vuex'
	export default {
		data() {
			return {
				background: {
					backgroundColor: '#3eb984',
				},
				btns: [{
						text: "灌溉",
						val: "watering",
					},
					{
						text: "施肥",
						val: "fertilize",
					},
					{
						text: "喷药",
						val: "spray",
					},
					{
						text: "其他",
						val: "other",
					},
				],
				btnAct: null,
				action: "http://182.92.193.64:8002/api/api_gateway?method=back_source.production.update_image",
				fileList: [],
				fertilizer: [],
				pesticides: [],
				form: {
					task_type: '',
					material_name: '',
					material_id: '',
					material_unit: '',
					surplus_stock: '',
					material_num: '',
					op_content: '',
					imgArr: []
				},
				selectShow: false,
				fertilizerListShow: false,
				pesticidesListShow: false,
				materialList: [],
				uploadParam: {
					photo_type: "taskInfo",
					token: uni.getStorageSync('session_key'),
				}
			}
		},
		onLoad() {
			this.getMaterial();
		},
		filters: {
			task_type(val) {
				switch (val) {
					case "fertilize":
						return "施肥";
					case "watering":
						return "灌溉";
					case "spray":
						return "喷药";
					case "other":
						return "其他";
				}
			},
		},
		computed: {
			taskInfo() {
				return this.$store.getters.getState
			},
			fertilizerList() {
				return this.fertilizer.map(item => {
					return {
						value: item.material_id,
						label: item.material_name,
						material_unit: item.material_unit,
						surplus_stock: item.surplus_stock,
					}
				})
			},
			pesticidesList() {
				return this.pesticides.map(item => {
					return {
						value: item.material_id,
						label: item.material_name,
						material_unit: item.material_unit,
						surplus_stock: item.surplus_stock,
					}
				})
			}
		},
		methods: {
			selectTask(index) {
				this.btnAct = index;
				if (this.btnAct == 1 || this.btnAct == 2) {
					this.form.material_name = ''
				}
				this.form.task_type = this.btns[index].val
			},
			async getMaterial() {
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=back_source.warehouse.operator_list_material',
				})
				this.fertilizer = res.fertilizer;
				this.pesticides = res.pesticides;
				console.log(this.fertilizer)
				console.log(this.pesticides)
			},
			selectConfirm(e) {
				e.map(item => {
					this.form.material_name = item.label;
					this.form.material_id = item.value;
					this.materialList.some(i => {
						if (i.value == item.value) {
							console.log(i);
							this.form.material_unit = i.material_unit;
							this.form.surplus_stock = i.surplus_stock;
							this.form.material_num = '';
							return true
						}
					})
				})
			},
			selectMaterial() {
				if (this.taskInfo.task_type == 'fertilize' || this.btnAct == 1) {
					this.materialList = this.fertilizerList
				} else if (this.taskInfo.task_type == 'spray' || this.btnAct == 2) {
					this.materialList = this.pesticidesList
				}
				this.selectShow = true;
			},
			listChangeFun(lists, name) {
				// console.log(lists)
				console.log(222)
				this.form.imgArr = lists
			},
			chooseComplete(lists, name) {
				console.log(111)
				uni.showLoading({
					title: '上传中'
				});
			},
			onSuccess() {
				console.log(333)
				uni.hideLoading();
			},
			async submitFun() {
				if (this.form.material_num > Number(this.form.surplus_stock)) {
					uni.showToast({
						title: '物料库存不足',
						mask: true,
						icon: "none",
					})
					return false
				}
				let imgArr = this.form.imgArr.map(item => {
					return item.response.data.src
				})
				//flag为1点击列表进入详情,0点击按钮进入
				let task_type = ""
				if (this.taskInfo.flag == 0) {
					task_type = this.form.task_type
					if (task_type == '') {
						uni.showToast({
							title: '请选择任务类型！',
							mask: true,
							icon: "none",
							duration: 2000
						})
						return false
					}
				} else if (this.taskInfo.flag == 1) {
					task_type = this.taskInfo.task_type
				}
				const res = await this.$myRequest({
					url: '/api/api_gateway?method=back_source.production.add_farming_record',
					data: {
						task_id: this.taskInfo.task_id,
						massif_id: this.taskInfo.massif_id,
						task_type: task_type,
						task_content: this.taskInfo.task_content,
						op_content: this.form.op_content,
						material_id: this.form.material_id,
						material_num: this.form.material_num,
						image_list: JSON.stringify(imgArr),
					}
				})
				if (res) {
					uni.showToast({
						title: '提交成功！',
						mask: true,
						icon: "success",
						duration: 2000,
						success: function() {
							uni.navigateTo({
								url: "../index/index"
							})
						}
					})
				}
			}
		}
	}
</script>

<style lang="scss">
	.subm_btn {
		padding: 20rpx 40rpx;
	}

	.task_type {
		padding: 30rpx;
		border-bottom: 20rpx solid #f8f8f8;
		display: flex;
		align-items: center;

		.tit {
			font-size: 36rpx;
			font-weight: 600;
			margin-right: 10rpx;
		}

		.btn-box {
			.btn {
				padding: 6rpx 16rpx;
				border: 1px solid #3eb984;
				margin: 0 10rpx;
				border-radius: 8rpx;
				font-size: 26rpx;
				color: #3eb984;
			}

			.btn.active {
				background: #3eb984;
				color: #fff;
			}
		}
	}

	.tit {
		font-size: 36rpx;
		font-weight: 600;
		border-bottom: 1px solid #eee;
		padding: 20rpx 0;
	}

	.data_con {
		padding: 30rpx;
		border-bottom: 10px solid #f8f8f8;

		.data-box {
			padding: 0 40rpx;
		}

	}
</style>
