<template>
	<view style="padding: 25rpx 20rpx; box-sizing: border-box;">
		<view v-if="keyFactorsInfo" class="flex" style="font-size: 28rpx;"><text>关键因素</text><text
				style="font-size: 24rpx; color: #070707; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #F2C369; margin-left: 10rpx;">{{keyFactorsInfo.total_factors}}</text>
		</view>
		<view class="keyFactorsList">
			<view class="item" v-for="(item, index) in keyFactorsList" :key="index" @click="item.show = !item.show"
				style="margin: 20rpx 0; background-color: #FAFAFC; border-radius: 10rpx; padding: 25rpx 20rpx; color: #2B2B2B;">
				<view style="display: flex; align-items: center; justify-content: space-between;">
					<view style="flex: 1; font-size: 26rpx;"><text>{{item.category_name}}</text><text
							style="font-size: 24rpx; color: #070707; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #F2C369; margin-left: 10rpx;">{{item.factors.length}}</text>
					</view>
					<image v-if="item.show" style="width: 20rpx; height: 12rpx;"
						src="/pagesStock/static/icon/shangJiantou.png" mode="widthFix"></image>
					<image v-else style="width: 20rpx; height: 12rpx;" src="/pagesStock/static/icon/xiaJiantou.png"
						mode="widthFix"></image>
				</view>
			
				<template v-if="item.show">
					<view class="fitem" v-for="(fitem,findex) in item.factors" :key="findex"
						style="margin: 20rpx 0; padding: 20rpx; background-color: white; border-radius: 10rpx; border: 1rpx solid #E7E7E7; color: #2B2B2B; font-weight: 500; font-size: 26rpx;">
						<view class="titleImpactC flex between">
							<view>{{fitem.factor_name}}</view>
							<view v-if="fitem.impact_direction=='negative'" class="impact negative">负面</view>
							<view v-if="fitem.impact_direction=='neutral'" class="impact neutral">中性</view>
							<view v-if="fitem.impact_direction=='positive'" class="impact positive">正面</view>
						</view>
						<view class="valueChgC flex" style="margin-top: 10rpx;">
							<view :class="'value '+(fitem.impact_direction)">{{fitem.factor_value}}{{fitem.factor_unit}}
							</view>
							<view :class="'chgC flex '+(getRateUpOrDown(fitem.year_on_year)?'down':'up')">
								<image v-if="getRateUpOrDown(fitem.year_on_year)" class="icon" src="/pagesStock/static/icon/downArrow.png" mode="widthFix"></image>
								<image v-else class="icon" src="/pagesStock/static/icon/upArrow.png" mode="widthFix"></image>
								<view>{{fitem.year_on_year?fitem.year_on_year:0}}%</view>
							</view>
						</view>
						<view style="margin-top: 10rpx; color: #999999; font-size: 22rpx;">{{fitem.factor_desc}}</view>
						<view style="margin-top: 10rpx; color: #999999; font-size: 22rpx;">影响权重: {{fitem.impact_weight}}</view>
					</view>
				</template>
			</view>
		</view>
		

		<view v-if="timelineInfo" class="flex" style="font-size: 28rpx;"><text>发展时间线</text>
			<text
				style="font-size: 24rpx; color: white; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #EC3440; margin-left: 10rpx;">正面
				{{timelineInfo.positive_events}}</text>
			<text
				style="font-size: 24rpx; color: white; padding: 0rpx 10rpx; border-radius: 3rpx; background-color: #345423; margin-left: 10rpx;">负面
				{{timelineInfo.negative_events}}</text>
		</view>
		<view class="timelineList">
			<view class="item" v-for="(item,index) in timelineList" :key="index" @click="clickAction">
				<view class="impactC flexColumnCenter">
					<image v-if="item.impact_metrics.is_positive==1" class="icon" style="margin-top: 20rpx;"
						src="/pagesStock/static/icon/yuan_shang.png" mode="widthFix"></image>
					<image v-else class="icon" src="/pagesStock/static/icon/yuan_jiang.png" mode="widthFix"></image>
					<view :class="'line flex1 '+(item.impact_metrics.is_positive==1?'up':'down')"></view>
				</view>
				<view
					style="flex: 1; margin-left: 10rpx; background-color: #FAFAFC; padding: 24rpx 15rpx; border-radius: 10rpx; font-weight: 500;">
					<view class="titleTypeC">
						<text class="title">{{item.event_title}}</text>
						<text :class="'eventType '+(item.impact_metrics.is_positive==1?'up':'down')">{{item.event_type}}</text>
					</view>
					<view style="color: #999999; font-size: 20rpx; margin: 15rpx 0;">{{item.event_date}}</view>
					<view style="color: #71675D; font-size: 22rpx;">{{item.event_desc}}</view>
					<view style="display: flex; align-items: center; margin-top: 30rpx;">
						<view style="color: #71675D; font-size: 22rpx; font-weight: 500;">影响度</view>
						<view class="progressBgC">
							<view :class="'progress '+(item.impact_metrics.is_positive==1?'up':'down')" :style="{width: `${item.impact_metrics.impact_score}%`}">
							</view>
						</view>
						<view style="color: #71675D; font-size: 24rpx; font-weight: 500;">{{item.impact_metrics.impact_score}}</view>
					</view>
				</view>
			</view>
		</view>
	</view>
