<template>
	<view class="container">
		<block v-if="status">
			<image class="icon" :src="web('icon_order_completion.png')" mode="aspectFit"></image>
			<text class="status">{{typeText.title}}</text>
			<view style="margin-top: 40rpx;">
				<text class="text">{{typeText.name}}：</text>
				<text class="price-box">￥<text class="unit">{{price}}</text></text>
			</view>
			<view style="display: flex;margin-top: 100rpx;">
				<button v-if="type != 'deposit'" style="color: #222;border: 1px solid #CED3D9;" class="plain"
					plain="true" @click="goHome">{{$t('index.back-home')}}</button>
				<button class="plain" style="margin-left: 30rpx;background: #B60001;color: white;" plain="true"
					@click="lookOrder">{{$t('index.look-order')}}</button>
			</view>
		</block>
		<block v-else>
			<image class="icon" src="http://manage.51svalue.com/group1/M00/00/7A/CgAAEWOYHymAB-aGAAAt23j9cxY847.png"
				mode="aspectFit"></image>
			<text class="status">{{$t('index.submit-err')}}</text>
			<view style="display: flex;margin-top: 100rpx;">
				<button style="color: #222;border: 1px solid #CED3D9;" class="plain" plain="true"
					@click="goHome">{{$t('index.back-home')}}</button>
				<button class="plain" style="margin-left: 30rpx;background: #B60001;color: white;" plain="true"
					@click="tryAgain">{{$t('index.try-again')}}</button>
			</view>
		</block>
		<view style="position: absolute;left: 0;right: 0;bottom: 0;height: 476rpx;z-index: 100;">
			<image style="width: 100%;height: 100%;" :src="web('icon_company_bg.png')"></image>
		</view>
	</view>
</template>

<script>
	import {
		web
	} from '@/utils/util.js'
	export default {
		name: 'status',
		data() {
			return {
				type: '',
				status: true,
				price: 0
			}
		},
		computed: {
			typeText() {
				switch (this.type) {
					case 'deposit':
						return {
							title: this.$t('index.msg-deposit-pay-success'),
								name: this.$t('index.msg-deposit-sum'),
								goList: false
						}
						break
					case 'payment':
						return {
							title: this.$t('index.msg-balance-pay-succsee'),
								name: this.$t('index.msg-balance-sum'),
								goList: false
						}
						break
					default:
						return {
							title: this.$t('index.msg-ordering-succ'),
								name: this.$t('index.msg-order-sum'),
								goList: true
						}
				}
			}
		},
		onLoad(options) {
			if (options.price) {
				this.price = options.price
			} else {
				this.status = false
			}
			this.type = options.type
		},
		methods: {
			web(name) {
				return web(name)
			},
			goHome() {
				uni.switchTab({
					url: '/pages/home/index'
				});
			},
			tryAgain() {
				uni.navigateBack({
					delta: 1
				});
			},
			lookOrder() {
				if (this.typeText.goList) { // 订单支付时跳转到列表
					uni.switchTab({
						url: '/pages/dealt/index'
					});
				} else { // 定金支付和尾款支付时返回订单详情
					uni.navigateBack({
						delta: 1
					});
				}
			}
		}
	}
</script>

<style lang="scss" scoped>
	.container {
		height: 100vh;
		background-color: #fff;
		display: flex;
		flex-direction: column;
		align-items: center;

		.icon {
			width: 200rpx;
			height: 200rpx;
			margin-top: 100rpx;
		}

		.status {
			font-weight: 500;
			font-size: 48rpx;
			color: #222222;
			line-height: 48rpx;
			margin-top: 60rpx;
		}

		.text {
			font-size: 40rpx;
			color: #99A0AF;
			margin-top: 40rpx;
			line-height: 1;
		}

		.price-box {
			font-size: 40rpx;
			color: #B60001;
			margin-top: 20rpx;
			margin-bottom: 110rpx;

			.unit {
				font-size: 40rpx;
				color: #B60001;
				margin-left: 4px;
				font-weight: bold;
			}
		}

		.primary {
			width: 400rpx;
			height: 80rpx;
			line-height: 80rpx;
			border-radius: 20rpx;
			font-size: 28rpx;
			color: #fff;
			margin-top: 230rpx;
			margin-bottom: 20rpx;
			background-color: #B60001;
		}

		.plain {
			width: 300rpx;
			height: 96rpx;
			line-height: 96rpx;
			border: 1px solid #CED3D9;
			border-radius: 2rpx;
			font-size: 30rpx;
			background: linear-gradient(235deg, #FFFFFF 0%, rgba(237, 248, 255, 0) 100%);
			margin-bottom: 20rpx;
		}
	}
</style>