import { BottomNavi, CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';
import { TopNavigationComponent } from '../page/TopNavigationComponent';
import PageViewModel from '../../viewmodel/PageViewModel';
import {MineMainSettingFunctionItem} from '../../viewmodel/MineMainSettingFunctionItem';
import MineSettingDatasModel from '../../model/MineSettingDatasModel';
import storageStatistics from "@ohos.file.storageStatistics";
import { BusinessError } from '@ohos.base';
import ArrayList from '@ohos.util.ArrayList';
import router from '@ohos.router';
import { WDRouterPage, WDRouterRule } from 'wdRouter';
import { Params } from 'wdBean';
import { SettingPasswordParams } from 'wdLogin';
export { SettingPasswordParams } from "wdLogin"

@Component
export struct AccountAndSecurityLayout {
  @State listData: Array<MineMainSettingFunctionItem> = new Array;
  @State privacySwitch: boolean = false
  @State cacheSice: number = 0

  aboutToAppear() {
    // 获取设置页面数据
    this.getAccountAndSecurityData()
  }

  getAccountAndSecurityData() {
    this.listData = MineSettingDatasModel.getAccountAndSecuritySettingData()
  }

  build() {
    Navigation() {
      //滑动区域
      this.settingList()
    }.titleMode(NavigationTitleMode.Mini)
    .title('账号与安全')
  }

  // 页面布局
  @Builder settingList() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        List() {
          ForEach(this.listData, (item: MineMainSettingFunctionItem, index: number) => {
            ListItem() {
              if (item.type == 0) {
                Column() {
                  this.getArrowCell(item)
                }.padding({ left: '27lpx' }).height('117lpx').justifyContent(FlexAlign.Center)
              } else if (item.type == 1) {
                Column() {
                  this.getSwitchCell(item)
                }.padding({ left: '27lpx' }).height('117lpx').justifyContent(FlexAlign.Center)
              } else {
                Column().width('100%').height('15lpx').backgroundColor(0xf0f0f0)
              }
            }
            .onClick(() => {
              console.log(index + "")
              if (index == 0){
                let pageType = {'pageType': 2} as Record<string, number>;
                WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage, pageType)
              }else if (index == 1) {

                let pageType = {'pageType': 1} as Record<string, number>;
                WDRouterRule.jumpWithPage(WDRouterPage.forgetPasswordPage, pageType)
              }
            })

          })
        }
        .divider({
          strokeWidth: 1,
          startMargin: 15,
          endMargin: 10,
          color: '#f0f0f0'
        })
        .onScrollFrameBegin((offset, state) => {
          return { offsetRemain: 0 }
        })
      }.height("100%")

      Column() {
        Button('退出登录',{ stateEffect: true ,type: ButtonType.Normal}).width('90%').height('80lpx').backgroundColor('#da3e22').fontColor('#fff').margin('20lpx').borderRadius('8lpx').onClick(()=>{
          AlertDialog.show({
            title: '🥟id : ' + "button",
            message: '标题：' + '退出登录',
            confirm: {
              value: "OK",
              action: () => {

              },
            }
          })
        })
      }

    }
  }

  @Builder itemHead(text: string) {
    // 列表分组的头部组件，对应联系人分组A、B等位置的组件
    if (text.length > 0) {
      Row().width('100%').height('20lpx').backgroundColor(0xf0f0f0)
    }
  }

  // 右侧开关cell
  @Builder getSwitchCell(item: MineMainSettingFunctionItem) {
    Column() {
      Row() {
        // 左侧logo和标题
        Row() {
          // 判断有没有图片
          if (item.imgSrc) {
            Image(item.imgSrc).height('38lpx').margin({ right: '5lpx' })
            Text(`${item.title}`).margin({ top: '8lpx' }).height('38lpx').fontColor('#333333').fontSize('29lpx')
          } else {
            Text(`${item.title}`).margin({ top: '8lpx' }).height('38lpx').fontColor('#333333').fontSize('29lpx')
          }
        }.width('60%')

        // 右侧文案和右箭头
        Row() {
          Toggle({ type: ToggleType.Switch, isOn: item.switchState })
            .height('50lpx')
            .margin({ left: '81lpx', right: '29lpx' })
            .selectedColor(Color.Pink)
            .onChange((isOn: boolean) => {
              this.privacySwitch = isOn;
            })
        }.width('40%')
        .margin({ right: '29lpx' })
        .justifyContent(FlexAlign.End)

      }
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)
    }.height('54lpx')
  }

  // 右文字+箭头cell
  @Builder getArrowCell(item: MineMainSettingFunctionItem) {
    Column() {
      Row() {
        // 左侧logo和标题
        Row() {
          // 判断有没有图片
          if (item.imgSrc) {
            Image(item.imgSrc)
              .height('38lpx')
              .margin({ right: '5lpx' })
          }
          Text(`${item.title}`)
            .margin({ top: '8lpx' })
            .height('38lpx')
            .fontColor('#333333')
            .fontSize('29lpx')
        }.width('60%')

        // 右侧文案和右箭头
        Row() {
          Text(item.subTitle ? item.subTitle : '')
            .fontColor('#999999')
            .maxLines(1)
          Image($r('app.media.mine_user_arrow'))
            .width('27lpx')
            .height('27lpx')
            .objectFit(ImageFit.Auto)
          Column().width('29lpx')
        }.width('40%')
        .margin({ right: '29lpx' })
        .justifyContent(FlexAlign.End)

      }
      .alignItems(VerticalAlign.Center)
      .justifyContent(FlexAlign.SpaceBetween)

    }
    .height('54lpx')
  }
}