import { userForm, loginType, personTest, InfoTest, companyTest } from '../api/userType'
import { AxiosResponse } from '@ohos/axios'
import { login, getPersonInfo, getInfo, getCompanyInfo } from '../api/user'
import  { router, promptAction } from '@kit.ArkUI'
import SelectRegDialog from '../dialog/SelectRegTypeDialog'
import preferencesUtil from '../utils/preferences'

let account: string = preferencesUtil.get('XF_ACCOUNT', '') as string || ''
let password: string = preferencesUtil.get('XF_PASSWORD', '') as string || ''

@Entry
@Component
struct Login {
  @State loginForm: userForm = {
    username: '',
    password: ''
  }
  // 同意政策
  @State agreeSelect: boolean = false
  // 记住密码
  @State rememberSelect: boolean = preferencesUtil.get('XF_REMEMBER', false) as boolean
  async aboutToAppear() {
    if(this.rememberSelect) {
      this.loginForm.username = account
      this.loginForm.password = password
    }
    if(preferencesUtil.get('XF_TOKEN', '') !== '') {
      router.replaceUrl({
        url: 'pages/Index'
      })
    }
  }
  // 选择注册方式弹窗
  selectRegController: CustomDialogController = new CustomDialogController({
    builder: SelectRegDialog(),
    alignment: DialogAlignment.Bottom
  })

  submitLogin = async () => {
    if(!this.agreeSelect) return promptAction.showToast({ message: '请勾选同意用户协议与隐私政策' })
    if(this.rememberSelect) {
      preferencesUtil.set('XF_ACCOUNT', this.loginForm.username) // 存入账号
      preferencesUtil.set('XF_PASSWORD', this.loginForm.password) // 存入密码
    }
    const res: AxiosResponse<loginType> = await login(this.loginForm)
    const token = res.data.token
    preferencesUtil.set('XF_TOKEN', token) // 存入token
    const accountInfo: AxiosResponse<InfoTest> = await getInfo()
    let roleName: string = accountInfo.data.roles[0] || ''
    preferencesUtil.set('XF_ROLE_NAME', roleName)
    // 根据角色存储不同的数据
    if(roleName == 'company'){
      let companyInfo: AxiosResponse<companyTest> = await getCompanyInfo()
      preferencesUtil.set('XF_COMPANY_INFO', JSON.stringify(companyInfo.data.data))
      preferencesUtil.set('XF_COMPANY_ID', companyInfo.data.data.companyId)
      preferencesUtil.set('XF_USERNAME', companyInfo.data.data.username)
      preferencesUtil.set('XF_USER_ID', companyInfo.data.data.userId)
    } else {
      let personInfo: AxiosResponse<personTest> = await getPersonInfo()
      preferencesUtil.set('XF_PERSON_INFO', JSON.stringify(personInfo.data.data))
      preferencesUtil.set('XF_COMPANY_ID', personInfo.data.data.companyId || 0)
      preferencesUtil.set('XF_PERSON_ID', personInfo.data.data.personId)
      preferencesUtil.set('XF_USERNAME', personInfo.data.data.username)
    }
    router.pushUrl({
      url: 'pages/Index'
    })
  }

