<template>
	<view class="list-content">
		<pageHead pageTitle="合同审批履历" :showBack="true" style="margin-bottom: 10px;"></pageHead>
		<view class="list-card">
			<view class="list-card">	
				<MySteps :options="contractAduit" active-color="#E60012" :active="active" direction="column" />
				</MySteps>
					
			</view>
		</view>

	</view>

</template>

<script>
	import * as ApproveApi from '@/api/work/approve'
	import {editFlow,updateContract} from '@/api/work/contract/contract.js'
	import { stateFormat,stateFormatLow } from '@/utils/common.js'
	const { environment } = require('../../../config/environment.js')
	export default {
		data() {
			return {
				projectPageParam: {
					pageNum: 1,
					pageSize: 5
				},

				contractAduit:[],
				returnMsg:"",
				contractId:'',
				totalPrice:0,
				jumpUrl:"",
				active:0
			}
		},
		onLoad (params) {
			this.contractId = params.businessId
			this.getAuditHistory()
		},
		methods: {
			getAuditHistory(){
				let param = {
					businessId:this.contractId,
					auditFlows:[3,4]
					}
				ApproveApi.getAuditHistory(param).then(res => {
					if (res.code == 200) {
						this.contractAduit = res.data
						this.contractAduit.some(it=>{
							this.$set(it,"title",it.desc)
							this.$set(it,"desc",it.auditTime)		
						})
						this.active = this.contractAduit.length-1
					}
				})
			},
			stateFormat,
			stateFormatLow,
			getBargainInfo() {
				ApproveApi.contractById(this.contractId).then(res => {
					if (res.code == 200) {
						this.contractInfo = res.data
						//再次查询电梯信息
						this.getBargainLift();
					}
				})
			},
			
			getBargainLift() {
				ApproveApi.contractLiftByNo(this.contractInfo.contractNo).then(res => {
					if (res.code == 200) {
						this.$set(this.contractInfo,'elevatorList',res.rows)
						 
					}
				})
			},

			goBack () {
			  //uni.navigateBack({ delta: 1});
			  uni.navigateTo({
			  	url: '/pages/work/approve/list'
			  })

			}
		}
	}
</script>

<style>
	page {
		background-color: #EFF2F6;
	}
</style>

<style lang="scss" scoped>
	::v-deep .Links {
		span {
			width: 100%;
		}
	}
	.list-card__price {
		width: 40%;
	}
	.card_bottom{
		display:flex;
		width: 100%;
		align-items: center;
		height: 75px;
		position:fixed;
		bottom: 0px;
		margin-left: 0px;
		background: #FFFFFF;
		.button-left {
			width: 48%;
			height: 84rpx;
			background: #FFF8F8;
			border-radius: 200rpx 0rpx 0rpx 200rpx;
			box-shadow: 0px 5px 6px 0px #EADEDF;
			.reject-text {
				font-size: 32rpx;
				color: #E60114;
				line-height: 44rpx;
			}
		}

		.button-right {
			width: 48%;
			height: 84rpx;
			background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
			box-shadow: 0px 5px 6px 0px #EADEDF;
			border-radius: 0rpx 200rpx 200rpx 0rpx;

			.pass-text {
				font-size: 32rpx;
				color: #FFFFFF;
				line-height: 44rpx;
			}
		}

	}
	.card-title{
		font-weight: 600;
		font-size: 16px;
		margin-bottom: 10px;
	}
	.txt-label {
		color: #3C485B;
		font-weight: 400;
		font-size: 12px;
		text-align: center;
		margin-bottom: 5px;
	}
	.txt-value {
		color: #000000;
		text-align: center;
		font-size: 16px;
		font-weight: 600;
	}
	.txt-value2 {
		color: #E60012;
		text-align: center;
		font-size: 16px;
		font-weight: 600;
	}
	.card__price{
		text-align: center;
		width: 90%;
		background-color: #FFF5F6;
		border-radius: 4px;
		padding:7px 5px;
	}
	.val-posi{
		width: 100%;
		text-align: right;
		font-size: 16px;
	}

	::v-deep .u-badge--error {
		background-color: #E60114;
	}

	.flex-center {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.flex-center-between {
		display: flex;
		align-items: center;
		justify-content: space-between;
		margin-bottom: 10px;
	}

	.flex-center-middle {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.ml40 {
		margin-left: 40rpx
	}

	.mt32 {
		margin-top: 32rpx;
	}

	.list-content {
		// padding: 20rpx 24rpx;

		.button-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
		}
		.divider {
			margin: 32rpx 0;
			border: 2rpx solid #E9EEF3;
		}

		.list-card {
			margin: 0px 24rpx;
			background: #FFFFFF;
			border-radius: 8rpx;
			padding: 32rpx;
			margin-bottom: 20rpx;

			&__title {
				font-weight: 600;
				font-size: 34rpx;
				color: #000000;
				line-height: 48rpx;
				width: 480rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			&__area {
				font-size: 32rpx;
				color: rgba(0, 0, 0, 0.85);
				line-height: 32rpx;
			}

			&__text {
				font-size: 32rpx;
				color: #6B7688;
				line-height: 40rpx;
			}

			.developer {
				color: rgba(0, 0, 0, 0.85);
				width: 490rpx;
				white-space: nowrap;
				overflow: hidden;
				text-overflow: ellipsis;
			}

			.button-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			.button-left {
				width: 350rpx;
				height: 84rpx;
				background: #FFF8F8;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-shadow: 0rpx 4rpx 16rpx 0rpx #DFDFDF;
				.reject-text {
					font-size: 32rpx;
					color: #E60114;
					line-height: 44rpx;
				}
			}

			.button-right {
				width: 350rpx;
				height: 84rpx;
				background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
				box-shadow: 0rpx 4rpx 16rpx 0rpx #DFDFDF;
				border-radius: 0rpx 200rpx 200rpx 0rpx;

				.pass-text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}

		.popup-content {
			padding: 20rpx 20rpx;

			.return_content{
				width: 92%;
				padding: 20rpx 28rpx;
				background: #EFF2F6;
				border-radius: 4px;
			}
			.return_title{
				font-family: PingFangSC, PingFang SC;
				font-weight: 600;
				font-size: 16px;
				color: rgba(0,0,0,0.85);
				margin-bottom: 10rpx;
			}
			.button-icon {
				width: 28rpx;
				height: 28rpx;
				margin-right: 8rpx;
			}

			.button-left {
				width: 350rpx;
				height: 84rpx;
				background: #FFF8F8;
				border-radius: 200rpx 0rpx 0rpx 200rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;
				.reject-text {
					font-size: 32rpx;
					color: #E60114;
					line-height: 44rpx;
				}
			}

			.button-right {
				width: 350rpx;
				height: 84rpx;
				background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
				border-radius: 0rpx 200rpx 200rpx 0rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;

				.pass-text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
			.button-left-one {
				width: 220rpx;
				height: 84rpx;
				background: #FFF8F8;
				border-radius: 200rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;
				.reject-text {
					font-size: 32rpx;
					color: #E60114;
					line-height: 44rpx;
				}
			}

			.button-right-one {
				width: 220rpx;
				height: 84rpx;
				background: linear-gradient(90deg, #DC0736 0%, #E60114 100%);
				border-radius: 200rpx;
				box-shadow: 0px 2px 8px 0px #DFDFDF;

				.pass-text {
					font-size: 32rpx;
					color: #FFFFFF;
					line-height: 44rpx;
				}
			}
		}
	}
</style>
