/**
 * BannerComponent
 * 轮播图卡/单图
 * 邢照杰
 */

import { CommonConstants } from 'wdConstant';
import colorSpaceManager from '@ohos.graphics.colorSpaceManager';
import { CompDTO } from '../../repository/bean/CompDTO';
import { CompUtils } from '../../utils/CompUtils';
import { ContentDTO } from '../../repository/bean/ContentDTO';


const TAG = 'BannerComponent';
let timerIds: number[] = [];


/**
 * 轮播卡(暂时仅展示主标题，不展示子标题)
 * comp类型
 * 重磅推荐/精选/电视剧/电影/综艺/短剧/更多>/
 */
@Entry
@Component
export struct BannerComponent {
  @State compDTO: CompDTO = {} as CompDTO
  @State index: number = 0;
  private bannerContent:ContentDTO;
  private swiperController: SwiperController = new SwiperController();

  aboutToAppear() {

    // Data Initialization.
    this.bannerContent = this.compDTO.operDataList[0];
    // Turn on scheduled task.
    if (this.compDTO.operDataList.length > 1) {
      startPlay(this.swiperController);
    }
  }

  aboutToDisappear() {
    stopPlay();
  }

  build() {
    // 整体父视图
    Column() {
      // 判断数组元素个数
      if (this.compDTO.operDataList.length > 1) {
        // 滚动banner
        Swiper(this.swiperController) {
          ForEach(this.compDTO.operDataList, item => {
            Stack() {
              // 背景图
              Image(item.coverUrl)
                .objectFit(ImageFit.Fill)
                .borderRadius(5)
                .onClick(()=>{
                  AlertDialog.show({
                    title: '🥟id : ' + item.objectId,
                    message: '标题：' + item.newsTitle,
                    confirm: {
                      value: "OK",
                      action: () => {

                      },
                    }
                  })
                })
              // 底部标题和时间
              Column() {
                Text(item.newsTitle)
                  .fontSize(18)
                  .margin({ bottom: 4 })
                  .fontColor(Color.White)
                  .fontWeight(600)
                  .maxLines(1)
                  .textOverflow({ overflow: TextOverflow.Ellipsis })
                  .padding({ left: 10, right: 5 })
                  .width('100%')
                  .textAlign(TextAlign.Start)
                if (item.lengthTime) {
                  Row() {
                    Image($r('app.media.videoTypeIcon'))
                      .height(20)
                      .width(20)
                    // .margin({right:3})
                    Text(item.lengthTime)
                      .padding({ left: 5, right: 5 })
                      .fontColor(Color.White)
                  }
                  .backgroundColor('#333333')
                  .height(20)
                  .margin({ right: 5, bottom: 3 })
                  .alignSelf(ItemAlign.End)
                  .borderRadius(2)
                }
              }
              .height('50')
              .width('100%')
            }
            .alignContent(Alignment.BottomStart)
          }, item => JSON.stringify(item))
        }
        .width('100%')
        .height('100%')
        .index(this.index)
        .indicatorStyle({
          selectedColor: Color.White,
          color: Color.Gray,
          size: 18,
          left: 15
        })
        .indicator(true)
        .duration(500)
      } else  {
        // 不滚动banner
        Stack() {
          // 背景图
          Image(this.bannerContent.coverUrl.toString())
            .objectFit(ImageFit.Fill)
            .borderRadius(5)

          // 底部标题和时间
          Row() {
            // 标题
            Text(this.bannerContent.newsTitle.toString())
              .fontSize(18)
              .fontColor(Color.White)
              .fontWeight(600)
              .maxLines(2)
              .textOverflow({ overflow: TextOverflow.Ellipsis })
              .padding({ left: 10, right: 0 ,bottom: 5 })
              .width('80%')
            // 时间
            if (this.bannerContent.lengthTime) {
              Row() {
                Image($r('app.media.videoTypeIcon'))
                  .height(20)
                  .width(20)
                // .margin({right:3})
                Text(this.bannerContent.lengthTime.toString())
                  .padding({ left: 5, right: 5 })
                  .fontColor(Color.White)
              }
              .backgroundColor('#333333')
              .height(20)
              .borderRadius(2)
              .margin({ bottom: 6 })
            }
          }
          .width('100%')
          .height('100%')
          .alignItems(VerticalAlign.Bottom)
        }
        .alignContent(Alignment.BottomStart)
        .width('100%')
        .height('100%')
      }
    }
    .width('100%')
    .aspectRatio(1.7)
    .padding({left:10,right:15,top:10,bottom:10})
  }
}

/**
 * start scheduled task.
 *
 * @param swiperController Controller.
 */
export function startPlay(swiperController: SwiperController) {
  let timerId = setInterval(() => {
    swiperController.showNext();
  }, 3000);
  timerIds.push(timerId);
}

/**
 * stop scheduled task.
 */
export function stopPlay() {
  timerIds.forEach((item) => {
    clearTimeout(item);
  })
}