import {
  addParamsType,
  LatestProjectTest,
  LatestProjectDatum,
  equipmentTest,
  equipmentType,
  companyPersonTest,
  companyPersonRow,
  reportDetailTest,
  reportDetailData,
  projectType,
  RecordsList
} from '../api/recordsType'
import { quarterType, quarterTest } from '../api/options/optionsType'
import { getMaintenanceType, getLatestProjectList, getEquipmentList, addRecords, getCompanyPersonList, getReportDetail, updateRecords, getRecordsList } from '../api/originalRecords'
import { AxiosResponse } from '@ohos/axios'
import preferencesUtil from '../utils/preferences'
import { router, promptAction } from '@kit.ArkUI'
interface routerParams {
  reportId: number
}
let params = router.getParams() as routerParams
let reportId: number | undefined = params?.reportId
// 查看原始记录编号是否存在
let queryReportNo = async (reportNo: string) => {
  let res: AxiosResponse<RecordsList> = await getRecordsList({pageNum: 1, pageSize: 10, reportNo})
  return res.data.total > 0
}

// 模糊查询
//模糊查询1:利用字符串的indexOf方法
function searchByIndexOf(keyWord: string, list: equipmentType[]){
  if(!(list instanceof Array)){
    return ;
  }
  let len = list.length;
  let arr: equipmentType[] = []
  for(let i = 0;i < len;i++){
    //如果字符串中不包含目标字符会返回-1
    if(list[i].equipmentName.indexOf(keyWord) >= 0){
      arr.push(list[i]);
    }
  }
  return arr;
}

@Entry
@Component
struct EditUser {
  @Builder indicatorBuilder(icon: ResourceStr) {
    Image(icon)
  }
  searchController: SearchController = new SearchController()
  // 添加维保记录类型参数
  @State addForm: addParamsType = {
    reportName: '',
    reportNo: '',
    approvePerson: '',
    approvePersonId: 0,
    applyCompanyId: null,
    applyCompanyName: '',
    fireFacilities: '',
    result: '',
    equipment: '',
    maintenancePeople: '',
    maintenanceTime: '起始日期',
    state: '',
    reportType: '1',
    reportTime: '',
    maintenanceEndTime: '结束日期',
    projectList:  [],
    equipmentList: [],
    maintenancePeopleList: [],
    technicalDirectorId: ''
  }
  personId = preferencesUtil.get('XF_PERSON_ID', 0)
  // 回显数据使用
  @State viewEquipmentList: string[] = []
  @State fireFacilitiesList: string[] = []
  @State PeopleList: string[] = []
  @State isEdit: boolean = false
  // 公司在职人员列表
  @State companyPersonList: companyPersonRow[] = []
  // 选择维保记录类型
  @State recordsType: quarterType[] = []
  // 主要消防措施选择列表
  @State latestProjectList: LatestProjectDatum[] = []
  // 仪器设备选择列表
  @State equipmentList: equipmentType[] = []
  // 初始设备列表
  @State initEquipmentList: equipmentType[] = []
  @State errorMsg: string = ''
  flag: boolean = true
  async aboutToAppear() {
    this.isEdit = reportId !== undefined
    if(reportId){
      this.addForm.reportId = reportId
      const res: AxiosResponse<reportDetailTest> = await getReportDetail(reportId)
      let result: reportDetailData = res.data.data
      this.addForm.reportName = result.reportName
      this.addForm.applyCompanyName = result.applyCompanyName
      this.addForm.reportNo = result.reportNo
      this.addForm.reportType = result.reportType
      this.addForm.maintenanceTime = result.maintenanceTime
      this.addForm.maintenanceEndTime = result.maintenanceEndTime
      this.addForm.equipmentList = result.equipment.split(',')
      this.addForm.fireFacilities = result.fireFacilities
      this.addForm.maintenancePeople = result.maintenancePeople
      this.addForm.result = result.result.replace(/<.*?>/g, '')
      this.addForm.state = result.state
      this.addForm.technicalDirectorId = result.technicalDirectorId
      this.addForm.maintenancePeopleList = result.technicalDirectorId?.split(',')
      this.addForm.projectList = result.projectList.map(item => {
        return { projectId: item.projectId } as projectType
      })
      this.fireFacilitiesList = this.addForm.fireFacilities.split('、')
      this.viewEquipmentList = result.equipment.split(',')
      this.PeopleList = result.technicalDirectorId?.split(',') || []
    }
    getMaintenanceType().then((res: AxiosResponse<quarterTest>) => {
      this.recordsType = res.data.data
    })
    // 获取消防设施
    getLatestProjectList(this.addForm.reportType as string).then((res: AxiosResponse<LatestProjectTest>) => {
      this.latestProjectList = res.data.data
    })
    const companyId: number = preferencesUtil.get('XF_COMPANY_ID', 0) as number
    this.addForm.companyId = companyId
    // 获取仪器设备
    getEquipmentList({pageNum: 1, pageSize: 500, companyId: companyId }).then((res: AxiosResponse<equipmentTest>) => {
      this.equipmentList = res.data.rows
      this.initEquipmentList = res.data.rows
    })
    getCompanyPersonList({pageNum: 1, pageSize: 200, companyId: companyId, state: '2' }).then((res: AxiosResponse<companyPersonTest>) => {
      this.companyPersonList = res.data.rows
    })
  }

