harmony/features/Home/src/main/ets/pages/PastVideo.ets

import { HdNav, BasicConstant } from '@itcast/basic'
import { ListCompPast } from '../components/ListCompPast'
import { promptAction } from '@kit.ArkUI'
@Entry
@Component
export struct PastVideo {

  @State notselectImg: ResourceStr = $r('app.media.triangle_normal');
  @State selectImg: ResourceStr = $r('app.media.triangle_green_theme');
  @State yearWords:Array<string> =[]
  @State monthWords:Array<string> =[]
  @State timePosition:number=-1;
  @State typePosition:number=-1;
  @State tlistStatus:boolean=false;
  @State typelistStatus:boolean=false;
  @State timeText:string='会议年份';
  @State monthText:string='会议月份';
  @State type:string='';
  onPageShow(): void {
    console.log('VideoPage onPageShow!');
  }

  onPageHide(): void {
    console.log('VideoPage onPageHide!');
  }
  aboutToAppear(): void {
    this.getYears()
  }

  build() {
    Column()
    {
      HdNav({ title: '过往会议', showRightIcon: false, showLeftIcon: true,showRightText:true,rightIcon:$r('app.media.selected_hospital_ws'),rightItemAction:()=>{

      }})
      Row() {
        Row() {
          if(this.timePosition!=-1)
          {
            Text(this.timeText).customStyle().fontColor($r('app.color.top_title'))
            Image(this.selectImg).width(13).margin({left:5})
          }
          else {
            Text(this.timeText).customStyle()
            Image(this.notselectImg).width(13).margin({left:5})
          }

        }
        .layoutWeight(1)
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          this.tlistStatus=!this.tlistStatus
        })

        Text('|').customStyle()

        Row() {
          if(this.typePosition!=-1)
          {
            Text(this.monthText).customStyle().fontColor($r('app.color.top_title'))
            Image(this.selectImg).width(13).margin({left:5})
          }
          else {
            Text(this.monthText).customStyle()
            Image(this.notselectImg).width(13).margin({left:5})
          }
        }
        .layoutWeight(1)
        .justifyContent(FlexAlign.Center)
        .onClick(()=>{
          this.getSelectMonth()
        })

      }.width('100%').height(45)
      Text().Line()
      Stack({ }) {
        ListCompPast({year:this.timeText,month:this.type}).padding({bottom:20}).backgroundColor($r('app.color.e4e4e4'))
        if(this.tlistStatus)
        {
          List() {
            ForEach(this.yearWords, (item: string,index:number) => {
              ListItem() {
                Column() {

                  if(this.timePosition==index)
                  {
                    Row()
                    {
                      Text(item).customStyle().height(40).fontColor($r('app.color.top_title'))
                      Blank()
                      Image($r('app.media.chose_card')).width(22).margin({right:25})

                    }
                    .width('100%')
                    .alignSelf(ItemAlign.Start)
                    Text().Line().backgroundColor($r('app.color.top_title'))
                  }
                  else
                  {
                    Text(item).customStyle().height(40).alignSelf(ItemAlign.Start)
                    Text().Line()
                  }

                }.padding({left:22})
                .width('100%')
                .justifyContent(FlexAlign.Start)
                .onClick(()=>{
                  this.timePosition=index
                  this.tlistStatus=false
                  this.timeText=item
                  this.monthText='会议月份';
                  this.type=''
                  this.typePosition=-1;
                })
              }
            }, (item: string) => JSON.stringify(item))
          } .width('100%')
          .zIndex(2)
          .height('100%').backgroundColor(Color.White)
        }
        if(this.typelistStatus)
        {
          List() {
            ForEach(this.monthWords, (item: string,index:number) => {
              ListItem() {
                Column() {

                  if(this.typePosition==index)
                  {
                    Row()
                    {
                      Text(item).customStyle().height(40).fontColor($r('app.color.top_title'))
                      Blank()
                      Image($r('app.media.chose_card')).width(22).margin({right:25})

                    }
                    .width('100%')
                    .alignSelf(ItemAlign.Start)
                    Text().Line().backgroundColor($r('app.color.top_title'))
                  }
                  else
                  {
                    Text(item).customStyle().height(40).alignSelf(ItemAlign.Start)
                    Text().Line()
                  }

                }.padding({left:22})
                .width('100%')
                .justifyContent(FlexAlign.Start)
                .onClick(()=>{
                  this.typePosition=index
                  this.typelistStatus=false
                  this.monthText=item
                  this.type=index+1+''

                })
              }
            }, (item: string) => JSON.stringify(item))
          } .width('100%')

          .zIndex(3)
          .height('100%').backgroundColor(Color.White)
        }
      }

    }
    .width('100%')
    .height('100%')
    .padding({bottom:50})
  }

  getYears()
  {


    let year:number= new Date().getFullYear();
    for(let i =year;i>=2016;i--){
      this.yearWords.push(i+"");
    }

  }

  getSelectMonth()
  {
    if(this.timeText=='会议年份')
    {
      promptAction.showToast({message:'请先选择年份'})
    }
    else
    {
      this.typelistStatus=!this.typelistStatus
      if(this.typelistStatus==true)
      {
        this.monthWords=[]
        if(this.timePosition==0)
        {
          let nowmonth:number= new Date().getMonth();
          for (let i = 1; i<=nowmonth+1; i++) {
            this.monthWords.push(i+"月");
        }
        }
        else
        {
          for (let i = 1; i <=12; i++) {
            this.monthWords.push(i+"月");
        }
        }
      }
    }
  }


}
@Extend(Text)
function customStyle() {

  .fontColor($r('app.color.tab_text_nor'))
  .fontSize(13)

}
@Extend(Text)
function Line() {

  .height(0.5).width('100%').backgroundColor($r('app.color.devider_line'))
}