  build() {
    Column(){
      Column(){
        Image($r('app.media.logo')).width(100).borderRadius(22).margin({bottom: 20})
        Text('消防维保助手').fontSize(30).fontWeight(500).fontColor('#fff').margin({bottom: 5})
        Text('鸿蒙专版').fontSize(14).fontColor(Color.White).fontWeight(500)
      }.margin({top: 50, bottom: 30})

      Column({space:10}){
        Row(){
          Image($r('app.media.account')).width(20)
          TextInput({text: $$this.loginForm.username, placeholder: '请填写用户名'})
            .backgroundColor(Color.Transparent).fontColor('#fff').fontSize(16)
            .borderRadius(0).layoutWeight(1).placeholderColor('#fff')
        }.width('100%').border({width:{bottom: 1}, color: '#eee'})
        Row(){
          Image($r('app.media.password')).width(20)
          TextInput({text: $$this.loginForm.password, placeholder: '请填写密码'})
            .backgroundColor(Color.Transparent).fontColor('#fff').fontSize(16)
            .borderRadius(0).layoutWeight(1).placeholderColor('#fff')
        }.width('100%').border({width:{bottom: 1}, color: '#eee'})
      }.margin({bottom: 10}).padding({left: 20, right: 20})
      Column({space: 10}){
        Row({space: 5}){
          Checkbox({group: 'user' })
            .select(this.agreeSelect)
            .selectedColor('#1890ff')
            .shape(CheckBoxShape.CIRCLE)
            .width(16).height(16)
            .mark({ size: 10, strokeWidth: 5 })
            .onChange((value) => { this.agreeSelect = value })
          Row(){
            Text('已阅读并同意').fontSize(12).fontColor('#fff')
            Text('《用户协议》').fontSize(12).fontColor(Color.Red)
              .onClick(() => {
                router.pushUrl({ url: 'pages/UserAgreement' }) })
            Text('和').fontSize(12).fontColor('#fff')
            Text('《隐私政策》').fontSize(12).fontColor(Color.Red)
              .onClick(() => { router.pushUrl({ url: 'pages/PrivacyPolicy' }) })
          }
        }.width('100%').justifyContent(FlexAlign.Start)
        Row({space: 5}){
          Checkbox({ group: 'password' })
            .select(this.rememberSelect)
            .selectedColor('#1890ff')
            .shape(CheckBoxShape.ROUNDED_SQUARE)
            .width(16).height(16)
            .mark({ size: 10, strokeWidth: 5 })
            .onChange((value: boolean) => {
              this.rememberSelect = value
              preferencesUtil.set('XF_REMEMBER', value)
              // 记住密码
              if(value) {
                preferencesUtil.set('XF_ACCOUNT', this.loginForm.username)
                preferencesUtil.set('XF_PASSWORD', this.loginForm.password)
              } else {
                preferencesUtil.delete('XF_ACCOUNT')
                preferencesUtil.delete('XF_PASSWORD')
              }
            })
          Text('记住密码').fontSize(12).fontColor('#fff')
        }.width('100%').justifyContent(FlexAlign.Start)
      }.alignItems(HorizontalAlign.Start).padding({left: 20, right: 20})

     Button('立即登录')
       .width('80%').height(40)
       .fontSize(16).fontColor('#1890ff')
       .borderRadius(20).backgroundColor(Color.White)
       .margin({top: 20})
       .onClick(() => { this.submitLogin() })
      Row({space: 10}){
        Row({ space: 5}){
          Text('忘记密码').width(15).fontSize(14).height(60).fontColor('#fff')
          Image($r('app.media.right')).width(14)
        }.width(50).height(100).linearGradient({
          angle: GradientDirection.Bottom, colors: [['#72b8d6', 0.0], ['#70a6d8', 0.5]]
        }).borderRadius({topRight: 50, bottomRight: 50}).justifyContent(FlexAlign.End).padding(10)
        .onClick(() => { router.pushUrl({ url: 'pages/UpdatePassword' }) })
        Column({space: 10}){
          Text('监管工具箱').fontSize(14).fontColor('#fff')
          Text('立即使用').height(30).fontSize(14).fontColor('#1890ff').width(120).textAlign(TextAlign.Center)
            .borderRadius(15).backgroundColor('#fff')
        }.layoutWeight(1).height(80).linearGradient({
          angle: GradientDirection.Bottom, colors: [['#72b8d6', 0.0], ['#70a6d8', 0.5]]
        }).borderRadius(40).justifyContent(FlexAlign.Center)
        .onClick(() => { router.pushUrl({ url: 'pages/ToolBox' }) })
        Row({space: 5}){
          Image($r('app.media.left')).width(14)
          Text('立即注册').width(15).fontSize(14).height(60).fontColor('#fff')
        }.width(50).height(100).linearGradient({
          angle: GradientDirection.Bottom, colors: [['#72b8d6', 0.0], ['#70a6d8', 0.5]]
        }).borderRadius({topLeft: 50, bottomLeft: 50}).justifyContent(FlexAlign.Start).padding(10)
        .onClick(() => { this.selectRegController.open() })
      }.width('100%').height(100).justifyContent(FlexAlign.SpaceBetween)
      .position({x: 0, y: '80%'})
      Text('Ⓒ 广西世纪创软信息技术有限公司\n' +
        '非广西消防救援总队官方出品').position({x: 0, y: '96%'}).fontSize(12).fontColor('#000').width('100%')
        .textAlign(TextAlign.Center)
    }.width('100%').height('100%').backgroundImage($r('app.media.login_back'))
    .backgroundImageSize({width: '100%'})
    .expandSafeArea([SafeAreaType.SYSTEM], [SafeAreaEdge.TOP, SafeAreaEdge.BOTTOM])
  }
}