import ArrayList from '@ohos.util.ArrayList';
import promptAction from '@ohos.promptAction';

export default class AccoutPageDataModel {
  // 页面数据
  compType: number // 0：标题 / 1：密码输入框 / 2：验证码输入框 / 3:desc描述 / 4:按钮 / 5：logo / 6:子标题 7:手机号输入框 7:空白
  compLogo: string
  compTitle: string
  compSubTitle: string
  compDesc: string
  compButtonTitle: string
  inputPlacholder: string
  inputTag: number

  constructor(compType: number, compTitle: string, compLogo: string, compDesc: string, compButtonTitle: string, inputPlacholder: string, inputTag: number) {
    this.compType = compType
    this.compTitle = compTitle
    this.compLogo = compLogo
    this.compDesc = compDesc
    this.compButtonTitle = compButtonTitle
    this.inputPlacholder = inputPlacholder
    this.inputTag = inputTag
  }
}

@Component
export struct SettingPasswordLayout {
  @State listData: Array<AccoutPageDataModel> = new Array(); // 页面配置数据
  @State btnStatus: boolean = false
  password01: string
  password02: string
  passwordOri: string

  aboutToAppear() {
    this.getPageListData(4)
  }

  getPageListData(pageId:number) {
    switch (pageId) {
      case 0:
      // 验证/更换手机号
        this.listData.push(new AccoutPageDataModel(0, '更换手机号', null, null, null, null, null))
        this.listData.push(new AccoutPageDataModel(7, null, null, null, null, '请输入手机号', 10010))
        this.listData.push(new AccoutPageDataModel(2, null, null, null, null, '验证码', 10088))
        this.listData.push(new AccoutPageDataModel(4, null, null, null, '确认', null, null))
        break;

      case 1:
      // 设置密码
        this.listData.push(new AccoutPageDataModel(0, '设置密码', null, null, null, null, null))
        this.listData.push(new AccoutPageDataModel(1, null, null, null, null, '请输入密码', 10086))
        this.listData.push(new AccoutPageDataModel(1, null, null, null, null, '再次输入密码', 10087))
        this.listData.push(new AccoutPageDataModel(4, null, null, '提示:密码长度6-20位，需答谢字母、小写字母、数字、特殊字符中组合三种及三种以上组成', null, null, null))
        this.listData.push(new AccoutPageDataModel(5, null, null, null, '确认', null, null))
        break;

      case 2:
      // 修改密码
        this.listData.push(new AccoutPageDataModel(0, '修改密码', null, null, null, null, null))
        this.listData.push(new AccoutPageDataModel(1, null, null, null, null, '请输入原密码', 10010))
        this.listData.push(new AccoutPageDataModel(1, null, null, null, null, '请输入新密码', 10086))
        this.listData.push(new AccoutPageDataModel(1, null, null, null, null, '请再请输入原密码', 10087))
        this.listData.push(new AccoutPageDataModel(3, null, null, '提示:密码长度6-20位，需答谢字母、小写字母、数字、特殊字符中组合三种及三种以上组成', null, null, null))
        this.listData.push(new AccoutPageDataModel(4, null, null, null, '确认', null, null))
        this.listData.push(new AccoutPageDataModel(3, null, null, '忘记密码', null, null, null))
        break;

      case 3:
      // 绑定手机号
        this.listData.push(new AccoutPageDataModel(0, '绑定手机号', null, null, null, null, null))
        this.listData.push(new AccoutPageDataModel(7, null, null, null, null, '请输入手机号', 10010))
        this.listData.push(new AccoutPageDataModel(2, null, null, null, null, '验证码', 10088))
        this.listData.push(new AccoutPageDataModel(4, null, null, null, '确认', null, null))
        break;

      case 4:
      // 有logo的
        this.listData.push(new AccoutPageDataModel(5, null, 'https://img-blog.csdnimg.cn/24f43f4d626d428891ebb2adb5c2c2e9.png?x-oss-process=image/watermark,type_ZHJvaWRzYW5zZmFsbGJhY2s,shadow_50,text_Q1NETiBA5YyX5aSn5Z-55paH5byg6ICB5biI,size_20,color_FFFFFF,t_70,g_se,x_16', null, null, null , null))
        this.listData.push(new AccoutPageDataModel(0, '修改密码', null, null, null, null, null))
        this.listData.push(new AccoutPageDataModel(1, null, null, null, null, '请输入原密码', 10010))
        this.listData.push(new AccoutPageDataModel(1, null, null, null, null, '请输入新密码', 10086))
        this.listData.push(new AccoutPageDataModel(1, null, null, null, null, '请再请输入原密码', 10087))
        this.listData.push(new AccoutPageDataModel(2, null, null, null, null, '验证码', 10088))
        this.listData.push(new AccoutPageDataModel(3, null, null, '提示:密码长度6-20位，需答谢字母、小写字母、数字、特殊字符中组合三种及三种以上组成', null, null, null))
        this.listData.push(new AccoutPageDataModel(4, null, null, null, '确认', null, null))
        this.listData.push(new AccoutPageDataModel(3, null, null, '忘记密码', null, null, null))
        break;

      default:
        break;
    }
  }

  build() {
    Navigation() {
      this.settingList() //滑动区域
    }.titleMode(NavigationTitleMode.Mini)
    .title('')
  }

