/*
 * 设备列表Cell
 * EZOpenSDK
 *
 * Created by junecheng on 2024/3/5.
 * Copyright (c) 2024年 Ezviz. All rights reserved.
 */
import { EZCameraInfo, EZDeviceInfo } from '@ohos/EZOpenSDK'

@Component
export default struct DeviceListCell {
  @Prop deviceInfo: EZDeviceInfo
  onPreviewClick?: (deviceInfo: EZDeviceInfo) => void
  onPlaybackClick?: (deviceInfo: EZDeviceInfo) => void
  onMessageClick?: (deviceInfo: EZDeviceInfo) => void
  onSettingClick?: (deviceInfo: EZDeviceInfo) => void

  build() {
    Column() {
      Row() {
        Stack() {
          RelativeContainer() {
            // 设备图片
            Image(this.deviceInfo?.deviceCover)
              .id('img_device')
              .alt($r('app.media.device_other'))
              .objectFit(ImageFit.Contain)
              .enabled(this.deviceInfo?.status == 1)
              .onClick(() => {
                if (this.onPreviewClick) {
                  this.onPreviewClick(this.deviceInfo!)
                }
              })
            // 设备不在线图标
            Image($r('app.media.offline'))
              .id('img_status')
              .width(28)
              .height(28)
              .alignRules({
                top: { 'anchor': 'img_device', align: VerticalAlign.Top },
                right: { 'anchor': 'img_device', align: HorizontalAlign.End }
              })
              .offset({ x: -5 })
              .visibility(this.deviceInfo?.status == 1 ? Visibility.Hidden : Visibility.Visible)
          }.margin({ top: 4, bottom: 4 })
        }.height(72).aspectRatio(16 / 9)

        Column({ space: 10 }) {
          // 设备名称
          Text(this.deviceInfo?.deviceName ? this.deviceInfo?.deviceName :
            `${this.deviceInfo?.category}(${this.deviceInfo?.deviceSerial})`).fontColor(Color.Black).fontSize(15)
          // 回放、消息、设置按钮
          Row({ space: 16 }) {
            Image($r('app.media.playback')).width(39).height(39)
              .onClick(() => {
                if (this.onPlaybackClick) {
                  this.onPlaybackClick(this.deviceInfo!)
                }
              })
            Image($r('app.media.message')).width(39).height(39)
              .visibility(this.isDisplay() ? Visibility.Visible : Visibility.Hidden)
              .onClick(() => {
                if (this.onMessageClick) {
                  this.onMessageClick(this.deviceInfo!)
                }
              })
            Image($r('app.media.setup')).width(39).height(39)
              .visibility(this.isDisplay() ? Visibility.Visible : Visibility.Hidden)
              .onClick(() => {
                if (this.onSettingClick) {
                  this.onSettingClick(this.deviceInfo!)
                }
              })
          }
        }
        .alignItems(HorizontalAlign.Start)
        .margin({ left: 6, right: 10 })
      }.height(80)
      .width('100%')
      .backgroundColor(Color.White)
      .justifyContent(FlexAlign.Start)

      Divider()
    }
  }

  /** 如果是分享设备，隐藏消息列表按钮和设置按钮 */
  isDisplay(): boolean {
    let cameraInfo: EZCameraInfo | null = null
    if (this.deviceInfo && this.deviceInfo.cameraInfo && this.deviceInfo.cameraInfo.length > 0) {
      cameraInfo = this.deviceInfo.cameraInfo[0]
    } else if (this.deviceInfo && this.deviceInfo.cameraInfo && this.deviceInfo.subDeviceInfo.length > 0) {
      cameraInfo = this.deviceInfo.subDeviceInfo[0]
    }
    return cameraInfo != null && (cameraInfo.isShared == 1 || cameraInfo.isShared == 0)
  }
}