<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="costEmployeeList.length>0">
			<view v-for="(item,index) in costEmployeeList" :key="index">
				<view class="flex aic jcsa background-color-fff margin-top-20">
					<view class="width-100 flex jcc ">
						<u-icon name="account-fill" size="28" color="#2b7"></u-icon>
					</view>
					<view class="width-390 padding-20">
						<view class="">
							{{ transformEmployeeName(item.employeeId) }}
						</view>
						<view class="">
							{{item.workingHours}}小时
						</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="workingHours" type="number">
						<uni-easyinput type="text" v-model="form.workingHours" primaryColor="#2b7" placeholder="请输入工时" />
					</uni-forms-item>
					<uni-forms-item label="雇员" name="employeeId">
						<uni-data-select v-model="form.employeeId" :localdata="fmtEmployeeList" 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 {
				//任务ID
				taskId:null,
				popupVisiable: false,
				form: {},
				//人工工时列表
				costEmployeeList: [],
				//雇员列表
				employeeList: [],
				queryParams: {
					pageSize: null,
					pageNum: null,
					employeeId: null,
					tastId:null
				},
				//表单校验规则 
				rules:{
					workingHours:{rules:[{required: true,errorMessage: '请填写工时'},{format:'number',errorMessage:'工时必须为数字'}]},
					employeeId:{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.getCostEmployeeList();
			this.getEmployeeList();
		},
		async onPullDownRefresh() {
			await this.getCostEmployeeList();
			uni.stopPullDownRefresh();
		},
		computed: {
		  // 格式化 employeeList 的数据给下拉选择使用
		  fmtEmployeeList() {
		    return this.employeeList.map(item => ({
		      text: item.employeeName,
		      value: item.employeeId,
		      disable: false
		    }));
		  }
		},
		methods: {
			//翻译人工工时中的雇员姓名
			transformEmployeeName(val) {
				let employeeName = ""
				this.employeeList.forEach((item, index) => {
					if (item.employeeId == val) {
						employeeName = item.employeeName;
					}
				})
				return employeeName;
			},
			//重置表单
			reset(){
				this.form={
					costId:null,
					taskId:this.taskId,
					workingStart: null,
					workingFinish: null,
					workingHours: null,
					employeeId: null
				}
			},
			//获取人工工时列表
			async getCostEmployeeList() {
				const {
					rows
				} = await uni.$u.http.get('/agriculture/costEmployee/list', {
					params: this.queryParams
				});
				this.costEmployeeList = rows;
			},
			//获取雇员列表
			async getEmployeeList() {
				const {
					rows
				} = await uni.$u.http.get('/agriculture/employee/list');
				this.employeeList = rows;
				console.log(11, this.employeeList)
			},
			//处理新增
			handleAdd(){
				this.popupVisiable=true;
				this.reset();
			},
			//表单提交
			 submit(){
				this.$refs.form.validate().then(res => {
					if(this.form.costId == null){
						uni.$u.http.post('/agriculture/costEmployee',this.form).then(res=>{
							//提示
							this.$refs.uToast.show({type: 'success',message: '新增成功'});
							//关闭弹出层
							this.popupVisiable=false;
							//刷新列表
							this.getCostEmployeeList();
						})
					}else{
						uni.$u.http.put('/agriculture/costEmployee',this.form).then(res=>{
							//提示
							this.$refs.uToast.show({type: 'success',message: '修改成功'});
							//关闭弹出层
							this.popupVisiable=false;
							//刷新列表
							this.getCostEmployeeList();
						})
					}
				})
			},
			//删除
			del(costId){
				uni.$u.http.delete('/agriculture/costEmployee/' + costId).then(res=>{
					//提示
					this.$refs.uToast.show({type: 'success',message: '删除成功'});
					//刷新列表
					this.getCostEmployeeList();
				});
			},
			//查看
			edit(costId){
				uni.$u.http.get('/agriculture/costEmployee/' + 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>