<template>
	<view>
		<block v-if="stockInfo">
			<view class="flex"
				style="font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx; box-sizing: border-box ;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
				<view style="width: 195rpx;">
					<view style="font-weight: bold; color: #1DB26F; font-size: 30rpx;">{{getChgRateStr(stockInfo.growth_rates.profit_growth)}}%</view>
					<view style="margin-top: 10rpx;">利润增长</view>
				</view>
				<view>
					<view class="flex"> 
						<text
							style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">成长能力</text>
						<text
							style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">增长动力</text>
					</view>
					<view style="margin-top: 10rpx;">
						<text>营收增长</text>
						<text style="color: #1DB26F; margin: 0 10rpx;">{{getChgRateStr(stockInfo.growth_rates.revenue_growth)}}%</text>
						<text style="color: #F59B38;">（稳健增长）</text>
					</view>
				</view>
			</view>
			<view class="flex" style="font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx; box-sizing: border-box ;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
				<view style="width: 195rpx;">
					<view style="font-weight: bold; color: #F59B38; font-size: 30rpx;">{{getChgRateStr(stockInfo.key_metrics.roe)}}%</view>
					<view style="margin-top: 10rpx;">ROE</view>
				</view>
				<view>
					<view class="flex">
						<text style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">盈利与回报</text>
						<text style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">赚钱能力</text>
					</view>
					<view style="margin-top: 10rpx;">
						<text style="color: #F59B38;">良好</text>
						<text style="margin-left: 10rpx;">净利率 {{getChgRateStr(stockInfo.key_metrics.net_margin)}}%|毛利率 {{getChgRateStr(stockInfo.key_metrics.gross_margin)}}%</text>
					</view>
				</view>
			</view>
			<view class="flex"
				style="font-size: 22rpx; color: #999999; font-weight: 500; margin: 20rpx; padding: 20rpx;border: 1rpx solid #F5F5F5; border-radius: 10rpx;">
				<view style="width: 195rpx;">
					<view style="font-weight: bold; color: #EC3440; font-size: 30rpx;">93.52%</view>
					<view style="margin-top: 10rpx;">资产负债率</view>
				</view>
				<view>
					<view class="flex">
						<text style="font-weight: bold; color: #070707; font-size: 26rpx; margin-right: 10rpx;">风险与运营</text>
						<text style="color: #A97F53; font-size: 20rpx; padding: 2rpx 5rpx; background-color: #F8F4ED; border: 1rpx solid #F1E7D8; border-radius: 3rpx;">安全边际</text>
					</view>
					<view style="margin-top: 10rpx;">
						<text style="color: #EC3440;">风险</text>
						<text style="margin-left: 10rpx;">流动比率 0.73|研发费用率 5.48%</text>
					</view>
				</view>
			</view>
		</block>
		<view style="text-align: center; font-size: 26rpx; color: #2B2B2B; font-weight: bold; margin: 20rpx;">
			营收与利润趋势</view>
		<view style="height: 400rpx;">
			<l-echart ref="chartRef1"></l-echart>
		</view>
		<view style="text-align: left; font-size: 26rpx; color: #2B2B2B; font-weight: bold; margin: 20rpx;">主营业务
		</view>
		<view style="height: 400rpx;">
			<l-echart ref="chartRef2"></l-echart>
		</view>
		<view style="text-align: left; font-size: 26rpx; color: #2B2B2B; font-weight: bold; margin: 20rpx;">
			主营业务明细与历史对比</view>
		<view
			style="display: grid; grid-template-columns: 130rpx repeat(4, 1fr); color: #666666; font-size: 20rpx; font-weight: 500; background-color: #FAFAFC; margin: 20rpx; margin-bottom: 0; padding: 10rpx; box-sizing: border-box;">
			<view v-for="(item, index) in ['业务', '毛利率', '利润', '营收', '营收']"
				style="display: flex;align-items: center;justify-content: center; flex-direction: column;"
				:style="{'text-align': index == 0 ? 'left' : 'center', 'align-items': index == 0 ? 'flex-start' : 'center'}">
				<view>{{item}}</view>
				<view v-if="['', '(2025年中报)', '(2025年中报)', '(2025年中报)', '(2024年年报)'][index].length > 0"
					style="font-size: 18rpx;" :style="{'text-align': index == 0 ? 'left' : 'center'}">
					{{['', '(2025年中报)', '(2025年中报)', '(2025年中报)', '(2024年年报)'][index]}}
				</view>
			</view>
		</view>
		<block v-if="productClassificationList.length>0">
			<view class="table" v-for="(item, index) in productClassificationList[0].products" :key="index"
				style="display: grid; grid-template-columns: 130rpx repeat(4, 1fr); margin: 0 20rpx; padding: 10rpx;"
				:style="{'background-color': (index % 2 == 0 ? '#FFFFFF' : '#FAFAFC')}">
				<view class="item">{{item.content}}</view>
				<view class="item flexCenter">{{item.profit_margin.toFixed(2)}}%</view>
				<view class="item flexCenter">{{getNumStr(item.profit)}}</view>
				<view class="item flexCenter">{{getNumStr(item.revenue)}}</view>
				<view class="item flexCenter">{{item.content}}</view>
			</view>
		</block>
		<view style="height: 80rpx;"></view>
	</view>
