import { BottomNavi, CommonConstants, SpConstants } from 'wdConstant';
import { Logger, SPHelper, ToastUtils, UserDataLocal, EmitterEventId, EmitterUtils } 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';
import { LoginViewModel } from 'wdLogin/src/main/ets/pages/login/LoginViewModel';
import { Router } from '@ohos.arkui.UIContext';
import promptAction from '@ohos.promptAction';
import { LogoutViewModel } from '../../viewmodel/LogoutViewModel';
import { CustomLogoutDialog } from './CustomLogoutDialog';
import { emitter } from '@kit.BasicServicesKit';
import { ConfirmLogoutDialog } from './ConfirmLogoutDialog';

export { SettingPasswordParams } from "wdLogin"

@Component
export struct AccountAndSecurityLayout {
  @State listData: Array<MineMainSettingFunctionItem> = new Array;
  @State privacySwitch: boolean = false
  @State cacheSice: number = 0
  @State protocolState: boolean = false //协议勾选状态
  @State isAccountPage: boolean = true
  logoutViewModel = new LogoutViewModel()
  dialogController: CustomDialogController = new CustomDialogController({
    builder: CustomLogoutDialog({
      cancel: () => {

      },
      confirm: () => {
        this.requestLogout()
      }
    }),
    customStyle: true,
    alignment: DialogAlignment.Center
  })

  confirmDialogController: CustomDialogController = new CustomDialogController({
    builder: ConfirmLogoutDialog({
      cancel: () => {

      },
      confirm: () => {
        this.logout()
      }
    }),
    customStyle: true,
    alignment: DialogAlignment.Center
  })


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

  async getAccountAndSecurityData() {
    let oldList = MineSettingDatasModel.getAccountAndSecuritySettingData();
    let phone = await SPHelper.default.get(SpConstants.USER_PHONE, '') as string
    if (phone != '') {
      oldList[0].subTitle = this.securityPhone(phone)
    }
    this.listData = oldList

  }

  addEmitEvent(){
    // 定义一个eventId为1的事件
    let event: emitter.InnerEvent = {
      eventId: EmitterEventId.PHONE_CHANGE_SUCCESS
    };

    // 收到eventId为1的事件后执行该回调
    let callback = (eventData: emitter.EventData): void => {
      // promptAction.showToast({
      //   message: JSON.stringify(eventData)
      // });
      if(eventData&&eventData.data){
        this.listData[0].subTitle = eventData.data['content']
      }
      Logger.debug( 'event callback:' + JSON.stringify(eventData));
    };

    // 订阅eventId为1的事件
    emitter.on(event, callback);

  }

  build() {
    Column(){
      if(this.isAccountPage){
        this.settingList()
      }else {
        this.logoutLayout()
      }
    }
  }

