CarCheckTerminal/entry/src/main/ets/pages/alarm/Detail.ets

import { CusButton } from '../components/button/Index'
import { Layout } from '../components/layout/Index'
import { Title } from '../components/title/Index'
import { router } from '@kit.ArkUI'
import { Option } from '../../typings/Common'
import VideoPlayer from '../components/player/Index'


@Extend(Text)
function label() {
  .fontFamily("Alimama")
  .fontSize(18)
  .fontColor(0xffffff)
  .padding({
    left: 16,
    top: 6,
    right: 30,
    bottom: 6
  })
  .letterSpacing(2)
  .backgroundImage($rawfile("images/alarm/label.png"))
  .backgroundImageSize({ width: "100%", height: "100%" })
}


@Builder
function buildRadio(config: RadioConfiguration) {
  Stack({ alignContent: Alignment.Center }) {
    Circle({ width: 18, height: 18 }).stroke(0x1666d4).strokeWidth(1).fill(0xffffffff)
    Circle({ width: 9, height: 9 }).fill(config.checked ? 0x1666d4 : 0xfffffffff)
  }.onClick(() => {
    config.triggerChange(!config.checked)
  })
}

class RadioModifier implements ContentModifier<RadioConfiguration> {
  applyContent(): WrappedBuilder<[RadioConfiguration]> {
    return wrapBuilder(buildRadio)
  }
}

@Component
@Entry
struct Detail {
  @State base: Option[] = [
    { label: "预警时间", value: "2025-09-13  10:48:11" },
    { label: "预警类型", value: "车辆异常" },
    { label: "阶段", value: "等待车辆进入" },
    { label: "步骤", value: "步骤1" },
    { label: "预警内容", value: "车主长时间为办理预录入或长时间逗留场地。" },
  ]
  @State mediaHeight: number = 0
  @State deal: string = "1"
  @State remark: string = ""
  @State isFullScreen: boolean = false
  @State url: string = ""

  submit() {

  }

  build() {
    Column() {
      Layout({ mode: 2 }) {
        Column() {
          Row() {
            Title({ title: "预警处理" })
          }.margin({ bottom: 18 })

          Row() {
            Column() {
              Row() {
                Text("预警详情").fontFamily("Alimama").fontColor(0xffffff).fontSize(24)
              }
              .backgroundImage($rawfile("images/control/header.png"))
              .backgroundImageSize({ width: "100%", height: "100%" })
              .width("100%")
              .height(48)
              .padding({ left: 48 })
              .margin({ bottom: 24 })

              Scroll() {
                Column() {
                  ForEach(this.base, (item: Option) => {
                    Column() {
                      Text(item.label).fontColor(0x103A86).fontSize(18).fontWeight(600).margin({ bottom: 10 })
                      Text(item.value)
                        .fontColor(0xD2D2D2)
                        .fontSize(18)
                        .padding({
                          left: 12,
                          top: 6,
                          right: 12,
                          bottom: 6
                        })
                        .backgroundColor(0xffffff)
                        .border({
                          width: 1,
                          color: 0xd2d2d2,
                          radius: 3
                        })
                        .width("100%")
                    }.width("100%").margin({ bottom: 20 }).alignItems(HorizontalAlign.Start)
                  })
                }.width("100%").padding({ left: 24, right: 24 })
              }.width("100%").layoutWeight(1)
            }
            .width("30%")
            .height("100%")
            .margin({ right: 24 })
            .backgroundColor(0xf4f4f5)
            .border({ width: 1, color: 0xf1f1f1 })
            .borderRadius(5)

            Column() {
              Row() {
                  Stack({ alignContent: Alignment.TopStart }) {
                    Image($rawfile("images/vehicle/default.png")).width("100%").height("100%").objectFit(ImageFit.Contain)
                    Text("现场图片").label()
                  }.margin({ right: 6 }).layoutWeight(1)


                Stack({ alignContent: Alignment.TopStart }) {
                  if (this.url) {
                    VideoPlayer({
                      isFullScreen: this.isFullScreen,
                      showPreview: true,
                      attribute: {
                        preview: $rawfile("images/vehicle/default.png"),
                        type: "network"
                      },
                      url: this.url
                    })
                  } else {
                    Image($rawfile("images/vehicle/default.png"))
                      .width("100%")
                      .height("100%")
                      .objectFit(ImageFit.Contain)
                  }

                  Text("现场视频").label()
                }.margin({ left: 6 }).layoutWeight(1)
              }.width("100%").height(this.mediaHeight).margin({ bottom: 24 })

              Column() {
                Row() {
                  Text("处理").fontSize(20).fontColor(0x103A86).margin({ right: 24 })
                  Row() {
                    Radio({ group: "deal", value: "1" })
                      .checked(this.deal === "1")
                      .contentModifier(new RadioModifier())
                      .onChange((checked) => {
                        if (checked && this.deal !== "1") {
                          this.deal = "1"
                        }
                      })
                    Text("已处理").fontSize(18).fontColor(0x989898).margin({ left: 12 }).onClick(() => {
                      this.deal = "1"
                    })
                  }.layoutWeight(1)

                  Row() {
                    Radio({ group: "deal", value: "2" })
                      .checked(this.deal === "2")
                      .contentModifier(new RadioModifier())
                      .onChange((checked) => {
                        if (checked && this.deal !== "2") {
                          this.deal = "2"
                        }
                      })
                    Text("不处理").fontSize(18).fontColor(0x989898).margin({ left: 12 }).onClick(() => {
                      this.deal = "2"
                    })
                  }.layoutWeight(1)
                }.width("100%").padding({ left: 40, right: 40 }).margin({ bottom: 24 })

                Row() {
                  Text("备注").fontSize(20).fontColor(0x103A86).margin({ right: 24 })
                  TextArea({ text: $$this.remark, placeholder: "请输入备注" })
                    .layoutWeight(1)
                    .padding({
                      left: 12,
                      top: 8,
                      right: 12,
                      bottom: 8
                    })
                    .fontSize(16)
                    .fontColor(0x000000)
                    .placeholderColor(0xE1E1E1)
                    .constraintSize({ minHeight: 100 })
                    .maxLines(5)
                    .border({
                      width: 1,
                      color: 0xd2d2d2,
                      radius: 2
                    })
                }.width("100%").padding({ left: 40, right: 40 }).margin({ bottom: 24 }).alignItems(VerticalAlign.Top)

                Blank()

                Row() {
                  CusButton({
                    normalImage: $rawfile("images/alarm/submit.png"),
                    activeImage: $rawfile("images/alarm/submit_active.png"),
                    style: { width: 280, height: 64 }
                  }).onClick(() => {
                    this.submit()
                  })
                  CusButton({
                    normalImage: $rawfile("images/filing/back.png"),
                    activeImage: $rawfile("images/filing/back_active.png"),
                    style: { width: 280, height: 64 }
                  }).onClick(() => {
                    router.back()
                  })
                }.width("100%").padding({ left: 20, right: 20 }).justifyContent(FlexAlign.SpaceBetween)

                Blank()

              }.width("100%").layoutWeight(1)
            }
            .onSizeChange((_, val) => {
              this.mediaHeight = (Number(val.width) - 12) / 2 / 16 * 9
            })
            .layoutWeight(1)
            .height("100%")
            .justifyContent(FlexAlign.Start)

          }.width("100%").layoutWeight(1).padding({ left: 12, right: 12 })

        }.width("100%").height("100%").padding(18)
      }
    }.width("100%").height("100%")
  }
}