import router from '@ohos.router';

import MinePagePersonalFunctionsItem from '../../viewmodel/MinePagePersonalFunctionsItem'
import MinePageCreatorFunctionsItem from '../../viewmodel/MinePageCreatorFunctionsItem'
import MinePageMoreFunctionModel from '../../viewmodel/MinePageMoreFunctionModel'
import MinePageDatasModel from '../../model/MinePageDatasModel'

const TAG = 'PageComponent';



/**
 * 我的页面
 */
@Component
export struct MinePageComponent {
  //是否是创作者
  @State isCreator:boolean = false
  @State isLogin:boolean = true
  @State personalData:MinePagePersonalFunctionsItem[] = []
  @State creatorData:MinePageCreatorFunctionsItem[] = []
  @State moreData:MinePageMoreFunctionModel[] = []
  scroller: Scroller = new Scroller()

  aboutToAppear(){
    this.getFunctionData()
  }

  getFunctionData(){
    //个人功能数据
    this.personalData = MinePageDatasModel.getPersonalFunctionsData()
    //创作者功能数据
    this.creatorData = MinePageDatasModel.getCreatorFunctionsData()
    //更多功能数据
    this.moreData = MinePageDatasModel.getMoreFunctionsData()
  }

  build() {
    Scroll(this.scroller){
      Flex({direction:FlexDirection.Column}){
        Stack({alignContent:Alignment.Top}){
          Image($r('app.media.mine_head_bg'))
            .setFullWidth()
            .height('657lpx')
            .objectFit(ImageFit.Auto)
          this.MinePageUI()
        }
      }.width('100%')
    }
    .backgroundColor($r('app.color.color_F9F9F9'))
    .scrollable(ScrollDirection.Vertical)
    .scrollBar(BarState.Off)
  }


  @Builder MinePageUI(){
    Column(){
      //头像层
      this.HeaderUI()
      //Grid 区域
      this.GridUI()
      //Card
      this.CardUI()
      //创作者区域
      this.ActiveUI()
      //滑动区域
      this.MoreFunctionUI()
    }.setFullWidth()
  }

  @Builder HeaderUI(){
    Row(){
      //头像
      Stack(){
        Button({type:ButtonType.Circle})
          .backgroundColor($r('app.color.main_red'))
          .width('110lpx')
          .height('110lpx')
        Image($r('app.media.mine_head_icon'))
          .width('108lpx')
          .height('108lpx')
          .objectFit(ImageFit.Cover)
          .borderRadius(50)
      }.width('110lpx')
      .height('110lpx')
      .alignContent(Alignment.Center)

      //昵称信息
      Column(){
        Row(){
          Text("人民日报网友6G5E3T")
            .fontColor($r('app.color.color_222222'))
            .maxLines(1)
            .textOverflow({ overflow: TextOverflow.Ellipsis })
            .fontSize('33lpx')
            .width('326lpx')
          Image($r('app.media.mine_user_edit'))
            .width('11lpx')
            .height('20lpx')
            .margin({left:'15lpx'})
            .objectFit(ImageFit.Cover)
        }.width('100%')

        Stack(){
          Image($r('app.media.mine_grade_bg'))
            .width('84lpx')
            .height('29lpx')
            .objectFit(ImageFit.Auto)
          Text("等级8")
            .textAlign(TextAlign.Center)
            .fontColor($r('app.color.white'))
            .fontSize('19lpx')
            .width('50lpx')
            .height('29lpx')
        }.margin({top:'15lpx'})
      }.alignItems(HorizontalAlign.Start)
      .margin({top:'11lpx',left:'17lpx'})
      .width('352lpx')

      Blank()

      Stack({alignContent:Alignment.Start}){
        Text("签到")
          .textAlign(TextAlign.Start)
          .width('108lpx')
          .height('46lpx')
          .fontColor($r('app.color.color_AD6000'))
          .backgroundColor($r('app.color.color_FFC460'))
          .fontWeight(500)
          .position({x:'23lpx'})
          .padding({left:'35lpx'})
        Image($r("app.media.mine_sign_icon"))
          .width('50lpx')
          .height('50lpx')
      }.width('131lpx')
    }.setBackGroundWhite()
    .setFullWidth()
    .padding({top:'31lpx',left:'46lpx'})
  }

  @Builder GridUI(){
    Grid(){
      ForEach(this.personalData,(item:MinePagePersonalFunctionsItem,index:number)=>{
        GridItem(){
          Row(){
            Column(){
              Image(item.imgSrc)
                .width('46lpx')
                .height('46lpx')
              Text(`${item.msg}`)
                .margin({top:'8lpx'})
                .width('50lpx')
                .height('23lpx')
                .fontColor($r('app.color.color_222222'))
                .fontSize('23lpx')
            }
            .alignItems(HorizontalAlign.Center)
            .width('100%')
            Blank()
              .layoutWeight(1)
            if(index % 4 < 3 && index != this.personalData.length){
              Text().backgroundColor($r('app.color.color_222222'))
                .opacity(0.1)
                .width('2lpx')
                .height('29lpx')
            }
          }
        }.onClick(()=>{
          console.log(index+"")
        }).width('169lpx')
        .height('117lpx')
      }, item => item)
    }
    .rowsTemplate('1fr 1fr')
    .columnsTemplate('1fr 1fr 1fr 1fr')
    .height('338lpx')
    .margin({top:'31lpx',left:'23lpx',right:'23lpx' })
  }