  // 页面布局
  @Builder settingList() {
    Stack({ alignContent: Alignment.Bottom }) {
      Column() {
        RelativeContainer() {
          Text('账户管理')
            .fontColor('#FF333333')
            .fontSize(18)
            .textAlign(TextAlign.Center)
            .height(44)
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              left: { anchor: "__container__", align: HorizontalAlign.Start },
              right: { anchor: "__container__", align: HorizontalAlign.End },

            })
            .id('titleContent')
          Image($r('app.media.back_icon'))
            .objectFit(ImageFit.Auto)
            .height(24)
            .width(24)
            .margin({
              left: 16, top: 8
            })
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              left: { anchor: "__container__", align: HorizontalAlign.Start },
            })
            .onClick(() => {
              router.back()
            })
            .id('backImage')

        }.height(44)

        List() {
          ForEach(this.listData, (item: MineMainSettingFunctionItem, index: number) => {
            ListItem() {
              if (item.type == 0) {
                Column() {
                  // this.getArrowCell(item)
                  AccountArrowCell({ item: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)
              }else if (index == 3) {
                this.isAccountPage=false
                // 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(()=>{
         this.confirmDialogController.open()

          // 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)
    }
  }

  @Builder logoutLayout(){
    RelativeContainer() {
      Column() {
        RelativeContainer() {
          Text('注销账号')
            .fontColor('#FF333333')
            .fontSize(18)
            .textAlign(TextAlign.Center)
            .height(44)
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              left: { anchor: "__container__", align: HorizontalAlign.Start },
              right: { anchor: "__container__", align: HorizontalAlign.End },

            })
            .id('titleContent')
          Image($r('app.media.back_icon'))
            .objectFit(ImageFit.Auto)
            .height(24)
            .width(24)
            .margin({
              left: 16, top: 8
            })
            .alignRules({
              top: { anchor: "__container__", align: VerticalAlign.Top },
              left: { anchor: "__container__", align: HorizontalAlign.Start },
            })
            .onClick(() => {
              this.isAccountPage=true
              this.protocolState=false
            })
            .id('backImage')

        }.height(44)

        Text('为保证您的账号安全，在您提交的注销申请生效前，需同时满足以下几个条件：')
          .fontColor('#FF222222')
          .fontSize(16)
          .fontWeight(600)
          .padding({ top:17,left: 16, right: 16 })
          .width('100%')

        Text('1. 账号处于安全状态')
          .fontColor('#FF222222')
          .fontSize(16)
          .fontWeight(600)
          .padding({ top: 24, left: 16 })
          .width('100%')

        Text('账号处于正常使用状态，无被盗风险。')
          .fontColor('#FF666666')
          .fontSize(14)
          .fontWeight(400)
          .padding({ top: 8, left: 16 })
          .width('100%')

        Text('2. 账号权限解除')
          .fontColor('#FF222222')
          .fontSize(16)
          .fontWeight(600)
          .padding({ top: 24, left: 16 })
          .width('100%')

        Text('账号已解除与其他产品的授权登录或绑定关系。')
          .fontColor('#FF666666')
          .fontSize(14)
          .fontWeight(400)
          .padding({ top: 8, left: 16 })
          .width('100%')

        Text('3. 账号无任何纠纷，包括举报投诉')
          .fontColor('#FF222222')
          .fontSize(16)
          .fontWeight(600)
          .padding({ top: 24, left: 16 })
          .width('100%')

        Text('请注意：注销后7天内不能再次注册人民日报客户端，需要等到账号冷静期结束才能再次登录注册')
          .fontColor('#FFED2800')
          .fontSize(14)
          .fontWeight(400)
          .padding({ top: 32, left: 16, right: 16 })
          .width('100%')

      }.alignRules({
        top: { anchor: "__container__", align: VerticalAlign.Top },
        left: { anchor: "__container__", align: HorizontalAlign.Start },
      })
      .width('100%')
      .id('title')


      Column() {
        Row() {
          Image(this.protocolState ? $r("app.media.logout_checkbox_select") : $r("app.media.logout_checkbox_unselected"))
            .width(15)
            .height(15)
            .onClick(() => {
              this.protocolState = !this.protocolState

            })

          Text() {
            Span("我已阅读并同意").fontColor("#999999").fontSize(12)
            Span("《用户注销协议》").fontColor("#ED2800").fontSize(12).onClick(() => {
              let bean = { contentID: "3", pageID: "" } as Params
              WDRouterRule.jumpWithPage(WDRouterPage.loginProtocolPage, bean)
            })
          }
        }.alignItems(VerticalAlign.Center)

        Row() {
          Text("注销账户")
            .borderRadius(4)
            .fontColor(this.protocolState ? "#FFFFFFFF" : "#66FFFFFF")
            .fontSize(18)
            .fontWeight(FontWeight.Medium)
            .margin({ top: 20 })
            .height(44)
            .textAlign(TextAlign.Center)
            .width("100%")
            .backgroundColor(this.protocolState ? "#FFED2800" : "#99ED2800")
            .onClick(() => {
              if (!this.protocolState) {
                return
              }
              this.dialogController.open()

            })
        }.padding({ left: 25, right: 25 }).width('100%')
      }.alignRules({
        bottom: { anchor: "__container__", align: VerticalAlign.Bottom },
        left: { anchor: "__container__", align: HorizontalAlign.Start },
        right: { anchor: "__container__", align: HorizontalAlign.End },

      })
      .margin({ bottom: 15 })
      .id('bottom')
    }.width('100%')
  }

  // 右侧开关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')
  }

  logout(){
    let login = new LoginViewModel;
    login.logOut().then(()=>{
      promptAction.showToast({ message: '退出登录' })
      EmitterUtils.sendEvent(EmitterEventId.PEOPLE_SHIP_ATTENTION)
      router.back();
    }).catch((error:string)=>{
      promptAction.showToast({ message: error })
    });
  }

  //注销账号
  requestLogout() {
    this.logoutViewModel.requestLogout().then(()=>{
      ToastUtils.shortToast("注销成功")
      router.back()
    })
  }

  securityPhone(phoneNum:string):string{
    let securityNum:string;
    let needSecurityString = phoneNum.substring(3, phoneNum.length - 4);
    securityNum = phoneNum.replace(needSecurityString,'****')
    return securityNum;
  }
}

@Component
export struct AccountArrowCell{
  @ObjectLink item: MineMainSettingFunctionItem
  build() {
    Column() {
      Row() {
        // 左侧logo和标题
        Row() {
          // 判断有没有图片
          if (this.item.imgSrc) {
            Image(this.item.imgSrc)
              .height('38lpx')
              .margin({ right: '5lpx' })
          }
          Text(`${this.item.title}`)
            .margin({ top: '8lpx' })
            .height('38lpx')
            .fontColor('#333333')
            .fontSize('29lpx')
        }.width('60%')

        // 右侧文案和右箭头
        Row() {
          Text(this.item.subTitle ? this.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')
  }
}