import TopLogo from './compontents/TopLogo';
import ethernet from '@ohos.net.ethernet';

import common from '@ohos.app.ability.common';
import { GlobalConfig } from '../config';
import Prompt from '@system.prompt';
import FileUtils from '../utils/FileUtils';
import { EnvironmentConfigurationType } from '../model/Common';
import { BusinessError } from '@ohos.base';


@Entry
@Component
struct Index {
  @State textList1: string[] =
    ['差分服务器Ip', '响应端口', '中心服务器IP', '响应端口', '子网掩码', '默认网关', 'dns', '后置机IP ', '响应端口',
      '前置机IP', '本地端口']
  @State ratio: number = 1700 / 960
  @State inputFontSize: number = 12
  @State inputTextList1: string[] =
    ['172.37.55.191', '18782', '172.37.55.191', '8082', '255.255.255.0', '192.168.7.1', '114.114.114.114',
      '192.168.7.124', '20022', '192.168.7.170', '20122']
  @State @Watch('outClick') outFlag: boolean = false;
  scroller: Scroller = new Scroller()
  private fileUtil!: FileUtils
  private context = getContext(this) as common.UIAbilityContext;

  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%')
              })

            }
          }
          .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(async () => {
            const folderPath = await this.fileUtil.initFolder(`/config`);
            const param: EnvironmentConfigurationType = {
              udplocalIp: this.inputTextList1[9],
              udplocalIpPort: this.inputTextList1[10],
              udpOppositeIp: this.inputTextList1[7],
              udpOppositeIpPort: this.inputTextList1[8],
              tcplocalIp: this.inputTextList1[9],
              tcplocalIpPort: '8088',
              tcpOppositeIp: this.inputTextList1[0],
              tcpOppositePort: this.inputTextList1[1],
              netMask: this.inputTextList1[4],
              gateway: this.inputTextList1[5],
              dnsServers: this.inputTextList1[6],
              centerIp: this.inputTextList1[2],
              centerPort: this.inputTextList1[3]
            }
            console.log("保存参数", JSON.stringify(param))
            this.fileUtil.addFile(`${folderPath}/ipConfig.txt`, JSON.stringify(param))
            AppStorage.setOrCreate<EnvironmentConfigurationType>("EnvironmentConfiguration", param)
            const host = `http://${param.centerIp}:${param.centerPort}`
            console.log("中心host", host)
            AppStorage.setOrCreate<string>("host", host)
            ethernet.setIfaceConfig("eth0", {
              mode: ethernet.IPSetMode.STATIC,
              ipAddr: this.inputTextList1[9],
              route: "0.0.0.0",
              gateway: this.inputTextList1[5], //value.gateway网关
              netMask: this.inputTextList1[4], //value.netMask网络掩码
              dnsServers: this.inputTextList1[6],
              domain: ""
            }, (error: BusinessError) => {
              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%' })
  }

  async aboutToAppear() {
    this.fileUtil = new FileUtils(this.context)
    const data = await this.fileUtil.readFile(GlobalConfig.commonFileWriteAddress + '/config/ipConfig.txt');
    if (data === '' || data === undefined) {
    } else {
      const result: EnvironmentConfigurationType = JSON.parse(data)
      AppStorage.setOrCreate<EnvironmentConfigurationType>("EnvironmentConfiguration", result)
      this.inputTextList1[9] = result.udplocalIp ?? ''
      this.inputTextList1[10] = result.udplocalIpPort ?? ''
      this.inputTextList1[7] = result.udpOppositeIp ?? ''
      this.inputTextList1[8] = result.udpOppositeIpPort ?? ''
      this.inputTextList1[0] = result.tcpOppositeIp ?? ''
      this.inputTextList1[1] = result.tcpOppositePort ?? ''
      this.inputTextList1[5] = result.gateway ?? ''
      this.inputTextList1[4] = result.netMask ?? ''
      this.inputTextList1[6] = result.dnsServers ?? ''
      this.inputTextList1[2] = result.centerIp ?? ''
      this.inputTextList1[3] = result.centerPort ?? ''
    }

    ethernet.getIfaceConfig("eth0").then(value => {
      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));
    }).catch((error: BusinessError) => {
      console.log("boot_up getIp_new  callback error = " + JSON.stringify(error));
    })
  }

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

  outClick() {

  }
}