<template>
	<view>
		<navBar leftText="详情"></navBar>
		<image class="topBg absolute" src="/static/image/mine/myTopBg.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 v-if="selectCategory==index" class="line absolute"></view>
			</view>
		</view>
		<view v-if="investDetails" class="contentC fixed" :style="'top:'+contentTop+'px;'">
			<view v-if="selectCategory==0" class="former">
				<ua-markdown :source="former" />
			</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==4" class="">
				<view class="conceptList">
					<view class="item relative" v-for="(item,index) in investDetails.extracted_concepts" :key="index" @click="clickConceptItem()">
						<image class="cover" :src="item.first_image" mode="aspectFill"></image>
						<view class="infoC absolute">
							<view class="title">{{item.name}}</view>
							<view class="content relative">{{item.reason}}
								<text class="lookDetails absolute">查看详情</text>
							</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:'#C00000',
						color:'white'
					},
					{
						title:'大周期',
						num:0,
						bgColor:'#305496',
						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">
.topBg
{
	top: 0;
	left: 0;
	width: 100%;
	height: auto;
}
.categoryC
{
	background-color: white;
	margin-top: 10rpx;
	padding-top: 20rpx;
	left: 0;
	right: 0;
	border-radius: 20rpx 20rpx 0 0;
	.item 
	{
		display: inline-block;
		padding: 0 30rpx;
		line-height: 75rpx;
		font-size: 32rpx;
		font-weight: 500;
		color: #42485B;
	}
	.item.select 
	{
		font-weight: bold;
		color: #F97316;
		.line 
		{
			background-color: #F97316;
			left: calc((100% - 50rpx)/2);
			bottom: 0;
			width: 50rpx;
			height: 2rpx;
		}
	}
}
.contentC 
{
	background-color: white;
	left: 0;
	right: 0;
	bottom: 0;
	overflow-y: scroll;
	.former
	{
		padding: 40rpx 25rpx;
	}
	.stockCategoryList
	{
		margin-top: 18rpx;
		padding: 0 24rpx;
		.item 
		{
			margin: 0 20rpx 20rpx 0;
			width: calc((100% - 40rpx)/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 
		{
			margin-bottom: 20rpx;
			.cover 
			{
				display: block;
				width: 100%;
				height: 350rpx;
				border-radius: 10rpx;
			}
			.infoC 
			{
				background: linear-gradient(to bottom,#00000080,#000);
				padding: 20rpx 23rpx;
				left:0;
				width: 100%;
				bottom: 0;
				border-radius: ;
				color: white;
				.title 
				{
					font-size: 26rpx;
					font-weight: bold;
				}
				.content 
				{
					display: -webkit-box;
					-webkit-line-clamp: 2;
					-webkit-box-orient: vertical;
					overflow: hidden;
					margin-top: 10rpx;
					font-size: 20rpx;
					font-weight: 500;
					line-height: 1.2rem;
					.lookDetails 
					{
						right: 0;
						color: #F97316;
					}
				}
			}
		}
	}
}
</style>