  @State changeValue: string = '';
  @State text: string = "请选择维保记录类型"
  @State index: number = 2
  @State space: number = 8
  @State arrowPosition: ArrowPosition = ArrowPosition.END

  build() {
    Column(){
      Scroll(){
        Column(){
          Column(){
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('项目名称')
              }.width(90)
              TextInput({placeholder: '请输入项目名称', text: $$this.addForm.reportName})
                .backgroundColor('#fff').layoutWeight(1)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Text('原始记录编号一经创建，不可修改，请谨慎').fontSize(12).fontColor('#ffba00').width('100%').textAlign(TextAlign.Start)
              .padding({top: 10, left: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('项目编号')
              }.width(90)
              Row({ space: 5 }){
                TextInput({placeholder: '请输入项目编号', text: $$this.addForm.reportNo})
                  .backgroundColor('#fff').showError(this.errorMsg).onBlur(async () => {
                  this.errorMsg = await queryReportNo(this.addForm.reportNo as string) ? '此原始记录编号已被使用' : ''
                })
              }.layoutWeight(1)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            .visibility(this.isEdit ? Visibility.None : Visibility.Visible)
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('项目编号')
              }.width(90)
              Row({ space: 5 }){
                Text(this.addForm.reportNo).fontColor('#c0c4cc')
                  .fontSize(16).padding({top: 8, bottom: 8, left: 16, right: 16})
              }.layoutWeight(1)
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            .visibility(this.isEdit ? Visibility.Visible : Visibility.None)
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('维保起始日期')
              }.width(120)
              Text(this.addForm.maintenanceTime).padding({top: 8, bottom: 8, left: 16, right: 16})
                .backgroundColor('#fff').layoutWeight(1).fontColor('#000').onClick(() => {
                CalendarPickerDialog.show({
                  onAccept: (value) => {
                    this.addForm.maintenanceTime = JSON.stringify(value).slice(1, 11)
                  }
                })
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('维保结束日期')
              }.width(120)
              Text(this.addForm.maintenanceEndTime).padding({top: 8, bottom: 8, left: 16, right: 16})
                .backgroundColor('#fff').layoutWeight(1).fontColor('#000').onClick(() => {
                CalendarPickerDialog.show({
                  onAccept: (value) => {
                    this.addForm.maintenanceEndTime = JSON.stringify(value).slice(1, 11)
                  }
                })
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Column({space: 10}){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('项目负责人')
              }.width('100%').justifyContent(FlexAlign.Start)
              Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start, wrap: FlexWrap.Wrap }) {
                ForEach(this.companyPersonList, (children: companyPersonRow) => {
                  Row() {
                    Radio({ value: children.personId.toString(), group: 'radioGroup',
                      indicatorType:RadioIndicatorType.TICK,
                    }).height(14).width(14).checked(this.addForm.approvePersonId == children.personId)
                    Text(children.personName).fontSize(14)
                  }
                })
                Text('公司暂无人员').visibility(this.companyPersonList.length == 0 ? Visibility.Visible : Visibility.None)
              }.margin({right:15})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Column({space: 10}){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('维保人员')
              }.width('100%').justifyContent(FlexAlign.Start)
              Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start, wrap: FlexWrap.Wrap }) {
                Row(){
                  CheckboxGroup({ group: 'checkboxGroup3' })
                    .checkboxShape(CheckBoxShape.ROUNDED_SQUARE)
                    .selectedColor('#1890ff')
                    .onChange((itemName: CheckboxGroupResult) => {
                      this.addForm.maintenancePeople = itemName.name.join(',')
                    })
                    .mark({
                      strokeColor:Color.White,
                      size: 12,
                      strokeWidth: 2
                    })
                    .unselectedColor('#eee')
                    .width(15)
                    .height(15)
                  Text('选择全部').fontSize(14)
                }.margin({right: 10})
                ForEach(this.companyPersonList, (children: companyPersonRow) => {
                  Row(){
                    Checkbox({ name: children.personName, group: 'checkboxGroup3' })
                      .selectedColor('#1890ff')
                      .select(this.PeopleList.includes(children.personId.toString()))
                      .shape(CheckBoxShape.ROUNDED_SQUARE)
                      .onChange((value: boolean) => {
                        if(value){
                          this.addForm.maintenancePeopleList?.push(children.personId.toString())
                        }else {
                          this.addForm.maintenancePeopleList = this.addForm.maintenancePeopleList?.filter((item: string) => item !== children.personId.toString())
                        }
                        this.addForm.technicalDirectorId = this.addForm.maintenancePeopleList?.join(',')
                      })
                      .mark({
                        strokeColor:Color.White,
                        size: 12,
                        strokeWidth: 2
                      })
                      .unselectedColor('#eee')
                      .width(15)
                      .height(15)
                    Text(children.personName).fontSize(14)
                  }.margin({right: 10})
                })
                Text('公司暂无人员').visibility(this.companyPersonList.length == 0 ? Visibility.Visible : Visibility.None)
              }.margin({right:15})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Column(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('消防设施使用管理单位')
              }.justifyContent(FlexAlign.Start).width('100%')
              TextInput({placeholder: '请输入消防设施管理单位', text: $$this.addForm.applyCompanyName})
                .backgroundColor('#fff')
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Row(){
              Row(){
                Text('备注')
              }.width(100)
              TextArea({
                text: $$this.addForm.result,
                placeholder: '请输入内容'
              }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff')
                .border({width: 1, color: "#eee"})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Column(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('维保记录类型')
              }.width('100%').justifyContent(FlexAlign.Start).margin({bottom: 8})
              Flex({ direction: FlexDirection.Row, justifyContent: FlexAlign.Start, alignItems: ItemAlign.Start, wrap: FlexWrap.Wrap }) {
                ForEach(this.recordsType, (item: quarterType) => {
                  Stack(){
                    Row() {
                      Radio({ value: item.dictValue, group: 'radioGroup' })
                        .radioStyle({ checkedBackgroundColor: '#1890ff' })
                        .height(15)
                        .width(15)
                        .checked(item.dictValue == this.addForm.reportType)
                      Text(item.dictLabel)
                    }.margin({right: 5,bottom: 5})
                    Row().width(80).height(30).backgroundColor(Color.White).opacity(0.1)
                      .onClick(() => {
                      this.addForm.reportType = item.dictValue
                      if(this.flag) {
                        this.addForm.projectList = []
                        this.fireFacilitiesList = []
                        this.addForm.fireFacilities = ''
                        this.flag = false
                        getLatestProjectList(item.dictValue).then((res: AxiosResponse<LatestProjectTest>) => {
                          this.latestProjectList = res.data.data
                          this.flag = true
                        })
                      }
                    })
                  }
                })
              }
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Column({space: 10}){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('主要消防设施')
              }.width('100%').justifyContent(FlexAlign.Start)
              Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
                Row(){
                  CheckboxGroup({ group: 'checkboxGroup' })
                    .checkboxShape(CheckBoxShape.ROUNDED_SQUARE)
                    .selectedColor('#1890ff')
                    .onChange((itemName: CheckboxGroupResult) => {
                      this.addForm.fireFacilities = itemName.name.join('、')
                    })
                    .mark({
                      strokeColor:Color.White,
                      size: 12,
                      strokeWidth: 2
                    })
                    .unselectedColor('#eee')
                    .width(15)
                    .height(15)
                  Text('选择全部').fontSize(14)
                }.margin({right: 10})
                ForEach(this.latestProjectList, (children: LatestProjectDatum) => {
                  Row(){
                    Checkbox({ name: children.projectName, group: 'checkboxGroup' })
                      .selectedColor('#1890ff')
                      .select(this.fireFacilitiesList.includes(children.projectName))
                      .shape(CheckBoxShape.ROUNDED_SQUARE)
                      .onChange((value) => {
                        if(value){
                          this.addForm.projectList?.push({ projectId: children.projectId })
                        } else {
                          this.addForm.projectList = this.addForm.projectList?.filter((item) => item.projectId !== children.projectId)
                        }
                      })
                      .mark({
                        strokeColor:Color.White,
                        size: 12,
                        strokeWidth: 2
                      })
                      .unselectedColor('#eee')
                      .width(15)
                      .height(15)
                    Text(children.projectName).fontSize(14)
                  }.margin({right: 10})
                })
              }.margin({right:15})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            Column({space: 10}){
              Row(){
                Row(){
                  Text('仪器设备')
                }.margin({right: 10})
                Search({ 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((value) => {
                    if(value.trim() == '') {
                      this.equipmentList = this.initEquipmentList
                    } else {
                      this.equipmentList = searchByIndexOf(value, this.initEquipmentList) as equipmentType[]
                    }
                  })
              }.width('100%').justifyContent(FlexAlign.Start)
              Flex({ justifyContent: FlexAlign.Start, alignItems: ItemAlign.Center, wrap: FlexWrap.Wrap }) {
                Row(){
                  CheckboxGroup({ group: 'checkboxGroup2' })
                    .checkboxShape(CheckBoxShape.ROUNDED_SQUARE)
                    .selectedColor('#1890ff')
                    .onChange((itemName: CheckboxGroupResult) => {
                      this.addForm.equipmentList = itemName.name
                      this.addForm.equipment = itemName.name.join(',')
                    })
                    .mark({
                      strokeColor:Color.White,
                      size: 12,
                      strokeWidth: 2
                    })
                    .unselectedColor('#eee')
                    .width(15)
                    .height(15)
                  Text('选择全部').fontSize(14)
                }.margin({right: 10})
                ForEach(this.equipmentList, (children: equipmentType) => {
                  Row(){
                    Checkbox({ name: children.equipmentName, group: 'checkboxGroup2' })
                      .selectedColor('#1890ff')
                      .select(this.viewEquipmentList.includes(children.equipmentName))
                      .shape(CheckBoxShape.ROUNDED_SQUARE)
                      .mark({
                        strokeColor:Color.White,
                        size: 12,
                        strokeWidth: 2
                      })
                      .unselectedColor('#eee')
                      .width(15)
                      .height(15)
                    Text(children.equipmentName).fontSize(14)
                  }.margin({right: 10})
                })
              }.margin({right:15})
            }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
          }.backgroundColor('#fff').width('100%').padding({left: 5, right: 5}).borderRadius(10)
        }.padding(10).margin({bottom: 20, top: 10})
      }.layoutWeight(1).scrollBar(BarState.Off)
      Row(){
        Text('提交').borderRadius(5).width('100%').height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .onClick(async () => {
            if(this.addForm.reportName == '') {
              return promptAction.showToast({message: '项目名称为必填项'})
            } else if(this.addForm.reportNo == '') {
              return promptAction.showToast({message: '项目编号为必填项'})
            } else if(this.addForm.applyCompanyName == ''){
              return promptAction.showToast({message: '消防设施管理单位为必填项'})
            } else if(this.addForm.maintenanceTime == '请选择起始日期' || this.addForm.maintenanceEndTime == '请选择结束日期'){
              return promptAction.showToast({message: '维保日期为必填项'})
            } else if(this.addForm.fireFacilities == ''){
              return promptAction.showToast({message: '至少选择一下消防设施'})
            } else if(this.addForm.maintenancePeople == ''){
              return promptAction.showToast({message: '请选择维保人员'})
            }
            if(this.errorMsg !== '') {
              return promptAction.showToast({message: '校验失败'})
            }
            if(!this.addForm.maintenancePeopleList?.includes(this.personId.toString())){
              return promptAction.showToast({message: '本人必须在维护人员中'})
            }
            if(this.isEdit){
              console.log(JSON.stringify(this.addForm))
              await updateRecords(this.addForm)
              promptAction.showToast({
                message: '更新成功'
              })
            } else {
              this.addForm.maintenanceDate = [this.addForm.maintenanceTime as string, this.addForm.maintenanceEndTime as string]
              await addRecords(this.addForm)
              promptAction.showToast({
                message: '添加成功'
              })
            }
          })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}