<template>
	<view>
		<navBar leftText="板块异动明细" :hideNavBg="true"></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>

		<view class="stockDetailsC fixed" style="background-color: white; border-radius: 10rpx; overflow: hidden;"
			:style="'top:'+contentTop+'px;'">

			<view style="height: 86rpx;">
				<scroll-view scroll-x
					style="white-space: nowrap; height: 100%; padding: 0 20rpx; box-sizing: border-box;"
					scroll-with-animation :scroll-into-view="'tab-' + activeIndex">
					<view style="display: flex; align-items: center; height: 100%; font-weight: 500;">
						<view :id="'tab-' + index" @click="activeIndex = index" v-for="(item,index) in bkList"
							:key="index"
							style="display: flex; align-items: center; justify-content: center; line-height: 85rpx; margin: 0 20rpx;"
							:style="{color: (activeIndex == index ? '#2B2B2B' : '#999999'), 'border-bottom': (activeIndex == index ? '1rpx solid #F2C369' : 'none'), 'font-size' : (activeIndex == index ? '28rpx' : '26rpx')}">
							{{item.title}}
						</view>
					</view>
				</scroll-view>
			</view>

			<view style="height: 1rpx; background-color: #E7E7E7; margin: 0 20rpx;"></view>

		
			<view
				style="height: 48rpx; display: grid; grid-template-columns: repeat(3, 1fr); gap: 10rpx; margin: 23rpx 40rpx;">
				<view @click="handleFilterChange(index)"
					style="height: 45rpx; display: flex; align-items: center; justify-content: center; color: #939393; font-size: 24rpx; font-weight: 500; border-radius: 5rpx;"
					:style="{color: (filterIndex == index ? '#070707' : '#939393'), 'border': (filterIndex == index ? '1rpx solid #F2C369' : '1rpx solid #E5E5E5'), 'background-color' : (filterIndex == index ? '#F2C369' : '#fff')}"
					v-for="(item,index) in bkFilters" :key="index">
					{{item}}
				</view>
			</view>


			<view
				style="margin: 0 20rpx; background-color: #FAFAFC; display: grid; grid-template-columns: 35% 20% 20% 25%;">
				<view v-for="(item,index) in ['名称', '涨幅', '连板', '板块']" :key="index"
					style="font-size: 22rpx; color: #666666; padding: 0 15rpx; box-sizing: border-box; font-weight: 500; line-height: 60rpx;"
					:style="{'text-align' : index == 0 ? 'left' : 'center'}">
					{{item}}
				</view>
			</view>


			<scroll-view scroll-y
				style="position: absolute; top: 241rpx; left: 0; right: 0; bottom: 0; font-size: 20rpx; font-weight: 500;">
				<!-- 真实股票数据渲染 -->
				<view v-for="(item, index) in filteredStocks" :key="item.scode"
					style="margin: 0 20rpx; display: grid; grid-template-columns: 35% 20% 20% 25%;"
					:style="{'background-color': (index % 2 == 0 ? '#fff' : '#FAFAFC')}">
					<!-- 股票名称 + 角色标签 -->
					<view style="display: flex; align-items: center; color: #666666; height: 60rpx;">
						<!-- 角色标签 -->
						<view v-if="item.stockRole"
							style="display: flex; align-items: center; border-radius: 5rpx; padding: 0 10rpx; margin-left: 14rpx;"
							:style="getRoleTagStyle(item.stockRole)">
							<image v-if="item.stockRole.icon" style="width: 15rpx; height: 17rpx; margin-right: 5rpx;"
								:src="item.stockRole.icon" mode="widthFix"></image>
							<!-- <image style="width: 15rpx; height: 17rpx;" src="/pagesStock/static/icon/all-icon-4.png" mode="widthFix"></image> -->
							<view :style="{'color': item.stockRole.color}">{{item.stockRole.text}}</view>
						</view>
						<view style="margin-left: 10rpx;">{{item.sname}}</view>
					</view>

					<!-- 涨幅（硬编码+10%） -->
					<view style="display: flex; align-items: center; justify-content: center;">
						<view style="font-size: 24rpx; color: #EC3440; font-weight: bold;">+10.00%</view>
					</view>

					<!-- 连板数 -->
				<view style="display: flex; align-items: center; justify-content: center;">
										<view 
											style="padding: 0 10rpx; border-radius: 5rpx; display: flex; align-items: center; justify-content: center;"
											:style="getBoardTagStyleByLevel(item.continuous_days)">
											{{formatBoardText(item.continuous_days)}}
										</view>
									</view>
									
									<!-- 核心板块（按关键词匹配颜色） -->
									<view style="display: flex; align-items: center; justify-content: center;">
										<view style="background-color: #F4EFFF; border-radius: 5rpx; padding: 0 10rpx; white-space: nowrap; max-width: 120rpx; overflow: hidden;text-overflow: ellipsis;" :style="{color: getSectorTextColor(item.core_sectors[0] || '未知板块')}">
											{{item.core_sectors[0] || '未知板块'}}
										</view>
									</view>

				</view>
			</scroll-view>
		</view>



	</view>
