<template>
	<view>
		<navBar leftText="事件详情" :hideNavBg="true"></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<view class="categoryC fixed" :style="'top:'+navH+'px;'">
			<view :class="'item relative '+(selectCategory==index?'select':'')" v-for="(item,index) in categoryList" :key="index" @click="clickCategoryItem(index)">
				{{item}}
			</view>
		</view>
		<view v-if="investDetails" class="contentC fixed" :style="'top:'+contentTop+'px;'">
			<view v-if="selectCategory==0" class="former">
				<ua-markdown :source="former" />
				<text class="ai">（AI合成）</text>
			</view>
			<view v-if="selectCategory==1" class="former">
				<ua-markdown :source="investDetails.forecast" />
			</view>
			<!-- <view v-if="selectCategory==2" class="former">
				<ua-markdown :source="investDetails.fact" />
			</view> -->
			<view v-if="selectCategory==2" class="stockC">
				<view class="stockCategoryList flexWrap">
					<view class="item flexColumnCenter" :style="'background-color:'+item.bgColor+';color:'+item.color+';'" v-for="(item,index) in stockCategoryList" :key="index">
						<view class="num">{{item.num}}</view>
						<view class="title">{{item.title}}</view>
					</view>
				</view>
				<view class="stockList">
					<view class="item" v-for="(item,index) in investDetails.related_stocks" :key="index" @click="clickLookRelatedStockItem(item)">
						<view class="titleCorrelationC flex">
							<view class="title flex1">{{item.code+' '+item.name}} </view>
							<view class="correlation">相关度: {{accMul(item.score,100)}}%</view>
						</view>
						<view v-if="item.sw_primary_sector" class="category">{{item.sw_primary_sector}}</view>
						<view class="content">{{item.description}}</view>
					</view>
				</view>
			</view>
			<view v-if="selectCategory==3">
				<view class="conceptList">
					<view class="item" v-for="(item,index) in conceptList" :key="index">
						<view class="titleChgStockNumC flex">
							<view class="title">{{item.concept}}</view> 
							<view v-if="item.price_info" :class="'chg '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">{{getChgRateStr(item.price_info.avg_change_pct)}}%</view>
							<view v-if="item.price_info" :class="'stockNum '+(getRateUpOrDown(item.price_info.avg_change_pct)?'down':'up')">{{item.stock_count}} 只股票</view>
						</view>
						<view class="content">{{item.description}}</view>
						<view class="hotStockC flex">
							<view class="title">热门个股</view>
							<view class="stockList flex">
								<view class="stockItem" v-for="(sitem,sindex) in item.stocks.slice(0,3)" :key="sindex">{{sitem.stock_name}}</view>
								<view class="more" @click="clickStockMore(item)">+{{item.stock_count-3}}更多</view>
							</view>
							<!-- <view class="notVipC flex" @click="clickNotVip()">
								<image class="icon" src="/static/icon/home/conceptCenter/lock.png" mode="widthFix"></image>
								<view>需升级Pro会员查看{{item.stock_count}}只个股</view>
							</view> -->
						</view>
						<view class="transactionDateHistoryTimeC flex">
							<view class="transactionDate flex1">交易时间：{{item.price_info?item.price_info.trade_date:''}}</view>
							<view class="historyTimeC flex" @click="clickHistoricalTimeline(item)">
								<image class="icon" src="/static/icon/home/conceptCenter/timeAxis.png" mode="widthFix"></image>
								<view>历史时间轴</view>
							</view>
						</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { inject } from 'vue';
	import { investEventDetails, stockCategoryList } from '@/request/api';
	import { accMul } from '@/utils/util';
	
	export default {
		data() {
			return {
				navH:inject('navHeight'),
				eventId:'',		//事件id
				contentTop:'',
				investDetails:null,
				former:'',	//背景
				categoryList:['背景','推演','相关股票'],
				selectCategory:0,
				stockCategoryList:[
					{
						title:'全部股票',
						num:0,
						bgColor:'#D82A2A',
						color:'white'
					},
					{
						title:'大周期',
						num:0,
						bgColor:'#3A5D9C',
						color:'white'
					},
					{
						title:'TMT板块',
						num:0,
						bgColor:'#FFBF00',
						color:'white',
					},
					{
						title:'大金融地产',
						num:0,
						bgColor:'#FFF4D3',
					},
					{
						title:'大消费',
						num:0,
						bgColor:'#CDEEEE',
					},
					{
						title:'公共产业板块',
						num:0,
						bgColor:'#DEEBF7'
					}],
				accMul:accMul
			}
		},
		onLoad(e) {
			this.contentTop = this.navH+(30+72)/750*inject('windowWidth')
			if(e.id)
			{
				this.eventId = e.id
				this.getEventDetailsData()
			}
		},	
		methods: {
			/**
			 * 点击切换栏目
			 */
			clickCategoryItem(index)
			{
				if(this.selectCategory!=index)	
				{
					this.selectCategory = index
				}
			},
			/**
			 * 点击相关股票
			 * @param {Object} item  股票数据
			 */
			clickLookRelatedStockItem(item)
			{
				uni.navigateTo({
					url:'/pages/index/stockDetails/stockDetails?type=2&code='+item.code+'&des='+item.description+'&name='+item.name
				})
			},
			/**
			 * 获取事件详情数据
			 */
			getEventDetailsData()
			{
				investEventDetails(this.eventId).then(res=>{
					if(res.code==200)
					{
						let detail = res.data.detail
						for (let item of this.stockCategoryList) {
							item.num = detail.sector_stats[item.title]
						}
						this.investDetails = detail
						this.former = detail.former.replace('<answer>','').replace('</answer>','')
					}else 
						uni.showToast({
							title:res.message,
							icon:'none'
						})
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
page 
{
	background-color: #070707; 
}
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.categoryC
{
	margin-top: 10rpx;
	padding: 20rpx 10rpx 0;
	left: 0;
	right: 0;
	border-radius: 20rpx 20rpx 0 0;
	.item 
	{
		display: inline-block;
		padding: 0 30rpx;
		line-height: 76rpx;
		font-size: 27rpx;
		font-weight: 500;
		color: #939393;
	}
	.item.select 
	{
		font-weight: bold;
		color: #F3C368;
	}
}
.contentC 
{
	background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
	left: 0;
	right: 0;
	bottom: env(safe-area-inset-bottom);
	margin: 0 25rpx;
	border-radius: 10rpx;
	overflow-y: scroll;
	.former
	{
		padding: 40rpx 25rpx;
		.ai
		{
			font-size: 28rpx;
			color: #C00000;
		}
	}
	.stockCategoryList
	{
		margin-top: 30rpx;
		padding: 0 20rpx;
		.item 
		{
			margin: 0 30rpx 20rpx 0;
			width: calc((100% - 60rpx)/3);
			height: 100rpx;
			border-radius: 10rpx;
			.num 
			{
				font-size: 36rpx;
				font-weight: bold;
			}
			.title 
			{
				font-size: 24rpx;
				font-weight: 500;
			}
		}
		.item:nth-child(3n)
		{
			margin-right: 0;
		}
	}
	.stockList 
	{
		padding: 22rpx 25rpx 30rpx;
		.item 
		{
			padding: 22rpx 0 30rpx;
			border-bottom: solid 1rpx #E4E4E4;
			.title
			{
				font-size: 30rpx;
				font-weight: bold;
				color: #222;
			}
			.correlation
			{
				background-color: #F973161A;
				padding: 0 13rpx;
				line-height: 40rpx;
				border-radius: 5rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #F97316;
			}
			.category 
			{
				display: inline-block;
				padding: 0 10rpx;
				line-height: 28rpx;
				border: solid 1rpx #F6604A;
				font-size: 20rpx;
				font-weight: 500;
				color: #F6604A;
				border-radius: 5rpx;
			}
			.content 
			{
				margin-top: 18rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #666;
				line-height: 1.2rem;
			}
		}
	}
	.conceptList
	{
		padding: 30rpx 25rpx;
		.item
		{
			background: linear-gradient(-30deg, #FFF6F0 0%, #FEFEFE 100%);
			margin-bottom: 24rpx;
			border-radius: 10rpx;
			.titleChgStockNumC 
			{
				padding: 24rpx 18rpx 0;
				.title 
				{
					margin-right: 20rpx;
					font-size: 30rpx;
					font-weight: bold;
					color: #3D3D3D;
				}
				.chg
				{
					margin-right: 20rpx;
					padding: 0 13rpx;
					line-height: 40rpx;
					border-radius: 20rpx;
					font-size: 22rpx;
					font-weight: bold;
					color: white;
				}
				.chg.up 
				{
					background-color: #EC3440;
				}
				.chg.down 
				{
					background-color: #355422;
				}
				.stockNum 
				{
					padding: 0 16rpx;
					line-height: 36rpx;
					border-radius: 20rpx;
					font-size: 22rpx;
					font-weight: bold;
				}
				.stockNum.up
				{
					color: #EC3440;
					border: solid 2rpx #EC3440; 
				}
				.stockNum.down
				{
					color: #355422;
					border: solid 2rpx #355422; 
				}
			}
			.content 
			{
				margin-top: 26rpx;
				padding: 0 22rpx;
				font-size: 24rpx;
				font-weight: 500;
				color: #71675D;
				display: -webkit-box;
				-webkit-box-orient: vertical;
				-webkit-line-clamp: 2;
				overflow: hidden;
				text-overflow: ellipsis;
			}
			.hotStockC 
			{
				margin-top: 30rpx;
				padding: 0 20rpx;
				.title 
				{
					margin-right: 10rpx;
					font-size: 24rpx;
					font-weight: bold;
					color: #936E5C;
				}
				.stockList 
				{
					font-size: 22rpx;
					.stockItem 
					{
						background-color: #3D3D3D;
						margin-right: 10rpx;
						padding: 0 8rpx;
						line-height: 36rpx;
						border-radius: 5rpx 20rpx 5rpx 20rpx;
						color: #EFDDD1;
					}
					.more 
					{
						color: #936E5C;
						line-height: 36rpx;
					}
				}
				.notVipC 
				{
					background-color: #3D3D3D;
					padding: 0 21rpx 0 16rpx;
					line-height: 36rpx;
					border-radius: 5rpx;
					font-size: 22rpx;
					color: #F3C368;
					.icon 
					{
						margin-right: 9rpx;
						width: 15rpx;
						height: auto;
					}
				}
			}
			.transactionDateHistoryTimeC 
			{
				padding: 20rpx 22rpx 30rpx;
				.transactionDate 
				{
					font-size: 20rpx;
					font-weight: 500;
					color: #666;
				}
				.historyTimeC 
				{
					background-color: #F3C368;
					padding: 0 10rpx 0 15rpx;
					line-height: 36rpx;
					border-radius: 10rpx;
					font-size: 22rpx;
					font-weight: 500;
					color: #101213;
					.icon 
					{
						margin-right: 7rpx;
						width: 20rpx;
						height: auto;
					}
				}
			}
		}
	}
}
</style>
