import { BaseDataSource } from '../MainAbility/model/BaseDataSource'
import { Information } from '../MainAbility/model/Information'
import { MatchInfo, MatchState } from '../MainAbility/common/FlagData'
import { MatchDataResource } from '../MainAbility/model/MatchDataResource'
import { BannerDataResource } from '../MainAbility/model/BannerDataResource'
const TAG: string = 'ScrollList'
// 0代表滾動(dòng)到List頂部，1代表中間值，2代表滾動(dòng)到List底部
const SCROLL_LIST_POSITION = {
  START: 0,
  CENTER: 1,
  END: 2
}
const LIST_START = {
  TOP: 0,
  BUTTON: 1
}
class MatchDataSource extends BaseDataSource<Information> {
  constructor(infos: Information[]) {
    super(infos)
  }
}
class BannerDataSource extends BaseDataSource<BannerDataResource> {
  constructor(infos: BannerDataResource[]) {
    super(infos)
  }
}
function mock(): Information[] {
  var infos = []
  for (var i = 0; i < 10; i++) {
    var item = new Information()
    item.id = i
    item.state = Math.floor(Math.random() * 2) // 獲取0~2的隨機(jī)整數(shù)
    var homeIndex: number = Math.floor(Math.random() * 12) // 獲取0~12的隨機(jī)整數(shù)
    item.homeName = MatchInfo[homeIndex].name
    item.homeFlag = MatchInfo[homeIndex].resource
    var awayFieldIndex: number = Math.floor(Math.random() * 12) // 獲取0~12的隨機(jī)整數(shù)
    if (awayFieldIndex === homeIndex) {
      awayFieldIndex = Math.floor(Math.random() * 12) // 獲取0~12的隨機(jī)整數(shù)
    }
    item.awayFieldName = MatchInfo[awayFieldIndex].name
    item.awayFieldFlag = MatchInfo[awayFieldIndex].resource
    if (item.state != MatchState.NOTSTART) {
      item.homeScore = Math.floor(Math.random() * 6)
      item.awayFiledScore = Math.floor(Math.random() * 6)
    }
    var data: number = Math.floor(Math.random() * 20) // 獲取0~20的隨機(jī)整數(shù)
    var time: number = Math.floor(Math.random() * 24) // 獲取0~24的隨機(jī)整數(shù)
    item.gameTime = '12 - ' + data + ' ' + time + ' : 00'
    infos[i] = item
  }
  return infos
}
function mockBanner(): BannerDataResource[] {
  var banners = [{
                   id: 1,
                   resource: $r('app.media.banner_01')
                 },
                 {
                   id: 2,
                   resource: $r('app.media.banner_02')
                 },
                 {
                   id: 3,
                   resource: $r('app.media.banner_03')
                 },
                 {
                   id: 4,
                   resource: $r('app.media.banner_04')
                 },
                 {
                   id: 5,
                   resource: $r('app.media.banner_05')
                 }
  ]
  return banners
}
@Entry
@Component
struct Index {
  private listPosition: number = SCROLL_LIST_POSITION.START
  @State private listState: number = LIST_START.TOP
  private scrollerForScroll: Scroller = new Scroller() // 可滾動(dòng)容器組件的控制器
  private scrollerForList: Scroller = new Scroller()
  // mock數(shù)據(jù)
  private matchData: Information[] = mock()
  private matchDataSource: MatchDataSource = new MatchDataSource(this.matchData)
  // banner
  private bannerData: BannerDataResource[] = mockBanner()
  private bannerDataSource: BannerDataSource = new BannerDataSource(this.bannerData)
  private swiperController: SwiperController = new SwiperController()
  @State private isShowFlashscreen: boolean = true
  private timeOutID: number
  aboutToAppear() {
    this.startTimeout()
  }
  aboutToDisappear() {
    this.stopTimeout()
  }
  build() {
    Stack() {
      if (this.isShowFlashscreen) {
        Image($r('app.media.flashscreen'))
          .width('100%')
          .height('100%')
          .objectFit(ImageFit.Cover)
      } else {
        Scroll(this.scrollerForScroll) {
          Column() {
            Swiper(this.swiperController) {
              LazyForEach(this.bannerDataSource, (item: BannerDataResource) => {
                Image(item.resource)
                  .width('33.3%')
                  .height('100%')
                  .objectFit(ImageFit.Cover)
              }, item => item.id.toString())
            }
            .width('100%')
            .height('35%')
            .cachedCount(3)
            .index(0)
            .autoPlay(true)
            .loop(true)
            .displayMode(SwiperDisplayMode.AutoLinear)
            .indicator(false)
            .indicatorStyle({
              selectedColor: $r('app.color.red_bg')
            })
            Divider().strokeWidth(3).color($r('app.color.red_bg'))
            Column() {
              List({
                space: 10,
                scroller: this.scrollerForList
              }) {
                LazyForEach(this.matchDataSource, (item: Information) => {
                  ListItem() {
                    Row() {
                      Column({ space: 10 }) {
                        Image(item.homeFlag)
                          .width(60)
                          .height(45)
                          .objectFit(ImageFit.Contain)
                        Text(item.homeName)
                          .width('100%')
                          .fontSize(16)
                          .textAlign(TextAlign.Center)
                      }
                      .width('30%')
                      Column({ space: 10 }) {
                        Text(this.getMatchState(item.state))
                          .width('100%')
                          .fontSize(12)
                          .fontColor($r('app.color.event_text'))
                          .textAlign(TextAlign.Center)
                        Text(this.getMatchSource(item))
                          .width('100%')
                          .fontSize(18)
                          .textAlign(TextAlign.Center)
                        Text(item.gameType)
                          .width('100%')
                          .fontSize(12)
                          .fontColor($r('app.color.event_text'))
                          .textAlign(TextAlign.Center)
                      }
                      .width('30%')
                      Column({ space: 10 }) {
                        Image(item.awayFieldFlag)
                          .width(60)
                          .height(45)
                          .objectFit(ImageFit.Contain)
                        Text(item.awayFieldName)
                          .width('100%')
                          .fontSize(16)
                          .textAlign(TextAlign.Center)
                      }
                      .width('30%')
                    }
                    .width('100%')
                    .height('100%')
                    .justifyContent(FlexAlign.SpaceBetween)
                    .border({
                      radius: 15
                    })
                    .backgroundColor($r('app.color.white'))
                  }
                  .width('100%')
                  .height(95)
                }, item => item.id.toString())
              }
              .width('90%')
              .height('100%')
              .edgeEffect(EdgeEffect.Spring) // 滑動(dòng)效果
              .onReachStart(() => {
                // 滑動(dòng)開始
                this.listPosition = SCROLL_LIST_POSITION.START
              })
              .onReachEnd(() => {
                // 滑動(dòng)結(jié)束
                this.listPosition = SCROLL_LIST_POSITION.END
              })
              .onScrollBegin((dx: number, dy: number) => {
                console.info(TAG, `listPosition=${this.listPosition} dx=${dx} ,dy=${dy}`)
                if (this.listPosition == SCROLL_LIST_POSITION.START && dy >= 0) {
                  // 列表頂部
                  // this.scrollerForScroll.scrollBy(0, -dy)
                  this.scrollerForScroll.scrollEdge(Edge.Start)
                  this.listState = LIST_START.TOP
                } else if (this.listPosition == SCROLL_LIST_POSITION.END && dy <= 0) {
                  // 列表底部
                  // this.scrollerForScroll.scrollBy(0, -dy)
                  this.scrollerForScroll.scrollEdge(Edge.Bottom)
                  this.listState = LIST_START.BUTTON
                }
                this.listPosition = SCROLL_LIST_POSITION.CENTER
                return {
                  dxRemain: dx,
                  dyRemain: dy
                }
              })
            }
            .width('100%')
            .height('60%')
            .padding({
              top: 20,
              bottom: 20
            })
            .borderRadius({
              bottomLeft: 15,
              bottomRight: 15
            })
            .backgroundColor($r('app.color.content_bg'))
            Column() {
              if (this.listState === LIST_START.TOP) {
                Text('繼續(xù)上滑 積分排名')
                  .width('100%')
                  .height('5%')
                  .fontColor($r('app.color.white'))
                  .fontSize(14)
                  .textAlign(TextAlign.Center)
              } else {
                Text('回到首頁')
                  .width('100%')
                  .height('5%')
                  .fontColor($r('app.color.white'))
                  .fontSize(14)
                  .textAlign(TextAlign.Center)
                  .onClick(() => {
                    this.scrollerForScroll.scrollEdge(Edge.Start)
                    this.scrollerForList.scrollToIndex(0)
                    this.listState = LIST_START.TOP
                  })
              }
              Stack() {
                Image($r('app.media.result_1'))
                  .width('100%')
                  .height('100%')
                  .objectFit(ImageFit.Cover)
                Column() {
                }.width('100%')
                .height('100%')
                .backgroundColor('#55000000')
                Image($r('app.media.football_poster'))
                  .width('100%')
                  .height('100%')
                  .objectFit(ImageFit.Contain)
                  .opacity(0.70)
                  .borderRadius({
                    topLeft: 15,
                    topRight: 15
                  })
              }.width('100%')
              .height('95%')
            }
            .width('100%')
            .height('100%')
          }
        }
        .width('100%')
        .height('100%')
        .onScrollBegin((dx: number, dy: number) => {
          return {
            dxRemain: dx,
            dyRemain: 0
          }
        })
      }
    }.width('100%')
    .height('100%')
    .backgroundColor($r('app.color.main_bg'))
  }
  getMatchState(state: number): string {
    var stateVal: string
    switch (state) {
      case MatchState.PROGRESS: {
        stateVal = '進(jìn)行中'
        break;
      }
      case MatchState.NOTSTART: {
        stateVal = '未開賽'
        break;
      }
      case MatchState.CLOSED: {
        stateVal = '已結(jié)束'
        break;
      }
      default:
        stateVal = ''
    }
    return stateVal;
  }
  getMatchSource(data: Information): string {
    if (data.state === MatchState.NOTSTART) {
      return '- : -'
    } else {
      return data.homeScore + ' : ' + data.awayFiledScore
    }
  }
  startTimeout() {
    this.timeOutID = setTimeout(() => {
      this.isShowFlashscreen = false
    }, 3000)
  }
  stopTimeout() {
    clearTimeout(this.timeOutID)
  }
}