import Footer from '../components/Footer'
import Header from '../components/Header'

interface ProjectItem {
  name: string
  value?: string
  picture?: string
}

interface Project {
  name: string
  items: Array<ProjectItem>
}

const Projects: Array<Project> = [
  {
    name: "左前45°查验项目",
    items: [{ name: "车身颜色" }, { name: "车辆外观" }, { name: "号牌板" }, { name: "车辆品牌" }]
  },
  {
    name: "右后45°查验项目",
    items: [{ name: "车身颜色" }, { name: "车辆外观" }, { name: "车辆品牌" }, { name: "反光背心" }, { name: "三脚架" }]
  },
  {
    name: "轮胎规格查验项目",
    items: [{ name: "轮胎规格" }, { name: "轮胎规格" }, { name: "轮胎规格" }, { name: "轮胎规格" }]
  },
  {
    name: "车辆喷涂查验项目",
    items: [{ name: "总质量" }, { name: "栏板高度" }, { name: "核定载人数" }]
  },
  {
    name: "车辆铭牌查验项目",
    items: [{ name: "品牌" }, { name: "栏板高度" }, { name: "生产日期" }, { name: "车辆识别代号" }, {
      name: "生产厂家"
    }]
  },
  {
    name: "车辆铭牌查验项目",
    items: [{ name: "车辆识别代号" }]
  },
  {
    name: "发动机号查验项目",
    items: [{ name: "发动机号" }]
  },
]


@Entry
@Component
struct ProjectCheck {
  @State projects: Array<Project> = Projects
  @State current: number = 0

  aboutToAppear(): void {

  }

  build() {
    Column() {
      Header()
      Row() {
        Image($rawfile('img/check/background.png')).layoutWeight(1).margin({ right: 32 }).height("100%")
        Column() {
          Text(this.projects[this.current].name).fontSize(36).fontColor(0x161B21).fontWeight(700).margin({ bottom: 64 })
          Text("识别结果").fontSize(24).fontColor(0x161B21).fontWeight(700).margin({ bottom: 30 })
          ForEach(this.projects[this.current].items, (item: ProjectItem) => {
            RowSplit() {
              Text(item.name).width("16%").fontWeight(700).fontSize(18).fontColor(0x161B21)
              Text(item.value).layoutWeight(1).fontSize(18).fontColor(0x102A9A).padding({ left: 20 })
            }.resizeable(false).borderColor(0xAEC4E8).margin({ bottom: 12 })
          })
        }.width("33%").height("100%").alignItems(HorizontalAlign.Start).justifyContent(FlexAlign.Start)
      }.layoutWeight(1).width("100%").padding({ left: 32, top: 40, right: 32, bottom: 40 }).backgroundColor(0xd7ebfd)

      Footer()
    }.width('100%').height('100%')
  }
}