/*
 * 回放页录像列表表单
 * EZOpenSDK
 *
 * Created by junecheng on 2024/5/25.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import { EZTimeUtil } from '@ohos/EZOpenSDK'
import OhosDeviceInfoUtil from '../../../utils/OhosDeviceInfoUtil'
import { PreferenceUtil } from '../../../utils/PreferenceUtil'
import TimeUtil from '../../../utils/EZTimeUtil'
import CloudRecordFile from '../Model/CloudRecordFile'
import DeviceRecordFile from '../Model/DeviceRecordFile'

@Preview
@Component
export default struct PlaybackGridView {
  // 一行 录像个数
  private avgCount = 3
  // 录像视图宽度
  @State private mWidth: string = `420px`
  // 录像视图高度
  @State private mHeight: string = `236px`
  // 录像封面
  @State imageData: ResourceStr | PixelMap | null = ''
  // 录像开始时间
  @State startTime: string = '06:12'
  // 录像时长
  @State duration: string = "01'18''"
  // 录像是否选中
  @Prop isItemSelected: boolean = false
  // 云存储录像对象
  @ObjectLink
  cloudRecordFile: CloudRecordFile
  // SD卡录像对象
  @ObjectLink
  deviceRecordFile: DeviceRecordFile
  // 录像索引
  itemPosition: number = 0
  // 录像点击事件
  onPlaybackItemClick?: (position: number, recordFile: CloudRecordFile | DeviceRecordFile) => void

  aboutToAppear() {
    // 动态适配宽高，左右margin=10*2，Grid.columnsGap=10*2
    let parentWidth = OhosDeviceInfoUtil.getScreenWidth() - vp2px(40)
    if (parentWidth) {
      this.mWidth = `${parentWidth / this.avgCount}px`
      this.mHeight = `${parentWidth / this.avgCount / 16 * 9}px`
    }
    if (this.cloudRecordFile) {
      let password = ''
      // 判断是否加密
      if (this.cloudRecordFile.encryption) {
        // 注意该密码是一定要正确的，否则会得不到图片数据
        password = PreferenceUtil.getString(getContext(this), this.cloudRecordFile.deviceSerial) as string
      }

      // 设置云录像封面
      this.imageData = `${this.cloudRecordFile.coverPic}&x=200&decodekey=${password}`
      if (this.cloudRecordFile.startTime && this.cloudRecordFile.stopTime) {
        this.startTime = EZTimeUtil.dateFormat(this.cloudRecordFile.startTime, 'HH:mm')
        this.duration =
          TimeUtil.formatTimeDifference(this.cloudRecordFile.stopTime, this.cloudRecordFile.startTime).toString()
      }
    } else if (this.deviceRecordFile) {
      if (this.deviceRecordFile.startTime && this.deviceRecordFile.stopTime) {
        this.startTime = EZTimeUtil.dateFormat(this.deviceRecordFile.startTime, 'HH:mm')
        this.duration =
          TimeUtil.formatTimeDifference(this.deviceRecordFile.stopTime, this.deviceRecordFile.startTime).toString()
      }
    }
  }

  build() {
    Flex() {
      Stack({ alignContent: Alignment.Top }) {
        // 云存储录像使用拼接的url；SD卡录像使用对象中的pixelMap属性
        Image(this.cloudRecordFile ? this.imageData : this.deviceRecordFile?.pixelMap)
          .alt($r('app.media.message_callhelp'))
          .objectFit(ImageFit.Cover)
          .borderRadius(8)
          .borderWidth(2)
          .borderColor(this.isItemSelected ? $r('app.color.ez_text_blue') : Color.Transparent)
        // 录像开始时间 & 录像时长
        Row() {
          Text(this.startTime).fontSize(12).fontColor(Color.White).align(Alignment.Top)
          Text(this.duration).fontSize(12).fontColor(Color.White)
        }
        .justifyContent(FlexAlign.SpaceBetween)
        .alignItems(VerticalAlign.Top)
        .width('100%')
        .padding({ left: 8, right: 8, top: 8 })

        // 云存储录像支持下载进度，显示下载进度
        if (this.cloudRecordFile) {
          Text(`${this.cloudRecordFile.downloadPercent}%`).fontSize(12).fontColor(Color.White)
            .margin({ top: 30 })
            .visibility(this.cloudRecordFile.downloadPercent > 0 && this.cloudRecordFile.downloadPercent < 100 ?
            Visibility.Visible : Visibility.Hidden)
        }
      }
      .onClick(async () => {
        if (this.onPlaybackItemClick) {
          await this.onPlaybackItemClick(this.itemPosition,
            this.cloudRecordFile ? this.cloudRecordFile : this.deviceRecordFile)
        }
      })
    }.width(this.mWidth).height(this.mHeight).backgroundColor(Color.Transparent)

  }

}