</template>

<script>
	import { getRateUpOrDown } from '@/utils/util';

	export default {
		name: "fzlc-view",
		data() {
			return {
				getRateUpOrDown:getRateUpOrDown
			};
		},
		props: {
			keyFactorsInfo:null,		
			keyFactorsList:Array,		//关键因素数组
			timelineInfo:null,
			timelineList:Array,			//发展时间线数组
		},
		methods: {
			clickAction() {
				this.$emit('detail')
			}
		}
	}
</script>

<style lang="less">
.keyFactorsList 
{
	.item 
	{
		.fitem 
		{
			.impact 
			{
				border-radius: 5rpx; 
				padding: 0 10rpx;
				font-size: 20rpx;
				font-weight: 500;
				color: white; 
			}
			.impact.negative 
			{
				background-color: #345423;
			}
			.impact.neutral
			{
				background-color: #345423;
			}
			.impact.positive 
			{
				background-color: #EC3440;
			}
			.valueChgC 
			{
				.value 
				{
					font-size: 30rpx; 
					font-weight: bold;
					margin-right: 10rpx;
				}
				.value.negative
				{
					color: #345423;
				}
				.value.neutral
				{
					color:#345423;
				}
				.value.positive 
				{
					color: #EC3440;
				}
				.chgC 
				{
					padding: 0 10rpx;
					border-radius: 5rpx;
					font-size: 20rpx;
					.icon 
					{
						margin-right: 5rpx;
						width: 11rpx; 
						height: auto; 
					}
					
				}
				.chgC.down
				{
					border: 1rpx solid #345423;
					color: #345423;
				}
				.chgC.up 
				{
					border: 1rpx solid #EC3440;
					color: #EC3440;
				}
				
			}
		}
	}
}
.timelineList 
{
	.item 
	{
		display: flex; 
		margin: 20rpx 0; 
		border-radius: 10rpx; 
		.impactC
		{
			.icon  
			{
				width: 30rpx;
				height: auto;
			}
			.line 
			{
				margin: 10rpx 0 -30rpx;
				width: 1rpx; 
			}
			.line.up 
			{
				border-left: 1rpx dashed #EC3440; 
			}
			.line.down 
			{
				border-left: 1rpx dashed #345423; 
			}
		}
		.titleTypeC 
		{
			.title 
			{
				margin-right: 10rpx;
				font-size: 24rpx; 
				font-weight: bold;
				color: #2A2A2A;
			}
			.eventType 
			{
				padding: 5rpx 10rpx; 
				border-radius: 5rpx; 
				font-size: 20rpx; 
				font-weight: 500;
			}
			.eventType.up 
			{
				background-color: #FFE7E9;
				color: #EC3440; 
			}
			.eventType.down
			{
				background-color:#DEEED6;
				color: #345423; 
			}
		}
		.progressBgC 
		{
			background-color: #EFEFEF; 
			margin: 0 15rpx; 
			width: 200rpx;
			height: 10rpx; 
			border-radius: 5rpx;
			overflow: hidden;
			.progress 
			{
				height: 100%; 
				border-radius: 5rpx; 
			}
			.progress.up 
			{
				background:linear-gradient(to right, #FF525D, #EC3440)
			}
			.progress.down
			{
				background:linear-gradient(to right, #537D3D, #345423)
			}
		}
	}
	
}
</style>