<template>
	<view class="">
		<!--  #ifndef MP-WEIXIN -->
		<u-navbar title="农资用量" :autoBack="true" :safeAreaInsetTop="true" bgColor="#eee" color="#fff"
			leftIconColor="#000" rightText="添加" titleStyle="color:#000;font-weight:bold;" placeholder
			@rightClick="handleAdd">
		</u-navbar>
		<!--  #endif  -->
		<!--  #ifdef MP-WEIXIN -->
		<view class="addBtn" @click="handleAdd">
			+
		</view>
		<!--  #endif -->
		<!-- <view class=" background-color-fff box-sizing-border-box padding-20">
			<u-search></u-search>
		</view> -->
		<template v-if="costMaterialList.length>0">
			<view v-for="(item,index) in costMaterialList" :key="index">
				<view class="flex aic jcsa background-color-fff margin-top-20">
					<view class="width-100 flex jcc ">
						<u-icon name="bag-fill" size="28" color="#2b7"></u-icon>
					</view>
					<view class="width-390 padding-20">
						<view class="">
							{{ transformMaterialName(item.materialId)}}
						</view>
						<view class="">
							{{item.materialCount}}{{item.measureUnit}}
						</view>
						<view class="font-size-25 font-color-l3">
							{{item.workingStart}}到{{item.workingFinish}}
						</view>
					</view>
					<view class="font-size-28 flex1 padding-right-20 font-color-2b7 flex jcsb">
						<view @click="edit(item.costId)"
							class="border-radius-10 background-color-2b7 font-color-fff padding-tb-10 padding-lr-20">
							查看
						</view>
						<view @click="del(item.costId)"
							class="border-radius-10 background-color-danger font-color-fff padding-tb-10 padding-lr-20">
							删除
						</view>
					</view>
				</view>
			</view>
		</template>
		<!-- 无数据控件 -->
		<u-empty v-else mode="data" icon="https://cdn.uviewui.com/uview/empty/data.png"/>
		<!-- 弹出层 -->
		<u-popup :show="popupVisiable" @close="popupVisiable=false" closeable closeOnClickOverlay>
			<view class="padding-70">
				<uni-forms ref="form" :rules="rules" :model="form">
					<uni-forms-item label="数量" name="materialCount" type="number">
						<uni-easyinput type="text" v-model="form.materialCount" primaryColor="#2b7" placeholder="请输入数量" />
					</uni-forms-item>
					<uni-forms-item label="计量单位" name="measureUnit" >
						<uni-easyinput type="text" v-model="form.measureUnit" primaryColor="#2b7" placeholder="请输入计量单位" />
					</uni-forms-item>
					<uni-forms-item label="农资" name="materialId">
						<uni-data-select v-model="form.materialId" :localdata="fmtMaterialList" placeholder="请选择农资"></uni-data-select>
					</uni-forms-item>
					<uni-forms-item label="开始时间" name="workingStart">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="form.workingStart" placeholder="请选择开始时间" />
					</uni-forms-item>
					<uni-forms-item label="结束时间" name="workingFinish">
						<uni-datetime-picker type="date" :clear-icon="false" v-model="form.workingFinish"  placeholder="请选择结束时间"/>
					</uni-forms-item>
				</uni-forms>
				<u-button @click="submit" type="primary" customStyle="background-color:#2b7; border:none;margin-top:20rpx" text="确定"></u-button>
			</view>
		</u-popup>
		<!-- 提示组建 -->
		<u-toast ref="uToast"></u-toast>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				//taskID
				taskId:null,
				popupVisiable: false,
				form: {},
				//农资工时列表
				costMaterialList: [],
				//农资列表
				materialList: [],
				queryParams: {
					pageSize: null,
					pageNum: null,
					materialId: null,
					taskId:null
				},
				//表单校验规则 
				rules:{
					materialCount:{rules:[{required: true,errorMessage: '请填写数量'},{format:'number',errorMessage:'数量必须为数字'}]},
					measureUnit:{rules:[{required: true,errorMessage: '请填计量单位'}]},
					materialId:{rules:[{required: true,errorMessage: '请选择农资'}]},
					workingStart:{rules:[{required: true,errorMessage: '请选择开始时间'}]},
					workingFinish:{rules:[{required: true,errorMessage: '请选择结束时间'}]}
				},
			}
		},
		onLoad(option) {
			this.taskId = option.taskId;
			this.queryParams.taskId = this.taskId;
			this.getCostMaterialList();
			this.getMaterialList();
		},
		async onPullDownRefresh() {
			await this.getCostMaterialList();
			uni.stopPullDownRefresh();
		},
		computed: {
		  // 格式化 materialList 的数据给下拉选择使用
		  fmtMaterialList() {
		    return this.materialList.map(item => ({
		      text: item.materialName,
		      value: item.materialId,
		      disable: false
		    }));
		  }
		},
		methods: {
			//翻译农资工时中的农资姓名
			transformMaterialName(val) {
				let materialName = ""
				this.materialList.forEach((item, index) => {
					if (item.materialId == val) {
						materialName = item.materialName;
					}
				})
				return materialName;
			},
			//重置表单
			reset(){
				this.form={
					costId:null,
					taskId :this.taskId,
					materialCount:null,
					workingStart: null,
					workingFinish: null,
					materialId: null,
					measureUnit:null,
				}
			},
			//获取农资工时列表
			async getCostMaterialList() {
				const {
					rows
				} = await uni.$u.http.get('/agriculture/costMaterial/list', {
					params: this.queryParams
				});
				this.costMaterialList = rows;
			},
			//获取农资列表
			async getMaterialList() {
				const {
					rows
				} = await uni.$u.http.get('/agriculture/materialInfo/list');
				this.materialList = rows;
			},
			//处理新增
			handleAdd(){
				this.popupVisiable=true;
				this.reset();
			},
			//表单提交
			 submit(){
				this.$refs.form.validate().then(res => {
					if(this.form.costId == null){
						uni.$u.http.post('/agriculture/costMaterial',this.form).then(res=>{
							//提示
							this.$refs.uToast.show({type: 'success',message: '新增成功'});
							//关闭弹出层
							this.popupVisiable=false;
							//刷新列表
							this.getCostMaterialList();
						})
					}else{
						uni.$u.http.put('/agriculture/costMaterial',this.form).then(res=>{
							//提示
							this.$refs.uToast.show({type: 'success',message: '修改成功'});
							//关闭弹出层
							this.popupVisiable=false;
							//刷新列表
							this.getCostMaterialList();
						})
					}
				})
			},
			//删除
			del(costId){
				uni.$u.http.delete('/agriculture/costMaterial/' + costId).then(res=>{
					//提示
					this.$refs.uToast.show({type: 'success',message: '删除成功'});
					//刷新列表
					this.getCostMaterialList();
				});
			},
			//查看
			edit(costId){
				uni.$u.http.get('/agriculture/costMaterial/' + costId).then(res=>{
					this.form = res.data;
					this.popupVisiable=true;
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
.addBtn{
	position: fixed;
	right: 40rpx;
	bottom: 160rpx;
	width: 100rpx;
	height: 100rpx;
	border-radius: 50rpx;
	background: #2b7;
	color: #fff;
	font-size: 80rpx;
	text-align: center;
	line-height: 90rpx;
}
</style>