<template>
	<view class="page" :style="'background-color: '+theme.bg+';color: '+theme.text">
		<view class="header" :style="{ paddingTop: statusBar + 'px', backgroundColor: theme.bg }">
			<view class="header-inner">
				<text class="header-title" :style="'color: '+theme.text">{{ i18n.tabBar.market }}</text>
			</view>
		</view>

		<view class="subtabs">
			<view class="subtab-item">
				<text class="subtab-text" :style="'color: '+theme.text">{{ i18n.market.crypto }}</text>
				<view class="subtab-underline" style="background-color: #3c9cff;"></view>
			</view>
		</view>

		<view class="section-title" :style="'color: '+theme.text">{{ i18n.tabBar.market }}</view>

		<scroll-view scroll-y class="list">
			<view v-for="(item,index) in list" :key="item.symbol" class="row" :style="rowStyle(index)" @click="gokline(item)">
				<view class="row-left">
					<view class="logo-wrap" :style="'background-color: '+(theme.fu_bg || '#F5F6F7')">
						<image v-if="item.logo" class="logo" :src="item.logo" mode="aspectFit"></image>
						<text v-else class="logo-text" :style="'color: '+theme.text">{{ item.symbol.slice(0, 1) }}</text>
					</view>
					<view class="coin-info">
						<text class="pair" :style="'color: '+theme.text">{{ item.symbol }}</text>
						<view class="price-line">
							<text class="price" :style="'color: '+priceColor(item)">{{ item.priceText }}</text>
							<text class="change" :style="'color: '+priceColor(item)">{{ item.changeText }}</text>
						</view>
					</view>
				</view>

				<view class="row-mid">
					<text class="mid-top" :style="'color: '+theme.text">{{ item.rightTop }}</text>
					<view class="mid-sub" :style="'color: '+(theme.fu_text || '#9AA0A6')">
						<text class="sub-label">H:</text>
						<text class="sub-val">{{ item.high }}</text>
					</view>
				</view>

				<view class="row-right">
					<text class="right-top" :style="'color: '+theme.text">{{ item.rightTop2 }}</text>
					<view class="right-sub" :style="'color: '+(theme.fu_text || '#9AA0A6')">
						<text class="sub-label">L:</text>
						<text class="sub-val">{{ item.low }}</text>
					</view>
				</view>
			</view>
		</scroll-view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				statusBar: uni.getSystemInfoSync().statusBarHeight,
				theme: '',
				list: [],
				realTimeTimer: null,
				realTimeInFlight: false
			}
		},
		computed: {
			i18n() {
				return this.$t('message');
			}
		},
		onShow() {
			this.theme = this.$store.state.lightTheme
			this.startRealTime()
		},
		onHide() {
			this.stopRealTime()
		},
		onUnload() {
			this.stopRealTime()
		},
		methods: {
			formatFixed(val, fixed) {
				const n = Number(val)
				if (!Number.isFinite(n)) return val == null ? '' : String(val)
				const f = Number.isFinite(Number(fixed)) ? Number(fixed) : 2
				return n.toFixed(f)
			},
			startRealTime() {
				this.stopRealTime()
				this.getMarketList()
				this.realTimeTimer = setInterval(() => {
					this.getMarketList()
				}, 3000)
			},
			stopRealTime() {
				if (this.realTimeTimer) {
					clearInterval(this.realTimeTimer)
					this.realTimeTimer = null
				}
				this.realTimeInFlight = false
			},
			formatAmountUnit(num) {
				const n = Number(num)
				if (!Number.isFinite(n) || n === 0) return '0w'
				const abs = Math.abs(n)
				if (abs >= 1e8) return (n / 1e8).toFixed(2) + 'w'
				if (abs >= 1e4) return (n / 1e4).toFixed(2) + 'w'
				return n.toFixed(2) + 'w'
			},
			getMarketList() {
				if (this.realTimeInFlight) return
				this.realTimeInFlight = true
				this.post('/market/get_coin').then(res => {
					if (res.code == 1) {
						const coin = (res.data && Array.isArray(res.data.coin)) ? res.data.coin : []
						this.list = coin.map((c) => {
							const increase = Number(c && c.increase != null ? c.increase : 0)
							const dir = increase > 0 ? 1 : (increase < 0 ? -1 : 0)
							const priceJd = Number(c && c.price_jd != null ? c.price_jd : 2)
							const close = Number(c && c.close != null ? c.close : 0)
							const high = c && c.high != null ? this.formatFixed(c.high, priceJd) : ''
							const low = c && c.low != null ? this.formatFixed(c.low, priceJd) : ''
							
							return {
								coinname: (c && (c.coinname || c.name)) ? (c.coinname || c.name) : '',
								bb_type: c && c.bb_type != null ? c.bb_type : '',
								rawSymbol: c && c.symbol ? c.symbol : '',
								symbol: (c && c.name ? (c.name + '/USDT') : (c && c.symbol ? c.symbol : '')),
								priceText: Number.isFinite(close) ? close.toFixed(priceJd) : '0',
								changeText: (Number.isFinite(increase) ? (increase * 100).toFixed(2) : '0.00') + '%',
								dir,
								rightTop: c && c.amount ? c.amount : '',
								rightTop2: c && c.count_price ? this.formatAmountUnit(c.count_price) : '',
								high,
								low,
								logo: c && (c.logo_image || c.logo || ''),
								usdt: close
							}
						})
					}
				}).finally(() => {
					this.realTimeInFlight = false
				})
			},
			gokline(item) {
				const symbol = (item && item.rawSymbol) ? item.rawSymbol : (item && item.symbol ? item.symbol : '')
				const title = item && item.coinname ? item.coinname : ''
				const bbType = item && item.bb_type != null ? item.bb_type : ''
				// #ifdef H5
				uni.navigateTo({
					url: '/pages/tradingView/h5?title=' + title + '&bb_type=' + bbType + '&symbol=' + symbol
				})
				// #endif
				// #ifdef APP-PLUS
				uni.navigateTo({
					url: '/pages/tradingView/index?title=' + title + '&bb_type=' + bbType + '&symbol=' + symbol + '&close=' + (item && item.usdt != null ? item.usdt : '')
				})
				// #endif
			},
			priceColor(item) {
				if (item.dir > 0) return '#16C784'
				if (item.dir < 0) return '#EA3943'
				return this.theme.text
			},
			rowStyle(index) {
				const border = this.theme.fu_bg || '#F0F0F0'
				if (index === this.list.length - 1) return ''
				return 'border-bottom: 1rpx solid ' + border
			}
		}
	}
