import TopLogo from './compontents/TopLogo';
import MA_SYSTEMPARM from '../common/constants/MA_SYSTEMPARM';
import AccountTable from '../common/database/tables/AccountTable';
import { getSyncData } from '../common/service/initable';

const cBg = $rawfile('judge/km3/road/luxian_pre.png');
const lBg = $rawfile('judge/km3/road/luxian_nor.png');
const ctBg = $rawfile('judge/km3/road/luxian_pre.png');
const ltBg = $rawfile('judge/km3/road/luxian_nor.png');

//单机模式才选线路
@Entry
@Component
export default struct Index {
  @State @Watch('outClick') outFlag: boolean = false;
  @State roadObj: any = {}

  async aboutToAppear() {
    //读取systemparam表的no1等于4的
    const db = new AccountTable(() => {
    }, MA_SYSTEMPARM);
    const systemParms: any = await getSyncData('MA_SYSTEMPARM')
    systemParms.forEach((systemParm) => {

      //TODO 字段名称待修改
      const {no1,no2,no3,txt1,txt2} = systemParm;
      if (no1 == 4) {
        const temp = { no2, no3, txt1: decodeURI(txt1), txt2 }
        if (this.roadObj[no2]) {
          this.roadObj[no2].push(temp)
        } else {
          this.roadObj[no2] = temp
        }
      }
    })
  }

  build() {
    Column() {
      TopLogo({ outFlag: $outFlag })
      List({}) {
        ForEach(Reflect.ownKeys(this.roadObj), (roadIndex, index) => {
          ListItem() {
            Column() {
              Row() {
              }
              .backgroundImage(lBg, ImageRepeat.NoRepeat)
              .backgroundImageSize({ width: '100%', height: '100%' })
              .width(90)
              .height(80)

              Text(`线路${index + 1 + ''}`) {
              }.fontColor('#FFF2D9').fontSize(24).padding({ top: 10 })
            }
          }
          .backgroundImage(cBg, ImageRepeat.NoRepeat)
          .backgroundImageSize({ width: '100%', height: '100%' })
          .width(180)
          .height(220)
          .margin({ left: 5, bottom: 10 })
          .onClick(async () => {
            console.info(this.roadObj[roadIndex])
          })
        })
      }.lanes(5).margin({ top: 50, left: 15 })

    }.width('100%')
    .height('100%')
    .backgroundColor('#1A1A1A')

  }

  outClick() {
  }
}