import { CommonConstants } from 'wdConstant'
import { CompDTO, ContentDTO } from 'wdBean'
import { LiveVideoTypeComponent } from './LiveVideoTypeComponent'
import { LiveHorizontalCardForOneComponent } from './LiveHorizontalCardForOneComponent'
import { ProcessUtils } from '../../utils/ProcessUtils'

/**
 * 视频直播横划卡16:9
 */
@Component
export struct LiveHorizontalCardComponent {
  @State compDTO: CompDTO = {} as CompDTO
  build() {
    Column() {
      Row() {
        Row() {
          Image($r("app.media.redLine"))
            .width(3)
            .height(16)
            .margin({ right: 4 })
          Text(this.compDTO.objectTitle)
            .fontSize($r("app.float.font_size_17"))
            .fontColor($r("app.color.color_222222"))
            .fontWeight(600)
        }

        if (this.compDTO.operDataList.length > 10) {
          Row() {
            Text("更多")
              .fontSize($r("app.float.font_size_14"))
              .fontColor($r("app.color.color_999999"))
              .margin({ right: 1 })
            Image($r("app.media.more"))
              .width(14)
              .height(14)
          }
        }
      }.justifyContent(FlexAlign.SpaceBetween)
      .padding({ left: 16, right: 16 })
      .margin({ top: 8, bottom: 8 })
      .width(CommonConstants.FULL_WIDTH)
      // 多个
      if (this.compDTO.operDataList.length >= 2) {
        List({ space: 12 }) {

          ForEach(this.compDTO.operDataList, (item: ContentDTO, index: number) => {
            ListItem() {
              Column() {
                Stack({ alignContent: Alignment.BottomEnd }) {
                  Image(item.coverUrl)
                    .aspectRatio(16 / 9)
                    .width(this.compDTO.operDataList.length == 2 ? 210 : 150)
                    .borderRadius(4)
                    .objectFit(ImageFit.Cover)
                  if (item.objectType === '2' && item.liveInfo && item.liveInfo.liveState === 'running') {
                    LiveVideoTypeComponent({ nType: 0, name: '直播中' })
                      .padding({
                        bottom: 4,
                        right: 4
                      })
                  } else if (item.objectType === '1' && item.videoInfo) {
                    LiveVideoTypeComponent({ nType: 1, name: item.videoInfo.videoDuration + "" })
                      .padding({
                        bottom: 4,
                        right: 4
                      })
                  }
                }

                Text(item.newsTitle)
                  .fontSize($r("app.float.font_size_14"))
                  .fontColor($r("app.color.color_212228"))
                  .fontWeight(400)
                  .maxLines(2)
                  .textOverflow({ overflow: TextOverflow.Ellipsis }) // 超出的部分显示省略号。
                  .textAlign(TextAlign.Start)
                  .margin({ top: 8 })
                  .width(this.compDTO.operDataList.length == 2 ? 210 : 150)
              }
            }
            .padding({ left: (index == 0) ? 16 : 0, right: (index == this.compDTO.operDataList.length - 1) ? 16 : 0 })
            .onClick(() => {
              ProcessUtils.processPage(item)
            })
          }, (item: ContentDTO, index: number) => JSON.stringify(item))

        }.listDirection(Axis.Horizontal)
        .width(CommonConstants.FULL_WIDTH)
        .height(this.compDTO.operDataList.length == 2 ? 180 : 136)
      } else if (this.compDTO.operDataList.length) {
        // 一个
        LiveHorizontalCardForOneComponent({ contentDTO: this.compDTO.operDataList[0] })
      }
    }
    .width(CommonConstants.FULL_WIDTH)
    .padding({
      top: 14,
    })
    .backgroundColor($r("app.color.white"))
  }
}