import { getRecordsList, getMaintenanceType, getMaintenanceState } from '../api/originalRecords'
import { QueryParams, RecordsList, Row } from '../api/recordsType'
import { quarterTest, quarterType } from '../api/options/optionsType'
import { AxiosResponse } from '@ohos/axios'
import FilterDialog from '../dialog/FilterDialog'
import preferencesUtil from '../utils/preferences'
import { promptAction, router } from '@kit.ArkUI'
import ThemeTest from '../components/ThemeText'

interface routerParams {
  reportName: string
}
@Entry
@Component
struct MaintenanceRecords {
  // 记录类型列表
  @State maintenanceTypeList: quarterType[] = []
  // 记录state列表
  @State maintenanceStateList: quarterType[] = []
  @State params: QueryParams = {
    pageNum: 1,
    pageSize: 10,
    stateQuery: '3',
  }
  @State totalAll: number = 0
  // 原始记录列表
  @State recordsList: Row[] = []
  dialogController: CustomDialogController = new CustomDialogController({
    builder: FilterDialog({
      typeLists: this.maintenanceTypeList,
      statusLists: this.maintenanceStateList,
      recordsList: this.recordsList,
      params: this.params,
      totalAll: this.totalAll
    }),
    alignment: DialogAlignment.Top,
    customStyle: false,
    cornerRadius: 10
  })
  @State refreshing: boolean = false;
  @State refreshOffset: number = 0;
  @State refreshState: RefreshStatus = RefreshStatus.Inactive;
  @State canLoad: boolean = false;
  @State isLoading: boolean = false;
  @State loadingText: string = ''
  // 刷新测试数据
  private refreshData(){
    this.recordsList = []
    this.params = {
      pageSize: 10,
      pageNum: 1,
      stateQuery: '3'
    }
    const companyId: number = preferencesUtil.get('XF_COMPANY_ID', 0) as number
    const personId: number = preferencesUtil.get('XF_PERSON_ID', 0) as number
    this.params.companyId = companyId
    if(this.roleName == 'person') {
      this.params.technicalDirectorId = personId
    }
    getRecordsList(this.params).then((res: AxiosResponse<RecordsList>) => {
      this.recordsList = res.data.rows
      this.totalAll = res.data.total
      this.refreshing = false;
    })
  }

  // 加载更多测试数据
  private loadMoreData(){
    if(this.params.pageSize >= this.totalAll) {
      this.isLoading = false
      this.loadingText = '已加载全部数据'
    }else {
      this.params.pageSize += 10
      this.loadingText = '加载中'
      getRecordsList(this.params).then((res: AxiosResponse<RecordsList>) => {
        this.recordsList = res.data.rows
        this.totalAll = res.data.total
        this.isLoading = false
      })
    }
  }
  roleName = preferencesUtil.get('XF_ROLE_NAME', '')
  aboutToAppear(): void {
    let routerParams = router.getParams() as routerParams
    let reportName: string | undefined = routerParams?.reportName
    if(reportName) {
      this.params.reportName = reportName
    }
    const companyId: number = preferencesUtil.get('XF_COMPANY_ID', 0) as number
    const personId: number = preferencesUtil.get('XF_PERSON_ID', 0) as number
    this.params.companyId = companyId
    if(this.roleName == 'person') {
      this.params.technicalDirectorId = personId
    }

    getMaintenanceType().then((res: AxiosResponse<quarterTest>) => {
      this.maintenanceTypeList = res.data.data
    })
    getMaintenanceState().then((res: AxiosResponse<quarterTest>) => {
      this.maintenanceStateList = res.data.data
    })
  }
  onPageShow(): void {
    getRecordsList(this.params).then((res: AxiosResponse<RecordsList>) => {
      this.recordsList = res.data.rows
      this.totalAll = res.data.total
    })
  }
  // 获取类型
  getType = (arr: quarterType[], value: string): string => {
    const newValue = arr.filter((item: quarterType) => item.dictValue == value)
    return newValue[0]?.dictLabel || '月度'
  }
  // 获取主题
  getPrimary = (arr: quarterType[], value: string): string => {
    const newValue = arr.filter((item: quarterType) => item.dictValue == value)
    return newValue[0]?.listClass || 'info'
  }

  @Builder
  refreshBuilder() {
    Stack({ alignContent: Alignment.Bottom }) {
      // 可以通过刷新状态控制是否存在Progress组件
      // 当刷新状态处于下拉中或刷新中状态时Progress组件才存在
      if (this.refreshState != RefreshStatus.Inactive && this.refreshState != RefreshStatus.Done) {
        Row() {
          LoadingProgress().height(32)
          Text("Refreshing...").fontSize(16).margin({ left: 20 })
        }
        .alignItems(VerticalAlign.Center)
      }
    }
    .clip(true)
    .height("100%")
    .width("100%")
  }

