<template>
	<view>
		<view 
			class="single-exit"
			v-for="(exit, index) in exitMaterialList"
			:key="index"
		>
			<view class="exit-upper">
				<view class="upper-lef">
					{{ exit.backPerson.slice(0, 1) }}
				</view>
				<view class="upper-rig">
					<h4 style="font-size: 16px;">{{ exit.backPerson }}</h4>
					<h4 style="color: #989898;">{{ exit.unitName }}</h4>
				</view>
			</view>
			<view class="exit-lower">
				<view>
					<span>退料工程</span>
					<h4>{{ exit.lotName }}</h4>
				</view>
				<view>
					<span>退料类型</span>
					<h4>{{ exit.typeName }}</h4>
				</view>
				<view>
					<span>联系方式</span>
					<h4>{{ exit.phone }}</h4>
				</view>
				<view>
					<span>申请时间</span>
					<h4>{{ exit.backTime }}</h4>
				</view>
			</view>
			<view class="exit-btns">
				<view 
					style="background-color: #3788FF;" 
					v-show="exit.typeId != null"
					@click="seeDetail(exit.id, exit.typeId)"
				>
					<uni-icons style="color: #fff;" type="eye" ></uni-icons>
					查看
				</view>
				<view 
					style="background-color: #FCA30D;"
					v-show="exit.typeId == null"
					@click="chooseMaterial(exit.agreementId, exit.id, exit.taskId)"
				>
					<uni-icons style="color: #fff;" type="compose" ></uni-icons>
					修改
				</view>
				<view 
					style="background-color: #FF4242;"
					@click="delOffer(exit.id)"
					v-show="exit.taskStatus != '40'"
				>
					<uni-icons style="color: #fff;" type="trash"></uni-icons>
					删除
				</view>
			</view>
			<view class="sticky-area">
				<h4
					v-show="exit.taskStatus == '37'"
				>
					待退料审核
				</h4>
				<h4
					v-show="exit.taskStatus == '38'"
				>
					退料已审核
				</h4>
				<h4
					v-show="exit.taskStatus == '39'"
				>
					退料核查中
				</h4>
				<h4
					v-show="exit.taskStatus == '40'"
					style="border: 1px solid #27D870; color: #27D870;"
				>
					退料完成
				</h4>
				<h4
					v-show="exit.taskStatus == '101'"
					style="border: 1px solid #EE603D; color: #EE603D;"
				>
					退料审核驳回
				</h4>
			</view>
		</view>
		<uni-popup
			ref="popup" 
			type="center"
			:mask-click="false"
		>
			<view class="popup">
				<view class="pop-top">
					<h4>新增退料申请</h4>
					<uni-icons 
						style="color: #AAAAAA; font-weight: bold;" 
						type="closeempty" 
						size="24"
						@click="closePopup"
					>
					</uni-icons>
				</view>
				<view class="select-area">
					<uni-forms ref="exitForm" :modelValue="exitFormData" :rules="rules" label-position="top">
						<uni-forms-item name="backPerson" required label="退料人" label-width="150">
							<uni-easyinput v-model="exitFormData.backPerson" placeholder="请输入"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="phone" required label="退料人电话" label-width="150">
							<uni-easyinput type="number" maxlength="11" v-model="exitFormData.phone" placeholder="请输入"></uni-easyinput>
						</uni-forms-item>
						<uni-forms-item name="unitId" required label="选择退料单位" label-width="150">
							<zxz-uni-data-select
							  v-model="exitFormData.unitId"
							  :localdata="deptRange"
							  @change="deptChange"
							  :clear="false"
							  filterable
							></zxz-uni-data-select>
						</uni-forms-item>
						<uni-forms-item name="lotId" required label="选择退料工程" label-width="150">
							<zxz-uni-data-select
							  v-model="exitFormData.lotId"
							  :localdata="projRange"
							  :clear="false"
							  filterable
							></zxz-uni-data-select>
						</uni-forms-item>
						<uni-forms-item name="exitTime" required label="选择预退料时间" label-width="150">
							<uni-datetime-picker type="date" :clear-icon="false" v-model="exitFormData.exitTime"/>
						</uni-forms-item>
						<uni-forms-item name="remark" label="备注" label-width="150">
							<uni-easyinput v-model="exitFormData.remark" placeholder="请输入"></uni-easyinput>
						</uni-forms-item>
						<button 
							class="submit-btn" 
							@click="formSubmit"
							:disabled="btnDisabled"
						>
							确认
						</button>
					</uni-forms>
				</view>
			</view>
		</uni-popup>
		<u-loading-page :loading="showLoading" color="#000" loading-text="表单提交中,请稍后..."></u-loading-page>
	</view>
</template>

