import { HdNav } from '@itcast/basic'
import { ListCompBack } from '../components/ListCompBack'

@Entry
@Component
export struct PlayBack {

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

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

  }

  build() {
    Column()
    {
      HdNav({ title: '肝胆回放', showRightIcon: false, showLeftIcon: true})
      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.typelistStatus=false
          this.tlistStatus=!this.tlistStatus
        })

        Text('|').customStyle()

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

      }.width('100%').height(45)
      Text().Line()
      Stack({ }) {
        ListCompBack({year:this.timeText,type: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
                })
              }
            }, (item: string) => JSON.stringify(item))
          } .width('100%')
          .height('100%').backgroundColor(Color.White)
        }
        if(this.typelistStatus)
        {
          List() {
            ForEach(this.typeWords, (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.typeText=item
                  if(index==4)
                  {
                    this.type='0'
                  }
                  else
                  {
                    this.type=index+1+''
                  }
                })
              }
            }, (item: string) => JSON.stringify(item))
          } .width('100%')
          .height('100%').backgroundColor(Color.White)
        }
      }
      .layoutWeight(1)
    }
    .width('100%')
    .height('100%')

  }

  getSelect()
  {


    let year:number= new Date().getFullYear();
    for(let i =year;i>=2016;i--){
      this.yearWords.push(i+"");
    }
    this.typeWords.push('全国会议')
    this.typeWords.push('省级会议')
    this.typeWords.push('市级会议')
    this.typeWords.push('国际会议')
    this.typeWords.push('其他会议')
  }


}
@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'))
}