/**
* @Author: 858834013@qq.com
* @Name: process
* @Date: 2022-04-23
* @Desc: 流程
*/
<template>
	<div class="process">
		<u-steps current="1" dot direction="column" inactiveColor="#DCDEDF" activeColor="#3E87FE">
			<u-steps-item v-for="(item,index) in list" :key="index">
				<div slot="desc" class="process_body">
					<div class="process_body_title">
						<div class="process_body_titlel">{{item.title}}</div>
						<div class="process_body_titler">{{item.name}} {{item.time}}</div>
					</div>
					<div v-if="item.desc" class="process_body_desc">
						{{item.desc}}
					</div>
					<div class="fileAndImage" v-if="item.file">
						<div class="file">
							<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/order/icon_fj2.png"
								mode=""></image>
							查看文件
						</div>
						<div class="file">
							<image src="https://images.wanjunshijie.com/mini/buildingMaterialsCloud/order/icon_tp.png"
								mode=""></image>
							查看图片
						</div>
					</div>
				</div>
				<div slot="icon">
					<text v-if='item.status==0' class="icon_success"></text>
					<text v-else-if="item.status==1" class="icon_fail"></text>
					<text v-else-if="item.status==2" class="icon_active"></text>
					<text v-else class="icon_disactive"></text>
				</div>
			</u-steps-item>
		</u-steps>
	</div>
</template>

<script>
	export default {
		data() {
			return {
				show: false,
				list: [{
					title: '等待审批',
					name: '张三',
					time: '2020-01-01 12:22:22',
					desc: '检查合格我是反馈',
					status: 0,
					file: ''
				}, {
					title: '等待审批',
					name: '张三',
					time: '2020-01-01 12:22:22',
					desc: '检查合格我是反馈',
					status: 1,
					file: '1'
				}, {
					title: '等待审批',
					name: '张三',
					time: '2020-01-01 12:22:22',
					desc: '检查合格我是反馈',
					status: 2,
					file: '1'
				}, {
					title: '等待审批',
					name: '张三',
					time: '2020-01-01 12:22:22',
					desc: '检查合格我是反馈',
					status: 3,
					file: '1'
				}, {
					title: '等待审批',
					name: '张三',
					time: '2020-01-01 12:22:22',
					desc: '检查合格我是反馈',
					status: 1,
					file: '1'
				}, {
					title: '等待审批',
					name: '张三',
					time: '2020-01-01 12:22:22',
					desc: '检查合格我是反馈',
					status: 1,
					file: '1'
				}, ]
			}
		},
		props: {
			name: {
				type: String,
				default () {
					return '';
				}
			}
		},
		mounted() {

		},
		onShow() {

		},
		methods: {
			chooseImage() {

			},
		}
	}
</script>

<style scoped lang="scss">
	.process {
		width: 630rpx;
		margin: 0 auto;
	}

	.icon_active {
		width: 18rpx;
		height: 18rpx;
		background: #4087FF;
		border: 4rpx solid #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		border-radius: 50%;
	}

	.icon_disactive {
		width: 18rpx;
		height: 18rpx;
		background: #A1A8B3;
		opacity: 0.39;
		border: 4rpx solid #FFFFFF;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		border-radius: 50%;
	}

	.icon_success {
		background: url(https://images.wanjunshijie.com/mini/buildingMaterialsCloud/order/icon_success.png) no-repeat;
		width: 40rpx;
		height: 40rpx;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		border-radius: 50%;
	}

	.icon_fail {
		background: url(https://images.wanjunshijie.com/mini/buildingMaterialsCloud/order/icon_fail.png) no-repeat;
		width: 40rpx;
		height: 40rpx;
		background-size: 100% 100%;
		display: flex;
		justify-content: center;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
	}

	.process_body_title {
		height: 97rpx;
		display: flex;
		justify-content: space-between;
		width: 566rpx;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		border-top: 1rpx solid #F2F2F2;

		.process_body_titlel {
			font-size: 30rpx;
			font-family: PingFangSC-Medium, PingFang SC;
			font-weight: 500;
			color: #151852;
		}

		.process_body_titler {
			font-size: 26rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #BDBFCF;
		}
	}

	.process_body {
		margin-left: 20rpx;
	}

	.process_body_desc {
		width: calc(566rpx - 12rpx - 12rpx);
		background: #F5F6FA;
		border-radius: 12rpx;
		padding: 12rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #424474;
	}

	.fileAndImage {
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		height: 80rpx;
		display: flex;
		justify-content: flex-start;
		align-items: center;
		flex-wrap: nowrap;
		flex-direction: row;
		align-content: flex-start;
		margin-right: 32rpx;
		font-size: 28rpx;
		font-family: PingFangSC-Regular, PingFang SC;
		font-weight: 400;
		color: #737497;

		.file {
			display: flex;
			justify-content: flex-start;
			align-items: center;
			flex-wrap: nowrap;
			flex-direction: row;
			align-content: flex-start;
			margin-right: 32rpx;
		}

		image {
			width: 28rpx;
			height: 28rpx;
			margin-right: 7rpx;
		}

		text {
			margin-right: 32rpx;
			font-size: 28rpx;
			font-family: PingFangSC-Regular, PingFang SC;
			font-weight: 400;
			color: #151852;
		}
	}
</style>