export enum Category {
  Walking = '走路',
  Running = '跑步',
  Swimming = '游泳',
  Riding = '騎行',
  Ball = '打球',
  Other = '其他'
}
let NextId = 0;
export class SportsData {
  id: string;
  name: string;
  image: Resource;
  value: number;
  category: Category;
  constructor(name: string, category: Category, image: Resource,value:number) {
    this.id = `${NextId++}`;
    this.name = name;
    this.image = image;
    this.category = category;
    this.value = value;
  }
}
export class RecordData {
  name: string;
  image: Resource;
  time:string;
  sum:number;
  constructor(name: string, image: Resource,time:string,sum:number) {
    this.name = name;
    this.image = image;
    this.time = time
    this.sum = sum;
  }
}

import {Category,SportsData} from './SportsData'
const SportsComposition:any[]=[
  {'name':'散步','category':Category.Walking,'image':$r('app.media.walk_slow'),'value':81},
  {'name':'快走(5km/h)','category':Category.Walking,'image':$r('app.media.walk_fast'),'value':188},
  {'name':'跑步(慢)','category':Category.Running,'image':$r('app.media.run'),'value':344},
  {'name':'跑步(快)','category':Category.Running,'image':$r('app.media.run_fast'),'value':475},
  {'name':'遛狗','category':Category.Walking,'image':$r('app.media.walk_dog'),'value':125},
  {'name':'游泳','category':Category.Swimming,'image':$r('app.media.swim'),'value':344},
  {'name':'乒乓球','category':Category.Ball,'image':$r('app.media.pingpong'),'value':188},
  {'name':'棒球','category':Category.Ball,'image':$r('app.media.baseball'),'value':188},
  {'name':'轉(zhuǎn)呼啦圈','category':Category.Other,'image':$r('app.media.hula'),'value':156},
  {'name':'跳繩','category':Category.Other,'image':$r('app.media.skip_rope'),'value':363},
  {'name':'騎自行車(chē)(<16km/h)','category':Category.Riding,'image':$r('app.media.ride'),'value':188},
  {'name':'騎自行車(chē)(16-19km/h)','category':Category.Riding,'image':$r('app.media.ride'),'value':363},
]
export function initializeOnStartup(): Array<SportsData> {
  let SportsDataArray: Array<SportsData> = []
  SportsComposition.forEach(item => {
    SportsDataArray.push(new SportsData(item.name,item.category,item.image,item.value));
  })
  return SportsDataArray;
}

@Preview
@Component
export struct SportsGridItem {
  private sportsItem: SportsData =  {'id':'8','name':'棒球','image':$r('app.media.baseball'),'value':188,'category':Category.Ball}
  private controller: CustomDialogController
  aboutToAppear() {
    this.controller = new CustomDialogController({
      builder: Record({ sportsItem: this.sportsItem }),
      alignment: DialogAlignment.Center
    })
  }
  @Builder sportsDetail(value: number) {
    Row({ space: 10 }) {
      Text(value.toString()).fontColor('#E14843').fontSize(16)
      Text('千卡/60分鐘').fontColor(Color.Gray).fontSize(16)
    }
  }
  build() {
    Row({ space: 10 }) {
      Image(this.sportsItem.image)
        .objectFit(ImageFit.Contain)
        .height(60)
        .aspectRatio(1)
        .borderRadius(12)
        .margin(5)
        .backgroundColor(Color.White)
      Column({ space: 6 }) {
        Text(this.sportsItem.name).fontSize(19).fontWeight(500)
        this.sportsDetail(this.sportsItem.value)
      }.alignItems(HorizontalAlign.Start)
    }
    .margin({ left: 10, top: 20 })
    .onClick(() => {
      this.controller.open()
    })
  }
}

@Component
export struct SportsGrid {
  private sportsItems: SportsData[]
  build() {
    Scroll() {
      List({ space: 20 }) {
        ForEach(this.sportsItems, (item: SportsData) => {
          ListItem() {
            SportsGridItem({ sportsItem: item })
          }
        }, (item: SportsData) => item.id.toString())
      }.height('100%')
    }
    .scrollBar(BarState.Off)
  }
}

@Builder tabBuilder(index: number, name: string) {
    Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Text(name).fontSize(20).fontColor(Color.White)
    }
    .borderRadius(15)
    .width(90)
    .height(30)
    .backgroundColor(this.currentIndex === index ? '#3ECF69' : '#bfbfbf')
  }

@Component
struct SportsCategory {
  private sportsItems: SportsData[]
  @State currentIndex: number = 0
  @Builder tabBuilder(index: number, name: string) {
    Flex({ justifyContent: FlexAlign.Center, direction: FlexDirection.Column, alignItems: ItemAlign.Center }) {
      Text(name).fontSize(20).fontColor(Color.White)
    }
    .borderRadius(15)
    .width(90)
    .height(30)
    .backgroundColor(this.currentIndex === index ? '#3ECF69' : '#bfbfbf')
  }
  build() {
    Stack() {
      Tabs({ barPosition: BarPosition.Start }) {
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Walking)) })
        }.tabBar(this.tabBuilder(0, '走路'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Running)) })
        }.tabBar(this.tabBuilder(1, '跑步'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Swimming)) })
        }.tabBar(this.tabBuilder(2, '游泳'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Riding)) })
        }.tabBar(this.tabBuilder(3, '騎行'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Ball)) })
        }.tabBar(this.tabBuilder(4, '打球'))
        TabContent() {
          SportsGrid({ sportsItems: this.sportsItems.filter(item => (item.category === Category.Other)) })
        }.tabBar(this.tabBuilder(5, '其他'))
      }
      .vertical(true)
      .barHeight('70%')
      .barWidth(100)
      .onChange((index: number) => {
        this.currentIndex = index
      })
    }
  }
}