<script>
import { basePath } from '../../public'
	export default {
		data() {
			return {
				exitFormData: {
					backPerson: '',
					phone: '',
					unitId: '',
					lotId: '',
					exitTime: '',
					remark: ''
				},
				deptRange: [
					
				],
				projRange: [
					
				],
				rules: {
					backPerson: {
						rules: [
							{
								required: true,
								errorMessage: '请输入退料人！'
							}
						]
					},
					phone: {
						rules: [
							{
								required: true,
								errorMessage: '请输入退料人电话！'
							}
						]
					},
					unitId: {
						rules: [
							{
								required: true,
								errorMessage: '请选择退料部门！'
							}
						]
					},
					lotId: {
						rules: [
							{
								required: true,
								errorMessage: '请选择退料工程！'
							}
						]
					},
					exitTime: {
						rules: [
							{
								required: true,
								errorMessage: '请选择预退料时间！'
							}
						]
					}
				},
				exitMaterialList: [
					
				],
				newAdd: {
					taskType: '36',
					taskStatus: '37',
					createBy: uni.getStorageSync('userInfo').userid,
					companyId: uni.getStorageSync('userInfo').sysUser.companyId,
					agreementId: '',
					unitId: '',
					unitName: '',
					// agreementName: '',
					lotId: '',
					phone: '',
					backTime: '',
					backPerson: '',
					remark: '',
          taskId: ''
				},
				fetchedList: [],
				ableRoleArr: ['admin', 'em04', 'me02', 'dm03'],
				showLoading: false,
				btnDisabled: false
			}
		},
		methods: {
			closePopup () {
				this.$refs.popup.close()
			},
			deptChange (e) {
				let that = this
				console.log(e, that.fetchedList);
				that.fetchedList.forEach(list => {
					if (e.value == list.id) that.newAdd.unitName = list.name 
				})
				that.$api.fetchMaterial.getProjList({
					id: e.value
				}).then(res => {
					console.log(res);
					if (res.data.code == 200) {
						that.projRange = res.data.data.map(item => {
							return {
								text: item['name'],
								value: item['id']
							}
						})
					} else {
						uni.showToast({
							icon: 'none',
							title: res.data.msg
						})
					}
				}).catch(err => {
					console.log(err);
				})
			},
			formSubmit () {
				let that = this
				that.showLoading = true
				that.btnDisabled = true
				that.$refs.exitForm.validate().then(formData => {
					that.$refs.popup.close()
					// 判断单位id和工程id是否匹配
					that.$api.exitMaterial.ifAgreement({
						unitId: formData.unitId,
						projectId: formData.lotId
					}).then(res => {
						console.log(res);
						if (res.data.code == 200) {
							if (res.data.data.agreementId != null) {
								that.newAdd.agreementId = res.data.data.agreementId
								that.newAdd.backPerson = formData.backPerson
								that.newAdd.phone = formData.phone
								that.newAdd.unitId = formData.unitId
								that.newAdd.lotId = formData.lotId
								that.newAdd.backTime = formData.exitTime
								that.newAdd.remark = formData.remark
								console.log(that.newAdd);
								that.$api.exitMaterial.newExitList(that.newAdd).then(res => {
									console.log(res);
									if (res.data.code == 200) {
										that.showLoading = false
										uni.showToast({
											icon: 'none',
											title: '新增申请成功！',
											success: () => {
												uni.redirectTo({
													url: '/pages/exitMaterial/exitMaterial'
												})
											}
										})
									} else {
										that.btnDisabled = false
										that.showLoading = false
										uni.showToast({
											icon: 'none',
											title: res.data.msg
										})
									}
								}).catch(err => {
									console.log(err);
								})
							}
						} else {
							uni.showToast({
								icon: 'none',
								title: res.data.msg,
								success: () => {
									that.btnDisabled = false
								}
							})
						}
					}).catch(err => {
						uni.showToast({
							icon: 'none',
							title: '单位与工程不匹配！',
							success: () => {
								that.btnDisabled = false
							}
						})
					})
				})
			},
			seeDetail (id, typeId) {
				uni.navigateTo({
					url: `/pages/exitMaterialDetail/exitMaterialDetail?id=${id}&typeId=${typeId}`
				})
			},
			chooseMaterial (agreeId, id,taskId) {
				uni.navigateTo({
					url: `/pages/exitMaterialSelect/exitMaterialSelect?agreeId=${agreeId}&id=${id}&taskId=${taskId}`
				})
			},
			delOffer (id) {
				console.log(id);
				let that = this
				uni.showModal({
					title: '删除申请',
					content: '确认删除此条申请吗？',
					success: (res) => {
						if (res.confirm) {
							that.$api.exitMaterial.delMaterial({
								id
							}).then(delRes => {
								console.log(delRes);
								if (delRes.data.code == 200) {
									uni.showToast({
										icon: 'none',
										title: '删除成功！',
										success: () => {
											uni.redirectTo({
												url: '/pages/exitMaterial/exitMaterial'
											})
										}
									})
								} else {
									uni.showToast({
										icon: 'none',
										title: delRes.data.msg
									})
								}
							}).catch(err => {
								console.log(err);
							})
						}
					}
				})
			}
		},
		onNavigationBarButtonTap() {
			let that = this
			let nowRole = uni.getStorageSync('roles')
			let found = false
			console.log(nowRole);
			for (let role of nowRole) {
				if (that.ableRoleArr.includes(role)) {
					found = true;
					break;
				}
			}
			if (!found) {
				uni.showToast({
					icon: 'none',
					title: '当前角色没有申请权限！'
				})
			} else {
				that.$refs.popup.open()
			}
		},
		onShow() {
			let that = this
			console.log(uni.getStorageSync('userInfo').userid);
			console.log(uni.getStorageSync('userInfo').sysUser.companyId);
			// 初始化获取机具退料申请列表
			that.$api.exitMaterial.exitMaterialList({
				companyId: uni.getStorageSync('userInfo').sysUser.companyId
				// companyId: 1
			}).then(res => {
				console.log(res);
				if (res.data.code == 200) {
					that.exitMaterialList = res.data.data
				} else if (res.data.code == 500) {
					uni.showToast({
						icon: 'none',
						title: '登录状态已过期，请重新登录！',
						success: () => {
							uni.removeStorageSync('token')
							uni.removeStorageSync('userInfo')
							uni.reLaunch({
								url: '/pages/login/login'
							})
						}
					})
				}
			}).catch(err => {
				console.log(err);
			})
			// 初始化获取退料单位，退料工程列表
			that.$api.fetchMaterial.getDeptList().then(res => {
				if (res.data.code == 200) {
					console.log(res);
					that.fetchedList = res.data.data
					that.deptRange = res.data.data.map(item => {
						return {
							text: item['name'],
							value: item['id']
						}
					})
					console.log(that.deptRange);
				}
			}).catch(err => {
				console.log(err);
			})
		}
	}
