import TopLogo from './compontents/topLogo'

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');
import MA_SYSTEMPARM from '../common/constants/MA_SYSTEMPARM';
import AccountTable from '../common/database/tables/AccountTable';
import { getSyncData } from '../common/service/initable'

//单机模式才选线路
@Entry
@Component
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(){}
}