<template>
	<view class="strategicAnalysisList">
		<view class="section">核心定位</view>
		<view v-if="qualitativeAnalysisInfo" class="corePositionC">{{qualitativeAnalysisInfo.core_positioning.one_line_intro}}</view>
		<view class="section">投资亮点</view>
		<view v-if="qualitativeAnalysisInfo" class="corePositionC">{{qualitativeAnalysisInfo.core_positioning.investment_highlights}}</view>
		<!-- <view class="highlightsList">
			<view class="item flex">
				<image class="icon" src="" mode="widthFix"></image>
				<view class="flex1">
					<view class="title">综合金融优势</view>
					<view class="content">背靠平安集团，客户资源共享和交叉销售带来持续增长动力</view>
				</view>
			</view>
		</view> -->
		<view class="section">商业模式</view>
		<view v-if="qualitativeAnalysisInfo" class="corePositionC">{{qualitativeAnalysisInfo.core_positioning.business_model_desc}}</view>
		<!-- <view class="infoC">
			<view class="title">零售银行核心驱动</view>
			<view class="content">以零售银行业务为核心驱动，依托平安集团综合金融平台，构建智能化、移动化、综合化三位一体发展模式。</view>
		</view>
		<view class="infoC">
			<view class="title">科技赋能转型</view>
			<view class="content">通过科技赋能实现业务流程数字化，降本增效的同时提升客户体验。</view>
			<view class="labelList flexWrap">
				<view class="labelC flex">
					<image class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix">
					</image>
					<view>AI应用深化</view>
				</view>
			</view>
		</view>
		<view class="infoC">
			<view class="title">对公业务聚焦</view>
			<view class="content">聚焦供应链金融和产业互联网，服务实体经济高质量发展。</view>
		</view>
		<view class="section">战略分析</view>
		<view v-if="qualitativeAnalysisInfo" class="infoC">
			<view class="title">战略方向</view>
			<view class="content">{{qualitativeAnalysisInfo.strategy.strategy_description}}</view>
		</view>
		<view v-if="qualitativeAnalysisInfo" class="infoC">
			<view class="title">战略举措</view>
			<view class="content">{{qualitativeAnalysisInfo.strategy.strategic_initiatives}}</view>
		</view> -->
		
		<view class="section flex">
			<view>竞争地位分析</view>
			<view class="industryRankC flex" @click="clickIndustryRank()">
				<image class="icon" src="/pagesStock/static/icon/industryRank.png" mode="widthFix">
				</image>
				<view v-if="industryRankInfo">行业排名 {{industryRankInfo.industry_rank}}/{{industryRankInfo.total_companies}}</view>
				<!-- <image src="/arrow" mode=""></image> -->
			</view>
		</view>
		<view class="subSection">主要竞争对手</view>
		<view class="mainCompetitorList flexWrap">
			<view class="item flex" v-for="(item,index) in mainCompetitorsList" :key="index">
				<image class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix"></image>
				<view>{{item}}</view>
			</view>
		</view>
		<view class="scoreList">
			<view :class="'item flex '+item.color" v-for="(item,index) in scoreList" :key="index">
				<image class="icon" :src="item.icon" mode="widthFix"></image>
				<view class="title">{{item.title}}</view>
				<view class="progressBgC relative flex1">
					<view :class="'progress absolute '+item.color" :style="'width: '+item.score+'%;'"></view>
				</view>
				<view class="score">{{item.score}}</view>
			</view>
		</view>
		<view style="width:660rpx; height:500rpx">
			<l-echart ref="chartRef"></l-echart>
		</view>
		<view v-if="competitivePositionInfo" class="infoC">
			<view class="title">竞争优势</view>
			<view class="content">{{competitivePositionInfo.analysis.competitive_advantages}}</view>
		</view>
		<view v-if="competitivePositionInfo" class="infoC">
			<view class="title">竞争劣势</view>
			<view class="content">{{competitivePositionInfo.analysis.competitive_disadvantages}}</view>
		</view>
	</view>
</template>