</script>

<style lang="scss">
	body{
		background-color: #f8f8f8;
	}
	.single-exit{
		width: 95%;
		margin: 20rpx auto;
		background-color: #fff;
		border-radius: 15rpx;
		box-sizing: border-box;
		padding: 15rpx;
		position: relative;
		.exit-upper{
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx;
			border-bottom: 1px solid #D7D7D7;
			display: flex;
			align-items: center;
			.upper-lef{
				width: 12%;
				height: 5vh;
				border-radius: 15rpx;
				background-color: #409EFF;
				color: #fff;
				display: flex;
				justify-content: center;
				align-items: center;
				font-size: 24px;
			}
			.upper-rig{
				flex: 1;
				box-sizing: border-box;
				padding: 10rpx 20rpx;
				display: flex;
				flex-direction: column;
				justify-content: space-around;
				h4{
					font-weight: normal;
					font-size: 14px;
				}
			}
		}
		.exit-lower{
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx;
			border-bottom: 1px solid #D7D7D7;
			view{
				width: 100%;
				display: flex;
				align-items: center;
				margin-bottom: 15rpx;
				font-size: 14px;
				span{
					color: #9D9D9D;
					padding-right: 20rpx;
				}
				h4{
					color: #000;
					font-size: 14px;
					font-weight: normal;
				}
			}
			view:last-child{
				margin-bottom: 0;
			}
		}
		.exit-btns{
			width: 100%;
			box-sizing: border-box;
			padding: 15rpx;
			display: flex;
			justify-content: flex-end;
			view{
				box-sizing: border-box;
				padding: 8rpx 25rpx;
				border-radius: 15rpx;
				color: #fff;
				margin-right: 15rpx;
				font-size: 14px;
			}
			view:last-child{
				margin-right: 0;
			}
		}
		.sticky-area{
			position: absolute;
			top: 20rpx;
			right: 20rpx;
			/* width: 11vh;
			height: 10vh;
			image{
				width: 100%;
				height: 100%;
			} */
			h4{
				box-sizing: border-box;
				padding: 8rpx 20rpx;
				border-radius: 15rpx;
				font-size: 14px;
				font-weight: normal;
				background-color: #fff;
				border: 1px solid #3788FF; 
				color: #3788FF;
			}
		}
	}
	.popup{
		width: 80vw;
		height: 90vh;
		background-color: #fff;
		border-radius: 15rpx;
		overflow-y: auto;
		background: linear-gradient(#D9E7FE, #fff, #fff, #fff);
		.pop-top{
			width: 100%;
			height: 5vh;
			box-sizing: border-box;
			padding: 0 25rpx;
			display: flex;
			justify-content: space-between;
			align-items: center;
		}
		.select-area{
			width: 85%;
			margin: 40rpx auto;
		}
	}
</style>
