import {MarkRule} from '../../judgeSDK/api/judgeSDK'
interface SEL{
  fontColor:string
  bgColor:string
}

@Component
export default struct  DeductedPopup {
  constructor() {
    super()
  }

  @State fontSize:number = 25
  @State unselected:SEL = {fontColor:'#000000', bgColor:'#CCC4B8'}
  @State selected:SEL =   {fontColor:'#FFAD33', bgColor:'#26231E'}

  @State currentIndex:number = 0
  @State currentPageIndex:number = 0
  //通用评判扣分
  @State currentUniversalPageIndex:number = 0;
  private  markRules:MarkRule[] = []
  @State universalMarkRules:MarkRule[] = []
  @State manualMarkRules:MarkRule[] = []
  @State currentItems:string[] = []

  @State lineBg:Array<string> = ['#4D4136','#26231E']
  @State selectedLine:number = undefined
  private  closePopup:Function = ()=> {}
  private  confirmMark:Function = (itemno:number,serial:string) => {}
  @State selectedLineStyle:SEL = {
    fontColor:'#FFF',
    bgColor:'#B36E00'
  }

  aboutToAppear(){
    this.universalMarkRules = this.markRules.filter(item => this.currentItems.includes(item.itemno+''))
  }
  //上一页 下一页
  goPage(typeIndex){
    const currentIndex = this.currentIndex
    if(currentIndex){
      //通用评判
      typeIndex ? (this.currentUniversalPageIndex += 1) : (this.currentUniversalPageIndex -= 1)
    }else{
      typeIndex ? (this.currentPageIndex += 1) : (this.currentPageIndex -= 1)
    }
    this.selectedLine = -1
  }

  //选中扣分项
  getSelectedLine(index){
    const {selectedLine,selectedLineStyle,lineBg} = this;
    if(selectedLine === index){
      return selectedLineStyle.bgColor
    }
    if(index % 2 === 0){
      return lineBg[0]
    }else{
      return lineBg[1]
    }
  }

  //获取当前页的数据
  getCurrentMarkRuleList(){
    const {currentIndex,currentUniversalPageIndex,currentPageIndex,markRules,universalMarkRules} = this;
    if(currentIndex){
      //通用评判
      return universalMarkRules.slice(currentUniversalPageIndex*7,(currentUniversalPageIndex + 1)*7)
    }else{
      return universalMarkRules.slice(currentPageIndex*7,(currentPageIndex + 1)*7)
    }
  }

  build(){
    Column(){
      Column(){
        Column(){
          Row(){
            Row(){
              ForEach(['人工评判','通用评判'],(text,index)=>{

                Row(){
                  Text(text).fontColor(index === this.currentIndex ? this.selected.fontColor : this.unselected.fontColor).fontSize(this.fontSize).fontWeight(500)
                }
                .width(180).height(70)
                .backgroundColor(index === this.currentIndex ? this.selected.bgColor: this.unselected.bgColor ).justifyContent(FlexAlign.Center).justifyContent(FlexAlign.Center)
                .borderRadius({topLeft:20,topRight:20}).margin({right:10})
                .onClick(()=>{
                  this.currentIndex = index;
                  this.selectedLine = -1;
                  if(index === 1) {
                    this.universalMarkRules = this.markRules.filter(item => item.itemno == 20 )
                  }else{
                    this.universalMarkRules = this.markRules.filter(item => this.currentItems.includes(item.itemno+''))
                  }
                })
              })
            }
            Row(){
              if(
                (Math.ceil(this.universalMarkRules.length / 7 - 1)) >= (this.currentIndex ? this.currentUniversalPageIndex: this.currentPageIndex) &&
                  (this.currentIndex ? this.currentUniversalPageIndex: this.currentPageIndex) > 0
              ){
                Row(){
                  Row(){}.width(36).height(36).backgroundImage($rawfile(`judge/km3/zuo_nor.png`)).margin({left:24,top:4})
                  Text('上一页'){}.fontColor('#FFF').fontSize(this.fontSize)
                }.width(160).height(80).justifyContent(FlexAlign.Start).alignItems(VerticalAlign.Center).backgroundImage($rawfile(`judge/km3/button_nor.png`)).backgroundImageSize({width:'100%',height:'100%'})
                .onClick(()=>{this.goPage(0)})
              }

              if(
                (Math.ceil(this.universalMarkRules.length / 7 - 1))  > (this.currentIndex ? this.currentUniversalPageIndex: this.currentPageIndex)
              ){
                Row(){
                  Text('下一页'){}.fontColor('#FFF').fontSize(this.fontSize).padding({left:30})
                  Row(){}.width(36).height(36).backgroundImage($rawfile(`judge/km3/you_nor.png`)).margin({left:4,top:4})
                }.width(160).height(80).justifyContent(FlexAlign.Start).alignItems(VerticalAlign.Center).backgroundImage($rawfile(`judge/km3/button_nor.png`)).backgroundImageSize({width:'100%',height:'100%'})
                .onClick(()=>{this.goPage(1)})
              }


              Row(){
                Text('扣  分'){}.fontColor('#FFF').fontSize(this.fontSize).padding({left:49})
              }.width(160).height(80).justifyContent(FlexAlign.Start).alignItems(VerticalAlign.Center).backgroundImage($rawfile(`judge/km3/button_nor.png`)).backgroundImageSize({width:'100%',height:'100%'})
               .onClick(()=>{
                 const index = this.currentIndex ? this.currentUniversalPageIndex: this.currentPageIndex;
                 const mark = this.universalMarkRules[index * 7 + this.selectedLine]
                 mark && this.confirmMark(mark.itemno,mark.markserial)
               })
            }
          }.width('100%').justifyContent(FlexAlign.SpaceBetween)
          Column(){
            ForEach(this.getCurrentMarkRuleList(),(item,index) => {
              Row(){
                Text(`${item.markshow} (${item.markcatalog})`).fontColor('#FFF').fontSize(this.fontSize).fontWeight(500)
                Row(){
                  Text(item.markreal + '').fontColor('#FFF').fontSize(this.fontSize).fontWeight(500)
                }
              }
              .width('100%').height(75).justifyContent(FlexAlign.SpaceBetween).alignItems(VerticalAlign.Center)
              .padding({left:20,right:20})
              .backgroundColor(this.getSelectedLine(index))
              .onClick(()=>{this.selectedLine = index})
            })
          }
        }
      }.width(1300).height(710).position({x:'15%',y:'10%'}).backgroundColor('#E6E3DF').padding({top:15,bottom:15,left:25,right:25}).borderRadius(20)
      Row(){}.width(100).height(100).position({y:'85%',x:'50%'}).backgroundImage($rawfile('judge/km3/close_nor.png')).backgroundImageSize({width:'100%',height:'100%'})
        .onClick(()=>{this.closePopup()})
    }.width('100%').height('100%').position({y:0}).backgroundColor('rgba(0,0,0,0.7)')
  }
}