import { LitheRefresh, RefreshController } from "@abner/lithe_refresh"
import { AxiosError } from "@ohos/axios"
import { ToastUtil } from "@pura/harmony-utils"
import AppConstants from "../../app/AppConstant"
import { MainRecordResultModel } from "../../model/resultModel/MainResultModel"
import { ErrorOfEmptyModel } from "../../model/uiModel/BeanModel"
import { SkipHistoryDetailsParam } from "../../model/uiModel/PageParamModel"
import { queryMainRecordList } from "../../request/api/Api"
import { cardRoundBorderGreyStyle, cardRoundBorderStyle } from "../../style/BorderStyle"
import { IdCardNumUtils } from "../../util/IdCardNumUtils"
import { StringUtils } from "../../util/StringUtils"
import { ToastUtils } from "../../util/ToasUtils"
import { router } from "@kit.ArkUI"
import { DateUtils } from "../../util/DateUtils"

/*
 * 卡点核录记录 街面盘查
 */
@Preview({
  title: 'ContentTable'
})
@Component
export struct StreetSearchHistoryFragment{

  @State inputContent: string | undefined = undefined

  @State beginTime: string | undefined = undefined
  @State endTime: string | undefined = undefined
  @State recordDescription: string = "共搜索到 0 条"
  @State recordList: Array<MainRecordResultModel> = [];
  controller: RefreshController = new RefreshController()
  scroller: Scroller = new Scroller()
  total: number = 0;
  pageNum: number = 1;
  isRefreshStatus: number = 0;

  aboutToAppear(): void {
    setTimeout(() => {
      this.controller.isAutoRefresh = true
    }, 300)
  }

  getRecordListData() {
    if (this.inputContent){
      if (!IdCardNumUtils.validateIdCardNum(this.inputContent)) {
        ToastUtil.showToast("请检查身份证号是否正确！")
        this.controller.finishRefresh()
        this.controller.finishLoadMore()
        this.isRefreshStatus = 0
        return
      }
    }

    queryMainRecordList(0, "", this.pageNum, StringUtils.get(this.beginTime, ""," 00:00:00"),
      StringUtils.get(this.endTime, ""," 23:59:59"),StringUtils.get(this.inputContent,""))
      .then((res) => {
        console.debug("查询主记录列表成功", JSON.stringify(res))
        if (res.code == 200) {
          let data = res.data;
          if (data) {
            this.total = data.total;
            this.recordDescription = `共搜索到 ${data.total} 条`
            let list = data.rows
            if (list) {
              if (this.isRefreshStatus == 1){
                this.isRefreshStatus = 0
                this.recordList = new Array;
                this.controller.finishRefresh()
              }
              if (this.isRefreshStatus = 2){
                this.isRefreshStatus = 0
                this.controller.finishLoadMore()
              }
              list.forEach((item) => {
                this.recordList.push(item)
              })
              if (this.pageNum * 20 >= this.total) {
                this.controller.closeLoadMore = true
              }
            }else {
              this.handlerErrorOrEmpty(new ErrorOfEmptyModel(0, "没有数据！"))
            }
          }else {
            this.handlerErrorOrEmpty(new ErrorOfEmptyModel(0, "没有数据！"))
          }
        } else {
          this.handlerErrorOrEmpty(new ErrorOfEmptyModel(-1, StringUtils.get(res.msg, "获取失败！")));
        }
      })
      .catch((e: AxiosError) => {
        console.debug("查询主记录列表失败", e.message)
        this.handlerErrorOrEmpty(new ErrorOfEmptyModel(-1, e.message));

      })
  }


  handlerErrorOrEmpty(model: ErrorOfEmptyModel) {
    ToastUtils.toastBottom(model.msg)
    if (this.isRefreshStatus == 1) {
      //刷新
      this.controller.finishRefresh()
      this.recordList = new Array
    }
    if (this.isRefreshStatus == 2) {
      //加载
      this.controller.finishLoadMore()
    }
    this.isRefreshStatus = 0
  }


