import { router } from '@kit.ArkUI'
import { common } from '@kit.AbilityKit'
import { dateFormat } from '../../utils/Utils'
import { Footer } from './components/Footer'
import { Block } from './components/Block'
import { LineCard } from './components/LineCard'
import { WarnCard } from './components/WarnCard'
import { RingOptions, RingProgress } from '../ring/Index'
import { getInspectAlarmUsingPost, getPadIndexInfoUsingGet } from '../../api/padController'
import { getDeviceId } from '../../utils/System'

@Component
@Entry
struct Home {
  @State currentTime: string = ""
  @State line: API.InspectLineInfoVo[] = []
  @State warn: API.InspectAlarmItemVo[] = []
  @State select: number = -1
  @State statistics: RingOptions[] = [
    { color: 0xffcc31, count: 0 },
    { color: 0x33ff29, count: 0 },
    { color: 0xff3a48, count: 0 },
  ]
  @State warnRing: RingOptions[] = [
    {
      color: 0x034B61,
      count: 0,
      animate: false,
      full: true
    },
    { color: 0x06CDF5, count: 0 },
  ]
  @State total: number = 0
  private timeTick: number = -1
  private getDataTick: number = -1

  onPageShow(): void {
    this.currentTime = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
    this.timeTick = setInterval(() => {
      this.currentTime = dateFormat(new Date(), 'yyyy-MM-dd HH:mm:ss')
    }, 1000)
    this.getData()
    this.loopGetData()
  }

  onPageHide(): void {
    clearInterval(this.timeTick)
    clearInterval(this.getDataTick)
    this.timeTick = -1
    this.getDataTick = -1
  }

  loopGetData() {
    this.getDataTick = setInterval(() => {
      this.getData()
    }, 5000)
  }

  exit() {
    let context = getContext(this) as common.UIAbilityContext
    context.terminateSelf()
  }

  onBackPress(): boolean | void {
    return true
  }

  async getData() {
    let deviceId = await getDeviceId()
    let lineId = this.select === -1 ? undefined : this.line[this.select].lineId
    getPadIndexInfoUsingGet({
      imei: deviceId,
      lineId
    }).then((res) => {
      this.line = res.data?.list || []
      this.statistics[0].count = res.data?.indexCount?.unfinish || 0
      this.statistics[1].count = res.data?.indexCount?.finish || 0
      this.statistics[2].count = res.data?.indexCount?.fail || 0
      this.total = res.data?.indexCount?.total || 0
      this.statistics = JSON.parse(JSON.stringify(this.statistics))
    })

    getInspectAlarmUsingPost({ lineId }).then(res => {
      this.warn = res.data?.page?.rows || []
      this.warnRing[1].count = res.data?.dealNum || 0
    })
  }

  @Builder
  buildCenter() {
    Column() {
      Text("查验数量").fontSize(36).fontColor(0xffffff).fontFamily("Alimama").margin({ bottom: 6 })
      Text(this.total.toString()).fontSize(40).fontColor(0xffffff).fontFamily("Alimama")
    }
  }

