<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}}</view>
					</view>
					<view class="rightInfoC flex flex1">
						<view class="title">流通股本</view>
						<view class="content flex1">{{quoteDetailsInfo.float_shares}}亿股</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 class="content flex1 marginR">{{quoteDetailsInfo.total_shares}}亿股</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" :shareholdersList="topShareholdersList" :circulatingShareholdersList="topCirculatingShareholdersList"></gqjg-view>
					</template>
					<view v-if="selectCompanyFiles==1" class="managementTeamList">
						<view class="positionNumC flex">
							<view class="position">董事</view>
							<view class="num director">15人</view>
						</view>
						<view class="item flex">
							<view class="avatarC flexCenter relative director">
								郭
								<view class="sexC flexCenter absolute male">
									<image class="icon" src="/pagesStock/static/icon/female.png" mode="widthFix">
									</image>
								</view>
							</view>
							<view class="flex1">
								<view class="flex">
									<view class="name">郭晓涛</view>
									<view class="position">非执行董事</view>
									<view class="date flex1">任职日期：2024-10-08</view>
								</view>
								<view class="educationAgeC flex">
									<view class="education label">博士研究生</view>
									<view class="age label">59岁</view>
								</view>
							</view>
						</view>
						<view class="expandMoreC flexCenter">
							<view>展开查看</view>
							<image class="arrow" src="/pagesStock/static/icon/lookMoreArrow.png" mode="widthFix">
							</image>
						</view>
					</view>
					<view v-if="selectCompanyFiles==2" class="branchList">
						<view class="item" v-for="(item,index) in branchList" :key="index">
							<view class="titleStatusC flex">
								<view class="title flex1">{{item.branch_name}}</view>
								<view :class="'statusC flex '+(item.business_status=='注销'?'logOff':'exist')">
									<image v-if="item.business_status=='注销'" class="icon" src="/pagesStock/static/icon/logOffStatus.png" mode="widthFix">
									</image>
									<image v-else class="icon" src="/pagesStock/static/icon/existStatus.png" mode="widthFix"></image>
									<view>{{item.business_status}}</view>
								</view>
							</view>
							<view class="infoC topInfo flex">
								<view class="infoItem leftInfo flex flex1">
									<view class="title">注册资本</view>
									<view class="content flex1">{{item.register_capital}}</view>
								</view>
								<view class="infoItem rightInfo flex flex1">
									<view class="title">法人代表</view>
									<view class="content flex1">{{item.legal_person}}</view>
								</view>
							</view>
							<view class="infoC flex">
								<view class="infoItem leftInfo flex flex1">
									<view class="title">成立日期</view>
									<view class="content flex1">{{item.register_date}}</view>
								</view>
								<view class="infoItem rightInfo flex flex1">
									<view class="title">关联企业</view>
									<view class="content flex1">{{item.related_company_count}}家</view>
								</view>
							</view>
						</view>
					</view>
					<view v-if="selectCompanyFiles==3" class="businessInfoList">
						<view class="section">工商信息</view>
						<view class="infoC">
							<view class="infoItem flex">
								<view class="title">统一信用代码</view>
								<view class="content code flex1 rightAlign">{{stockBasicInfo.credit_code}}</view>
							</view>
							<view class="infoItem flex">
								<view class="title">公司规模</view>
								<view class="content flex1 rightAlign">{{stockBasicInfo.company_size}}</view>
							</view>
							<view class="infoItem flex">
								<view class="title">注册地址</view>
								<view class="content flex1 rightAlign">{{stockBasicInfo.reg_address}}</view>
							</view>
							<view class="infoItem flex">
								<view class="title">办公地址</view>
								<view class="content flex1 rightAlign">{{stockBasicInfo.office_address}}</view>
							</view>
						</view>
						<view class="section">服务机构</view>
						<view class="infoC">
							<view class="title infoItem">会计师事务所</view>
							<view class="content infoItem">{{stockBasicInfo.accounting_firm}}</view>
							<view class="title infoItem">律师事务所</view>
							<view class="content infoItem">{{stockBasicInfo.law_firm}}</view>
						</view>
						<view class="section">主营业务</view>
						<view class="infoC mainBussiness">
							<text class="title">{{stockBasicInfo.main_business}}</text>
						</view>
						<view class="section">经营范围</view>
						<view class="infoC">
							<text class="title">{{stockBasicInfo.business_scope}}</text>
						</view>
					</view>
				</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">
						<view class="section">核心定位</view>
						<view v-if="qualitativeAnalysisInfo" class="corePositionC">{{qualitativeAnalysisInfo.core_positioning.one_line_intro}}</view>
						<view class="section">投资亮点</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 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>行业排名 6/42</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 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 v-if="selectInDepthAnalysis==1">
						<ywjg-view></ywjg-view>
					</template>
					<template v-if="selectInDepthAnalysis==2">
						<cyl-view @detail="detailShow(0)"></cyl-view>
					</template>
					<template v-if="selectInDepthAnalysis==3">
						<fzlc-view @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>
					<zysj-view :type="selectCaiwu"></zysj-view>
				</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"></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">
					<image class="icon" src="/static/icon/home/close.png" mode="widthFix"></image>
				</view>
				<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>银行(一级行业)</view>
					</view>
					<view class="flex1"></view>
					<view class="date">2024-09-30</view>
				</view>
				<view class="list">
					<view class="item">
						<view class="title">EPS</view>
						<view class="average">行业均值:1.85</view>
					</view>
				</view>
			</view>
		</uni-popup>
		<uni-popup ref="detailPopup" 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="height: 60vh;">
					<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;">央行/政策性银行</view>
						<view style="display: flex; align-items: center; margin: 20rpx 0;">
							<view style="color: #FF5501; font-size: 20; text-align: center; background-color: #FFF4EF; border-radius: 5rpx; padding: 2rpx 10rpx; margin-right: 10rpx;">Supplier</view>
							<view style="border: 1rpx solid #FF5501; color: #FF5501; border-radius: 5rpx; padding: 2rpx 10rpx;">份额: 12.5%</view>
						</view>
						<view style="color: #BB8520; margin-top: 30rpx;">节点描述</view>
						<view style="color: #71675D; font-size: 22rpx; margin-top: 13rpx;">提供再贷款、再贴现、同业存放等基础货币与流动性支持</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;">95</text></view>
								<view style="background-color: #EFEFEF; border-radius: 5rpx; margin-top: 20rpx;"><view style="width: 95%; background: linear-gradient(to right, #FF8C53, #FF5501); border-radius: 5rpx; height: 10rpx;"></view></view>
							</view>
							
							<view>
								<view><text style="color: #BB8520;">依赖程度</text><text style="color: #71675D; margin-left: 10rpx;">86</text></view>
								<view style="background-color: #EFEFEF; border-radius: 5rpx; margin-top: 20rpx;"><view style="width: 86%; background: linear-gradient(to right, #FF8C53, #FF5501); border-radius: 5rpx; height: 10rpx;"></view></view>
							</view>
						</view>
						
						<view style="margin: 30rpx 0; font-weight: bold; font-size: 28rpx;">相关公司</view>
						
						<view v-for="(item,index) in 3" :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;">平安银行</text>
								<text style="margin: 0 13rpx; color: #F2C369; font-size: 20rpx; padding: 2rpx 15rpx; background-color: #FFF7E9; border-radius: 3rpx; border: 1rpx solid #F2C369;">000001</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;">平安银行股份有限公司</view>
							<view style="color: #71675D; font-size: 24rpx;">供再贷款、再贴现、同业存放等基础货币与流动性支持</view>
							<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;">流向 平安银行</text>
							</view>
						</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, managementTeam, quoteDetailsInfo, stockBasicInfo, topCirculatingShareholdersList, topShareholdersList } from '@/request/api'
	import { getLocalDate, getNumStr, getRateUpOrDown } from '@/utils/util'

	export default {
		data() {
			return {
				navH: inject('navHeight'),
				contentTop: '',
				keywords: '',			//搜索关键字
				stockCode:'000009',		//股票代码  600759
				stockBasicInfo:null,	//股票基本信息
				quoteDetailsInfo:null,	//股票事实市场价格信息
				isExpandIntro:false,	//是否展开公司简介
				tabList: [{
						title: '公司档案'
					},
					{
						title: '深度分析'
					},
					// {
					// 	title:'股票行情'
					// },
					{
						title: '财务全景'
					},
					// {
					// 	title:'盈利预测'
					// },
					{
						title: '动态跟踪'
					}
				],
				selectTab: 0,
				companyFilesList: [{
						title: '股权结构'
					},
					{
						title: '管理团队'
					},
					{
						title: '分支机构'
					},
					{
						title: '工商信息'
					}
				], //公司档案分类
				actualControlInfo:null,				//实际控制信息
				topShareholdersList:[],				//十大股东列表
				topCirculatingShareholdersList:[],	//十大流通股东列表
				managementList:[],	//管理团队列表
				branchList:[],	//分支机构列表
				selectCompanyFiles: 0,
				inDepthAnalysisList: [{
						title: '战略分析'
					},
					{
						title: '业务结构'
					},
					{
						title: '产业链'
					},
					{
						title: '发展历程'
					}
				], //深度分析分类
				selectInDepthAnalysis: 0,
				qualitativeAnalysisInfo:null,			//定性分析
				mainCompetitorsList:[],	//主要竞争对手
				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:''
				}],
				competitivePositionInfo:null,	//竞争地位信息
				caiWuList: [{
						title: '主营数据'
					},
					{
						title: '财务分析'
					},
					{
						title: '财务数据'
					}
				], //财务全景分类
				selectCaiwu: 0,
				dongTaiList: [{
						title: '新闻动态'
					},
					{
						title: '公司公告'
					}
				], //动态跟踪分类
				selectDongtai: 0,
				newsList:[],	//新闻动态数据
				companyAnnouncementList:[],	//公司公告数据
				getLocalDate:getLocalDate,
				getRateUpOrDown:getRateUpOrDown,
				getNumStr:getNumStr
			}
		},
		onLoad() {
			this.contentTop = this.navH + (20 + 70 + 30) / 750 * inject('windowWidth')
			this.getStockBasicInfoData()
			this.getQuoteDetailsData()
			this.getActualControl()
			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) {
						//获取竞争地位数据
						this.getComprehensiveAnalysisData()
					}
				}
			},
			/**
			 * 点击选择公司档案分类
			 * @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
				}
			},
			/**
			 * 点击选择动态分类
			 * @param {Object} index
			 */
			clickDongTaiItem(index) {
				if (this.selectDongtai != index) {
					this.selectDongtai = index
					if (index==0) {
						//新闻动态
						this.getNewsListData()
					} else if (index==1) {
						//公司公告
						this.getCompanyAnnouncementsData()
					}
				}
			},
			/**
			 * 点击选择财务分类
			 * @param {Object} index
			 */
			clickCaiWuItem(index) {
				if (this.selectCaiwu != index) {
					this.selectCaiwu = index
				}
			},
			
			/**
			 * 点击查看行业排名
			 */
			clickIndustryRank() {
				this.$refs["industryRankPop"].open()
			},
			detailShow(type) {
				if (type == 0) {
					this.$refs["detailPopup"].open()
				}else {
					this.$refs["detailInfoPopup"].open()
				}
			},
			/**
			 * 获取股票基本信息
			 */
			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=>{
					
				})
			},
			/**
			 * 获取实际控制人数据
			 */
			getActualControl() {
				let code = this.stockCode
				if (this.keywords) {
					code = this.keywords
				}
				actualControl(code).then(res=>{
					this.actualControlInfo = res.data[0]
				}).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
					this.managementList = data.reduce((acc, item) => {
					    if (!acc[item.position_category_code]) {
					        acc[item.position_category_code] = [];
					    }
					    acc[item.position_category_code].push(item);
					    return acc;
					}, {});
				}).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.scoreList[0].score = this.competitivePositionInfo.scores.market_position
					this.scoreList[1].score = this.competitivePositionInfo.scores.technology
					this.scoreList[2].score = this.competitivePositionInfo.scores.brand
					this.scoreList[3].score = this.competitivePositionInfo.scores.operation
					this.scoreList[4].score = this.competitivePositionInfo.scores.finance
					this.scoreList[5].score = this.competitivePositionInfo.scores.innovation
					this.scoreList[6].score = this.competitivePositionInfo.scores.risk
					this.scoreList[7].score = this.competitivePositionInfo.scores.growth
				}).catch(error=>{
					
				})
			},
			/**
			 * 获取新闻动态数据
			 */
			getNewsListData() {
				let param = {importance:'all',sort:'new',q:this.stockCode,page:1,per_page:10,mode:'vertical'}
				eventList(param).then(res=>{
					this.newsList = res.data.events
				}).catch(error=>{
					
				})
			}, 
			/**
			 * 获取公司公告数据
			 */
			getCompanyAnnouncementsData() {
				let param = {limit:20}
				companyAnnouncementsList(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;
				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;
				}
			}

			.managementTeamList {
				padding: 0 20rpx;

				.positionNumC {
					height: 70rpx;

					.position {
						margin-right: 11rpx;
						font-size: 28rpx;
						font-weight: bold;
					}

					.num {
						padding: 0 14rpx;
						line-height: 30rpx;
						border-radius: 5rpx;
						font-size: 20rpx;
						font-weight: bold;
						color: white;
					}

					.num.director {
						background-color: #99AFEC;
					}

					.num.supervisor {
						background-color: #B499EC;
					}

					.num.other {
						background-color: #B5B5C9;
					}
				}

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

					.avatarC {
						margin-right: 18rpx;
						width: 80rpx;
						height: 80rpx;
						border-radius: 50%;
						font-size: 30rpx;
						font-weight: bold;
						color: white;

						.sexC {
							right: 0;
							bottom: 0;
							width: 30rpx;
							height: 30rpx;
							border-radius: 50%;
							border: solid 2rpx white;

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

						.sexC.female {
							background-color: #FA5A93;
						}

						.sexC.male {
							background-color: #3E6CFC;
						}
					}

					.avatarC.director {
						background-color: #99AFEC;
					}

					.avatarC.supervisor {
						background-color: #B499EC;
					}

					.avatarC.other {
						background-color: #B5B5C9;
					}

					.name {
						margin-right: 13rpx;
						font-size: 24rpx;
						font-weight: bold;
						color: #666;
					}

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

					.date {
						font-size: 20rpx;
						font-weight: 500;
						color: #999;
						text-align: right;
					}

					.educationAgeC {
						margin-top: 8rpx;

						.label {
							margin-right: 10rpx;
							background-color: #F1F1F1;
							line-height: 30rpx;
							padding: 0 16rpx;
							font-size: 20rpx;
							font-weight: 500;
							color: #999;
						}
					}
				}

				.expandMoreC {
					height: 80rpx;
					border-bottom: solid 1rpx #E7E7E7;
					font-size: 24rpx;
					font-weight: 500;
					color: #C9C9C9;

					.arrow {
						margin-left: 18rpx;
						width: 11rpx;
						height: auto;
					}
				}
			}

			.branchList {
				margin-top: 38rpx;
				padding: 0 20rpx;

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

					.titleStatusC {
						font-size: 28rpx;
						font-weight: bold;
						color: #2B2B2B;

						.statusC {
							padding: 0 10rpx;
							line-height: 28rpx;
							border-radius: 15rpx;
							font-size: 20rpx;
							font-weight: 500;
							.icon {
								margin-right: 3rpx;
								width: 16rpx;
								height: auto;
							}
						}

						.statusC.exist {
							background-color: #FFF7E9;
							border: solid 1rpx #F2C369;
							color: #F2C369;
						}
						
						.statusC.logOff {
							background-color: #FFF1F1;
							border: solid 1rpx #EF3535;
							color: #EF3535;
						}
					}

					.infoC {
						height: 50rpx;

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

							.content {
								font-size: 24rpx;
								font-weight: bold;
								color: #2A2A2A;
								text-align: right;
							}
						}

						.infoItem.leftInfo {
							margin-right: 20rpx;
						}

						.infoItem.rightInfo {
							margin-left: 20rpx;
						}
					}

					.infoC.topInfo {
						margin-top: 10rpx;
					}


				}
			}

			.businessInfoList {
				padding: 0 20rpx;

				.section {
					line-height: 72rpx;
					font-size: 28rpx;
					font-weight: bold;
					color: #2B2B2B;
				}

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

					.infoItem {
						line-height: 46rpx;
					}

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

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

					.content.code {
						color: #BB8520;
					}

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

				.infoC.mainBussiness {
					padding: 20rpx;
				}
			}

			.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;
						}
					}
				}
			}

			.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;
			}
		}

		.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;
				width: calc((100% - 40rpx)/2);
				border: solid 1rpx #FCE2B2;
				border-radius: 10rpx;
			}

			.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);
		}
	}
</style>