import { HdNav } from '@itcast/basic'

import { ListComp } from '../components/ListComp'
import { router } from '@kit.ArkUI'
@Entry
@Component
export struct VideoPage {

  @State notselectImg: ResourceStr = $r('app.media.triangle_normal');
  @State selectImg: ResourceStr = $r('app.media.triangle_green_theme');
  @State monthWords:Array<string> =[]
  @State timePosition:number=-1;
  @State tlistStatus:boolean=false;
  @State timeText:string='会议时间';


  onPageShow(): void {
    console.log('VideoPage onPageShow!');
  }

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

  }

  build() {
    Column()
    {
      HdNav({ title: '肝胆会议', showRightIcon: false, showLeftIcon: true,showRightText:true,rightText:'扫一扫' })
      Row() {
        Blank()
          .onClick(()=>{
            this.tlistStatus=!this.tlistStatus
          })
        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})
          }

        }
        .onClick(()=>{
          this.tlistStatus=!this.tlistStatus
        })
        Blank()
          .onClick(()=>{
            this.tlistStatus=!this.tlistStatus
          })
        Text('|').customStyle()
        Blank()
        Row() {
          Text('会议地点').customStyle()
          Image(this.notselectImg).width(13).margin({left:5})
        }
        Blank()
        Text('|').customStyle()
        Blank()
          .onClick(() => {
            router.pushUrl({url:'pages/VideoPage/PlayBackPage'})
          })
        Row() {
          Text('会议回放').customStyle()

        }
        .onClick(() => {
          router.pushUrl({url:'pages/VideoPage/PlayBackPage'})
        })
        Blank()
          .onClick(() => {
            router.pushUrl({url:'pages/VideoPage/PlayBackPage'})
          })
      }.width('100%').height(45)
      Text().Line()
      Stack({ }) {
        ListComp().padding({bottom:20}).backgroundColor($r('app.color.e4e4e4'))
        if(this.tlistStatus)
        {
          List() {
            ForEach(this.monthWords, (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)
        }

      }

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

  getNowMonth()
  {

    this.monthWords.push("所有");
    let month:number= new Date().getMonth()+1;
    for(let i =month;i<13;i++){
      this.monthWords.push(i+"月");
    }
    for(let i =1;i<month;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'))
}