<template>
	<view>
		<navBar leftText="涨停分析" hideNavBg hideBack></navBar>
		<image class="topBg absolute" src="/static/image/index/conceptTopBg.png" mode="widthFix"></image>

		<scroll-view scroll-y class="stockDetailsC fixed" :style="'top:'+contentTop+'px;'">
			<view style="color: white; font-weight: 500; display: flex; align-items: center; margin: 35rpx 25rpx;">
				<image style="width: 40rpx; height: 40rpx;" src="/pagesStock/static/icon/ai-icon.png" mode="widthFix">
				</image>
				<text style="font-size: 36rpx; margin-left: 10rpx; margin-right: 20rpx;">AI总结</text>
				<text style="font-size: 28rpx;">市场情绪温和，主线题材：存储芯片</text>
			</view>

			<view style="background-color: white; border-radius: 10rpx; overflow: hidden; margin: 25rpx;">
				<view
					style="color: #2B2B2B; font-weight: 500; display: flex; align-items: center; margin: 25rpx 20rpx;">
					<image style="width: 40rpx; height: 40rpx;" src="/pagesStock/static/icon/ai-icon-1.png"
						mode="widthFix"></image>
					<text
						style="font-size: 30rpx; font-weight: bold; margin-left: 10rpx; margin-right: 20rpx;">核心指标</text>
				</view>

				<view style="display: grid; gap: 15rpx; grid-template-columns: repeat(3, 1fr); margin: 20rpx;">
					<view v-for="(item,index) in tabTypes" :key="index"
						style="display: flex; align-items: center; justify-content: center; flex-direction: column; background-color: #FFF8F0; border: 1rpx solid #F59B38; border-radius: 5rpx; padding: 20rpx; box-sizing: border-box;">
						<view style="display: flex;align-items: center;justify-content: center;">
							<view style="color: #F59B38; font-size: 30rpx;">{{item.data}}</view>
							<view v-if="item.change > 0"
								style="margin-left: 10rpx; background-color: #F59B38; border-radius: 5rpx; color: white; padding: 0 5rpx; font-size: 24rpx; font-weight: bold;">
								+{{item.change}}</view>
						</view>
						<view style="color: #555555; font-size: 20rpx; margin-top: 5rpx;">{{item.title}}</view>
					</view>
				</view>


				<view style="margin: 25rpx;">
					    <LCCalendar @date-change="handleDateChange"></LCCalendar>
				</view>


				<view style="color: #2B2B2B; font-weight: 500; display: flex; margin: 25rpx 20rpx;">
					<image style="width: 40rpx; height: 42rpx;" src="/pagesStock/static/icon/all-icon-3.png"
						mode="widthFix"></image>
					<view style="margin-left: 10rpx;">
						<view style="font-size: 30rpx; font-weight: bold;">市场全景</view>
						<view style="font-size: 24rpx; font-weight: 500; margin-top: 10rpx;">
							<text
								style="color: #F3C368; border: 1rpx solid #F3C368; border-radius: 5rpx; text-align: center; padding: 0 10rpx;">35个板块</text>
							<text
								style="color: #EC3440; border: 1rpx solid #EC3440; border-radius: 5rpx; text-align: center; padding: 0 10rpx; margin: 0 10rpx;">102只涨停</text>
							<text
								style="color: #F59B38; border: 1rpx solid #F59B38; border-radius: 5rpx; text-align: center; padding: 0 10rpx;">高位股风险:
								低</text>
						</view>
					</view>
				</view>

				<view
					style="background-color: #FAFAFC; border-radius: 10rpx; padding: 30rpx 20rpx; box-sizing: border-box; margin: 25rpx;">
					<view style="display: flex; align-items: center; font-size: 22rpx; font-weight: 500;">
						<view style="flex: 1; color: #2B2B2B; font-weight: bold; font-size: 28rpx;">板块热力图</view>
						<view style="color: #EF4444; display: flex;align-items: center;">
							<view
								style="margin: 0 10rpx; box-sizing: border-box; border-radius: 15rpx; background-color: #EF4444; overflow: hidden; width: 15rpx; height: 15rpx;">
							</view>高热度
						</view>
						<view style="color: #F97316; display: flex;align-items: center;">
							<view
								style="margin: 0 10rpx; box-sizing: border-box; border-radius: 15rpx; background-color: #F97316; overflow: hidden; width: 15rpx; height: 15rpx;">
							</view>中热度
						</view>
						<view style="color: #F3B800; display: flex;align-items: center;">
							<view
								style="margin: 0 10rpx; box-sizing: border-box; border-radius: 15rpx; background-color: #F3B800; overflow: hidden; width: 15rpx; height: 15rpx;">
							</view>低热度
						</view>
						<view style="color: #01AB5D; display: flex;align-items: center;">
							<view
								style="margin: 0 10rpx; box-sizing: border-box; border-radius: 15rpx; background-color: #01AB5D; overflow: hidden; width: 15rpx; height: 15rpx;">
							</view>冷门
						</view>
					</view>

					<view style="display: grid; grid-template-columns: repeat(4, 1fr); gap: 7rpx; margin-top: 25rpx;">
						<view v-for="(item, index) in bkList" :key="index" @click="bkydAction(index)"
							style="background-color: #EF4444; border-radius: 5rpx; padding: 15rpx; color: white; font-size: 24rpx; font-weight: 500;">
							<view>{{item.title}}</view>
							<view style="font-size: 22rpx;">{{item.count}}只</view>
						</view>
					</view>
				</view>


				<view
					style="margin: 25rpx; display: grid; grid-template-columns: repeat(3, 1fr); gap: 20rpx; color: #999999; font-size: 22rpx; font-weight: 500;">
					<view v-for="(item, index) in bkTypes"
						style="display: flex; align-items: center; justify-content: center; padding: 10rpx 20rpx;"
						:style="{color: (index == 0 ? '#BB8520' : '#999999'), border: `1rpx solid ${index == 0 ? '#F2C369' : '#D2D2D2'}`, 'background-color' : (index == 0 ? '#FFFAF1' : '#FFF')}">
						{{item}}
					</view>
				</view>

				<view
					style="height: 400rpx; display: flex; align-items: center; justify-content: center; background-color: blue;">
					<l-echart ref="chartRef"></l-echart>
					 </view>


				<view style="color: #2B2B2B; font-weight: 500; display: flex; margin: 25rpx 20rpx;">
					<image style="width: 40rpx; height: 42rpx;" src="/pagesStock/static/icon/all-icon-3.png"
						mode="widthFix"></image>
					<view style="margin-left: 10rpx;">
						<view style="font-size: 30rpx; font-weight: bold;">高位股统计</view>
						<view style="font-size: 24rpx; font-weight: 500; margin-top: 10rpx;">
							<text
								style="color: #F3C368; border: 1rpx solid #F3C368; border-radius: 5rpx; text-align: center; padding: 0 10rpx;">高位股10只</text>
							<text
								style="color: #EC3440; border: 1rpx solid #EC3440; border-radius: 5rpx; text-align: center; padding: 0 10rpx; margin: 0 10rpx;">平均3.7</text>
							<text
								style="color: #F59B38; border: 1rpx solid #F59B38; border-radius: 5rpx; text-align: center; padding: 0 10rpx;">最高9版</text>
							<text
								style="color: #FFF; background-color: #F59B38; border-radius: 5rpx; text-align: center; padding: 0 10rpx; margin-left: 10rpx;">中风险</text>
						</view>
					</view>
				</view>


				<view v-for="(item,index) in 10" :key="index"
					style="background-color: #FAFAFC; border-radius: 10rpx; padding: 15rpx 20rpx; display: flex; align-items: center; margin: 10rpx 25rpx;">
					<view style="flex: 1;">
						<view style="color: #2B2B2B; font-weight: bold; font-size: 26rpx;">博菲电气</view>
						<view style="color: #999999; font-weight: 500; font-size: 24rpx; margin-top: 5rpx;">(销量一字,高风险)
						</view>
					</view>

					<view
						style="display: flex; align-items: center; justify-content: center; padding: 4rpx 10rpx; background-color: #FFECEC; border-radius: 5rpx; border: 1rpx solid #EF4444; color: #EF4444; font-size: 20rpx; font-weight: 400; margin: 0 10rpx;">
						<image style="width: 15rpx; height: 17rpx; margin-right: 10rpx;"
							src="/pagesStock/static/icon/all-icon-4.png" mode="widthFix"></image>
						<view>9连板</view>
					</view>

					<image style="width: 27rpx; height: 25rpx;" src="/pagesStock/static/icon/all-icon-5.png"
						mode="widthFix"></image>
				</view>


				<view
					style="margin: 20rpx 30rpx; color: #EF4444; font-size: 24rpx; font-weight: 500; display: flex; align-items: center;">
					<image style="width: 27rpx; height: 25rpx; margin-right: 10rpx;"
						src="/pagesStock/static/icon/all-icon-5.png" mode="widthFix"></image>
					<text>高位股风险较高，追涨需谨慎</text>
				</view>
			</view>
		</scroll-view>

	</view>
