import { WaterMonitor } from '../components/WaterMonitor';
import { DeviceAlarm } from '../components/DeviceAlarm';
import { AiPredict } from '../components/AiPredict';
import { ContrastAnalysis } from '../components/ContrastAnalysis';
import { CarbonCalc } from '../components/CarbonCalc';
import DeviceListInterface from '../model/DeviceListInterface';

@Entry
@Component
struct Details {
  @State currentIndex: number = 0;
  @State currentDevice: DeviceListInterface | null = null;

  private navItems: string[] = ['水情检测', '设备报警', 'AI预测', '对比分析', '碳汇计算'];

  aboutToAppear(): void {
    const device = AppStorage.get<DeviceListInterface>('point');
    if (device) {
      this.currentDevice = device;
    }
  }

  build() {
    Column() {
      // 内容区域
      Column() {
        if (this.currentIndex === 0) {
          WaterMonitor()
        } else if (this.currentIndex === 1) {
          DeviceAlarm()
        } else if (this.currentIndex === 2) {
          AiPredict()
        } else if (this.currentIndex === 3) {
          ContrastAnalysis()
        } else {
          CarbonCalc()
        }
      }
      .width('100%')
      .layoutWeight(1)

      // 底部导航 - 科技蓝风格
      Row() {
        ForEach(this.navItems, (item: string, index: number) => {
          Column({ space: 4 }) {
            Image($rawfile(this.currentIndex === index
              ? `daohang/ic_tab_0${index + 1}_active.png`
              : `daohang/ic_tab_0${index + 1}.png`))
              .width(24)
              .height(24)

            Text(item)
              .fontSize(11)
              .fontColor(this.currentIndex === index ? '#FFFFFF' : 'rgba(255,255,255,0.5)')
              .fontWeight(this.currentIndex === index ? FontWeight.Bold : FontWeight.Normal)
          }
          .width('20%')
          .justifyContent(FlexAlign.Center)
          .onClick(() => {
            this.currentIndex = index;
          })
        })
      }
      .width('100%')
      .height(65)
      .backgroundColor('rgba(13,40,71,0.95)')
      .borderWidth({ top: 1 })
      .borderColor('rgba(22,119,255,0.3)')
      .justifyContent(FlexAlign.SpaceEvenly)
    }
    .width('100%')
    .height('100%')
    .linearGradient({
      angle: 180,
      colors: [['#0a1628', 0], ['#0d2847', 0.5], ['#1677FF', 1]]
    })
  }
}