<template>
	<view class="container u-row-between" v-if="info">
		<Settle :index="pageIndex">
			<view class="content-view">
				<view class="u-flex u-row-center">
					<image :class="['icon', {active: status != 1}]"
						:src="status == 1 ? require('@/static/settle/chenggong@3x.png') : require('@/static/settle/icon-prompt@3x.png')">
					</image>
				</view>
				<view class="txt-box">
					<text :class="['title',index ? 'active' : '']" v-for="(txt,index) in info.txtArr">{{txt}}</text>
				</view>
				<view class="tips-box" v-if="info.tipsArr">
					<text :class="['tips',info.tipsArr.length>1 && index===0 ? 'red' : '']"
						v-for="(txt,index) in info.tipsArr">{{txt}}</text>
				</view>
			</view>
			<template v-slot:bottom>
				<button class="btn-submit" @click="$u.debounce(goPage, 500)">{{info.btnTxt}}</button>
			</template>
		</Settle>
	</view>
</template>

<script>
	import Settle from '@/components/settle/index.vue'

	export default {
		components: {
			Settle
		},

		data() {
			return {
				pageIndex: 2,
				settledInfo: null,
				promptList: [{
					status: 1,
					statusName: '待审核',
					txtArr: ['已提交，等待审核', '正在审核中'],
					btnTxt: '去接单广场逛逛',
					url: '/pages/take/index'
				}, {
					status: 2,
					statusName: '已通过',
					txtArr: ['恭喜，审核通过', '“充电桩安装入驻审核”'],
					btnTxt: '去考试',
					url: '/pages/exam/start'
				}, {
					status: 3,
					statusName: '备选',
					txtArr: ['您已成为', "“充电桩安装备选服务商”"],
					tipsArr: ['后续如有业务，请留意通知！'],
					btnTxt: '去接单广场逛逛',
					url: '/pages/take/index'
				}, {
					status: 4,
					statusName: '已驳回',
					txtArr: ['您的入驻资料已被驳回！', '可重新提交资料！'],
					tipsArr: ['原因：', '图片不够清楚'],
					btnTxt: '重新提交',
					url: '/pages/settle/file'
				}, {
					status: 8,
					statusName: 'step4',
					txtArr: ['您已通过', '“充电桩安装入驻考试”'],
					tipsArr: ['可以正式签约了'],
					btnTxt: '去签约',
					url: '/pages/settle/sign-contract'
				}, {
					status: [5, 6],
					statusName: '未支付保证金',
					txtArr: ['您已成为', "充电桩安装的签约服务商"],
					tipsArr: ['请缴纳1000元质保金'],
					btnTxt: '去缴纳保证金',
					url: '/pages/settle/pay-ensure'
				}, {
					status: 7,
					statusName: '已支付保证金',
					txtArr: ['您已成为', "充电桩安装的正式服务商"],
					btnTxt: '去接单广场逛逛',
					url: '/pages/take/index'
				}],
				// 入驻状态:0=>'待提交',1=>'待审核',2=>'已通过',3=>'备选',4=>'已驳回',5=>'已签约',6=>'未支付保证金',7=>'已支付保证金',8=>'已通过考试',9=>'待提交'
				status: '',
				info: null,

			}
		},
		computed: {
			imageUrl() {
				return this.status == 1 ? require('@/static/settle/chenggong@3x.png') : require(
					'@/static/settle/icon-prompt@3x.png')
			}
		},
		onLoad(e) {
			if (e) {
				if (e.pageIndex) {
					this.pageIndex = e.pageIndex;
				}
			}
			// if(!this.settledInfo){
			// 	this.getBaseInfo()
			// }
			
		},
		onShow() {
			if (!this.settledInfo) {
				this.getBaseInfo()
			}
		},
		computed: {},
		components: {

		},
		methods: {
			async getBaseInfo() {
				const app = getApp()
				const callBack = (vm, result) => {
					vm.settledInfo = result
					vm.status = result.record.status
				}
				let settledInfo = await app.getBaseInfo(this, callBack)
				this.settledInfo = settledInfo
				this.status = settledInfo.record.status
				uni.hideLoading()
				this.initInfo(settledInfo.record)
			},
			initInfo(record) {
				if (!record) {
					this.info = this.promptList[0]
					return
				}
				const status = record.status
				// const status = 7
				const infoArr = this.promptList.filter(item => {
					const itemStatus = item.status
					// console.log(itemStatus,'itemStatus')
					let idx = -2
					if (Array.isArray(itemStatus)) {
						idx = itemStatus.indexOf(status)
					}
					return itemStatus === status || idx >= 0
				})
				const info = infoArr.length > 0 && infoArr[0]
				if (!info) {
					this.info = this.promptList[0]
					return
				}
				if (status === 6) {
					info.tipsArr[0] = '请缴纳' + this.settledInfo.record.deposit + '元质保金'
				} else if (status === 4) {
					info.tipsArr[1] = this.settledInfo.record.reason || ''
				}
				this.info = info
			},
			goPage() {
				const url = this.info.url
				uni.navigateTo({
					url,
				});
			},
		},
	}
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		width: 750rpx;
		// height:500rpx;
		display: flex;
		flex-direction: column;
		background-color: #F4F5F7;
		height: 100%;
		position: absolute;

		.icon {
			margin-top: 68rpx;
			width: 334rpx;
			height: 320rpx;

			&.active {
				width: 224rpx;
				height: 224rpx;
			}
		}

		.content-view {
			background-color: #FFFFFF;
			margin-bottom: 188rpx;
			border-radius: 12rpx;
			padding: 30rpx;
		}

		.txt-box {
			padding-bottom: 50rpx;
		}

		.title {
			display: block;
			font-weight: bold;
			// padding: 0 30rpx;
			text-align: center;
			font-weight: bold;
			font-size: 44rpx;
			color: #2272FF;

			&.active {
				color: #666666;
				font-size: 24rpx;
				font-weight: 300rpx;
				margin-top: 26rpx;
			}
		}

		.tips-box {
			margin-top: 32rpx;
			text-align: center;
		}

		.tips {
			text-align: center;
			line-height: 44rpx;
			font-size: 32rpx;
			color: #666;

			&.red {
				color: red;
			}
		}

		.btn-submit {
			margin-top: 112rpx;
			width: 600rpx;
			height: 104rpx;
			line-height: 104rpx;
			border-radius: 52rpx;
			background: #2272ff;
			font-size: 32rpx;
			color: #fff;

			&:disabled {
				border: 2rpx solid #999;
				background-color: #f3f3f3;
				color: #999;
			}
		}
	}
</style>
