<!--招标变更-->
<template>
	<div>
		<div v-if="isShow">
			<div class='pt20 pb20'>
				
				<view class="main-card boxshow">
					<view class="card-title ">
						{{ baseData.LEAVE_PERSON+"【"+baseData.DEPARTMENT_NAME+"】" }}
					</view>
					<view class="line-block between-circle"></view>
					<image src="../../static/images/leave/spwq.png" mode="aspectFit" class="spwc-ico" v-if="baseData.FINANCEPROINST_NEXTID==9000"></image>
					<div class="base-body card-content ">
						<view  style="text-align: center; padding-bottom: 12upx;">
							<view class="leave-day">{{baseData.DURATION_DAYS}}<text style="font-size: 22upx;">天</text></view>
							<text class="leave-value">{{baseData.LEAVE_VALUE}}</text>
						</view>
						<view class="uni-flex uni-column" style="margin-left: 130upx;">
							<view class="uni-flex uni-row" style="align-items: center;">
								<view class="date-ico">起</view>
								<text style="font-weight:bold;">{{$util.cutDate(baseData.LEAVE_STARTDATE,'YYYY-MM-DD')}}</text>
								<text class="fs24">{{getDays(baseData.LEAVE_STARTDATE)}}</text>
							</view>
							<view class="uni-flex uni-row end-date" style="align-items: center;">
								<view class="date-ico">止</view>
								<text style="font-weight:bold;">{{$util.cutDate(baseData.LEAVE_ENDDATE,'YYYY-MM-DD')}}</text>
								<text class="fs24">{{getDays(baseData.LEAVE_ENDDATE)}}</text>
							</view>
						</view>
					</div>
					<view class="line-block"></view>
					<div class="card-bottom ">
						{{baseData.LEAVE_REASON}}
					</div>
						
					
				</view>
				
			<!-- v-if="isResolve" -->
				<view class="button-box" v-if="baseData.NOWSTAFF_ID==users.UserId" >
				
					<span @tap="showPop(2000)"><image src="../../static/images/sh-btn.png" mode="aspectFit"></image> 审核 </span>
					<span @tap="showPop(3000)" v-if="baseData.CAN_REJECT===1"><image src="../../static/images/bh-btn.png" mode="aspectFit"></image> 驳回</span>
				</view>
				
			</div>
			
			
			<view class="base-info" v-if="baseData.RejectList.length>0">
				<div class="uni-list-cell uni-collapse">
					<div class="cat-box uni-list-cell-navigate">
						<b>驳回意见</b>
					</div>
					<div class="process-box uni-collapse-content uni-active">
						<processUnit :item="baseData.RejectList[0]" :approveType="0"/>
					</div>
				</div>
			</view>
			<view class="base-info" v-if="baseData.ApprovedList.length>0">
				<div class="uni-list-cell uni-collapse">
					<div class="cat-box uni-list-cell-navigate" :class="cardShow ? ' uni-navigate-bottom' : 'uni-navigate-right'" @tap="cardShow =!cardShow">
						<b>审批流程</b>
					</div>
					<div class="process-box uni-collapse-content" :class="cardShow ? 'uni-active' : ''" v-show="cardShow">
						<processUnit v-for="item in baseData.ApprovedList" :item="item" :key="item.APPROVED_ID" :approveType="1"/>
					</div>
				</div>
			</view>
		</div>
		<block v-else>
			<noFound v-if="loadingType === 2" :foundType="foundType" />
		</block>
		
	</div>
</template>

