<template>
	<view class="cyl_view">
		<view class="top flex">
			<view class="child_1">产业链分析</view>
			<view class="child_2">目标公司供应链图谱</view>
			<view class="child_3">节点 {{totalNodes}}</view>
		</view>
		<view class="center">
			<view class="child" :class="{action: center_index == 0}" @click="changeCenterIndex(0)">
				层级视图
			</view>
			<view class="child" :class="{action: center_index == 1}" @click="changeCenterIndex(1)">
				流向关系
			</view>
		</view>
		<view v-if="center_index==0" class="bottom">
			<view class="type flex">
				<view v-for="(item,index) in types" :key="index" class="item flex flex1">
					<view :class="'contentC flexColumnCenter flex1 '+(typeIndex==index?item.type:'')" @click="typeIndex = index">
						<view class="titleNumC">
							{{item.title}}
							<text :class="'num '+(typeIndex==index?item.type:'')">{{item.count}}</text>
						</view>
						<view class="des">{{item.desc}}</view>
					</view>
					<image v-if="index!=types.length-1" class="arrow" src="/pagesStock/static/icon/rightArrow.png"
						mode="widthFix"></image>
				</view>
			</view>
			<view class="list">
				<block v-if="typeIndex==0">
					<!-- 上游供应链 -->
					<view class="item" v-for="(item,index) in upstreamList" :key="index" @click="clickAction(item)">
						<view class="title">{{item.node_name}}</view>
						<view class="des">{{item.node_description}}</view>
						<view class="labelC flex">
							<view class="label upstream type">{{item.node_type}}</view>
							<view class="label upstream market">份额:{{item.market_share}}%</view>
						</view>
						<view class="importanceC flex">
							<view class="title">影响度</view>
							<view class="progressBgC flex1">
								<view class="progress upstream" :style="{width: `${item.importance_score}%`}">
								</view>
							</view>
							<view class="value">{{item.importance_score}}</view>
						</view>
					</view>
				</block>
				<block v-if="typeIndex==1">
					<!-- 核心企业 -->
					<view class="item" v-for="(item,index) in coreEnterpriseList" :key="index" @click="clickAction(item)">
						<view class="title">{{item.node_name}}</view>
						<view class="des">{{item.node_description}}</view>
						<view class="labelC flex">
							<view class="label core type">{{item.node_type}}</view>
							<view class="label core market">份额:{{item.market_share}}%</view>
						</view>
						<view class="importanceC flex">
							<view class="title">影响度</view>
							<view class="progressBgC flex1">
								<view class="progress core" :style="{width: `${item.importance_score}%`}"></view>
							</view>
							<view class="value">{{item.importance_score}}</view>
						</view>
					</view>
				</block>
				<block v-if="typeIndex==2">
					<!-- 下游客户 -->
					<view class="item" v-for="(item,index) in downstreamList" :key="index" @click="clickAction(item)">
						<view class="title">{{item.node_name}}</view>
						<view class="des">{{item.node_description}}</view>
						<view class="labelC flex">
							<view class="label downstream type">{{item.node_type}}</view>
							<view class="label downstream market">份额:{{item.market_share}}%</view>
						</view>
						<view class="importanceC flex">
							<view class="title">影响度</view>
							<view class="progressBgC flex1">
								<view class="progress downstream" :style="{width: `${item.importance_score}%`}"></view>
							</view>
							<view class="value">{{item.importance_score}}</view>
						</view>
					</view>
				</block>
			</view>
		</view>
		<view v-if="center_index==1" style="height: 500rpx;">
			<l-echart ref="chartRef"></l-echart>
		</view>
	</view>
</template>

<script>
	const echarts = require('../../../uni_modules/lime-echart/static/echarts.min.js');
	
	export default {
		name: "cyl-view",
		data() {
			return {
				isShow: false,
				center_index: 0,
				types: [{
						title: '上游供应链',
						count: 0,
						desc: '原材料与供应商',
						type:'upstream'
					},
					{
						title: '核心企业',
						count: 0,
						desc: '公司主体与产品',
						type:'core'
					},
					{
						title: '下游客户',
						count: 0,
						desc: '客户与终端市场',
						type:'downstream'
					}
				],
				typeIndex: 0,
				option:{
					legend:{
						show:false,
					},
					grid:{
						left:'2%',
						right:'2%',
						top:'5%',
						bottom:'30%'
					},
					series: [
					    {
					      type: 'sankey',
						  name:'经营现金流',
					      data: [],
						  links:[],
					    }
					]
				},
			};
		},
		props:{
			valueChainAnalysisInfo:Object,
			upstreamList:Array,				//上游供应链
			coreEnterpriseList:Array,		//核心企业
			downstreamList:Array,			//下游客户
			totalNodes:Number,				//总节点数
			valueChainFlowsList:Array		//产业链流向数据
		},
		watch:{
			valueChainAnalysisInfo(newValue)
			{
				this.types[0].count = newValue.upstream_nodes
				this.types[1].count = newValue.company_nodes
				this.types[2].count = newValue.downstream_nodes
			},
			valueChainFlowsList(newValue) 
			{
				let data = []
				let links = []
				let name = []
				for (let item of newValue) {
					if(name.indexOf(item.source.node_name)==-1)
					{
						name.push(item.source.node_name)
						data.push({name:item.source.node_name})
					}
					links.push({source: item.source.node_name, target: item.target.node_name,  value: item.flow_metrics.flow_ratio})
				}
				this.option.series[0].data = data
				this.option.series[0].links = links
			}
		},
		methods: {
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				// chart.on('click',function (params) {
				// 	console.log(params)
				// })
				console.log(chart)
				console.log(this.option)
				chart.setOption(this.option)
				
			},
			changeCenterIndex(index) {
				if(this.center_index!=index) {
					this.center_index = index
					if(index==1) {
						let that = this
						setTimeout(function() {
							that.init()
						}, 500);
					}
				}
			},
			clickAction(item) {
				this.$emit('detail',item)
			}
		}
	}
