import router from '@ohos.router'
import TopLogo from './compontents/topLogo'
import ethernet from '@ohos.net.ethernet';
import prompt from '@ohos.prompt'
import { upDateTableByArray} from '../common/service/initable'
import { getSyncData} from '../common/service/initable'
import { voiceService } from '../common/service/voiceService'

@Entry
@Component
struct Index {
  @State textList1: string[] = ['ftp服务器IP：','响应端口','前置机IP','响应端口', '子网掩码','默认网关','用户名：', '密码：','dns','差分服务器IP: ', '响应端口：',]
  @State textList2: string[] = ['后置机IP：','响应端口：', '本地端口：']
  @State ratio: number = 850 / 960
  @State inputFontSize:number=12  //12
  //
  @State inputTextList1: string[] = ['192.168.36.2','8083','192.168.36.92','20122','255.255.255.0','192.168.36.1','','','114.114.114.114','192.168.36.203','8000',]
  @State inputTextList2: string[] = ['192.168.36.91','20022']
  // 112.80.35.83 11052
  // @State inputTextList1: string[] = ['192.168.7.254','8084','192.168.7.170','20122','255.255.255.0','192.168.7.1','','','114.114.114.114','112.80.35.83','11052']
  // @State inputTextList2: string[] = ['192.168.7.124','20022']