</template>

<script>
	import { getChgRateStr, getNumStr } from '@/utils/util.js';

	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');
	
	export default {
		name: "zysj-view",
		data() {
			return {
				option1:{
					legend:{
						show:true,
						data:['营业收入','净利润']
					},
					grid:{
						left:'2%',
						right:'2%',
						top:'5%',
						bottom:'30%'
					},
					xAxis: {
					    type: 'category',
					    data: [],
						axisLabel:{
							// interval:0
						}
					},
					yAxis: [{
							type: 'value',
							name:'营收(亿)',
							position:'left',
							alignTicks:true,
							axisLine:{
								onZero:false
							}
						},
						{
							type: 'value',
							name:'利润(亿)',
							position:'right',
							alignTicks:true,
							axisLine:{
							  onZero:false
							}
						}
					],
					dataZoom:[{
						type:'slider'
					}],
					series: [
					    {
					      type: 'bar',
						  name:'营业收入',
					      data: [],
						  yAxisIndex:0
					    },
						{
						  type: 'line',
						  name:'净利润',
						  data: [],
						  yAxisIndex:1
						}
					]
				},
				option2:{
					title:{
						text:'',
						textStyle:{
							fontSize:12
						}
					},
					legend:{
						show:true
					},
					grid:{
						left:0,
						right:0,
						top:'5%',
						bottom:'5%'
					},
					series: [
					    {
					      data: [],
					      type: 'pie',
					      center:['50%','50%'],
						  label:{
							 formatter:"{d}%" 
						  }
					    }
					]
				},
				getChgRateStr:getChgRateStr,
				getNumStr:getNumStr
			};
		},
		props: { 
			stockInfo:Object,
			barCategoryList:Array,
			barList:Array,
			lineList:Array,		//折线图数据
			productClassificationList:Array
		},
		watch:{
			barCategoryList(newValue){
				this.option1.xAxis.data = newValue
			},
			barList(newValue){
				this.option1.series[0].data = newValue
				this.barLineInit()
			},
			lineList(newValue){
				this.option1.series[1].data = newValue
				this.barLineInit()
			},
			productClassificationList(newValue) {
				
				let data = newValue[0].products
				this.option2.title.text = '主营业务构成（'+newValue[0].report_type+'）'
				let pieList = []
				for (let item of data) {
					pieList.push({
						name:item.content,
						value:item.revenue_ratio.toFixed(2)
					})
				}
				this.option2.series[0].data = pieList
				this.pieInit()
			}
			
		},
		methods: {
			/**
			 * 柱状图，折线图初始化
			 */
			async barLineInit() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef1.init(echarts);
				// chart.on('click',function (params) {
				// 	console.log(params)
				// })
				let that = this
				setTimeout(function() {
					chart.setOption(that.option1)
				}, 2000);
			},
			/**
			 * 饼状图初始化
			 */
			async pieInit() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef2.init(echarts);
				// chart.on('click',function (params) {
				// 	console.log(params)
				// })
				let that = this
				setTimeout(function() {
					chart.setOption(that.option2)
				}, 2000);
			},
			itemClick(index) {
				 uni.navigateTo({
				 	url: `/pagesStock/stockCenterDetails/cwDetails?index=${index}`
				 })
			}
		}
	}
</script>

<style lang="less">
.table  
{
	.item 
	{
		font-size: 20rpx; 
		font-weight: 500; 
		color: #666666; 
	}
	.item.center 
	{
		text-align: center;
	}
}
</style>