</script>

<style lang="less">
	.cyl_view {
		padding: 20rpx;

		.top {
			font-weight: 500;
			.child_1 {
				color: #2B2B2B;
				font-size: 28rpx;
				font-weight: bold;
			}

			.child_2 {
				color: #71675D;
				font-size: 24rpx;
				margin: 0 10rpx;
			}

			.child_3 {
				border: 1rpx solid #F3C368;
				border-radius: 5rpx;
				padding: 0 5rpx;
				color: #F2C369;
				font-size: 24rpx;
			}
		}

		.center {
			margin: 20rpx 0;
			display: flex;
			align-items: center;
			justify-content: space-evenly;
			font-weight: 500;

			.child {
				background-color: #F5F5F5;
				border-radius: 10rpx 10rpx 0 0;
				display: flex;
				align-items: center;
				justify-content: center;
				font-size: 26rpx;
				color: #939393;
				padding: 10rpx 40rpx;

				&.action {
					background-color: #F2C369;
					color: #070707;
				}
			}
		}

		.bottom {
			.type {
				.item {
					border-radius: 10rpx; 
					width: 100%; 
					padding: 26rpx 0;
					.contentC 
					{
						background-color: #FAFAFC;
						justify-content: center;
						height: 120rpx;
						border-radius: 10rpx;
						.titleNumC
						{
							font-size: 24rpx; 
							font-weight: bold;
							color: #2B2B2B; 
							.num 
							{
								background-color: #F2C369;
								margin-left: 6rpx; 
								padding: 0 5rpx; 
								min-width: 24rpx; 
								border-radius: 5rpx; 
								font-weight: 500;
								text-align: center; 
							}
							.num.upstream 
							{
								background-color: #FF5501;
								color: white;
							}
							.num.core 
							{
								background-color: #175CE6;
								color: white;
							}
							.num.downstream
							{
								background-color: #1DB26F;
								color: white;
							}
						}
						.des 
						{
							margin-top: 10rpx;
							font-size: 22rpx; 
							font-weight: 500; 
							color: #999999; 
						}
					}
					.contentC.upstream
					{
						background-color: #FFF4EF;
						border: solid 1rpx #FF5501; 
					}
					.contentC.core 
					{
						background-color: #F2F6FD;
						border: solid 1rpx #175CE6; 
					}
					.contentC.downstream
					{
						background-color: #E7F5F0;
						border: solid 1rpx #1DB26F; 
					}
					
					.arrow 
					{
						margin: 0 6rpx;
						width: 19rpx;
						height: auto;
					}
				}
			}
		}
		.list 
		{
			margin-top: 20rpx;
			.item 
			{
				background-color: #FAFAFC;
				margin-bottom: 20rpx; 
				border-radius: 10rpx; 
				padding: 25rpx 20rpx;
				.title 
				{
					font-size: 28rpx; 
					font-weight: bold;
					color: #2B2B2B; 
				}
				.des 
				{
					margin-top: 10rpx;
					font-size: 24rpx; 
					font-weight: 500;
					color: #999999; 
				}
				.labelC 
				{
					margin-top: 10rpx;
					.label 
					{
						margin-right: 10rpx;
						padding: 0 10rpx;
						line-height: 30rpx;
						border-radius: 5rpx;
						font-size: 20rpx;
						font-weight: 500;
					}
					.label.upstream 
					{
						color: #FF5501;
					}
					.label.upstream.type
					{
						background-color: #FFF4EF; 
					}
					.label.upstream.market
					{
						border: solid 1rpx #FF5501; 
					}
					.label.core 
					{
						color: #175CE6;
					}
					.label.core.type
					{
						background-color: #EDF2FD; 
					}
					.label.core.market
					{
						border: solid 1rpx #175CE6; 
					}
					.label.downstream
					{
						color: #1DB26F;
					}
					.label.downstream.type
					{
						background-color: #E7F5F0; 
					}
					.label.downstream.market
					{
						border: solid 1rpx #1DB26F; 
					}
				}
				.importanceC 
				{
					margin-top: 20rpx;
					.title 
					{
						font-size: 22rpx; 
						font-weight: 500;
						color: #71675D;
					}
					.progressBgC 
					{
						background-color: #EFEFEF; 
						height: 10rpx; 
						border-radius: 5rpx; 
						margin: 0 15rpx; 
						.progress 
						{
							height: 100%; 
							border-radius: 5rpx;
						}
						.progress.upstream
						{
							background: linear-gradient(90deg, #FF8C53 0%, #FF5501 100%);						
						}
						.progress.core
						{
							background: linear-gradient(90deg, #518BFF 0%, #175CE6 100%);						
						}
						.progress.downstream
						{
							background: linear-gradient(90deg, #48D394 0%, #1DB26F 100%);
						}
					}
					.value 
					{
						font-size: 24rpx; 
						font-weight: 500;
						color: #71675D; 
					}
				}
			}
		}
	}
</style>