<template>
	<view>
		<navBar leftText="平安银行(000001)" :hideNavBg="true"></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>
		<view class="searchC fixed flex" :style="'top:'+navH+'px;'">
			<image class="icon" src="/static/icon/home/conceptCenter/search.png" mode="widthFix"></image>
			<input class="flex1" type="text" v-model="keywords" placeholder="输入股票代码或名称"
				placeholder-style="color:#eeeeee" confirm-type="search" @confirm="clickSearch()" />
		</view>
		<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
			<view v-if="stockBasicInfo" class="basicInfoC">
				<view class="categoryLabelC flex">
					<view class="category">{{stockBasicInfo.industry_l1}}·{{stockBasicInfo.sw_industry_l2}}</view>
					<view class="">沪深300、上证180</view>
				</view>
				<view v-if="quoteDetailsInfo" class="priceC flex">
					<view class="currentChgC">
						<view :class="'current '+(getRateUpOrDown(quoteDetailsInfo.change_percent)?'down':'up')">{{quoteDetailsInfo.current_price}}</view>
						<view :class="'chg '+(getRateUpOrDown(quoteDetailsInfo.change_percent)?'down':'up')">{{quoteDetailsInfo.change_percent}}%</view>
					</view>
					<view class="priceIndexC">
						<view class="flex">
							<view class="indexC flex">
								<view class="title">今开：</view>
								<view class="content">{{quoteDetailsInfo.today_open}}</view>
							</view>
							<view class="indexC flex marginR">
								<view class="title">昨收：</view>
								<view class="content">{{quoteDetailsInfo.yesterday_close}}</view>
							</view>
						</view>
						<view class="flex">
							<view class="indexC flex">
								<view class="title">最高：</view>
								<view class="content up">{{quoteDetailsInfo.today_high}}</view>
							</view>
							<view class="indexC flex marginR">
								<view class="title">最低：</view>
								<view class="content down">{{quoteDetailsInfo.today_low}}</view>
							</view>
						</view>
					</view>
				</view>
				<view class="section">关键指标</view>
				<view v-if="quoteDetailsInfo" class="infoC flex">
					<view class="flex flex1">
						<view class="title">市盈率 (PE)</view>
						<view class="content flex1 important marginR">{{quoteDetailsInfo.pe?quoteDetailsInfo.pe:'-'}}</view>
					</view>
					<view class="rightInfoC flex flex1">
						<view class="title">流通股本</view>
						<view v-if="quoteDetailsInfo.float_shares" class="content flex1">{{quoteDetailsInfo.float_shares}}亿股</view>
						<view v-else class="content flex1">-</view>
					</view>
				</view>
				<view v-if="quoteDetailsInfo" class="infoC flex">
					<view class="flex flex1">
						<view class="title">流通市值</view>
						<view class="content flex1 important marginR">{{quoteDetailsInfo.market_cap}}</view>
					</view>
					<view class="rightInfoC flex flex1">
						<view class="title">换手率</view>
						<view class="content flex1">{{quoteDetailsInfo.turnover_rate}}%</view>
					</view>
				</view>
				<view v-if="quoteDetailsInfo" class="infoC flex">
					<view class="flex flex1">
						<view class="title">发行总股本</view>
						<view v-if="quoteDetailsInfo.total_shares" class="content flex1 marginR">{{quoteDetailsInfo.total_shares}}亿股</view>
						<view v-else class="content flex1 marginR">-</view>
					</view>
					<view class="rightInfoC flex flex1">
						<view class="title">52周波动</view>
						<view class="content flex1">{{quoteDetailsInfo.week52_low}}-{{quoteDetailsInfo.week52_high}}</view>
					</view>
				</view>
				<view class="section">主力动态</view>
				<view v-if="quoteDetailsInfo" class="infoC flex">
					<view class="flex flex1">
						<view class="title">主力净流入</view>
						<view :class="'content flex1 marginR '+(getRateUpOrDown(quoteDetailsInfo.net_inflow)?'down':'up')">{{getRateUpOrDown(quoteDetailsInfo.net_inflow)?'':'+'}}{{getNumStr(quoteDetailsInfo.net_inflow)}}股</view>
					</view>
					<view class="rightInfoC flex flex1">
						<!-- <view class="title">机构持仓</view>
						<view class="content flex1 important">23.83%</view> -->
					</view>
				</view>
				<view class="progressC relative">
					<view class="buy absolute"></view>
				</view>
				<view class="buySaleC flex">
					<view class="buy">买入 42%</view>
					<view class="sale flex1">卖出 58%</view>
				</view>
				<view class="infoC flex">
					<view class="flex flex1">
						<image class="icon" src="/pagesStock/static/icon/establishedTime.png" mode="widthFix"></image>
						<view class="title">成立</view>
						<view class="content flex1 marginR">{{getLocalDate(stockBasicInfo.establish_date)}}</view>
					</view>
					<view class="rightInfoC flex flex1">
						<image class="icon" src="/pagesStock/static/icon/registeredCapital.png" mode="widthFix"></image>
						<view class="title">注册资本</view>
						<view class="content flex1">{{stockBasicInfo.reg_capital}}亿元</view>
					</view>
				</view>
				<view class="infoC flex">
					<view class="flex flex1">
						<image class="icon" src="/pagesStock/static/icon/location.png" mode="widthFix"></image>
						<view class="title">所在地</view>
						<view class="content flex1 marginR">{{stockBasicInfo.province}} {{stockBasicInfo.city}}</view>
					</view>
					<view class="rightInfoC flex flex1">
						<image class="icon" src="/pagesStock/static/icon/visitWebsite.png" mode="widthFix"></image>
						<view class="title important">访问逛网</view>
						<view class="flex1"></view>
					</view>
				</view>
				<view class="companyInfo">
					<view class="title">公司简介</view>
					<view :class="'info relative flex1 '+(isExpandIntro?'':'retract')">{{stockBasicInfo.company_intro}}
						<text :class="'expand '+(isExpandIntro?'':'absolute')" @click="clickExpandOrRetractCompanyIntro()">
							<text v-if="!isExpandIntro" class="ellipsis">...</text>{{isExpandIntro?'收起':'展开全文'}}
						</text>
					</view>
				</view>
			</view>
			<view class="otherInfoC">
				<scroll-view scroll-x class="tabC">
					<view :class="'item '+(selectTab==index?'select':'')" v-for="(item,index) in tabList" :key="index"
						@click="clickTabItem(index)">{{item.title}}</view>
				</scroll-view>
				<block v-if="selectTab==0">
					<view class="companyFilesList">
						<view :class="'item '+(selectCompanyFiles==index?'select':'')"
							v-for="(item,index) in companyFilesList" :key="index" @click="clickCompanyFilesItem(index)">
							{{item.title}}
						</view>
					</view>
					<template v-if="selectCompanyFiles==0">
						<gqjg-view :actualControlInfo="actualControlInfo" :concentrationList="concentrationList" :shareholdersList="topShareholdersList" 
						:circulatingShareholdersList="topCirculatingShareholdersList"></gqjg-view>
					</template>
					<template v-if="selectCompanyFiles==1">
						<gltd-view :managementList="managementList"></gltd-view>
					</template>
					<template v-if="selectCompanyFiles==2">
						<fzjg-view :branchList="branchList"></fzjg-view>
					</template>
					<block v-if="selectCompanyFiles==3">
						<gsxx-view :stockBasicInfo="stockBasicInfo"></gsxx-view>
					</block>
				</block>
				<block v-if="selectTab==1">
					<view class="companyFilesList">
						<view :class="'item '+(selectInDepthAnalysis==index?'select':'')"
							v-for="(item,index) in inDepthAnalysisList" :key="index"
							@click="clickInDepthAnalysisItem(index)">{{item.title}}</view>
					</view>
					<view v-if="selectInDepthAnalysis==0" class="strategicAnalysisList">
						<zlfx-view :qualitativeAnalysisInfo="qualitativeAnalysisInfo" :competitivePositionInfo="competitivePositionInfo" :industryRankInfo="industryRankInfo"
						:mainCompetitorsList="mainCompetitorsList" :scoreList="scoreList" :data="chartData2" @rank="clickIndustryRank()"></zlfx-view>
					</view>
					<template v-if="selectInDepthAnalysis==1">
						<ywjg-view :businessStructureList="businessStructureList" :businessSegmentList="businessSegmentList"></ywjg-view>
					</template>
					<template v-if="selectInDepthAnalysis==2">
						<cyl-view :valueChainAnalysisInfo="valueChainAnalysisInfo" :totalNodes="totalNodes" :upstreamList="upstreamList" :coreEnterpriseList="coreEnterpriseList" :downstreamList="downstreamList" @detail="clickValueChainDetail"></cyl-view>
					</template>
					<template v-if="selectInDepthAnalysis==3">
						<fzlc-view :keyFactorsInfo="keyFactorsInfo" :keyFactorsList="keyFactorsList" :timelineInfo="timelineInfo" :timelineList="timelineList" @detail="detailShow(1)"></fzlc-view>
					</template>
				</block>
				<block v-if="selectTab==2">
					<view class="companyFilesList">
						<view :class="'item '+(selectCaiwu==index?'select':'')"
							v-for="(item,index) in caiWuList" :key="index" @click="clickCaiWuItem(index)">
							{{item.title}}
						</view>
					</view>
					<block v-if="selectCaiwu==0">
						<zysj-view :stockInfo="financialStockInfo" :barCategoryList="mainBussinessBarCategoryList" :barList="mainBussinessBarList" :lineList="mainBussinessLineList" :productClassificationList="productClassificationList" ></zysj-view>
					</block>
					<block v-if="selectCaiwu==1">
						<cwfx-view></cwfx-view>
					</block>
					<block v-if="selectCaiwu==2">
						<cwsj-view></cwsj-view>
					</block>
				</block>
				<block v-if="selectTab==3">
					<view class="companyFilesList">
						<view :class="'item '+(selectDongtai==index?'select':'')"
							v-for="(item,index) in dongTaiList" :key="index" @click="clickDongTaiItem(index)">
							{{item.title}}
						</view>
					</view>
					<news-view :type="selectDongtai" :newsList="newsList" :announcementList="companyAnnouncementList"></news-view>
				</block>
			</view>
		</scroll-view>
		<view class="bottomC fixed flex">
			<view class="inputC flex1">
				<input type="text" v-model="eventComment" placeholder="对比股票..." placeholder-style="color:#666"
					confirm-type="send" @confirm="sendEventComment()" />
			</view>
			<view class="contrastShareC flex">
				<view class="item">
					<image class="icon" src="/pagesStock/static/icon/contrast.png" mode="heightFix"></image>
					<view>对比</view>
				</view>
				<view class="item" @click="clickComment()">
					<image class="icon" src="/pagesStock/static/icon/optional.png" mode="heightFix"></image>
					<view>自选</view>
				</view>
				<view class="item" @click="clickFollow()">
					<image class="icon" src="/pagesStock/static/icon/share.png" mode="heightFix"></image>
					<view>分享</view>
				</view>
			</view>
		</view>
		<uni-popup ref="industryRankPop" type="bottom">
			<view class="industryRankPop relative">
				<view class="popTitle">行业排名</view>
				<view class="closeC absolute" @click="clickCloseIndustryRankPop()">
					<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
				</view>
				<view class="rankList">
					<block v-for="(item,index) in industryRankList" :key="index">
						<block v-for="(ritem,rindex) in item.rankings" :key="rindex">
							<view class="sectionDateC flex">
								<view class="section">三季报 行业排名</view>
								<view class="industryC flex">
									<image class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix"></image>
									<view>{{ritem.industry_name}}({{ritem.level_description}})</view>
								</view>
								<view class="flex1"></view>
								<view class="date">{{item.period}}</view>
							</view>
							<view class="list flexWrap">
								<view class="item">
									<view class="title">EPS</view>
									<view class="valueRankC flex">
										<view v-if="ritem.metrics.eps.value" class="value">{{ritem.metrics.eps.value.toFixed(2)}}</view>
										<view v-else class="value">-</view>
										<view v-if="ritem.metrics.eps.rank" class="rank">#{{ritem.metrics.eps.rank}}</view>
									</view>
									<view v-if="ritem.metrics.eps.industry_avg" class="average">行业均值:{{ritem.metrics.eps.industry_avg.toFixed(2)}}</view>
									<view v-else class="average">行业均值:-</view>
								</view>
								<view class="item">
									<view class="title">每股净资产</view>
									<view class="valueRankC flex">
										<view v-if="ritem.metrics.bvps.value" class="value">{{ritem.metrics.bvps.value.toFixed(2)}}</view>
										<view v-else class="value">-</view>
										<view v-if="ritem.metrics.bvps.rank" class="rank">#{{ritem.metrics.bvps.rank}}</view>
									</view>
									<view v-if="ritem.metrics.bvps.industry_avg" class="average">行业均值:{{ritem.metrics.bvps.industry_avg.toFixed(2)}}</view>
									<view v-else class="average">行业均值:-</view>
								</view>
								<view class="item">
									<view class="title">ROE</view>
									<view class="valueRankC flex">
										<view v-if="ritem.metrics.roe.value" class="value">{{ritem.metrics.roe.value.toFixed(2)}}%</view>
										<view v-else class="value">-</view>
										<view class="rank">#{{ritem.metrics.roe.rank}}</view>
									</view>
									<view v-if="ritem.metrics.roe.industry_avg" class="average">行业均值:{{ritem.metrics.roe.industry_avg.toFixed(2)}}%</view>
									<view v-else class="average">行业均值:-</view>
								</view>
								<view class="item">
									<view class="title">营收增长率</view>
									<view class="valueRankC flex">
										<view v-if="ritem.metrics.revenue_growth.value" class="value">{{ritem.metrics.revenue_growth.value.toFixed(2)}}%</view>
										<view v-else class="value">-</view>
										<view class="rank">#{{ritem.metrics.revenue_growth.rank}}</view>
									</view>
									<view v-if="ritem.metrics.revenue_growth.industry_avg" class="average">行业均值:{{ritem.metrics.revenue_growth.industry_avg.toFixed(2)}}%</view>
									<view v-else class="average">行业均值:-</view>
								</view>
								<view class="item">
									<view class="title">利润增长率</view>
									<view class="valueRankC flex">
										<view v-if="ritem.metrics.profit_growth.value" class="value">{{ritem.metrics.profit_growth.value.toFixed(2)}}%</view>
										<view v-else class="value">-</view>
										<view class="rank">#{{ritem.metrics.profit_growth.rank}}</view>
									</view>
									<view v-if="ritem.metrics.profit_growth.industry_avg" class="average">行业均值:{{ritem.metrics.profit_growth.industry_avg.toFixed(2)}}%</view>
									<view v-else class="average">行业均值:-</view>
								</view>
								<view class="item">
									<view class="title">营业利润率</view>
									<view class="valueRankC flex">
										<view v-if="ritem.metrics.operating_margin.value" class="value">{{ritem.metrics.operating_margin.value.toFixed(2)}}%</view>
										<view v-else class="value">-</view>
										<view class="rank">#{{ritem.metrics.operating_margin.rank}}</view>
									</view>
									<view v-if="ritem.metrics.operating_margin.industry_avg" class="average">行业均值:{{ritem.metrics.operating_margin.industry_avg.toFixed(2)}}%</view>
									<view v-else class="average">行业均值:-</view>
								</view>
								<view class="item">
									<view class="title">资产负债率</view>
									<view class="valueRankC flex">
										<view v-if="ritem.metrics.debt_ratio.value" class="value">{{ritem.metrics.debt_ratio.value.toFixed(2)}}</view>
										<view v-else class="value">-</view>
										<view v-if="ritem.metrics.debt_ratio.rank" class="rank">#{{ritem.metrics.debt_ratio.rank}}</view>
									</view>
									<view v-if="ritem.metrics.debt_ratio.industry_avg" class="average">行业均值:{{ritem.metrics.debt_ratio.industry_avg.toFixed(2)}}</view>
									<view v-else class="average">行业均值:-</view>
								</view>
								<view class="item">
									<view class="title">应收账款周转率</view>
									<view class="valueRankC flex">
										<view v-if="ritem.metrics.receivable_turnover.value" class="value">{{ritem.metrics.receivable_turnover.value.toFixed(2)}}</view>
										<view v-else class="value">-</view>
										<view v-if="ritem.metrics.receivable_turnover.rank" class="rank">#{{ritem.metrics.receivable_turnover.rank}}</view>
									</view>
									<view v-if="ritem.metrics.receivable_turnover.industry_avg" class="average">行业均值:{{ritem.metrics.receivable_turnover.industry_avg.toFixed(2)}}</view>
									<view v-else class="average">行业均值:-</view>
								</view>
							</view>
						</block>
					</block>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="valueChainPopup" type="bottom" :safeArea="false">
			<view class="valueChainPopup" style="padding-bottom: env(safe-area-inset-bottom);">
				<view class="popTitle">详情</view>
				<view class="closeC absolute" @click="clickCloseValueChainPop()">
					<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
				</view>
				<view v-if="selectValueChainInfo" class="valueChainInfoC" style="height: 60vh;">
					<scroll-view :scroll-y="true" style="width: 100%; height: 100%; padding: 40rpx 20rpx;font-weight: 500; color: #2A2A2A; font-size: 24rpx;">
						<view class="title">{{selectValueChainInfo.node_name}}</view>
						<view class="labelC flex">
							<view v-if="selectValueChainInfo.node_level==-2||selectValueChainInfo.node_level==-1" class="label upstream type">{{selectValueChainInfo.node_type}}</view>
							<view v-if="selectValueChainInfo.node_level==-2||selectValueChainInfo.node_level==-1" class="label upstream market">份额: {{selectValueChainInfo.market_share}}%</view>
							<view v-if="selectValueChainInfo.node_level==0" class="label core type">{{selectValueChainInfo.node_type}}</view>
							<view v-if="selectValueChainInfo.node_level==0" class="label core market">份额: {{selectValueChainInfo.market_share}}%</view>
							<view v-if="selectValueChainInfo.node_level==1||selectValueChainInfo.node_level==2" class="label downstream type">{{selectValueChainInfo.node_type}}</view>
							<view v-if="selectValueChainInfo.node_level==1||selectValueChainInfo.node_level==2" class="label downstream market">份额: {{selectValueChainInfo.market_share}}%</view>
						</view>
						<view style="color: #BB8520; margin-top: 30rpx;">节点描述</view>
						<view style="color: #71675D; font-size: 22rpx; margin-top: 13rpx;">{{selectValueChainInfo.node_description}}</view>
						<view style="display: grid; grid-template-columns: repeat(2, 1fr); gap: 80rpx; margin-top: 30rpx;">
							<view>
								<view>
									<text style="color: #BB8520;">重要度评分</text>
									<text style="color: #71675D; margin-left: 10rpx;">{{selectValueChainInfo.importance_score}}</text>
								</view>
								<view class="progressBgC">
									<view v-if="selectValueChainInfo.node_level==-2||selectValueChainInfo.node_level==-1" class="progress upstream" :style="'width:'+(selectValueChainInfo.importance_score?selectValueChainInfo.importance_score:0)+'%;'"></view>
									<view v-if="selectValueChainInfo.node_level==0" class="progress core" :style="'width:'+selectValueChainInfo.importance_score+'%;'"></view>
									<view v-if="selectValueChainInfo.node_level==1||selectValueChainInfo.node_level==2" class="progress downstream" :style="'width:'+selectValueChainInfo.importance_score+'%;'"></view>
								</view>
							</view>
							<view>
								<view>
									<text style="color: #BB8520;">依赖程度</text>
									<text style="color: #71675D; margin-left: 10rpx;">{{selectValueChainInfo.dependency_degree}}%</text>
								</view>
								<view class="progressBgC">
									<view v-if="selectValueChainInfo.node_level==-2||selectValueChainInfo.node_level==-1" class="progress upstream" :style="'width:'+(selectValueChainInfo.dependency_degree?selectValueChainInfo.dependency_degree:0)+'%;'"></view>
									<view v-if="selectValueChainInfo.node_level==0" class="progress core" :style="'width:'+(selectValueChainInfo.dependency_degree?selectValueChainInfo.dependency_degree:0)+'%;'"></view>
									<view v-if="selectValueChainInfo.node_level==1||selectValueChainInfo.node_level==2" class="progress downstream" :style="'width:'+(selectValueChainInfo.dependency_degree?selectValueChainInfo.dependency_degree:0)+'%;'"></view>
								</view>
							</view>
						</view>
						
						<view style="margin: 30rpx 0; font-weight: bold; font-size: 28rpx;">相关公司</view>
						
						<view v-for="(item,index) in relatedCompanyList" :key="index" style="margin: 20rpx 0; border: 1rpx solid #E7E7E7; border-radius: 10rpx; padding: 25rpx 20rpx;">
							<view>
								<text style="font-size: 28rpx; font-weight: bold;">{{item.stock_name}}</text>
								<text style="margin: 0 13rpx; color: #F2C369; font-size: 20rpx; padding: 2rpx 15rpx; background-color: #FFF7E9; border-radius: 3rpx; border: 1rpx solid #F2C369;">{{item.stock_code}}</text>
								<text style="color: #070707; font-size: 24rpx; background-color: #F2C369; border-radius: 3rpx; padding: 2rpx 10rpx;">上游</text>
							</view>
							<view style="color: #999999; font-size: 22rpx; margin: 13rpx 0;">{{item.company_name}}</view>
							<view style="color: #71675D; font-size: 24rpx;">{{item.node_info.node_description}}</view>
							<block v-if="item.relationships.length>0">
								<view style="background-color: #E7E7E7; height: 1rpx; margin: 20rpx 0;"></view>
								<view style="font-size: 28rpx; font-weight: bold;">产业链关系：</view>
								<view>
									<image style="width: 21rpx; height: 14rpx; margin-right: 10rpx;" src="/pagesStock/static/icon/yRightArrow.png" mode="widthFix"></image>
									<text  style="color: #71675D; font-size: 24rpx;">流向 {{item.relationships[0].connected_node}}</text>
								</view>
							</block>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
		
		<uni-popup ref="detailInfoPopup" type="bottom" :safeArea="false">
			<view class="industryRankPop" style="padding-bottom: env(safe-area-inset-bottom);">
				<view class="popTitle">详情</view>
				<view class="closeC absolute">
					<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
				</view>
				<view style="max-height: 60vh; padding: 0 20rpx; box-sizing: border-box;">
					<scroll-view :scroll-y="true" style="width: 100%; height: 100%; padding: 40rpx 20rpx; box-sizing: border-box; font-weight: 500; color: #2A2A2A; font-size: 24rpx;">
						<view style="font-size: 28rpx; font-weight: bold;">不良贷款率连续四年低于1.1%</view>
						<view style="display: flex; align-items: center; margin: 20rpx 0;">
							<view style="color: #EC3440; font-size: 20; text-align: center; background-color: #FFE7E9; border-radius: 5rpx; padding: 2rpx 10rpx; margin-right: 10rpx;">Achievement</view>
							<view style="margin-left: 10rpx;">2025-06-30</view>
						</view>
						<view style="color: #BB8520; margin-top: 30rpx;">事件详情</view>
						<view style="color: #71675D; font-size: 22rpx; margin-top: 13rpx;">2025年中报不良率1.06%，拨备覆盖率290%，资产质量保持股份行领先。</view>
						
						<view style="color: #BB8520; margin-top: 30rpx;">财务影响</view>
						<view style="color: #71675D; font-size: 22rpx; margin-top: 13rpx;">信用成本同比下降12bps，释放利润约50亿元。</view>
						
						<view style="color: #BB8520; margin-top: 30rpx;">影响评估</view>
						<view style="display: flex; align-items: center; margin-top: 13rpx;">
							<view><text style="color: #71675D;">影响度</text></view>
							<view style="width: 200rpx; margin: 0 10rpx; background-color: #EFEFEF; border-radius: 5rpx;"><view style="width: 86%; background: linear-gradient(to right, #FF525D, #EC3440); border-radius: 5rpx; height: 10rpx;"></view></view>
							<text style="color: #71675D; margin-left: 10rpx;">86 / 100</text>
						</view>
					</scroll-view>
				</view>
			</view>
		</uni-popup>
	</view>