  @Builder ActiveUI(){
    Column(){
      Row(){
        Text("创作者中心")
          .fontSize('29lpx')
          .width('148lpx')
          .height('46lpx')
          .fontColor($r('app.color.color_222222'))

        Blank()

        Row(){
          Text("内容管理")
            .fontSize('27lpx')
            .width('113lpx')
            .height('35lpx')
            .fontColor($r('app.color.color_222222'))

          Image($r('app.media.mine_right_arrow'))
            .width('27lpx')
            .height('27lpx')
            .objectFit(ImageFit.Auto)
        }

      }.setFullWidth()
      .height('92lpx')
      .padding({left:'29lpx',top:'23lpx',right:'31lpx'})

      Row(){
        Grid(){
          ForEach(this.creatorData,(item:MinePageCreatorFunctionsItem,index:number)=>{
            GridItem(){
              Row(){
                Column(){
                  Image(item.imgSrc)
                    .width('50lpx')
                    .height('50lpx')
                  Text(`${item.msg}`)
                    .margin({top:'15lpx'})
                    .width('96lpx')
                    .height('23lpx')
                    .fontColor($r('app.color.color_666666'))
                    .fontSize('23lpx')
                }
                .alignItems(HorizontalAlign.Center)
                .width('100%')
                Blank()
                  .layoutWeight(1)
                if(index % 4 < 3 && index != this.creatorData.length){
                  Text().backgroundColor($r('app.color.color_222222'))
                    .opacity(0.1)
                    .width('2lpx')
                    .height('29lpx')
                }
              }
            }.onClick(()=>{
              console.log(index+"")
            }).width('169lpx')
            .height('117lpx')
          }, item => item)
        }
        .rowsTemplate('1fr')
        .columnsTemplate('1fr 1fr 1fr 1fr')
        .height('88lpx')
      }.setFullWidth()
      .height('127lpx')
    }
    .height('219lpx')
    .borderRadius(8)
    .margin({top:'19lpx',left:'23lpx',right:'23lpx',bottom:'19lpx'})
    .setBackGroundWhite()
  }

  @Builder CardUI(){
    Flex(){
      Stack(){
        Image($r('app.media.mine_card_01'))
          .setFullWidthAndHeight()
          .objectFit(ImageFit.Auto)
        Column(){
          Text("积分商城")
            .fontColor($r('app.color.color_994D00'))
            .width('119lpx')
            .height('35lpx')
            .textAlign(TextAlign.Start)
            .fontSize('29lpx')
          Text("华为MATE40手机")
            .width('159lpx')
            .height('23lpx')
            .fontColor($r('app.color.color_FF2E0C'))
            .fontSize('19lpx')
            .textAlign(TextAlign.Start)
            .margin({top:'10lpx'})
        }.padding({left:'29lpx'})
        .alignItems(HorizontalAlign.Start)
      }.alignContent(Alignment.Start)
      .width('345lpx')
      .height('115lpx')

      Stack(){
        Image($r('app.media.mine_card_02'))
          .setFullWidthAndHeight()
          .objectFit(ImageFit.Auto)
        Column(){
          Text("数字藏品")
            .fontColor($r('app.color.color_B15900'))
            .width('119lpx')
            .height('35lpx')
            .textAlign(TextAlign.Start)
            .fontSize('29lpx')
          Text("黑胶唱片NFT")
            .width('159lpx')
            .height('23lpx')
            .fontColor($r('app.color.color_B15900'))
            .fontSize('19lpx')
            .textAlign(TextAlign.Start)
            .margin({top:'10lpx'})
        }.padding({left:'67lpx'})
        .alignItems(HorizontalAlign.Start)
      }.alignContent(Alignment.Start)
      .width('348lpx')
      .height('115lpx')
    }.setFullWidth()
    .height('115lpx')
    .setPadding()
  }

  @Builder MoreFunctionUI(){
    Column(){
      List(){
        ForEach(this.moreData,(item:MinePageMoreFunctionModel,index:number)=>{
          ListItem(){
            Column(){
              Row(){
                if(item.imgSrc){
                  Image(item.imgSrc)
                    .width('38lpx')
                    .height('38lpx')
                    .margin({right:'15lpx'})
                }
                Text(`${item.msg}`)
                  .margin({top:'8lpx'})
                  .width('456lpx')
                  .height('38lpx')
                  .fontColor($r('app.color.color_666666'))
                  .fontSize('29lpx')

                Blank()

                Image($r('app.media.mine_user_arrow'))
                  .width('27lpx')
                  .height('27lpx')
                  .objectFit(ImageFit.Auto)
                  .margin({left:'81lpx',right:'29lpx'})
              }.alignItems(VerticalAlign.Center)
              .justifyContent(FlexAlign.Start)

              if(index != this.moreData.length -1 ){
                Text().backgroundColor($r('app.color.color_F5F5F5'))
                  .opacity(0.1)
                  .width('612lpx')
                  .height('2lpx')
              }
            }.height(index === 0 ? '92lpx':'108lpx')
          }.padding({left:'27lpx'})
          .onClick(()=>{
            console.log(index+"")
          })
          .height('117lpx')
        }, item => item)
      }.onScrollFrameBegin((offset, state) => {
        return { offsetRemain: 0 }
      })
    }
    .setBackGroundWhite()
    .backgroundColor($r('app.color.white'))
    .setMargining()
    .borderRadius(8)
  }

  @Styles setFullWidthAndHeight(){
    .width('100%')
    .height('100%')
  }

  @Styles setFullWidth(){
    .width('100%')
  }

  @Styles setFullHeight(){
    .height('100%')
  }

  @Styles setPadding(){
    .padding({left:'23lpx',right:'23lpx'})
  }
  @Styles setMargining(){
    .margin({left:'23lpx',right:'23lpx'})
  }

  @Styles setBackGroundWhite(){
    .backgroundColor($r('app.color.white'))
  }

  change(){
    router.pushUrl({
      url: 'pages/IndexPage',
      params: {

      }
    }).catch((error: Error) => {
    });
  }

}