import { HdNav,BasicConstant } 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 proivcePosition:number=-1;
  @State tlistStatus:boolean=false;
  @State timeText:string='会议时间';
  @State plistStatus:boolean=false;
  @State PriText:string='会议地点';
  @State location: string=''
  @State month:string=''

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

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

  }

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

          Text('|').customStyle()

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

          Row() {
            Text('会议回放').customStyle()

          }
          .layoutWeight(1)
          .justifyContent(FlexAlign.Center)
          .onClick(() => {
            router.pushUrl({url:'pages/VideoPage/PlayBackPage'})
          })

        }.width('100%').height(45)
        Text().Line()
        Stack({ }) {
          ListComp({location:this.location,month:this.month}).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
                    if(this.timePosition==0)
                    {
                      this.month=''
                    }
                    else
                    {
                      this.month=index-1+''
                    }
                  })
                }
              }, (item: string) => JSON.stringify(item))
            } .width('100%')
            .height('100%').backgroundColor(Color.White)
          }
          if(this.plistStatus)
          {
            Column()
            {
              Grid() {
                ForEach(BasicConstant.province, (item: string, index: number) => {
                  GridItem() {
                    Text(item.length>3?item.substring(0,3)+"...":item)
                      .height(40)
                      .width('100%')
                      .maxLines(1)
                      .padding({left:5,right:5})
                      .fontWeight(FontWeight.Regular)
                      .fontSize(13)
                      .fontColor($r('app.color.848284'))
                      .textAlign(TextAlign.Center)
                      .border({ width: 1, color:'#999999' })
                      .borderRadius(5)
                      .onClick(() => {
                        this.PriText=item.length>3?item.substring(0,3)+"...":item
                        this.proivcePosition=index
                        this.plistStatus=false
                        if(this.proivcePosition==0)
                        {
                          this.location=''
                        }
                        else
                        {
                          this.location=item.substring(0,2)
                        }
                      })
                  }
                })
              }
              .padding(10)
              .columnsTemplate('1fr 1fr 1fr 1fr')
              .columnsGap(10)
              .rowsGap(10)
              .backgroundColor(Color.White)
              .height('calc(100% - 175vp)')
              .width('100%')
              .layoutWeight(1)
            }
            .height('100%')

          }
        }

      }
      .width('100%')
      .height('100%')


      Image($r('app.media.past_metting')).width(76).height(40)
        .alignRules({
          right: { anchor: "__container__", align: HorizontalAlign.End },
          bottom:{ anchor: "__container__", align:VerticalAlign.Bottom}
        })
        .margin({bottom:40})
        .onClick(() => {
          router.pushUrl({url:'pages/VideoPage/PastVideoPage'})
          // router.pushUrl({url:'pages/VideoPage/VideoGandanPage'})
        })
    }

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