</template>

<script>
	import {
		inject
	} from 'vue'
import { calendarCombinedData,analyseHighStocks } from '@/request/api'
	const echarts = require('../../uni_modules/lime-echart/static/echarts.min.js');

	export default {
		data() {
			return {
				navH: inject('navHeight'),
				contentTop: '',
				 selectedYearMonth: '', // 年-月（去掉日）
				      selectedFullDate: '',  // 年-月-日
				      selectedItem: null ,    // 选中的item完整数据
				tabTypes: [{
						data: '',
						change: 0,
						title: '当前日期'
					},
					{
						data: '',
						change: 3,
						title: '涨停家数'
					},
					{
						data: '22%',
						change: 0,
						title: '炸板率'
					}
				],
				bkList: [{
						title: '存储芯片',
						count: 8
					}, {
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					},
					{
						title: '存储芯片',
						count: 8
					}
				],
				bkTypes: [
					'板块关联图',
					'板块分布',
					'热门概念词云'
				],
				option2:{
					title: {
						show:false
					},
					legend: {
						show:false
					},
					tooltip:{
						show:true,
						triggerOn:'mousemove'
					},
					radar: {
					    indicator: [
					      { name: '市场地位', max: 100 },
					      { name: '技术实力', max: 100 },
					      { name: '品牌价值', max: 100 },
					      { name: '运营效率', max: 100 },
					      { name: '财务健康', max: 100 },
					      { name: '创新能力', max: 100 },
						  { name: '风险控制', max: 100 },
						  { name: '成长潜力', max: 100 }
					    ],
					    shape: 'polygon',
					    splitNumber: 5,
					    axisName: {
					      color: '#54555A'
					    },
					    splitLine: {
					      lineStyle: {
					        color: ['#CFD2D7']
					      }
					    },
					    splitArea: {
							areaStyle:{
								color:['#F4F6FA','white']
							}
					    },
					    axisLine: {
					      lineStyle: {
					        color: '#CFD2D7'
					      }
					    }
					},
					series: [
					    {
							name: 'Beijing',
							type: 'radar',
							lineStyle: {
								width:1
							},
							data: [],
							symbol: 'circle',
							symbolSize: 4,
							label:{
								show:true  
							},
							itemStyle: {
								color: '#5070DD'
							},
							areaStyle: {
								opacity: 0.1
							}
					    },
					]
				},

			}
		},
		onLoad(e) {
			this.activeIndex = e.index
			this.contentTop = this.navH + 20 / 750 * inject('windowWidth')
			
			this.analyseHighStocks()
		},
		 // mounted() {
		 //    // 初始化当天日期格式（防止日历组件事件未及时触发）
		 //    const today = new Date();
		 //    const month = today.getMonth() + 1;
		 //    const day = today.getDate();
		 //    this.tabTypes[0].data = `${month}月${day}日`;
		 //    this.tabTypes[1].data = '0'; // 默认涨停家数为0，后续会被日历数据覆盖
		 //  },
		methods: {
		handleDateChange(data) {
		      console.log('从日历组件接收的参数：', data.item?.zt_count);
		      // 赋值到父页面的变量中
		      this.selectedYearMonth = data.yearMonth;
		      this.selectedFullDate = data.fullDate;
		      this.selectedItem = data.item;
		      // 2. 格式化日期：年-月-日 → 月日（如 2026-01-14 → 1月14日）
		            if (data.fullDate) {
		              const [year, month, day] = data.fullDate.split('-').map(Number);
		              this.tabTypes[0].data = `${month}月${day}日`;
		            }
		      
		            // 3. 赋值涨停家数（优先取item中的zt_count，无数据则显示0）
		            const ztCount = data.item?.zt_count ?? 0;
		            this.tabTypes[1].data = ztCount.toString(); // 转为字符串保证格式统一

		    // this.analyseHighStocks()
		    },
			analyseHighStocks(){
				 const formatDate = this.selectedFullDate.replace(/-/g, '');
				  let param = {
				    date: formatDate 
				  }
				analyseHighStocks(param).then(res=>{
					
				}).catch(error=>{
					
				})	
			},
			async init() {
				// chart 图表实例不能存在data里
				const chart = await this.$refs.chartRef.init(echarts);
				// chart.on('click',function (params) {
				// 	console.log(params)
				// })
				chart.setOption(this.option2)
			},
			bkydAction(index) {
				uni.navigateTo({
					url: `/pagesStock/stockCenterDetails/bkydmx?index=${index}`
				})
			}
		}
	}
</script>

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

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

	.stockDetailsC {
		left: 0;
		right: 0;
		bottom: calc(55px + env(safe-area-inset-bottom));
	}
</style>