<template>
	<view :style="'background-color:' + theme.bg + ';'" style="min-height: 100vh;">
		<view class="" style="width: 750rpx;height: 360rpx;background: #06C38D;border-radius: 0px 0px 20rpx 20rpx;border-radius: 0 0 20rpx 20rpx;">
			<view class="width-750 relative flex align-center justify-center"
				:style="{height: `calc(${statusBar}px + 110rpx)`}">
				<view class="width-750 fixed1"
					:style="{paddingTop: statusBar + 'px', height: `calc(${statusBar}px + 110rpx)`}">
					<view class="width-750 height-110 padding-w-30 flex align-center justify-center">
						<!-- <view @click="_goback" class="cuIcon-back font-40 color-white"
							style="position: absolute;left: 30rpx;"></view> -->
						<text class="font-36 weight-bold text-white">{{i18n.tabBar.quantify}}</text>
						<image v-if="token" @click="router.push('/pages/index/icoRecord')" class="width-48 height-48 absolute" style="right: 30rpx;" src="/static/imgs/quantify/shezhi@2x.png" mode=""></image>
					</view>
				</view>
			</view>
		</view>
		
		<view class="" style="margin-top: -200rpx;">
			<view @click="todetail(item)" v-for="(item,index) in list" class="margin-lr margin-top" :style="'background-color: ' + theme.fu_bg" style="width: 690rpx;border-radius: 16rpx;">
				<view class="padding">
					<view class="flex align-center justify-between solid-bottom">
						<view class="flex align-center">
							<view class="" style="width: 76rpx;height: 76rpx;border-radius: 38rpx;">
								<image :src="item.cover_image" style="width: 76rpx;height: 76rpx;border-radius: 38rpx;" mode=""></image>
							</view>
							<view class="margin-left-xs">
								<view :style="'color:' + theme.text" class="font-28 text-bold u-line-1">
									{{item.curr_name}}
								</view>
								<view class="font-24 text-bold" style="color: #FF5D53;">
									{{i18n.ico.text12}}: {{item.start_time}}
								</view>
								<view class="font-24 text-bold" style="color: #FF5D53;">
									{{i18n.ico.jiesu}}: {{item.end_time}}
								</view>
							</view>
						</view>
						<button v-if="item.status == 1" class="cu-btn flex align-center justify-center text-white" style="min-width: 140rpx;height: 56rpx;background: #CCCCCC;box-shadow: 0px 4rpx 10rpx 1rpx rgba(1, 101, 238, 0.1);border-radius: 8rpx;">
							<view class="" style="white-space: nowrap;">
								{{i18n.ico.text13}}
							</view>
							<u-icon name="arrow-right" color="#FFFFFF" size="15"></u-icon>
						</button>
						<button v-if="item.status == 2" class="cu-btn flex align-center justify-center text-white" style="min-width: 140rpx;height: 56rpx;background: #2DD1AF;box-shadow: 0px 4rpx 10rpx 1rpx rgba(0, 196, 129, 0.1);border-radius: 8rpx;">
							<view class="" style="white-space: nowrap;">
								{{i18n.ico.text14}}
							</view>
							<u-icon name="arrow-right" color="#FFFFFF" size="15"></u-icon>
						</button>
						<button v-if="item.status == 3" class="cu-btn flex align-center justify-center text-white" style="min-width: 140rpx;height: 56rpx;background: #2DD1AF;box-shadow: 0px 4rpx 10rpx 1rpx rgba(1, 101, 238, 0.1);border-radius: 8rpx;">
							<view class="" style="white-space: nowrap;">
								{{i18n.ico.text15}}
							</view>
							<u-icon name="arrow-right" color="#FFFFFF" size="15"></u-icon>
						</button>
						<button v-if="item.status == 4" class="cu-btn flex align-center justify-center text-white" style="min-width: 140rpx;height: 56rpx;background: #CCCCCC;box-shadow: 0px 4rpx 10rpx 1rpx rgba(1, 101, 238, 0.1);border-radius: 8rpx;">
							<view class="" style="white-space: nowrap;">
								{{i18n.ico.text16}}
							</view>
							<u-icon name="arrow-right" color="#FFFFFF" size="15"></u-icon>
						</button>
					</view>
					<view class="padding-top flex align-center justify-between">
						<view class="text-center">
							<view class=" font-28 text-bold" :style="'color:' + theme.text">
								{{item.count_num}}
							</view>
							<view class="color-C3C3C3 font-24 margin-top-xs">
								{{i18n.ico.text17}}
							</view>
						</view>
						<view class="text-center">
							<view class=" font-28 text-bold" :style="'color:' + theme.text">
								{{item.price}}
							</view>
							<view class="color-C3C3C3 font-24 margin-top-xs">
								{{i18n.ico.text18}}
							</view>
						</view>
						<view class="text-center">
							<view class="color-333333 font-28 text-bold">
								<!-- {{item.real_num}} -->
								<view class="font-20" style="color: #2DD1AF;">
									{{Number(item.jindu).toFixed(2)}}%
								</view>
								<view class="" style="width: 150rpx;margin-top: -20rpx;">
									<u-line-progress :percent="Number(item.jindu)" activeColor="#2DD1AF" :height="10" :show-percent="false"></u-line-progress>
								</view>
							</view>
							<view class="color-C3C3C3 font-24">
								{{i18n.ico.text19}}
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				token:uni.getStorageSync('token'),
				theme: '',
				list:[]
			}
		},
		onShow() {
			if (uni.getStorageSync("theme") == "dark") {
				this.theme = this.$store.state.darkTheme
			} else {
				this.theme = this.$store.state.lightTheme
			}
			this.getList()
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		methods: {
			getList(){
				this.post('/index/ico_list').then(res => {
					console.log('私募内容', res)
					if (res.code == 1) {
						this.list = res.data
					}
				})
			},
			todetail(item){
				if(item.status==1 || item.status==4){
					uni.navigateTo({
						url:'/pages/index/icoDetails?ico=' + item.id
					})
				}else{
					uni.navigateTo({
						url:'/pages/index/icoBuy?ico=' + item.id
					})
				}
			}
		}
	}
</script>

<style>

</style>