</script>

<style lang="scss" scoped>
 .page {
	min-height: 100vh;
	background: #ffffff;
	display: flex;
	flex-direction: column;
 }
 
 .header {
 	position: sticky;
 	top: 0;
 	z-index: 10;
 }
 
 .header-inner {
 	height: 88rpx;
 	display: flex;
 	align-items: center;
 	padding: 0 24rpx;
 }
 
 .header-title {
 	font-size: 34rpx;
 	font-weight: 700;
 	line-height: 1;
 }
 
 .subtabs {
 	padding: 14rpx 24rpx 0;
 }
 
 .subtab-item {
 	display: inline-flex;
 	flex-direction: column;
 	align-items: flex-start;
 }
 
 .subtab-text {
 	font-size: 26rpx;
 	font-weight: 500;
 	line-height: 1.2;
 }
 
 .subtab-underline {
 	width: 42rpx;
 	height: 6rpx;
 	border-radius: 999rpx;
 	margin-top: 10rpx;
 }
 
 .section-title {
	padding: 14rpx 24rpx 10rpx;
	font-size: 34rpx;
	font-weight: 800;
 }
 
 .list {
	flex: 1;
	min-height: 0;
 }
 
 .row {
	display: flex;
	align-items: center;
	padding: 40rpx 15rpx;
 }
 
 .row-left {
 	display: flex;
 	align-items: center;
 	flex: 1 1 46%;
 	min-width: 0;
 }
 
 .logo-wrap {
 	width: 56rpx;
 	height: 56rpx;
 	border-radius: 999rpx;
 	display: flex;
 	align-items: center;
 	justify-content: center;
 	flex: 0 0 56rpx;
 }
 
 .logo {
 	width: 36rpx;
 	height: 36rpx;
 }
 
 .logo-text {
 	font-size: 26rpx;
 	font-weight: 700;
 }
 
 .coin-info {
 	margin-left: 16rpx;
 	min-width: 0;
 	flex: 1;
 }
 
 .pair {
 	display: block;
 	font-size: 28rpx;
 	font-weight: 800;
 	line-height: 1.2;
 	white-space: nowrap;
 	overflow: hidden;
 	text-overflow: ellipsis;
 }
 
 .price-line {
 	margin-top: 8rpx;
 	display: flex;
 	align-items: baseline;
 	gap: 14rpx;
 }
 
 .price {
 	font-size: 22rpx;
 	line-height: 1.2;
 }
 
 .change {
 	font-size: 22rpx;
 	line-height: 1.2;
 	font-weight: 500;
 }
 
 .row-mid,
 .row-right {
 	display: flex;
 	flex-direction: column;
 	align-items: flex-end;
 	justify-content: center;
 	flex: 0 0 27%;
 	min-width: 0;
 }
 
 .row-mid {
 	padding-right: 10rpx;
 }
 
 .mid-top,
 .right-top {
 	font-size: 24rpx;
 	font-weight: 600;
 	line-height: 1.2;
 	white-space: nowrap;
 }
 
 .mid-sub,
 .right-sub {
 	margin-top: 10rpx;
 	display: flex;
 	align-items: baseline;
 	gap: 10rpx;
 	white-space: nowrap;
 }
 
 .sub-label {
 	font-size: 20rpx;
 	line-height: 1.2;
 }
 
 .sub-val {
 	font-size: 20rpx;
 	line-height: 1.2;
 }
</style>