import TopLogo from './compontents/TopLogo';
import router from '@ohos.router';
import { MASYSTEMPARMType, RouteParamsType } from '../model';
import { GetSyncData } from '../utils/table/Operation';

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
struct Index {
  @State outFlag: boolean = false;
  @State roadObj: ESObject = {};

  async aboutToAppear() {
    //读取systemparam表的no1等于4的
    const systemParms: Array<MASYSTEMPARMType> = await GetSyncData('MA_SYSTEMPARM') as MASYSTEMPARMType[];
    systemParms.forEach((systemParm: MASYSTEMPARMType) => {
      //TODO 字段名称待修改
      // const { no1, no2, no3, txt1, txt2 } = systemParm;
      if (systemParm.no1 == 4) {
        this.roadObj[systemParm.no2] = systemParm.no2
      }
    })
  }

  build() {
    Column() {
      TopLogo({ outFlag: $outFlag })
      Flex({ wrap: FlexWrap.Wrap, direction: FlexDirection.Row, justifyContent: FlexAlign.Start }) {
        List({}) {
          ListItem() {
            Column() {
              Row() {
              }
              .backgroundImage(lBg, ImageRepeat.NoRepeat)
              .backgroundImageSize({ width: '100%', height: '100%' })
              .width(90)
              .height(80)

              Text(`随机`) {
              }.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 () => {
            const roadArr = Reflect.ownKeys(this.roadObj).map((roadKey) => {
              return this.roadObj[roadKey]
            });
            const wayno = roadArr[Math.floor(Math.random() * roadArr.length)];
            this.goJudge(wayno)
          })

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

                Text(`线路${this.roadObj[roadIndex] + ''}`) {
                }.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 () => {
              this.goJudge(this.roadObj[roadIndex])
            })
          })
        }.lanes(8).margin({ top: 50, left: 15 })
      }
    }.width('100%')
    .height('100%')
    .backgroundColor('#1A1A1A')

  }

  goJudge(wayno: string) {
    let currentParams: RouteParamsType = router.getParams() as RouteParamsType;
    router.replaceUrl({
      url: 'pages/Judge',
      params: {
        sczb: currentParams.sczb,
        kfdm: currentParams.kfdm,
        wayno,
      }
    }, router.RouterMode.Single);
  }
}