  build() {
    Column() {
      Row() {
        Row() {
          Image($rawfile("images/text_logo.png")).height(36)
        }.width("20%").height("100%").justifyContent(FlexAlign.Center).padding({ top: 18 })

        Row() {
          Row() {
            Text("机动车智能查验机器人系统")
              .fontFamily("Alimama")
              .fontSize(32)
              .blendMode(BlendMode.DST_IN, BlendApplyType.OFFSCREEN)
              .textShadow({
                offsetX: 0.5,
                offsetY: 0,
                radius: 2,
                color: 0x00627E
              })
          }.linearGradient({ direction: GradientDirection.Top, colors: [[0xACECF7, 0.0], [0xFFFFFF, 1.0]] })
          .blendMode(BlendMode.SRC_OVER, BlendApplyType.OFFSCREEN)
        }
        .layoutWeight(1)

        .height("100%")
        .justifyContent(FlexAlign.Center)

        Column() {
          Column() {
            Text("当前时间").fontSize(16).fontColor(0xffffff).margin({ bottom: 4 })
            Text(this.currentTime).fontSize(16).fontColor(0xffffff)
          }.alignItems(HorizontalAlign.Start)
        }
        .width("20%")
        .height("100%")
        .justifyContent(FlexAlign.Center)
        .alignItems(HorizontalAlign.Center)
        .padding({ top: 18 })
      }
      .width("100%")
      .height(72)
      .justifyContent(FlexAlign.Center)
      .backgroundImage($rawfile("images/home/header.png"))
      .backgroundImageSize({ width: "100%", height: "100%" })

      Column() {
        Row() {
          Block({
            cusMargin: { right: 18 }, title: "所有区域", onTitleClick: () => {
              this.select = -1
              this.getData()
            }
          }) {
            List({ space: 12 }) {
              ForEach(this.line, (item: API.InspectLineInfoVo, index: number) => {
                ListItem() {
                  LineCard({
                    label: item.lineName?.toString(),
                    select: this.select === index,
                    data: item
                  })
                }.width("100%").constraintSize({ minHeight: 100 }).onClick(() => {
                  this.select = index
                  this.getData()
                })
              })
            }.width("100%").height("100%").scrollBar(BarState.Off)
          }

          Column() {
            RingProgress({
              option: this.statistics, style: { width: 290, height: 290 }, buildCenter: () => {
                this.buildCenter()
              }
            })
              .margin({ top: 45.5, left: 1.5 })

            Row() {
              Column() {
                Text("正在查验数量").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
                Text(this.statistics[0].count.toString()).fontSize(32).fontColor(0xFFCC31).fontWeight(700)
              }
              .layoutWeight(1.8)
              .justifyContent(FlexAlign.Center)
              .alignItems(HorizontalAlign.Center)
              .margin({ right: 20 })
              .backgroundImage($rawfile("images/home/label.png"))
              .backgroundImageSize({ width: "100%", height: "100%" })
              .height("100%")

              Column() {
                Text("完成数量").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
                Text(this.statistics[1].count.toString()).fontSize(32).fontColor(0x33FF29).fontWeight(700)
              }
              .layoutWeight(1.4)
              .justifyContent(FlexAlign.Center)
              .alignItems(HorizontalAlign.Center)
              .margin({ left: 10, right: 10 })
              .backgroundImage($rawfile("images/home/label.png"))
              .backgroundImageSize({ width: "100%", height: "100%" })
              .height("100%")

              Column() {
                Text("失败").fontSize(24).fontColor(0xffffff).fontWeight(700).margin({ bottom: 6 })
                Text(this.statistics[2].count.toString()).fontSize(32).fontColor(0xFF3A48).fontWeight(700)
              }
              .layoutWeight(1)
              .justifyContent(FlexAlign.Center)
              .alignItems(HorizontalAlign.Center)
              .margin({ left: 10 })
              .backgroundImage($rawfile("images/home/label.png"))
              .backgroundImageSize({ width: "100%", height: "100%" })
              .height("100%")
            }.width("100%").height(100)
          }
          .alignItems(HorizontalAlign.Center)
          .justifyContent(FlexAlign.SpaceBetween)
          .margin({ left: 18, right: 18 })
          .layoutWeight(1.5)
          .height("100%")
          .backgroundImage($rawfile("images/home/earth.png"))
          .backgroundImagePosition(Alignment.Top)
          .backgroundImageSize({
            width: "90%"
          })


          Block({ cusMargin: { left: 18 }, title: "预警信息" }) {
            Row() {
              Column() {
                Row() {
                  Image($rawfile("images/home/total_warn.png")).width(48).margin({ right: 6 })
                  Text(this.warnRing[0].count.toString()).fontSize(24).fontColor(0xFF3A48)
                }.margin({ bottom: 6 })

                Text("总预警异常事件个数").fontSize(14).fontColor(0xffffff)
              }.height("100%").layoutWeight(1).justifyContent(FlexAlign.SpaceAround).alignItems(HorizontalAlign.Center)


              Stack({ alignContent: Alignment.Center }) {
                RingProgress({
                  option: this.warnRing,
                  style: { height: 72, width: 72 },
                  strokeWidth: 10
                })
                Column() {
                  Text(this.warnRing[0].count === 0 ? "0%" :
                    (this.warnRing[1].count / this.warnRing[0].count * 100).toFixed(0) + "%")
                    .fontColor(0xffffff)
                    .fontSize(16)
                  Text("已处理").fontColor(0xffffff).fontSize(14)
                }
              }.layoutWeight(1).height("100%")
            }.margin({ bottom: 12 }).height(80)

            List({ space: 12 }) {
              ForEach(this.warn, (item: API.InspectAlarmItemVo, index: number) => {
                ListItem() {
                  WarnCard({
                    onDetail: () => {
                      router.pushUrl({
                        url: "pages/alarm/Detail",
                        params: {
                          data: item,
                          line: this.line[this.select]?.id,
                        }
                      })
                    }
                  })
                }.width("100%").height(100)
              })
            }.width("100%").layoutWeight(1).scrollBar(BarState.Off)
          }

        }.layoutWeight(1).width("100%")

        Footer()
      }.layoutWeight(1).width("100%").padding(24)
    }
    .width("100%")
    .height("100%")
    .backgroundImage($rawfile("images/home/background.png"))
    .backgroundImageSize({ width: "100%", height: "100%" })
  }
}