<template>
	<view :style="'background-color: '+theme.bg+';color: '+theme.text" style="height: 100vh;">
		<myNav :title="i18n.recharge.title3"></myNav>
		<!-- 身体 -->
		<view class="width-750 padding-b-40 padding-w-30 padding-t-84">
			<view class="flex direction-column align-center">
				<image class="width-186 height-186" src="/static/imgs/index/tibiok.png" mode=""></image>
				<view class="margin-t-51 margin-b-11">
					<text class="font-42 numbold-font">{{data.price}}</text>
					<text class="font-26 nummedium-font margin-l-5">{{data.name}}</text>
				</view>
				<text class="font-28 color-C3C3C3">{{i18n.recharge.text9}}</text>
			</view>
			<view class="width-690 height-600 radiu-20 margin-t-48 padding-w-32 padding-c-28 flex direction-column justify-between"
			:style="'background-color: '+theme.fu_bg+';color: '+theme.text">
				<view class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.text10}}</view>
					<view class="flex-9 font-28 color-00C481 weight-bold">{{i18n.withdraw.text14}}</view>
				</view>
				<view class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.text11}}</view>
					<view class="flex-9 font-28 weight-bold">{{statusText[data.status]}}</view>
				</view>
				<view class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.text12}}</view>
					<view class="flex-9 font-28 numbold-font">{{data.name}}</view>
				</view>
				<view v-if="data.hash" class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.text13}}</view>
					<view class="flex-9 font-28 numbold-font">{{data.hash}}</view>
				</view>
				<view class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.text14}}</view>
					<view class="flex-9 font-28 numbold-font">{{data.createtime}}</view>
				</view>
				<view v-if="data.address" class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.title5}}</view>
					<view class="flex-9 font-28 numbold-font">{{data.address}}</view>
				</view>
				<view v-if="data.bank_name" class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.title15}}</view>
					<view class="flex-9 font-28 numbold-font">{{data.bank_name}}</view>
				</view>
				<view v-if="data.card_num" class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.title16}}</view>
					<view class="flex-9 font-28 numbold-font">{{data.card_num}}</view>
				</view>
				<view v-if="data.voucher_image" class="flex align-center">
					<view class="flex-3 font-28 color-C3C3C3">{{i18n.recharge.title17}}</view>
					<view class="flex-9">
						<image @click="wacth(data.voucher_image)" class="width-200 height-200 radiu-20" :src="data.voucher_image" mode=""></image>
					</view>
				</view>
				
			</view>
		</view>

	</view>
</template>

<script>
	export default {
		data() {
			return {
				data: '',
				statusText: ['', '', ''],
				theme: '',
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onLoad(e) {
			this.changestatus()
			this.getDetails(e.id)
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
		},
		methods: {
			wacth(url) {
				uni.previewImage({
					urls: [url]
				})
			},
			changestatus() {
				this.statusText[0] = this.i18n.recharge.text15
				this.statusText[1] = this.i18n.recharge.text16
				this.statusText[2] = this.i18n.recharge.text17
			},
			getDetails(id) {
				let obj = {
					id: id,
					cart: 1
				}
				this.post('/wallet/recharge_con', obj).then(res => {
					console.log(res)
					if (res.code == 1) {
						this.data = res.data
					}
				})
			}
		}
	}
</script>

<style lang="scss">
</style>