  // 页面布局
  @Builder settingList() {
    Column() {
      List() {
        ForEach(this.listData, (item: AccoutPageDataModel, index: number) => {
          ListItem() {
            if (item.compType == 0) {
              this.getTitleCell(item, HorizontalAlign.Start)
            } else if (item.compType == 1) {
              this.getPasswordCell(item)
            } else if (item.compType == 2) {
              this.getCodeCell(item)
            } else if (item.compType == 3) {
              if (index == this.listData.length - 1) {
                this.getDescCell(item, HorizontalAlign.Center)
              } else {
                this.getDescCell(item, HorizontalAlign.Start)
              }
            } else if (item.compType == 4) {
              this.getButtonCell(item)
            } else if (item.compType == 5) {
              this.getLogoCell(item)
            } else if (item.compType == 7) {
              this.getPhoneCell(item)
            } else {
              Text('' + item.compType)
            }
          }
        })
      }
      // .divider({
      //   strokeWidth: 1,
      //   startMargin: 15,
      //   endMargin: 10,
      //   color: '#f0f0f0'
      // })
    }.width('100%').padding('30lpx')
  }

  /***************************** UI元素 ******************************************/

  // 标题
  @Builder getTitleCell(item: AccoutPageDataModel, alignTitle: HorizontalAlign) {
    Column() {
      Text(item.compTitle).fontWeight(FontWeight.Bold).fontSize(20).maxLines(1)
    }
    .width('100%')
    .height('75lpx')
    .alignItems(alignTitle)
  }

  // 密码输入框
  @Builder getPasswordCell(item: AccoutPageDataModel) {
    Row() {
      Row() {
        TextInput({ placeholder: item.inputPlacholder })
          .type(InputType.Password)
          .backgroundColor('#00000000')
          .onChange((value: string) => {
            this.inputTextChange(value, item.inputTag)
          })
          .onSubmit((EnterKeyType) => {
            promptAction.showToast({ message: 'submit' })
          })
      }
      .alignItems(VerticalAlign.Center)
      .height('80lpx')
      .backgroundColor('#f5f5f5')
      .borderRadius('4vp')
    }
    .width('100%')
    .height('110lpx')
    .backgroundColor(0xffffff0)
    .alignItems(VerticalAlign.Center)
  }

  // 手机号输入框
  @Builder getPhoneCell(item: AccoutPageDataModel) {
    Row() {
      Row() {
        TextInput({ placeholder: item.inputPlacholder })
          .backgroundColor('#00000000')
          .onChange((value: string) => {
            this.inputTextChange(value, item.inputTag)
          })
          .onSubmit((EnterKeyType) => {
            promptAction.showToast({ message: 'submit' })
          })
      }
      .alignItems(VerticalAlign.Center)
      .height('80lpx')
      .backgroundColor('#f5f5f5')
      .borderRadius('4vp')
    }
    .width('100%')
    .height('110lpx')
    .backgroundColor(0xffffff0)
    .alignItems(VerticalAlign.Center)
  }

  // 验证码码输入框
  @Builder getCodeCell(item: AccoutPageDataModel) {
    Row() {
      Stack() {
        Image($r('app.media.get_code_bg')).width('100%').borderRadius('4vp')
        Row() {
          TextInput({ placeholder: item.inputPlacholder })
            .backgroundColor('#00000000')
            .width('67.28%')
            .onChange((value: string) => {
              this.inputTextChange(value, item.inputTag)
            })
          Button('发送验证码')
            .width('32.71%')
            .backgroundColor('#00000000')
            .fontColor('#da3e22')
        }
        .width('100%')
      }.height('80lpx')
    }
    .width('100%')
    .height('110lpx')
    .backgroundColor(0xffffff0)
    .alignItems(VerticalAlign.Center)
  }

  // desc
  @Builder getDescCell(item: AccoutPageDataModel, alignTitle: HorizontalAlign) {
    Column() {
      Text(item.compDesc).fontSize(12).maxLines(3).fontColor(0x999999).padding({top:'10lpx'})
        .onClick(()=>{
          if (item.compDesc == '忘记密码') {
            promptAction.showToast({ message: '密码不符合密码规范' })
          }
        })
    }
    .width('100%')
    .height('85lpx')
    .alignItems(alignTitle)
  }

  // 按钮
  @Builder getButtonCell(item: AccoutPageDataModel) {
    Row() {
      Button(item.compButtonTitle, { type: ButtonType.Normal, stateEffect: true })
        .width('100%')
        .height('80lpx')
        .backgroundColor(this.btnStatus ? '#da3e22' : '#e5856d')
        .fontColor('#fff')
        .borderRadius('4vp')
        .onClick(() => {
          this.buttonClick()
        })
    }
    .padding({top:'25lpx'})
    .alignItems(VerticalAlign.Center)
    .width('100%')
    .height('120lpx')
  }

  // 标题
  @Builder getLogoCell(item: AccoutPageDataModel) {
    Column() {
      Image(item.compLogo).height('150lpx').width('150lpx')
    }
    .width('100%')
    .height('200lpx')
  }

  /***************************** 事件处理 ******************************************/
  // 提交按钮点击事件
  buttonClick() {
    if (this.btnStatus) {
      // 需要+手机号校验
      if (this.password01.length < 6 || this.password01.length > 20) {
        promptAction.showToast({ message: '密码不符合密码规范' })
        return
      }

      promptAction.showToast({ message: '请求接口' })
    }
  }

  // 输入框数据变动：输入数据处理
  inputTextChange(text: string, tag: number) {
    if (tag == 10086) {
      this.password01 = text;
    } else if (tag == 10087) {
      this.password02 = text;
    } else {
      this.passwordOri = text;
    }

    if (this.password01) {
      if (this.password01 == this.password02 && this.password01.length >= 6 && this.password01.length <= 20) {
        this.btnStatus = true;
      } else {
        this.btnStatus = false;
      }
    }
  }
}