import { CompDTO, ContentDTO } from 'wdBean/Index'
import { LazyDataSource, NetworkUtil, UserDataLocal } from 'wdKit/Index'
import { HttpUtils } from 'wdNetwork/Index'
import SearcherAboutDataModel from '../../model/SearcherAboutDataModel'
import { SearchSuggestRequestItem } from '../../viewmodel/SearchSuggestRequestItem'
import { CardParser } from '../CardParser'
import { EmptyComponent } from '../view/EmptyComponent'
import { SearchResultContentComponent } from './SearchResultContentComponent'

const TAG = "SearchResultComponent"

/**
 * 搜索结果
 * 搜索结果为null（空布局 + 为你推荐）
 */
@Component
export struct SearchResultComponent {
  @Prop count: string[]
  @Prop searchText: string
  @Prop isGetRequest:boolean = false;
  @State currentIndex: number = 0
  private controller: TabsController = new TabsController()
  fontColor: string = '#999999'
  selectedFontColor: string = '#000000'
  @State data: LazyDataSource<ContentDTO> = new LazyDataSource();
  @State suggest_count: number = 0;
  @State isLoading: boolean = false
  scroller: Scroller = new Scroller()
  onClickTryAgain?: () => void;
  @State isConnectNetwork : boolean = NetworkUtil.isNetConnected()
  @Prop percent:number = 1
  @Prop sameSearch:number = 0


  aboutToAppear(): void {
    if (this.count.length === 0 && this.isGetRequest == true) {
      this.getSuggestData()
    }
  }

  getSuggestData() {
    this.isLoading = true

    let request: SearchSuggestRequestItem = new SearchSuggestRequestItem(2, "", "", HttpUtils.getImei(), UserDataLocal.getUserId(), 8, "")

    SearcherAboutDataModel.getSearchSuggestData(request, getContext(this)).then((value) => {
      value.forEach((item) => {
        if(item.objectType != "13"){
          this.data.push(item)
        }
      })
      this.data.notifyDataReload()
      this.suggest_count = this.data.totalCount()
      this.isLoading = false

      if(this.suggest_count === 0 && value.length > 0){
        this.suggest_count = -1
        if(!this.isLoading){
          this.getSuggestData()
        }
      }else if(this.suggest_count <= 20 && value.length > 0){
        if(!this.isLoading){
          this.getSuggestData()
        }
      }
    })
  }

  build() {
    Column() {
      if (this.count != null && this.count.length === 0 && this.isGetRequest == true) {
        List() {
          ListItem() {
            //缺省图
            if(this.isConnectNetwork){
              EmptyComponent({emptyType:4})
                .height('70%')
                .width('100%')
            }else{
              EmptyComponent({ emptyType: 1,emptyHeight:"100%" ,retry: () => {
                this.isConnectNetwork = NetworkUtil.isNetConnected()
                if(this.isConnectNetwork){
                  if (this.onClickTryAgain !== undefined) {
                    this.onClickTryAgain()
                  }
                }
              }})
                .height("100%")
                .width('100%')
            }
          }
          if(this.suggest_count > 0){
            ListItem() {
              Row() {
                Image($r('app.media.search_suggest_icon'))
                  .width(`${this.calcHeight(6)}lpx`)
                  .height(`${this.calcHeight(31)}lpx`)
                  .objectFit(ImageFit.Cover)
                  .interpolation(ImageInterpolation.High)
                  .margin({ right: `${this.calcHeight(10)}lpx` })
                Text("为你推荐")
                  .textAlign(TextAlign.Start)
                  .fontWeight(600)
                  .fontSize(`${this.calcHeight(33)}lpx`)
                  .lineHeight(`${this.calcHeight(46)}lpx`)
                  .fontColor($r('app.color.color_222222'))
              }.height(`${this.calcHeight(84)}lpx`)
              .padding({ left: `${this.calcHeight(31)}lpx`, right: `${this.calcHeight(31)}lpx` })
              .width('100%')
              .alignItems(VerticalAlign.Center)
            }
          }

          LazyForEach(this.data, (item: ContentDTO, index: number) => {
            ListItem() {
              Column() {
                CardParser({compDTO:new CompDTO,contentDTO:item})
                if (index != this.data.totalCount() - 1) {
                  Divider()
                    .width('100%')
                    .height(`${this.calcHeight(1)}lpx`)
                    .color($r('app.color.color_F5F5F5'))
                    .strokeWidth(`${this.calcHeight(1)}lpx`)
                }
              }
            }
          })
        }
        .cachedCount(6)
        .edgeEffect(EdgeEffect.None)
        .scrollBar(BarState.Off)
        .height('100%')
        .onReachEnd(() => {
          if (!this.isLoading) {
            this.getSuggestData()
          }
        })
      } else {
        Tabs({ barPosition: BarPosition.Start, controller: this.controller }) {
          ForEach(this.count, (item: string, index: number) => {
            TabContent() {
              SearchResultContentComponent({ keywords: this.searchText, searchType: item ,sameSearch:this.sameSearch,isCurrentShow:this.currentIndex === index})
            }.tabBar(this.TabBuilder(index, item))
            .layoutWeight(1)
          }, (item: string) => item)
        }
        .vertical(false)
        .barMode(BarMode.Fixed)
        .barWidth('100%')
        .barHeight(`${this.calcHeight(84)}lpx`)
        .animationDuration(0)
        .width('100%')
        .scrollable(false)
        .layoutWeight(1)
      }
    }.width('100%')
    .layoutWeight(1)
    .margin({ top: `${this.calcHeight(12)}lpx` })
  }

  @Builder
  TabBuilder(index: number, item: string) {
    Stack() {
      Text(item)
        .height(`${this.calcHeight(38)}lpx`)
        .fontSize(`${this.calcHeight(33)}lpx`)
        .fontWeight(this.currentIndex === index ? 600 : 400)
        .fontColor(this.currentIndex === index ? this.selectedFontColor : this.fontColor)
        .lineHeight(`${this.calcHeight(38)}lpx`)

      if (this.currentIndex === index) {
        Divider()
          .width(`${this.calcHeight(31)}lpx`)
          .height(`${this.calcHeight(4)}lpx`)
          .color('#ED2800')
          .strokeWidth(`${this.calcHeight(4)}lpx`)
          .margin({ top: `${this.calcHeight(50)}lpx` })
          .id("divTag")
      }
    }.onClick(() => {
      this.currentIndex = index
      this.controller.changeIndex(this.currentIndex)
    })
    .height('100%')
    .margin({ right: `${this.calcHeight(9)}lpx` })
    .padding({ left: `${this.calcHeight(31)}lpx`, right: index === this.count.length - 1 ? `${this.calcHeight(31)}lpx` : "0lpx" })
  }

  calcHeight(value:number): number{
    return value * this.percent
  }
}