<script>
	import {mapGetters} from 'vuex'
	import processUnit from '@/components/auditingProcess/item.vue'
	import filesUnit from '@/components/filesComponent/fileUnit.vue'
	export default {
		data() { 

			return {
				baseData: {
					
				},
				isShow: false,
				loadingType: 1,
				foundType:0,
				
				cardShow:true,
				isSign: false,
				isResolve: false,
				signInfo: {
					
				}
			}
		},
		components:{
			processUnit,
			filesUnit
		},
		computed: {
			...mapGetters({'users':'getUser'}),
			
		},
		methods: {
			getDays (value) {
				let _date = new Date(value)
				let myddy = _date.getDay();//获取存储当前日期
				let weekday=["星期日","星期一","星期二","星期三","星期四","星期五","星期六"];
				return  weekday[myddy]
			},
			getDetail (id) {
				let _this = this
				_this.$request.$get('GetStaffLeaveDetail',{
					FinanceProinstId: id
				}).then(rs => {
				
					if(!rs.ResultCode ||rs.ResultCode!='100') {
						_this.isShow = false
						
					}else{
						_this.isShow = true
					}
					uni.hideLoading()
					
					_this.baseData = rs.Data
					
					if(_this.baseData.NOWSTAFF_ID==_this.users.UserId) { // 判断是否是当前审核人
						_this.isResolve= true
					}
					_this.$forceUpdate()
					
				})
			},
			showPop(type) {
				let _this = this
				let url = ''
				switch (type) {
					case 4000: 
							url = '/pages/auditingPop/transfer?businessType=7000&PROINST_ID='+_this.baseData.FINANCEPROINST_ID+'&NOWACTINST_ID='+_this.baseData.NOWACTDEF_IDS
						break;
					case 2000:
							url = '/pages/auditingPop/toExamine?businessType=7000&PROINST_ID='+_this.baseData.FINANCEPROINST_ID+'&NOWACTINST_ID='+_this.baseData.NOWACTDEF_IDS+'&ApproName='+_this.baseData.ACTINST_NAME+'&NeedApproved='+_this.baseData.NeedApproved
						break;
					case 3000:
							url = '/pages/auditingPop/reject?businessType=7000&PROINST_ID='+_this.baseData.FINANCEPROINST_ID+'&NOWACTINST_ID='+_this.baseData.NOWACTDEF_IDS
						break;
				}
				this.$util.toNextRoute('navigateTo',url)
			}
		},
		onLoad(option) {
			uni.showLoading({
				title:'正在加载'
			})
		
			this.getDetail(option.id)
			
			let _this = this
			uni.$on('7000', function (data){
				
				if(data) {
					uni.showLoading({
						title:'正在加载'
					})
					_this.getDetail(_this.baseData.FINANCEPROINST_ID)
				}
			});
		},
		onShow() {
			
		},
		onUnload() {
			this.$util.addUserBehavior()
			uni.$off('7000');
		},
		onHide() {
		
			
		}
	}
</script>

<style scoped>
	@import url("/common/css/tenderingDetail.css");
	.pt20 {
		padding-top: 24upx;
	}
	.fs24 {
		margin-left: 8upx;
		font-size: 24upx;
	}
	.main-card {
		padding: 0 24upx;
		position: relative;
		box-shadow: 0 8upx 32upx 0 #ededed;
	}

	.card-title {
		color: #333;
		font-size: 28upx;
		padding: 28upx 12upx 18upx 12upx ;
	}
	.line-block {
		/* height: 2upx; */
		border-bottom: 2upx dashed #E4E6EC;
		/* background-color: #E4E6EC; */
		width: 100%;
	}
	.between-circle{
		position: relative;
	}
	.between-circle:before {
		content: '';
		height: 25upx;
		width: 25upx;
		border-radius: 50%;
		/* background-color: #f9f9f9; */
		position: absolute;
		background-image: url('../../static/images/leave/circle.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		left: -35upx;
		top: -12upx;
		z-index: 1;
		transform: rotate(180deg);
	}
	.between-circle:after {
		content: '';
		height: 25upx;
		width: 25upx;
		border-radius: 50%;
		background-color: #f9f9f9;
		background-image: url('../../static/images/leave/circle.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		position: absolute;
		right: -35upx;
		z-index: 1;
		top: -12upx;
		
	}
	.card-content {
		justify-content: center;
		margin-top: 16upx;
		padding: 28upx 24upx 38upx 24upx;
		align-items: center;
	}
	.leave-value:before {
		content: '';
		width: 25upx;
		height: 25upx;
		background-image: url('../../static/images/leave/leave-type.png');
		background-position: center;
		background-size: contain;
		background-repeat: no-repeat;
		margin-right: 8upx;
	}
	.leave-value {
		font-size: 22upx;
		background-color: #EDB86C;
		
		height: 40upx;
		color: #fff;
		border-radius: 20upx;
		padding: 0 16upx; 
		justify-content: flex-start;
		display: flex;
		align-items: center;
	}
	.date-ico {
		font-size: 20upx;
		border-radius: 50%;
		height: 30upx;
		width: 30upx;
		color: #fff;
		text-align: center;
		line-height: 30upx;
		background-color: #BBC3C8;
		margin-right: 8upx;
	}
	.leave-day {

		font-size: 48upx;
	}
	.end-date:before {
		content: '';
		position: absolute;
		height: 53upx;
		width: 1upx;
		border-left: 2upx dashed #BBC3C8;
		top: -42upx;
		left: 13upx;
	}
	.end-date {
		margin-top: 32upx;
		position: relative;
	}
	.card-bottom {
		padding: 18upx 12upx 28upx 12upx;
	}
	.spwc-ico {
		position: absolute;
		width: 124upx;
		height: 124upx;
		right: 48upx;
		top: 4upx;

	}
</style>
