import { BottomNavi, CommonConstants } from 'wdConstant';
import { Logger } from 'wdKit';
import PageViewModel from '../../viewmodel/PageViewModel';
import storageStatistics from "@ohos.file.storageStatistics";
import { BusinessError } from '@ohos.base';
import router from '@ohos.router';
import { WDRouterPage, WDRouterRule } from 'wdRouter';
import { Params } from 'wdBean';


@Component
export struct MineSettingComponent {
  @State listData: Array<string | Array<string>> = new Array();
  @State privacySwitch: boolean = false
  @State cacheSice: number = 0

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

    // 获取缓存数据
    storageStatistics.getCurrentBundleStats((err: BusinessError, bundleStats: storageStatistics.BundleStats) => {
      if (err) {
        console.error(`Invoke getCurrentBundleStats failed, code is ${err.code}, message is ${err.message}`);
      } else {
        this.cacheSice = bundleStats.appSize / 1024.00 / 1024.00;
      }
    });
  }

  getSettingPageData() {
    let listArr = [['账户与安全', '接收推送', '隐私设罝', '仅WiFi网络加载图片', 'WiFi网络情况下自动播放视频', '开户播放器悬浮窗'], ['清除缓存', '去评分']];
    this.listData = listArr;
  }

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

  // 页面布局
  @Builder settingList() {
    Column() {
      List() {
        // 循环渲染ListItemGroup，contactsGroups为多个分组联系人contacts和标题title的数据集合
        ForEach(this.listData, (item: Array<string>, index: number) => {
          ListItemGroup({ header: index === 0 ? this.itemHead("") : this.itemHead("1") }) {
            // 循环渲染ListItem
            ForEach(item, (subItem: string, subIndex: number) => {
              ListItem() {
                if (subIndex == 6) {
                  this.getArrowCell(subItem, subIndex, index)
                } else if (subIndex == 1 || subIndex == 3 || subIndex == 4 || subIndex == 5) {
                  this.getSwitchCell(subItem, subIndex)
                } else {
                  this.getArrowCell(subItem, subIndex, index)
                }

              }.padding({ left: '27lpx' })
              .onClick(() => {

                // // 在Home页面中
                // let paramsInfo: object = {
                //   pageId: 123,
                //   pageType:'AccountAndSecurityLayout'
                // };
                console.log(subIndex + "")
                if (subIndex == 0) {

                  let params: Params = {
                    pageID: 'AccountAndSecurityLayout'
                  }
                  WDRouterRule.jumpWithPage(WDRouterPage.settingPage, params)
                }else if (subIndex == 2) {
                  WDRouterRule.jumpWithPage(WDRouterPage.privacySettingPage)
                }

              })
              .height('117lpx')
            })
          }
          .divider({
            strokeWidth: 1,
            startMargin: 15,
            endMargin: 10,
            color: '#f0f0f0'
          })
        })
      }.onScrollFrameBegin((offset, state) => {
        return { offsetRemain: 0 }
      })
    }
    .backgroundColor(Color.White)
    .borderRadius(8)
  }

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

  // 右侧开关cell
  @Builder getSwitchCell(item:string, index:number) {
    Column() {
      Row() {
        // 左侧logo和标题
        Row() {
          // 判断有没有图片
          if (0) {
            Image('https://pic.rmb.bdstatic.com/e182cf67c341d1128d2a6cc05886bf62.jpeg@s_0,h_2000')
              .height('38lpx')
              .margin({ right: '5lpx' })

            Text(`${item}`)
              .margin({ top: '8lpx' })
              .height('38lpx')
              .fontColor('#333333')
              .fontSize('29lpx')
          } else {
            Text(`${item}`)
              .margin({ top: '8lpx' })
              .height('38lpx')
              .fontColor('#333333')
              .fontSize('29lpx')
          }
        }.width('60%')

        // 右侧文案和右箭头
        Row() {
          Toggle({ type: ToggleType.Switch, isOn: false })
            .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:string, index:number, mainIndex:number) {
    Column() {

      Row() {
        // 左侧logo和标题
        Row() {
          // 判断有没有图片
          if (this.privacySwitch) {
            Image('https://pic.rmb.bdstatic.com/e182cf67c341d1128d2a6cc05886bf62.jpeg@s_0,h_2000')
              .height('38lpx')
              .margin({ right: '5lpx' })
          }
          Text(`${item}`)
            .margin({ top: '8lpx' })
            .height('38lpx')
            .fontColor('#333333')
            .fontSize('29lpx')
        }.width('60%')

        // 右侧文案和右箭头
        Row() {
          Text((index == 0 && mainIndex != 0) ? this.cacheSice.toFixed(2) + 'MB' : '')
            .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')
  }
}