  @Builder
  footer() {
    Row() {
      LoadingProgress().height(32).width(48)
        .visibility(this.isLoading ? Visibility.Visible : Visibility.None)
      Text(this.loadingText)
    }.width("100%")
    .height(64)
    .justifyContent(FlexAlign.Center)
  }

  build() {
    Column(){
      // 顶部搜索
      Row(){
        Image($r('app.media.back_light')).width(20).onClick(() => {
          router.back()
        })
        Search({ value: $$this.params.reportName, placeholder: '请输入【项目名称】' })
          .searchButton('搜索', {
            fontSize: 12
          })
          .width('95%')
          .height(30)
          .backgroundColor('#fff')
          .placeholderColor(Color.Grey)
          .placeholderFont({ size: 12, weight: 400 })
          .textFont({ size: 12, weight: 400 })
          .layoutWeight(1)
          .onSubmit(() => {
            this.recordsList = []
            this.params.pageSize = 10
            getRecordsList(this.params).then((res: AxiosResponse<RecordsList>) => {
              this.recordsList = res.data.rows
              this.totalAll = res.data.total
            })
          })
        Row(){
          Image($r('app.media.filter')).width(20).onClick(() => {
            this.dialogController.open()
          })
          Image($r('app.media.add')).width(20).onClick(() => {
            if(this.roleName == 'unapprovedPerson') {
              return promptAction.showToast({message: '请先在公司从业就职'})
            }
            router.pushUrl({
              url: 'pages/AddRecords'
            })
          })
        }.width(70).padding({left:5, right: 5}).justifyContent(FlexAlign.SpaceAround)
      }.padding({left: 5, right: 5})
      Refresh({ refreshing: $$this.refreshing, builder: this.refreshBuilder() }) {
        List({space: 10}) {
          ForEach(this.recordsList, (item: Row) => {
            ListItem(){
              Column({space: 10}){
                Row(){
                  Image($r('app.media.project')).width(16).margin({right: 10})
                  Text(item.reportName).fontSize(12).fontColor('#333').maxLines(2)
                    .textOverflow({overflow: TextOverflow.Ellipsis})
                }
                Row(){
                  Image($r('app.media.company')).width(16).margin({right: 10})
                  Text(item.applyCompanyName).fontSize(12).fontColor('#999')
                }
                Row(){
                  Image($r('app.media.dateTime')).width(16).margin({right: 10})
                  Text(`${item.maintenanceTime}~${item.maintenanceEndTime || ''}`).fontSize(12).fontColor('#999')
                }
                Row({space: 10}){
                  ThemeTest({
                    theme: this.getPrimary(this.maintenanceTypeList, item.reportType),
                    textValue: this.getType(this.maintenanceTypeList, item.reportType)
                  })
                  ThemeTest({
                    theme: this.getPrimary(this.maintenanceStateList, item.state),
                    textValue: this.getType(this.maintenanceStateList, item.state)
                  })
                }
              }.borderRadius(10).padding(10).backgroundColor('#fff').width('100%')
              .alignItems(HorizontalAlign.Start).onClick(() => {
                router.pushUrl({
                  url: 'pages/DetailRecords',
                  params: {
                    reportId: item.reportId
                  }
                })
              })
            }
          })
          ListItem() {
            this.footer();
          }
        }
        .onScrollIndex((start: number, end: number) => {
          // 当达到列表末尾时，触发新数据加载
          if (this.canLoad && end >= this.recordsList.length - 1) {
            this.canLoad = false;
            this.isLoading = true;
            this.loadMoreData()
          }
        })
        .onScrollFrameBegin((offset: number) => {
          // 只有当向上滑动时触发新数据加载
          if (offset > 5 && !this.isLoading) {
            this.canLoad = true;
          }
          return { offsetRemain: offset };
        })
        .scrollBar(BarState.Off)
        // 开启边缘滑动效果
        .edgeEffect(EdgeEffect.Spring, { alwaysEnabled: true })
      }
      .width('100%')
      .height('100%')
      .backgroundColor('#f2f3f7')
      .padding(10)
      .onOffsetChange((offset: number) => {
        this.refreshOffset = offset;
      })
      .onStateChange((state: RefreshStatus) => {
        this.refreshState = state;
      })
      .onRefreshing(() => {
        this.refreshData()
      })
    }.width('100%').height('100%')
  }


  pageTransition() {
    // 该页面退出动画时长为1200ms，尽量与另一页面的进入动画时长匹配
    PageTransitionExit({ duration: 500 })
      .translate({ x: 150.0 })
      .opacity(0)
  }
}