  @State @Watch('outClick') outFlag: boolean = false;
  private vocObj = null;
  scroller: Scroller = new Scroller()
  build() {
    Column() {
      TopLogo({outFlag:$outFlag})
      Column() {
        Column() {
          Scroll(this.scroller){
            Flex({'wrap':FlexWrap.Wrap}) {
              ForEach(this.textList1, (item:string, index:number) => {
                Row() {
                  Text(item)
                    .width('40%')
                    .height('100%')
                    .fontColor('#E5CBA1')
                    .padding({'left': '35px'})
                    .fontSize(this.inputFontSize*this.ratio)
                  TextInput({'text':this.inputTextList1[index]?this.inputTextList1[index]: ''})
                    .width('50%')
                    .height('60%')
                    .fontColor('#fff')
                    .borderColor('#E6E0D8')
                    .borderRadius('10px')
                    .borderWidth('2px')
                    .fontSize(this.inputFontSize*this.ratio)
                    .padding({top:0,bottom:0})
                    .linearGradient({
                      angle: 0,
                      colors: [[0x403C36, 0.0], [0x4D473D, 0.34], [0x3D3A34, 1.0]]
                    }).onChange((value: string) => {
                    this.inputTextList1[index]=value

                  })
                }
                .width('50%')
                .height('16.7%')
              })
              ForEach(this.textList2, (item:string, index:number) => {
                Row() {
                  Text(item)
                    .width('40%')
                    .height('100%')
                    .fontColor('#E5CBA1')
                    .fontSize(this.inputFontSize*this.ratio)
                    .padding({'left': '35px'})
                  TextInput({'text':this.inputTextList2[index]?this.inputTextList2[index]: ''})
                    .width('60%')
                    .height('60%')
                    .fontColor('#fff')
                    .borderColor('#E6E0D8')
                    .borderRadius('10px')
                    .borderWidth('2px')
                    .padding({top:0,bottom:0})
                    .fontSize(this.inputFontSize*this.ratio)
                    .linearGradient({
                      angle: 0,
                      colors: [[0x403C36, 0.0], [0x4D473D, 0.34], [0x3D3A34, 1.0]]
                    })
                    .onChange((value: string) => {
                      this.inputTextList2[index]=value

                    })
                }
                .width('32.5%')
                .height('16.7%')
              })
            }
          }
          .width('95%')
          .height('90%')
          .margin({'top': '2%'})
          .backgroundColor('#282828')
          .borderRadius('15px')
        }
        .width('100%')
        .height('80%')
        .borderRadius('25px')
        Column() {
          Image($r('app.media.terminal_save')).width('20.5%').height('74%').onClick(()=>{
            upDateTableByArray('IpConfigTable',[{udplocalIp:this.inputTextList1[2],udplocalIpPort:this.inputTextList1[3],udpOppositeIp:this.inputTextList2[0],udpOppositeIpPort:this.inputTextList2[1],tcplocalIp:this.inputTextList1[0],tcplocalIpPort:this.inputTextList1[1],tcpOppositeIp:this.inputTextList1[9],tcpOppositePort:this.inputTextList1[10],netMask:this.inputTextList1[4],gateway:this.inputTextList1[5],dnsServers:this.inputTextList1[8]}])
            ethernet.setIfaceConfig("eth0", {
              mode: 0,
              ipAddr:this.inputTextList1[2],
              route: "0.0.0.0",
              gateway: this.inputTextList1[5],//value.gateway网关
              netMask: this.inputTextList1[4],//value.netMask网络掩码
              dnsServers: this.inputTextList1[8],
              // domain: ""
            }, (error) => {
              if (error) {
                prompt.showToast({
                  message: '设置失败'+JSON.stringify(error),
                  duration: 3000
                });
              } else {
                prompt.showToast({
                  message: '设置成功',
                  duration: 3000
                });
              }
            });
          })
        }
        .backgroundColor('#CCC4B8')
        .width('100%')
        .height('20%')
        .borderRadius({'bottomLeft':'25px','bottomRight':'25px'})
        .justifyContent(FlexAlign.SpaceAround)
      }
      .width('75%')
      .height('69.4%')
      .backgroundColor('#E6E3DF')
      .borderRadius('25px')
      .margin({'top':'7%'})
      .justifyContent(FlexAlign.SpaceAround)

    }
    .width('100%')
    .height('100%')
    .backgroundImagePosition({x: 0, y: 0})
    .backgroundImage($r('app.media.index_bg'))
    .backgroundImageSize({ width: '100%', height: '100%' })
  }
  aboutToAppear() {
    getSyncData('IpConfigTable').then((result:Array<any>)=>{
      console.log('result222',JSON.stringify(result))
      if(result.length){
        console.log('tagtag',JSON.stringify(result))
        this.inputTextList1[2]=result[0].udplocalIp
        this.inputTextList1[3]=result[0].udplocalIpPort
        this.inputTextList2[0]=result[0].udpOppositeIp
        this.inputTextList2[1]=result[0].udpOppositeIpPort

        this.inputTextList1[0]=result[0].tcplocalIp
        this.inputTextList1[1]=result[0].tcplocalIpPort
        this.inputTextList1[9]=result[0].tcpOppositeIp
        this.inputTextList1[10]=result[0].tcpOppositePort
        this.inputTextList1[5]=result[0].gateway
        this.inputTextList1[4]=result[0].netMask
        this.inputTextList1[8]=result[0].dnsServers
        this.inputTextList1[11]=result[0].centerIp
        this.inputTextList1[12]=result[0].heartPort
        this.inputTextList1[13]=result[0].gpsPort
      }
    })
    ethernet.getIfaceConfig("eth0", (error, value) => {
      if (error) {
        // that.errorMsg='error'
        console.log("boot_up getIp_new  callback error = " + JSON.stringify(error));
      } else {
        console.log("boot_up getIp_new callback ipAddr = " + JSON.stringify(value.ipAddr)); //
        console.log(" boot_up getIp_new callback mode = " + JSON.stringify(value.mode));
        console.log("boot_up getIp_new callback route = " + JSON.stringify(value.route));
        console.log("boot_up getIp_new callback gateway = " + JSON.stringify(value.gateway));
        console.log("boot_up getIp_new callback netMask = " + JSON.stringify(value.netMask));
        console.log("boot_up getIp_new callback dnsServers = " + JSON.stringify(value.dnsServers));
      }
    })

  }
  onPageShow() {
    console.info('Index onPageShow');
  }
  outClick(){

  }
}