  /**
   * 时间选择
   * @param type startTime/endTime
   */
  showTimePicker(type: string) {
    let currentTime = new Date()
    if (type == 'startTime') {
      let start = DateUtils.pastStrDate(this.beginTime);
      currentTime = start == null ? new Date() : start

    }
    if (type == 'endTime') {
      let end = DateUtils.pastStrDate(this.endTime);
      currentTime = end == null ? new Date() : end
    }

    DatePickerDialog.show({
      start: new Date('2020-1-1'),
      end: new Date('2030-12-31'),
      selected: currentTime,
      lunar: false, // 是否显示农历
      showTime: false, // 是否显示时间
      onAccept: (value: DatePickerResult) => {
        let month = (value.month? value.month : 0)+1
        let data = value.year + '-' + DateUtils.padZero(month) + '-' + DateUtils.padZero(value.day)
        if (type == 'startTime') {
          this.beginTime = data
        }
        if (type == 'endTime') {
          this.endTime = data
        }
        console.info('确认日期:', value.toString());
      },
      onCancel: () => {
        console.info('用户取消选择');
      }
    });
  }

  build() {
    Column() {
      this.searchContent()

      Text(this.recordDescription)
        .fontSize($r('app.float.text_size_12'))
        .fontColor($r('app.color.colorGrey8'))
        .textAlign(TextAlign.Center)

      LitheRefresh({
        scroller: this.scroller,
        controller: this.controller,
        itemLayout: () => {
          this.listView()
        },
        onRefresh: () => {
          this.controller.closeLoadMore = false;
          this.pageNum = 1;
          this.isRefreshStatus = 1;
          this.getRecordListData()
        },
        onLoadMore: () => {
          if (this.pageNum * 30 >= this.total) {
            this.controller.finishLoadMore()
            this.controller.closeLoadMore = true;
            ToastUtil.showToast("没有更多数据!")
            return
          }
          this.pageNum++;
          this.isRefreshStatus = 2;
          this.getRecordListData()
        }
      })
        .width(AppConstants.PERCENTAGE_MAX)
        .layoutWeight(1)
    }
    .backgroundColor($r('app.color.page_background'))
    .width(AppConstants.PERCENTAGE_MAX)
    .height(AppConstants.PERCENTAGE_MAX)
  }