</template>

<script>
	import { inject } from 'vue'
	import { actualControl, branchesList, companyAnnouncementsList, comprehensiveAnalysis, eventList, financialComparison, financialMainBusiness, financialStockInfo, industryRankList, keyFactorsTimeline, managementTeam, ownershipConcentration, quoteDetailsInfo, stockBasicInfo, topCirculatingShareholdersList, topShareholdersList, valueChainAnalysis, valueChainRelatedCompany } from '@/request/api'
	import { getLastNameStr, getLocalDate, getNumStr, getRateUpOrDown, getAgeByBirthYear } from '@/utils/util'
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');

	export default {
		data() {
			return {
				navH: inject('navHeight'),
				contentTop: '',
				keywords: '',			//搜索关键字
				stockCode:'300700',		//股票代码  600759 000009 002004 300700
				stockBasicInfo:null,	//股票基本信息
				quoteDetailsInfo:null,	//股票事实市场价格信息
				isExpandIntro:false,	//是否展开公司简介
				tabList: [{
						title: '公司档案'
					},
					{
						title: '深度分析'
					},
					// {
					// 	title:'股票行情'
					// },
					{
						title: '财务全景'
					},
					// {
					// 	title:'盈利预测'
					// },
					{
						title: '动态跟踪'
					}
				],
				selectTab: 0,
				companyFilesList: [{
						title: '股权结构'
					},
					{
						title: '管理团队'
					},
					{
						title: '分支机构'
					},
					{
						title: '工商信息'
					}
				], //公司档案分类
				actualControlInfo:null,				//实际控制信息
				concentrationList:[],				//股权集中度列表
				topShareholdersList:[],				//十大股东列表
				topCirculatingShareholdersList:[],	//十大流通股东列表
				managementList:[],	//管理团队列表
				branchList:[],	//分支机构列表
				selectCompanyFiles: 0,
				inDepthAnalysisList: [{
						title: '战略分析'
					},
					{
						title: '业务结构'
					},
					{
						title: '产业链'
					},
					{
						title: '发展历程'
					}
				], //深度分析分类
				selectInDepthAnalysis: 0,
				qualitativeAnalysisInfo:null,			//定性分析
				competitivePositionInfo:null,		    //竞争地位信息
				mainCompetitorsList:[],				    //主要竞争对手
				industryRankInfo:null,					//行业排名数据
				industryRankList:[],				    //行业排名
				scoreList:[{
					icon:'/pagesStock/static/icon/marketPosition.png',
					title:'市场地位',
					color:'blue',
					score:''
				},
				{
					icon:'/pagesStock/static/icon/technicalStrength.png',
					title:'技术实力',
					color:'purple',
					score:''
				},
				{
					icon:'/pagesStock/static/icon/brandValue.png',
					title:'品牌价值',
					color:'purple',
					score:''
				},
				{
					icon:'/pagesStock/static/icon/growthPotential.png',
					title:'运营效率',
					color:'purple',
					score:''
				},
				{
					icon:'/pagesStock/static/icon/financialHealth.png',
					title:'财务健康',
					color:'blue',
					score:''
				},
				{
					icon:'/pagesStock/static/icon/innovationAbility.png',
					title:'创新能力',
					color:'blue',
					score:''
				},
				{
					icon:'/pagesStock/static/icon/riskManagement.png',
					title:'风险控制',
					color:'purple',
					score:''
				},
				{
					icon:'/pagesStock/static/icon/growthPotential.png',
					title:'成长潜力',
					color:'purple',
					score:''
				}],
				chartData2:[],				//雷达图数据
				businessStructureList:[],	//业务结构分析
				businessSegmentList:[],		//业务板块详情
				valueChainAnalysisInfo:null,
				totalNodes:0,				//供应链总节点数
				upstreamList:[],			//上游供应链
				coreEnterpriseList:[],		//核心企业
				downstreamList:[],			//下游客户
				selectValueChainInfo:null,	//点击查看的产业链信息
				relatedCompanyList:[],		//产业链相关公司
				keyFactorsInfo:null,		//关键因素统计信息
				keyFactorsList:[],			//关键因素
				timelineInfo:null,			//发展时间线统计信息
				timelineList:[],			//发展时间线
				caiWuList: [{
						title: '主营数据'
					},
					{
						title: '财务分析'
					},
					{
						title: '财务数据'
					}
				], //财务全景分类
				selectCaiwu: 0,
				financialStockInfo:null,			
				mainBussinessBarCategoryList:[],	//主营业务柱状图，折线图分类
				mainBussinessBarList:[],			//主营业务柱状图数据
				mainBussinessLineList:[],			//主营业务折线图数据
				productClassificationList:[],		//主营业务产业分类数据
				dongTaiList: [{
						title: '新闻动态'
					},
					{
						title: '公司公告'
					}
				], //动态跟踪分类
				selectDongtai: 0,
				newsKeywords:'',	//新闻动态搜索关键字
				newsList:[],	//新闻动态数据
				companyAnnouncementList:[],	//公司公告数据
				getLocalDate:getLocalDate,
				getRateUpOrDown:getRateUpOrDown,			//判断涨跌
				getNumStr:getNumStr,						//获取数字展示万或亿
				
			}
		},
		onLoad() {
			this.contentTop = this.navH + (20 + 70 + 30) / 750 * inject('windowWidth')
			this.getStockBasicInfoData()
			this.getQuoteDetailsData()
			this.getActualControlData()
			this.getOwnershipConcentration()
			this.getTopShareholdersData()
			this.getTopCirculatingShareholdersData()
		},
		methods: {
			/**
			 * 点击搜索
			 */
			clickSearch() {
				this.getStockBasicInfoData()
				this.getQuoteDetailsData()
			},
			/**
			 * 点击展开收起公司简介
			 */
			clickExpandOrRetractCompanyIntro() {
				this.isExpandIntro = !this.isExpandIntro
			},
			/**
			 * @param {Object} index
			 */
			clickTabItem(index) {
				if (this.selectTab != index) {
					this.selectTab = index
					if(index==1) {
						//获取竞争地位数据
						if(this.selectInDepthAnalysis==0) {
							this.getComprehensiveAnalysisData()
							this.getIndustryRankListData()
						}
					}else if(index==2) {
						//获取股票信息数据
						this.getFinancialStockInfoData()
						this.getFinancialComparisonData()
						this.getFinancialMainBussinessData()
					}else if(index==3) {
						//获取新闻动态数据
						this.getNewsListData()
					}
				}
			},
			/**
			 * 点击选择公司档案分类
			 * @param {Object} index
			 */
			clickCompanyFilesItem(index) {
				if (this.selectCompanyFiles != index) {
					this.selectCompanyFiles = index
					if (index==1) {
						//获取管理团队数据
						this.getManagementTeamData()
					}else if (index==2) {
						//获取分支机构数据
						this.getBranchListData()
					}
				}
			},
			/**
			 * 点击选择深度分析分类
			 * @param {Object} index
			 */
			clickInDepthAnalysisItem(index) {
				if (this.selectInDepthAnalysis != index) {
					this.selectInDepthAnalysis = index
					if (index==2) {
						//产业链
						this.getValueChainAnalysisData()
					}else if (index==3) {
						//发展历程
						this.getKeyFactorsTimelineData()
					}
				}
			},
			/**
			 * 点击选择财务全景分类
			 * @param {Object} index
			 */
			clickCaiWuItem(index) {
				if (this.selectCaiwu != index) {
					this.selectCaiwu = index
				}
			},
			
			/**
			 * 点击选择动态分类
			 * @param {Object} index
			 */
			clickDongTaiItem(index) {
				if (this.selectDongtai != index) {
					this.selectDongtai = index
					if (index==0) {
						//新闻动态
						this.getNewsListData()
					} else if (index==1) {
						//公司公告
						this.getCompanyAnnouncementsData()
					}
				}
			},
			/**
			 * 点击查看行业排名
			 */
			clickIndustryRank() {
				this.$refs["industryRankPop"].open()
			},
			/**
			 * 关闭行业排名弹窗
			 */
			clickCloseIndustryRankPop()
			{
				this.$refs["industryRankPop"].close()
			},
			detailShow(type) {
				if (type == 0) {
					this.$refs["detailPopup"].open()
				}else {
					this.$refs["detailInfoPopup"].open()
				}
			},
			/**
			 * 查看产业链详情
			 */
			clickValueChainDetail(item)
			{
				this.selectValueChainInfo = item;
				this.getValueChainRelatedCompanyData()
				this.$refs["valueChainPopup"].open()
			},
			/**
			 * 关闭产业链弹窗
			 */
			clickCloseValueChainPop()
			{
				this.$refs["valueChainPopup"].close()
			},
			/**
			 * 获取股票基本信息
			 */
			getStockBasicInfoData() {
				let code = this.stockCode 
				if (this.keywords) {
					code = this.keywords
				}
				stockBasicInfo(code).then(res=>{
					this.stockBasicInfo = res.data
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取股票当前市场价格信息
			 */
			getQuoteDetailsData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				quoteDetailsInfo(code).then(res=>{
					this.quoteDetailsInfo = res.data
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取实际控制人数据
			 */
			getActualControlData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				actualControl(code).then(res=>{
					this.actualControlInfo = res.data[0]
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取股权集中度数据
			 */
			getOwnershipConcentration() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				ownershipConcentration(code).then(res=>{
					this.concentrationList = res.data.slice(0,8)
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取十大股东列表
			 */
			getTopShareholdersData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				topShareholdersList(code,{'limit':10}).then(res=>{
					this.topShareholdersList = res.data
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取十大流通股东列表
			 */
			getTopCirculatingShareholdersData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				topCirculatingShareholdersList(code,{'limit':10}).then(res=>{
					this.topCirculatingShareholdersList = res.data
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取管理团队数据
			 */
			getManagementTeamData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				managementTeam(code,{active_only:true}).then(res=>{
					let data = res.data
					let arr = ['高管','董事','监事','其他']
					let list = []
					for (let item of arr) {
						list.push({key:item,list:[]})
					}
					this.managementList = data.reduce((acc,item) => {
						for (let item1 of acc) {
							if(item.position_category.indexOf(item1.key)>-1)
							{
								let keyIndex = -1
								for (let item2 of acc) {
									if(item1.key==item2.key){
										keyIndex = acc.indexOf(item2)
										break
									}
								}
								if(keyIndex>-1)
								{
									acc[keyIndex].list.push(item)
								}else 
								{
									acc.push({key:item1,list:[item]})
								}
							}
						}
						if(item.position_category.indexOf(arr[0])>-1&&item.position_category.indexOf(arr[1])>-1&&item.position_category.indexOf(arr[2])>-1)
						{
							// acc.key = '其他'
							// acc.list = item
						}
					    return acc;
					}, list);
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取分支机构数据
			 */
			getBranchListData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				branchesList(code).then(res=>{
					this.branchList = res.data
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取综合分析数据
			 */
			getComprehensiveAnalysisData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				comprehensiveAnalysis(code).then(res=>{
					this.qualitativeAnalysisInfo = res.data.qualitative_analysis
					this.competitivePositionInfo = res.data.competitive_position
					this.mainCompetitorsList = this.competitivePositionInfo.analysis.main_competitors.split(',')
					this.industryRankInfo = res.data.competitive_position.ranking
					let marketPosition = this.competitivePositionInfo.scores.market_position
					this.scoreList[0].score = marketPosition
					let technology = this.competitivePositionInfo.scores.technology
					this.scoreList[1].score = technology
					let brand = this.competitivePositionInfo.scores.brand
					this.scoreList[2].score = brand
					let operation = this.competitivePositionInfo.scores.operation
					this.scoreList[3].score = operation
					let finance = this.competitivePositionInfo.scores.finance
					this.scoreList[4].score = finance
					let innovation = this.competitivePositionInfo.scores.innovation
					this.scoreList[5].score = innovation
					let risk = this.competitivePositionInfo.scores.risk
					this.scoreList[6].score = risk
					let growth = this.competitivePositionInfo.scores.growth
					this.scoreList[7].score = growth
					this.chartData2 = [[marketPosition,technology,brand,operation,finance,innovation,risk,growth]]
					this.businessStructureList = res.data.business_structure
					this.businessSegmentList = res.data.business_segments;
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取行业排名列表数据
			 */
			getIndustryRankListData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				industryRankList(code).then(res=>{
					this.industryRankList = res.data
				}).catch(error=>{
					
				})
			}, 
			/**
			 * 获取价值链分析数据
			 */
			getValueChainAnalysisData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				valueChainAnalysis(code).then(res=>{
					this.valueChainAnalysisInfo = res.data.analysis_summary
					this.totalNodes = res.data.value_chain_structure.total_nodes
					let nodesByLevel = res.data.value_chain_structure.nodes_by_level
					this.upstreamList = nodesByLevel['level_-2'].concat(nodesByLevel['level_-1'])
					this.coreEnterpriseList = nodesByLevel.level_0
					this.downstreamList = nodesByLevel.level_1.concat(nodesByLevel.level_2)
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取价值链相关公司
			 */
			getValueChainRelatedCompanyData() {
				let param = {}
				if (this.selectValueChainInfo)
				{
					param.node_name = this.selectValueChainInfo.node_name
				}
				valueChainRelatedCompany(param).then(res=>{
					this.relatedCompanyList = res.data
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取关键因素和发展时间线数据
			 */
			getKeyFactorsTimelineData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				keyFactorsTimeline(code).then(res=>{
					this.keyFactorsInfo = res.data.key_factors
					this.keyFactorsList = res.data.key_factors.categories
					this.timelineInfo = res.data.development_timeline.statistics
					this.timelineList = res.data.development_timeline.events
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取股票信息数据
			 */
			getFinancialStockInfoData()
			{
				let code = this.stockCode
				financialStockInfo(code).then(res=>{
					this.financialStockInfo = res.data
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取财务比较数据
			 */
			getFinancialComparisonData()
			{
				let code = this.stockCode
				let param = {periods:8}
				financialComparison(code,param).then(res=>{
					let data = res.data 
					this.mainBussinessBarCategoryList = []
					this.mainBussinessBarList = []
					this.mainBussinessLineList = []
					for (let item of data) {
						this.mainBussinessBarCategoryList.unshift(item.report_type.replace('三季报','Q3'))
						this.mainBussinessBarList.unshift((parseFloat(item.performance.revenue)/100000000).toFixed(2))
						this.mainBussinessLineList.unshift((parseFloat(item.performance.net_profit)/100000000).toFixed(2))
					}
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取财务主营业务数据
			 */
			getFinancialMainBussinessData()
			{
				let code = this.stockCode
				let param = {periods:4}
				financialMainBusiness(code,param).then(res=>{
					this.productClassificationList = res.data.product_classification
					
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取新闻动态数据
			 */
			getNewsListData() {
				let q = this.stockCode
				if (this.newsKeywords) 
				{
					q = this.newsKeywords
				}
				let param = {importance:'all',sort:'new',q:q,page:1,per_page:10,mode:'vertical'}
				eventList(param,true).then(res=>{
					this.newsList = res.data.events
				}).catch(error=>{
					
				})
			}, 
			/**
			 * 获取公司公告数据
			 */
			getCompanyAnnouncementsData() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				let param = {limit:20}
				companyAnnouncementsList(code,param).then(res=>{
					this.companyAnnouncementList = res.data
				}).catch(error=>{
					
				})
			}
		}
	}
</script>

<style lang="less">
	page {
		background-color: #070707;
	}

	.topBg {
		top: 0;
		left: 0;
		width: 100%;
		height: auto;
	}

	.searchC {
		background-color: #292929B3;
		left: 0;
		right: 0;
		margin: 20rpx 25rpx 0;
		padding: 0 25rpx;
		height: 70rpx;
		border-radius: 35rpx;
		font-size: 22rpx;
		font-weight: 500;

		.icon {
			margin-right: 12rpx;
			width: 25rpx;
			height: auto;
		}

		input {
			height: 100%;
			color: white;
		}
	}

	.stockDetailsC {
		left: 0;
		right: 0;
		bottom: calc(20rpx + 70rpx + 20rpx + env(safe-area-inset-bottom));

		.basicInfoC {
			background-color: white;
			margin: 0 25rpx;
			padding: 22rpx 20rpx 40rpx;
			border-radius: 10rpx;

			.categoryLabelC {
				font-size: 24rpx;
				font-weight: 500;
				color: #71675D;

				.category {
					margin-right: 14rpx;
					padding: 0 12rpx;
					line-height: 34rpx;
					border: solid 1rpx #71675D;
					border-radius: 5rpx;
				}
			}

			.priceC {
				margin-top: 10rpx;
				padding: 0 6rpx 16rpx;
				border-bottom: solid 1rpx #E7E7E7;
				font-weight: 500;

				.currentChgC {
					margin-right: 40rpx;
					

					.current {
						font-size: 48rpx;
						font-weight: 900;
					}
					.up {
						color: #EC3440;
					}
					.down 
					{
						color: #345423;
					}
					
					.chg {
						font-size: 24rpx;
						text-align: center;
					}
				}

				.priceIndexC {
					font-size: 24rpx;
					color: #71675D;

					.indexC {
						height: 40rpx;

						.content.up {
							color: #EC3440;
						}

						.content.down {
							color: #345423;
						}
					}

					.indexC.marginR {
						margin-left: 80rpx;
					}
				}
			}

			.section {
				margin-top: 14rpx;
				font-size: 28rpx;
				font-weight: bold;
				color: #2B2B2B;
			}

			.infoC {
				height: 40rpx;
				font-size: 22rpx;
				color: #71675D;

				.rightInfoC {
					margin-left: 32rpx;
				}

				.icon {
					margin-right: 15rpx;
					width: 26rpx;
					height: auto;
				}

				.title {
					margin-right: 18rpx;
					font-weight: 500;
				}

				.content {
					font-weight: bold;
					text-align: right;
				}

				.title.important,
				.content.important {
					color: #BB8520;
				}

				.content.up {
					color: #EC3440;
				}
				.content.down {
					color: #345423;
				}
			}

			.progressC {
				background-color: #345423;
				margin: 20rpx 10rpx 0;
				height: 10rpx;
				border-radius: 5rpx;

				.buy {
					background-color: #EC3440;
					width: 42%;
					height: 100%;
					border-radius: 5rpx;
				}
			}

			.buySaleC {
				margin: 10rpx 0;
				padding: 0 10rpx 20rpx;
				font-size: 22rpx;
				font-weight: bold;
				border-bottom: solid 1rpx #E7E7E7;

				.buy {
					color: #EC3440;
				}

				.sale {
					color: #345423;
					text-align: right;
				}
			}

			.companyInfo {
				display: flex;
				margin-top: 16rpx;
				font-size: 22rpx;
				font-weight: 500;
				color: #71675D;

				.title {
					margin-right: 10rpx;
					font-weight: bold;
				}
		
				.info.retract {
					display: -webkit-box;
					-webkit-box-orient: vertical;
					-webkit-line-clamp: 3;
					text-overflow: ellipsis;
					overflow: hidden;
				}

				.expand {
					background-color: white;
					// padding-left: 10rpx;
					color: #BB8520;
					right: 0;
					bottom: 0;
					.ellipsis 
					{
						color: #71675D;
					}
				}
			}
		}

		.otherInfoC {
			background-color: white;
			margin: 20rpx 25rpx 0;
			border-radius: 10rpx;

			.tabC {
				white-space: nowrap;
				margin: 0 20rpx;
				width:calc(100% - 40rpx);
				border-bottom: solid 1rpx #E7E7E7;

				.item {
					display: inline-block;
					margin-right: 40rpx;
					line-height: 70rpx;
					font-size: 26rpx;
					font-weight: 500;
					color: #999;
				}

				.item.select {
					border-bottom: solid 1rpx#F2C369;
					font-size: 28rpx;
					font-weight: bold;
					color: #2B2B2B;
				}
			}

			.companyFilesList {
				white-space: nowrap;
				margin: 22rpx 26rpx 0;

				.item {
					display: inline-block;
					background-color: #F6F6F6;
					margin-right: 20rpx;
					padding: 0 12rpx;
					line-height: 46rpx;
					border-radius: 5rpx;
					font-size: 24rpx;
					font-weight: 500;
					color: #939393;
				}

				.item.select {
					background-color: #F3C368;
					font-weight: bold;
					color: #070707;
				}
			}

			

			

			.ywjg_list {
				color: #2B2B2B;

				.title {
					font-size: 28rpx;
					font-weight: bold;
				}

				.ywjg_item_1 {
					font-weight: 500;
					margin: 20rpx;
					background-color: #FAFAFC;
					border-radius: 10rpx;
					padding: 25rpx 20rpx;
					box-sizing: border-box;
				}
			}
		}
	}

	.bottomC {
		background-color: black;
		padding: 20rpx 25rpx calc(20rpx + env(safe-area-inset-bottom));
		left: 0;
		right: 0;
		bottom: 0;

		.inputC {
			background-color: #424143;
			margin-right: 20rpx;
			padding: 0 33rpx;
			height: 70rpx;
			border-radius: 35rpx;

			input {
				height: 100%;
				font-size: 26rpx;
				font-weight: 500;
			}
		}

		.contrastShareC {
			.item {
				font-size: 24rpx;
				font-weight: 500;
				color: #FEFAF6;
				text-align: center;

				.icon {
					margin: 0 30rpx;
					width: auto;
					height: 26rpx;
				}
			}
		}
	}

	.industryRankPop {
		background-color: white;
		border-radius: 20rpx 20rpx 0 0;

		.popTitle {
			margin: 0 20rpx;
			line-height: 100rpx;
			border-bottom: solid 1rpx #E7E7E7;
			font-size: 35rpx;
			font-weight: bold;
			color: #333;
			text-align: center;
		}

		.closeC {
			top: 0;
			right: 0;
			padding: 40rpx 26rpx;

			.icon {
				display: block;
				width: 20rpx;
				height: auto;
			}
		}
		.rankList 
		{
			max-height: 660rpx;
			overflow-y: scroll;
			.sectionDateC {
				padding: 30rpx 26rpx;
			
				.section {
					margin-right: 11rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #2B2B2B;
				}
			
				.industryC {
					background-color: #FFF7E9;
					padding: 0 15rpx;
					line-height: 34rpx;
					border: solid 1rpx #F2C369;
					border-radius: 18rpx;
					font-size: 20rpx;
					font-weight: 500;
					color: #F2C369;
			
					.icon {
						margin-right: 3rpx;
						width: 16rpx;
						height: auto;
					}
				}
			
				.date {
					font-size: 24rpx;
					font-weight: 500;
					color: #71675D;
				}
			}
			
			.list {
				padding: 0 25rpx;
			
				.item {
					margin: 0 20rpx 20rpx 0;
					padding: 20rpx 12rpx;
					width: calc((100% - 40rpx)/3);
					border: solid 1rpx #FCE2B2;
					border-radius: 10rpx;
					.title 
					{
						font-size: 24rpx;
						font-weight: 500;
						color: #3D3D3D;
					}
					.valueRankC 
					{
						.value 
						{
							margin-right: 9rpx;
							font-size: 30rpx;
							font-weight: 800;
							color: #BB8520;
						}
						.rank
						{
							background-color: #F3C368;
							padding: 0 9rpx;
							line-height: 30rpx;
							border-radius: 15rpx;
							font-size: 24rpx;
							color: white;
						}
					}
					.average 
					{
						font-size: 22rpx;
						font-weight: 500;
						color: #999;
						word-break: break-all;
					}
				}
			
				.item:nth-child(3n) {
					margin-right: 0;
				}
			}
		}
		

		.detailPopup {
			height: 70%;
			background-color: white;
			border-radius: 20rpx 20rpx 0 0;
			padding-bottom: env(safe-area-inset-bottom);
		}
		
	}
	
.valueChainPopup {
	background-color: white;
	border-radius: 20rpx 20rpx 0 0;
	
	.popTitle {
		margin: 0 20rpx;
		line-height: 100rpx;
		border-bottom: solid 1rpx #E7E7E7;
		font-size: 35rpx;
		font-weight: bold;
		color: #333;
		text-align: center;
	}
	
	.closeC {
		top: 0;
		right: 0;
		padding: 40rpx 26rpx;
	
		.icon {
			display: block;
			width: 20rpx;
			height: auto;
		}
	}
	.valueChainInfoC 
	{
		.title 
		{
			font-size: 28rpx; 
			font-weight: bold;
			color: #2A2A2A;
		}
		.labelC 
		{
			margin-top: 20rpx;
			.label 
			{
				 margin-right: 10rpx;
				 padding: 0 10rpx;
				 line-height: 30rpx;
				 font-size: 20; 
				 text-align: center; 
				 border-radius: 5rpx; 
			}
			.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; 
			}
		}
		.progressBgC
		{
			background-color: #EFEFEF; 
			height: 10rpx; 
			border-radius: 5rpx; 
			margin-top: 20rpx; 
			.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%);
			}
		}
	}
}
</style>