<script>
	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
	
	export default {
		name:"zlfx-view",
		data() {
			return {
				option:{
					title: {
						show:false
					},
					legend: {
						show:false
					},
					tooltip:{
						show:true,
						triggerOn:'mousemove',
						confine:true,
					},
					radar: {
					    indicator: [
					      { name: '市场地位', max: 100 },
					      { name: '技术实力', max: 100 },
					      { name: '品牌价值', max: 100 },
					      { name: '运营效率', max: 100 },
					      { name: '财务健康', max: 100 },
					      { name: '创新能力', max: 100 },
						  { name: '风险控制', max: 100 },
						  { name: '成长潜力', max: 100 }
					    ],
					    shape: 'polygon',
					    splitNumber: 5,
					    axisName: {
					      color: '#54555A'
					    },
					    splitLine: {
					      lineStyle: {
					        color: ['#CFD2D7']
					      }
					    },
					    splitArea: {
							areaStyle:{
								color:['#F4F6FA','white']
							}
					    },
					    axisLine: {
					      lineStyle: {
					        color: '#CFD2D7'
					      }
					    }
					},
					series: [
					    {
							name: 'Beijing',
							type: 'radar',
							lineStyle: {
								width:1
							},
							data: [],
							symbol: 'circle',
							symbolSize: 4,
							label:{
								show:true  
							},
							itemStyle: {
								color: '#5070DD'
							},
							areaStyle: {
								opacity: 0.1
							}
					    },
					]
				},
			};
		},
		props:{
			qualitativeAnalysisInfo:Object,			//定性分析
			competitivePositionInfo:Object,			//竞争地位信息
			mainCompetitorsList:Array,				//主要竞争对手
			industryRankInfo:Object,				//行业排名数据
			scoreList:Array,						//
			data:Array,
		},
		watch:{
			data(newValue)
			{
				this.option.series[0].data = newValue
				this.init()
			}
		},
		methods:{
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				// chart.on('click',function (params) {
				// 	console.log(params)
				// })
				console.log(chart)
				chart.setOption(this.option)
			},
			clickIndustryRank()
			{
				this.$emit('rank')
			}
		}
	}
</script>

<style lang="less">
.strategicAnalysisList {
	padding: 0 20rpx;
	.section {
		line-height: 72rpx;
		font-size: 28rpx;
		font-weight: bold;
		color: #2B2B2B;

		.industryRankC {
			margin-left: 10rpx;
			padding: 0 12rpx;
			line-height: 38rpx;
			border: solid 1rpx #F2C369;
			border-radius: 19rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #F3C368;

			.icon {
				margin-right: 5rpx;
				width: 17rpx;
				height: auto;
			}
		}
	}

	.corePositionC {
		background-color: #FAFAFC;
		padding: 20rpx;
		font-size: 24rpx;
		font-weight: 500;
		color: #2A2A2A;
		border-radius: 10rpx;
	}

	.highlightsList {
		.item {
			background-color: #FAFAFC;
			margin-bottom: 20rpx;
			padding: 20rpx;
			border-radius: 10rpx;

			.icon {
				width: 81rpx;
				height: auto;
			}

			.title {
				font-size: 22rpx;
				font-weight: 500;
				color: #999;
			}

			.content {
				font-size: 20rpx;
				font-weight: 500;
				color: #2A2A2A;
			}
		}
	}

	.infoC {
		background-color: #FAFAFC;
		border-radius: 10rpx;
		padding: 12rpx 20rpx;
		margin-bottom: 20rpx;

		.infoItem {
			line-height: 40rpx;
		}

		.title {
			font-size: 22rpx;
			font-weight: 500;
			color: #2A2A2A;
		}

		.content {
			margin-top: 10rpx;
			font-size: 20rpx;
			font-weight: 500;
			color: #999;
		}

		.content.code {
			color: #BB8520;
		}

		.content.rightAlign {
			text-align: right;
		}

		.labelList {
			margin-top: 10rpx;

			.labelC {
				background-color: #FFF7E9;
				margin: 0 12rpx 12rpx 0;
				padding: 0 10rpx;
				line-height: 38rpx;
				border: solid 1rpx #F2C369;
				border-radius: 20rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #F3C368;

				.icon {
					margin-right: 3rpx;
					width: 16rpx;
					height: auto;
				}
			}
		}
	}

	.subSection {
		line-height: 60rpx;
		font-size: 24rpx;
		font-weight: bold;
		color: #2A2A2A;
	}

	.mainCompetitorList {
		.item {
			background-color: #FFF7E9;
			margin: 0 20rpx 20rpx 0;
			padding: 0 16rpx;
			line-height: 38rpx;
			border-radius: 20rpx;
			border: solid 1rpx #F2C369;
			font-size: 22rpx;
			font-weight: 500;
			color: #F3C368;

			.icon {
				margin-right: 3rpx;
				width: 16rpx;
				height: auto;
			}
		}
	}
	.scoreList 
	{
		.item 
		{
			margin-bottom: 40rpx;
			font-size: 24rpx;
			.icon   
			{
				margin-right: 10rpx;
				width: 24rpx;
				height: auto;
			}
			.title 
			{
				margin-right: 15rpx;
				font-weight: 500;
				color: #232323;
			}
			.progressBgC 
			{
				background-color: #EFEFEF;
				margin-right: 15rpx;
				height: 10rpx;
				border-radius: 5rpx;
				.progress 
				{
					top: 0;
					left: 0;
					height: 10rpx;
					border-radius: 5rpx;
				}
				.progress.blue 
				{
					background: linear-gradient(90deg, #4AAFFF 0%, #1F83FD 100%);
				}
				.progress.purple
				{
					background: linear-gradient(90deg, #DD96FC 0%, #C061FD 100%);
				}
			}
			.score 
			{
				font-weight: 800;
				color: #070707;
			}
		}
	}
}
</style>