</template>

<script>
	import {
		inject
	} from 'vue'
	import {
		getBaseURL1
	} from '@/request/http.js'

	export default {
		data() {
			return {
				navH: inject('navHeight'),
				contentTop: '',
				activeIndex: 0,
				bkList: [],
				bkFilters: [
					
					'按连板数',
					'只看龙头'
				],
				filterIndex: 0,
				selectedFullDate: '', // 年-月-日
				originData: null, // 原始接口数据
				allStocks: [], // 所有股票数据（带角色标签）
				// 角色配置
				STOCK_ROLES: {
					dragon: {
						text: '龙头',
						color: '#EC3440',
						bgColor: '#FFE8E9',
						icon: '/pagesStock/static/icon/first-icon1.png'
					},
					follow: {
						text: '跟风',
						color: '#F97316',
						bgColor: '#FFF0E6',
						icon: '/pagesStock/static/icon/first-icon2.png'
					},
					first: {
						text: '首板',
						color: '#01AB5D',
						bgColor: '#E4F9EF',
						icon: '/pagesStock/static/icon/first-icon.png'
					},
					normal: {
						text: '',
						color: '',
						bgColor: '',
						icon: ''
					}
				},
				// 连板层级样式配置（新规则）
								BOARD_LEVEL_STYLES: {
									dragon: { // 5板及以上 龙头
										 
										color: '#ef4444',
										bgColor: '#FFE8E9',
										borderColor: '#ef4444'
									},
									high: { // 3-4板 高位
										 
										color: '#f97316',
										bgColor: '#FFF0E6',
										borderColor: '#f97316'
									},
									mid: { // 2板 中位
										 
										color: '#eab308',
										bgColor: '#FFF9E6',
										borderColor: '#eab308'
									},
									first: { // 1板 首板
										 
										color: '#22c55e',
										bgColor: '#E4F9EF',
										borderColor: '#22c55e'
									}
								},
								// 板块文字颜色配置（新规则）
								SECTOR_COLOR_RULES: [
									{ keyword: '公告', color: '#D4AF37' }, // 金色
									{ keyword: '其他', color: '#9CA3AF' }, // 灰色
									{ keyword: ['AI', '人工智能', '芯片'], color: '#8B5CF6' }, // 紫色
									{ keyword: ['锂电', '电池', '新能源'], color: '#10B981' }, // 翠绿
									{ keyword: ['医药', '医疗'], color: '#EC4899' }, // 粉色
									{ keyword: ['金融', '银行'], color: '#F59E0B' }, // 橙黄
									{ keyword: ['军工', '航空'], color: '#EF4444' }, // 红色
								],
								DEFAULT_SECTOR_COLOR: '#06B6D4' // 默认 青色

			}
		},
computed: {
	 // 筛选后的股票列表：按板块codes匹配 + 连板排序/筛选
	    filteredStocks() {
	      if (!this.originData?.stocks || !this.bkList.length) return [];
	      
	      // 1. 获取当前选中板块的股票代码集合
	      const currentBk = this.bkList[this.activeIndex];
	      if (!currentBk?.codes || currentBk.codes.length === 0) return [];
	      const targetCodes = new Set(currentBk.codes); // 转Set提升匹配效率
	      
	      // 2. 从stocks中筛选出scode在targetCodes中的股票
	      let stocks = this.originData.stocks.filter(stock => targetCodes.has(stock.scode));
	      
	      // 3. 保留原有筛选/排序逻辑
	      switch (this.filterIndex) {
	        case 0: // 按连板数从高到低排序
	          stocks.sort((a, b) => {
	            const aDays = this.parseContinuousDays(a.continuous_days);
	            const bDays = this.parseContinuousDays(b.continuous_days);
	            return bDays - aDays;
	          });
	          break;
	        case 1: // 只看龙头（≥2连板），并按连板数从高到低排序
	          stocks = stocks.filter(stock => this.parseContinuousDays(stock.continuous_days) >= 2);
	          stocks.sort((a, b) => {
	            const aDays = this.parseContinuousDays(a.continuous_days);
	            const bDays = this.parseContinuousDays(b.continuous_days);
	            return bDays - aDays;
	          });
	          break;
	      }
	      
	      return stocks;
	    }
	  },

		onLoad(e) {
			this.activeIndex = e.index
			this.selectedFullDate = e.data
			console.log("selectedFullDate", this.selectedFullDate)
			this.contentTop = this.navH + 20 / 750 * inject('windowWidth')

			this.fetchData()
		},
		methods: {
			
			// 解析连板数
						parseContinuousDays(continuousDaysStr) {
							if (!continuousDaysStr) return 0;
							const match = continuousDaysStr.match(/(\d+)天/);
							return match ? Number(match[1]) : 0;
						},
						
						// 格式化连板文本（适配新层级）
						formatBoardText(continuousDaysStr) {
										const boardDays = this.parseContinuousDays(continuousDaysStr);
										
										if (boardDays === 1) return '首板'; // 1板显示首板
										if (boardDays > 1) return `${boardDays}连板`; // 2板及以上显示 X连板
										
										return ''; // 无连板数时返回空
									},
						
						// 获取连板标签样式（按新层级规则）
						getBoardTagStyleByLevel(continuousDaysStr) {
							const boardDays = this.parseContinuousDays(continuousDaysStr);
							let styleConfig = {};
							
							if (boardDays >= 5) {
								styleConfig = this.BOARD_LEVEL_STYLES.dragon;
							} else if (boardDays >= 3 && boardDays <= 4) {
								styleConfig = this.BOARD_LEVEL_STYLES.high;
							} else if (boardDays === 2) {
								styleConfig = this.BOARD_LEVEL_STYLES.mid;
							} else if (boardDays === 1) {
								styleConfig = this.BOARD_LEVEL_STYLES.first;
							}
							
							return {
								'color': styleConfig.color || '#FFFFFF',
								'background-color': styleConfig.bgColor || '#eab308',
								'border': `1rpx solid ${styleConfig.borderColor || '#eab308'}`
							};
						},
						
						// 获取板块文字颜色（按关键词匹配）
						getSectorTextColor(sectorName) {
							if (!sectorName) return this.DEFAULT_SECTOR_COLOR;
							
							// 遍历匹配规则
							for (const rule of this.SECTOR_COLOR_RULES) {
								if (Array.isArray(rule.keyword)) {
									// 多关键词匹配
									const isMatch = rule.keyword.some(key => sectorName.includes(key));
									if (isMatch) return rule.color;
								} else {
									// 单关键词完全匹配
									if (sectorName === rule.keyword) return rule.color;
								}
							}
							
							// 无匹配返回默认色
							return this.DEFAULT_SECTOR_COLOR;
						},
						
						// 获取股票角色
						getStockRole(stock, sectorStocks, sectorIndex) {
							const boardDays = this.parseContinuousDays(stock.continuous_days);
						
							// 5板以上直接是龙头
							if (boardDays >= 5) {
								return this.STOCK_ROLES.dragon;
							}
						
							// 首板判断：连板数为1
							if (boardDays === 1) {
								return this.STOCK_ROLES.first;
							}
						
							// 跟风判断：热门板块(前3) + 2-4连板
							if (sectorIndex < 3 && boardDays >= 2 && boardDays < 5) {
								// 特殊情况：板块内涨停最早 + 3板以上 → 龙头
								const sortedByTime = [...sectorStocks].sort((a, b) => 
									(a.zt_time || "").localeCompare(b.zt_time || "")
								);
								if (sortedByTime[0]?.scode === stock.scode && boardDays >= 3) {
									return this.STOCK_ROLES.dragon;
								}
								return this.STOCK_ROLES.follow;
							}
						
							// 其他：普通
							return this.STOCK_ROLES.normal;
						},
						
						// 获取角色标签样式
						getRoleTagStyle(role) {
							return {
								'background-color': role.bgColor
								
							};
						},
			
			// 处理板块切换
			handleTabChange(index) {
				this.activeIndex = index;
				// 切换板块后重新计算股票角色（可选）
				this.setStockRoles();
			},

			// 处理筛选切换
			handleFilterChange(index) {
				this.filterIndex = index;
			},

	
	
					 // 为所有股票添加角色标签
					    setStockRoles() {
					      if (!this.originData || !this.originData.stocks || !this.bkList.length) return;
					      this.allStocks = this.originData.stocks.map(stock => {
					        // 找到股票所属板块的热度排名
					        let sectorIndex = -1;
					        const stockSectors = Array.isArray(stock.sector_category) ? stock.sector_category : [stock.sector_category];
					        // 匹配板块列表中的位置
					        this.bkList.some((bk, idx) => {
					          const match = stockSectors.some(s => s.includes(bk.title));
					          if (match) {
					            sectorIndex = idx;
					            return true;
					          }
					          return false;
					        });
					        // 获取同板块的所有股票
					        const sectorStocks = this.originData.stocks.filter(s => {
					          const sSectors = Array.isArray(s.sector_category) ? s.sector_category : [s.sector_category];
					          return sSectors.some(ss => stockSectors.includes(ss));
					        });
					        // 获取股票角色
					        const stockRole = this.getStockRole(stock, sectorStocks, sectorIndex);
					        return {
					          ...stock,
					          stockRole: stockRole.text ? stockRole : null
					        };
					      });
					    },

			

			/**
			 * 请求接口数据（优化：动态日期+自动时间戳）
			 */
			// 请求接口数据
			 async fetchData() {
			      try {
			        const timestamp = new Date().getTime();
			        const formattedDate = this.selectedFullDate;
			        const baseURL = getBaseURL1();
			        const requestUrl = `${baseURL}/data/zt/daily/${formattedDate}.json?t=${timestamp}`;
			
			        console.log('请求URL：', requestUrl);
			        const res = await uni.request({
			          url: requestUrl,
			          method: 'GET'
			        });
			
			        if (res.statusCode === 200 && res.data) {
			          this.originData = res.data;
			          const { sector_data } = this.originData;
			          
			          // 解析sector_data生成板块列表：剔除「其他」，格式[{title: 板块名, codes: 股票代码数组}]
			          this.bkList = Object.entries(sector_data)
			            .filter(([sectorName]) => sectorName !== '其他') // 去掉其他板块
			            .map(([sectorName, sectorInfo]) => ({
			              title: sectorName,
			              codes: sectorInfo.stock_codes || [] // 取板块对应的股票代码
			            }));
			          
			          console.log('生成板块列表：', this.bkList);
			          // 为股票添加角色标签
			          this.setStockRoles();
			        } else {
			          uni.showToast({
			            title: '数据请求失败',
			            icon: 'none'
			          });
			        }
			      } catch (error) {
			        console.error('请求异常:', error);
			        uni.showToast({
			          title: '网络异常',
			          icon: 'none'
			        });
			      }
			    },
		}
	}
</script>

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

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

	.stockDetailsC {
		left: 25rpx;
		right: 25rpx;
		width: calc(100vw - 50rpx);
		bottom: env(safe-area-inset-bottom);
	}
</style>