  @Builder
  searchContent() {
    Column() {
      Row() {
        Text('人员信息：')
          .fontSize($r('app.float.text_size_16'))
          .fontColor($r('app.color.colorGrey8'))
          .height($r('app.float.default_40'))
          .margin({
            left: $r('app.float.default_10'),
            top: $r('app.float.default_10')
          })
          .textAlign(TextAlign.Center);

        TextInput({text:this.inputContent,placeholder:"请输入被核验人员证件号码"})
          .placeholderColor( $r('app.color.colorGrey6'))
          .fontSize($r('app.float.text_size_16'))
          .fontColor($r('app.color.colorGrey8') )
          .margin({
            right: $r('app.float.default_10'),
            top: $r('app.float.default_10')
          })
          .padding({
            left: $r('app.float.default_5'),
            right: $r('app.float.default_5'),
          })
          .onChange((text: string) => {
            this.inputContent = text;
          })
          .height($r('app.float.default_40'))
          .layoutWeight(1)
          .width($r('app.float.default_88'))
          .textAlign(TextAlign.Start)
          .border(cardRoundBorderGreyStyle);

      }
      .width('95%')
      .margin({
        left: $r('app.float.default_10'),
        right: $r('app.float.default_10'),
        top: $r('app.float.default_10')
      });

      Row() {
        Row() {
          Text(StringUtils.get(this.beginTime, "开始时间"))
            .fontSize($r('app.float.text_size_16'))
            .fontColor(this.beginTime ? $r('app.color.colorGrey8') : $r('app.color.colorGrey6'))
            .margin({
              right: $r('app.float.default_5'),
            })
            .height($r('app.float.default_40'))
            .layoutWeight(1)
            .padding({
              left: $r('app.float.default_5'),
              right: $r('app.float.default_5'),
            })
            .width($r('app.float.default_88'))
            .textAlign(TextAlign.Start);

          Image($r('app.media.log_rl'))
            .width($r('app.float.default_20'))
            .height($r('app.float.default_20'));
        }
        .alignItems(VerticalAlign.Center)
        .layoutWeight(1)
        .onClick(() => {
          this.showTimePicker('startTime')
        })

        Divider()
          .width($r('app.float.default_1'))
          .height($r('app.float.default_40'))
          .backgroundColor($r('app.color.colorGrey2'))
          .margin({
            right: $r('app.float.default_5'),
            left: $r('app.float.default_5')
          });

        Row() {
          Text(StringUtils.get(this.endTime, "结束时间"))
            .fontSize($r('app.float.text_size_16'))
            .fontColor(this.endTime ? $r('app.color.colorGrey8') : $r('app.color.colorGrey6'))
            .margin({
              right: $r('app.float.default_5'),
            })
            .height($r('app.float.default_40'))
            .layoutWeight(1)
            .padding({
              left: $r('app.float.default_5'),
              right: $r('app.float.default_5'),
            })
            .width($r('app.float.default_88'))
            .textAlign(TextAlign.Start);

          Image($r('app.media.log_rl'))
            .width($r('app.float.default_20'))
            .height($r('app.float.default_20'))
            .margin({
              right: $r('app.float.default_5'),
            });
        }
        .alignItems(VerticalAlign.Center)
        .layoutWeight(1)
        .onClick(() => {
          this.showTimePicker('endTime')
        })

      }
      .border(cardRoundBorderGreyStyle)
      .width('95%')
      .margin({
        left: $r('app.float.default_5'),
        right: $r('app.float.default_5'),
      })
      .margin($r('app.float.default_10'));

      Button("搜索", { type: ButtonType.Normal, stateEffect: true })
        .fontSize($r('app.float.text_size_16'))
        .fontColor($r('app.color.white'))
        .backgroundColor($r('app.color.bull'))
        .borderRadius(8)
        .margin({
          left: $r('app.float.default_10'),
          right: $r('app.float.default_10'),
          bottom: $r('app.float.default_10'),
        })
        .onClick(() => {
          this.controller.isAutoRefresh = true
        })
        .width('95%');
    }
    .width('95%')
    .backgroundColor($r('app.color.white'))
    .border(cardRoundBorderStyle)
    .margin($r('app.float.default_10'))
  }

  @Builder
  listView() {
    List({ scroller: this.scroller }) {
      ForEach(this.recordList, (item: MainRecordResultModel, index) => {
        ListItem() {
          this.itemView(item)
        }
        .onClick(()=>{
            let param:SkipHistoryDetailsParam = {
              pctime: item.checkTime,
              policenum: item.policeName,
              policename: item.policeName,
              pcyy: item.checkReason,
              yjdw: item.yjdwmc,
              mainId: item.mainId,
              status: item.status,
              address: item.checkAddress,
              taskName: item.taskName,
              type: 0
            }
            router.pushUrl({url:"ui/pages/HistoryDetailsPage",params:param})
        })
      })
    }
    .width(AppConstants.PERCENTAGE_MAX)
    .layoutWeight(1)
    .listDirection(Axis.Vertical)
    .scrollBar(BarState.Off)
    .edgeEffect(EdgeEffect.None)
    .nestedScroll({
      scrollForward: NestedScrollMode.PARENT_FIRST,
      scrollBackward: NestedScrollMode.PARENT_FIRST
    })
  }

