import { videoModel } from '../model/HomeModel'
import { router } from '@kit.ArkUI';
import { BasicConstant } from '@itcast/basic'
import { videoTools } from '../polyv/VideoUtil'
import { getDisplayWindowWidth } from 'media-player-common'

@Component
export struct HomeReplayVideoComp {
  @Prop videoList: videoModel[];
  @State newVideosList: videoModel[] = this.videoList.slice(0, 4);

  build() {
    Column() {
      Row(){
        Text('精彩回放')
          .fontSize(17)
          .fontWeight(FontWeight.Bold)
          .margin({left:15})
        Blank()
          .layoutWeight(1)
        Row(){
          Text('更多 ')
            .fontSize(15)
            .fontColor('#999999')
          Image($r('app.media.course_invoice_to_details'))
            .width(15).height(15)
        }.margin({right:15})
        .onClick(()=>{
          router.pushUrl({
            url:'pages/VideoPage/VideoGandanPage',
          })
        })
      }.height(50)
      Grid(){
        ForEach(this.newVideosList,(item:videoModel,index:number)=>{
          GridItem(){
            Column() {
              Image(item.imgpath).alt($r('app.media.default_video')).width('100%').height(102)
                .objectFit(ImageFit.Fill)
              Text(item.name).maxLines(2).fontSize(15).fontColor('app.color.666666').textAlign(TextAlign.Start)
                .textOverflow({ overflow: TextOverflow.Ellipsis }).width('100%').height(56).padding({left:10,top:10,right:10,bottom:10})
            }.backgroundColor(Color.White)
            .borderRadius(5)
            .height('auto')
            .clip(true)
            .width('calc((100% - 45vp)/2)')
            .margin({left:15,bottom:15})
            .onClick(()=>{
              videoTools.getVideoDetail(item.uuid)
            })
          }
        })
      }.width('100%')
    }.width('100%')
  }
}