  @Builder
  itemView(item: MainRecordResultModel) {
    Column() {
      Row() {
        Text("时间：")
          .fontColor($r('app.color.colorGrey8'))
          .fontSize($r('app.float.text_size_14'))

        Text(item.checkTime)
          .fontColor($r('app.color.colorGrey8'))
          .fontSize($r('app.float.text_size_14'))
          .margin({ left: $r('app.float.default_5') })

        Text(item.status == 1 ? "移交" : "通过")
          .fontColor(item.status == 1 ? $r('app.color.colorYellow7') : $r('app.color.colorBluen7'))
          .backgroundColor(item.status == 1 ? $r('app.color.colorYellow2') : $r('app.color.colorBluen2'))
          .fontSize($r('app.float.text_size_12'))
          .border({
            width:$r('app.float.default_1'),
            color: item.status == 1 ? $r('app.color.colorYellow6') : $r('app.color.colorBluen6'),
            radius: $r('app.float.default_20'),
          })
          .padding({left: $r('app.float.default_8'), right: $r('app.float.default_8'),
            top: $r('app.float.default_2'), bottom: $r('app.float.default_2')})
          .textAlign(TextAlign.Center)
          .margin({ left: $r('app.float.default_5') })

      }
      .width('95%')

      Row() {
        Text("地址：")
          .fontColor($r('app.color.colorGrey6'))
          .fontSize($r('app.float.text_size_14'))
        Text(item.checkAddress)
          .fontColor($r('app.color.colorGrey6'))
          .fontSize($r('app.float.text_size_14'))
      }
      .width('95%')
      .margin({ top: $r('app.float.default_5') })

      Row() {
        Column() {
          Text("总人数/异常数")
            .fontColor($r('app.color.colorGrey6'))
            .fontSize($r('app.float.text_size_14'))
          Row() {
            Text(StringUtils.get(item.peopleCount,"0","人"))
              .fontColor($r('app.color.bull'))
              .fontSize($r('app.float.text_size_14'))
            Text("/")
              .fontColor($r('app.color.colorGrey6'))
              .fontSize($r('app.float.text_size_14'))
            Text(StringUtils.get(item.unusualPeopleCount,"0","人"))
              .fontColor($r('app.color.colorYellow8'))
              .fontSize($r('app.float.text_size_14'))
          }
          .justifyContent(FlexAlign.Center)
          .margin({ top: $r('app.float.default_5') })
        }
        .justifyContent(FlexAlign.Center)
        .height($r('app.float.default_52'))
        .layoutWeight(1)
        .border(cardRoundBorderGreyStyle)

        Column() {
          Text("车牌")
            .fontColor($r('app.color.colorGrey6'))
            .fontSize($r('app.float.text_size_14'))

          Text(StringUtils.get(item.carNum,"-"))
            .fontColor($r('app.color.bull'))
            .fontSize($r('app.float.text_size_14'))
            .margin({ top: $r('app.float.default_5') })
        }
        .justifyContent(FlexAlign.Center)
        .height($r('app.float.default_52'))
        .layoutWeight(1)
        .margin({ left: $r('app.float.default_5'), right: $r('app.float.default_5') })
        .border(cardRoundBorderGreyStyle)

        Column() {
          Text("物品")
            .fontColor($r('app.color.colorGrey6'))
            .fontSize($r('app.float.text_size_14'))

          Text(this.getGoodCount(item.goodsCount))
            .fontColor($r('app.color.bull'))
            .fontSize($r('app.float.text_size_14'))
            .margin({ top: $r('app.float.default_5') })
        }
        .justifyContent(FlexAlign.Center)
        .height($r('app.float.default_52'))
        .layoutWeight(1)
        .border(cardRoundBorderGreyStyle)

      }
      .width('95%')
      .margin({ top: $r('app.float.default_5') })
    }
    .width('95%')
    .backgroundColor($r('app.color.white'))
    .border(cardRoundBorderStyle)
    .padding($r('app.float.default_10'))
    .margin($r('app.float.default_10'))

  }

  getGoodCount(goodsCount:string):string{
    let count =  StringUtils.get(goodsCount,"-")
    if (count == "0") {
      return "-"
    }
    return count;
  }
}