import {
  addParamsType,
  LatestProjectTest,
  LatestProjectDatum,
  equipmentTest,
  equipmentType,
  companyPersonTest,
  companyPersonRow,
  reportDetailTest,
  reportDetailData,
  projectType,
  RecordsList
} from '../api/recordsType'
import NavHeader from '../components/NavHeader'
import AreaPickerDialog from '../dialog/AreaPickerDialog'
import LoadingDialog from '../dialog/LoadingDialog'
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'
import { Color } from '@ohasasugar/hp-richtext/src/main/ets/common/types/artUIEnum'

interface routerParams {
  reportId: number
}
interface comprehensiveType {
  range: string;
  facility: string;
  existingProblem: string;
  cumulativeIssues: string;
  correctedProblems: string;
  other: string;
}
let params = router.getParams() as routerParams
let reportId: number | undefined = params?.reportId
let personId = preferencesUtil.get('XF_PERSON_ID', 0)
let companyId: number = preferencesUtil.get('XF_COMPANY_ID', 0) as number
let roleName = preferencesUtil.get('XF_ROLE_NAME', '')


// 查看原始记录编号是否存在
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;
}

// 提取的富文本内容分别赋值
function multiply(range: string, facility: string, existingProblem: string,cumulativeIssues:string, correctedProblems: string, ...other: string[]){
  let otherValue: string = ''
  if(Array.isArray(other)) {
    otherValue = other.length > 1 ? other?.slice(1).join('、') : other[0].slice(3)
  }
  let newObj:comprehensiveType = {
    range: range.split('：')[1],
    facility: facility.split('：')[1],
    existingProblem: existingProblem.split('：')[1],
    cumulativeIssues: cumulativeIssues.split('：')[1],
    correctedProblems: correctedProblems.split('：')[1],
    other: otherValue
  }
  return newObj
}

// 提取富文本中的内容解析后导出
function extractRichText(str: string | null): comprehensiveType{
  if(str === null) {
    return {
      range: '',
      facility: '',
      existingProblem: '',
      cumulativeIssues: '',
      correctedProblems: '',
      other: '',
    }
  } else {
    let richText = str.replace(/<.*?>/g, '?')
    let arrValue: string[] = richText.split('?').filter(item => item !== '')
    let otherValue: string[] = []
    let existingProblem: string = ''
    let cumulativeIssues: string = ''
    let correctedProblems: string = ''
    if(arrValue.length >= 2){
      for (let index = 2; index < arrValue.length; index++) {
        if(arrValue[index].split('：')[0] === '本月发现的问题' || arrValue[index].split('：')[0] === '存在问题' ) {
          existingProblem = arrValue[index].split('：')[1]
        } else if(arrValue[index].split('：')[0] === '遗留未整改的问题' || arrValue[index].split('：')[0] === '累计问题') {
          cumulativeIssues = arrValue[index].split('：')[1]
        } else if(arrValue[index].split('：')[0] === '本月已整改的问题' || arrValue[index].split('：')[0] === '已整改问题') {
          correctedProblems = arrValue[index].split('：')[1]
        } else {
          otherValue.push(arrValue[index].slice(3))
        }
      }
       return {
        range: arrValue[0].split('：')[1],
        facility: arrValue[1].split('：')[1],
        existingProblem: existingProblem,
        cumulativeIssues: cumulativeIssues,
        correctedProblems: correctedProblems,
        other: otherValue.join('、')
      }
    } else {
      return {
        range: '',
        facility: '',
        existingProblem: '',
        cumulativeIssues: '',
        correctedProblems: '',
        other: str.replace(/<.*?>/g, ''),
      }
    }
  }
}

// 提交修改时合并富文本内容
function mergeRichText(comprehensive: comprehensiveType): string{
  let resStr = `<div>${'本月维保范围：' + comprehensive.range}</div><div style="margin-top: 6px;">${'维保设施包含：' + comprehensive.facility}</div>`
  if(comprehensive.existingProblem) {
    resStr += `<div style="margin-top: 6px;">${'本月发现的问题：' + comprehensive.existingProblem}</div>`
  }
  if(comprehensive.cumulativeIssues) {
    resStr += `<div style="margin-top: 6px;">${'遗留未整改的问题：' + comprehensive.cumulativeIssues}</div>`
  }
  if(comprehensive.correctedProblems) {
    resStr += `<div style="margin-top: 6px;">${'本月已整改的问题：' + comprehensive.correctedProblems}</div>`
  }
  if (comprehensive.other) {
    resStr += `<div style="margin-top: 6px;">${'其他：' + comprehensive.other}</div>`
  }
  return resStr
}
@Extend(Text) function TitleReview () {
  .fontColor('#000').fontSize(14).fontWeight(500)
}

@Extend(TextInput) function TextInputReview () {
  .width('100%').height(40).fontSize(14).fontColor('#999')
  .border({width: 1, color: '#eee'}).backgroundColor(Color.Transparent)
  .placeholderColor('#999').borderRadius(4).placeholderFont({size: 14})
}
@Extend(TextArea) function TextAreaReview () {
  .width('100%').fontSize(14).fontColor('#999').lineHeight(20)
  .border({width: 1, color: '#eee'}).backgroundColor(Color.Transparent)
  .placeholderColor('#999').borderRadius(4).placeholderFont({size: 14})
}

@Entry
@Component
struct AddRecords {
  @Builder indicatorBuilder(icon: ResourceStr) {
    Image(icon)
  }
  // 添加维保记录类型参数
  @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: '',
    county: '',
    city: '',
  }
  @State pickerValue:string[] = ['广西壮族自治区','南宁市','青秀区']//省市区选中值
  @State comprehensiveReview: comprehensiveType = { // 综合评述
    range: '',
    facility: '',
    existingProblem: '',
    cumulativeIssues: '',
    other: '',
    correctedProblems: '',
  }
  // 回显消防设施和仪器设备数据使用
  @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 = ''
  @State text: string = "请选择维保记录类型"
  // 搜索框实例
  searchController: SearchController = new SearchController()

  // 选择区域弹窗
  areaController: CustomDialogController = new CustomDialogController({
    builder: AreaPickerDialog({
      value:this.pickerValue,//首次默认选中值
      provinceValue: '广西壮族自治区',
      onChange: (value:string[]) => {//选择改变回调
        this.pickerValue = value
        this.addForm.city = value[1]
        this.addForm.county = value[2]
      }
    }),
    customStyle: true,
    autoCancel: false
  })

  // 加载弹窗
  loadingController: CustomDialogController = new CustomDialogController({
    builder: LoadingDialog(),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Center,
    autoCancel: false
  })

  // 初始化数据
  initData = () => {
    // 获取项目的类型列表
    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
    })
    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
    })
  }

  // 获取维保记录类型
  getReportType = async (dictValue: string) => {
    this.loadingController.open()
    this.addForm.reportType = dictValue
    this.addForm.projectList = []
    this.fireFacilitiesList = []
    this.addForm.fireFacilities = ''
    let result: AxiosResponse<LatestProjectTest> = await getLatestProjectList(dictValue)
    this.latestProjectList = result.data.data
    this.loadingController.close()
  }
  // 添加记录方法
  addReport = async () => {
    this.loadingController.open()
    this.addForm.maintenanceDate = [this.addForm.maintenanceTime as string, this.addForm.maintenanceEndTime as string]
    await addRecords(this.addForm)
    this.loadingController.close()
    promptAction.showToast({ message: '添加成功' })
    router.back()
  }

  // 更新记录方法
  uploadReport = async () => {
    this.loadingController.open()
    await updateRecords(this.addForm)
    this.loadingController.close()
    promptAction.showToast({ message: '更新成功' })
  }

  // 提交表单
  submitForm = async () => {
    this.addForm.result = mergeRichText(this.comprehensiveReview)
    if(this.addForm.reportName === '' || this.addForm.reportNo === '' || this.addForm.applyCompanyName === '' || this.addForm.maintenanceTime === '请选择起始日期' || this.addForm.maintenanceEndTime === '请选择结束日期' || this.addForm.fireFacilities === '' || this.addForm.maintenancePeople === '') {
      return promptAction.showToast({message: '* 号为必填项'})
    }
    if(this.comprehensiveReview.range === ''){
      return promptAction.showToast({message: '综合评述带 * 号必填'})
    }
    if(this.errorMsg !== '') {
      return promptAction.showToast({message: '校验失败，编号已被使用'})
    }
    if(roleName === 'person' && !this.addForm.maintenancePeopleList?.includes(personId.toString())){
      return promptAction.showToast({message: '本人必须在维护人员中'})
    }
    this.isEdit ? await this.uploadReport() : await this.addReport()
  }

  // 页面加载时调用
  async aboutToAppear() {
    this.initData()
    // reportId不等于undefined为编辑状态
    this.isEdit = reportId !== undefined
    this.addForm.city = this.pickerValue[1]
    this.addForm.county = this.pickerValue[2]
    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.fireFacilitiesList = result.fireFacilities?.split('、') || []
      this.addForm.state = result.state
      this.addForm.technicalDirectorId = result.technicalDirectorId || ''
      this.addForm.maintenancePeopleList = result.technicalDirectorId?.split(',') || []
      this.addForm.city = result.city || '南宁市'
      this.addForm.county = result.county || '青秀区'
      this.addForm.approvePersonId = result.approvePersonId as number
      this.addForm.projectList = result.projectList.map(item => {
        return { projectId: item.projectId } as projectType
      })
      this.viewEquipmentList = result.equipment?.split(',') || []
      this.PeopleList = result.technicalDirectorId?.split(',') || []
      this.pickerValue = ['广西壮族自治区', result.city as string || '南宁市', result.county as string || '青秀区']
      this.comprehensiveReview = extractRichText(result.result)
      // 获取消防设施
      let LatestRes: AxiosResponse<LatestProjectTest> = await getLatestProjectList(this.addForm.reportType as string)
      this.latestProjectList = LatestRes.data.data
    }
  }
  build() {
    Column(){
      NavHeader({title: '添加原始记录'})
      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 () => {
                    if(this.addForm.reportNo == '') {
                      this.errorMsg = '请输入项目编号'
                    } else {
                      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).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})
            Row(){
              Row(){
                Image($r('app.media.require')).width(20)
                Text('项目区域')
              }.width(90)
              Text(this.pickerValue.join(' ')).layoutWeight(1).padding({top: 8, bottom: 8, left: 16, right: 16})
                .backgroundColor('#fff').textOverflow({overflow: TextOverflow.Ellipsis}).maxLines(2)
                .onClick(() => {
                  this.areaController?.open()
                })
            }.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: 'radioGroupPeople',
                      indicatorType:RadioIndicatorType.TICK,
                    }).height(14).width(14).checked(this.addForm.approvePersonId === children.personId)
                      .onChange((checked: boolean) => {
                        if (checked) {
                          this.addForm.approvePerson = children.personName
                          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){
                          // 如果选择的人员列表中不存在此人员列表中，则添加
                          if(!this.addForm.maintenancePeopleList?.includes(children.personId.toString())){
                            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})
            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(async () => { await this.getReportType(item.dictValue) })
                  }
                })
              }
            }.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('、')
                      this.comprehensiveReview.facility = 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){
                          if(this.addForm.projectList?.some((item) =>  item.projectId === children.projectId)) return
                          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).padding({left: 10})
              List(){
                ListItem(){
                  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'})
              }.height(300).width('100%')
            }.padding({top: 10, bottom: 10})
            Column({space: 10}){
              Row(){
                Text().width(4).height(16).backgroundColor('#1890ff').margin({right: 6})
                Text('综合评述')
              }.padding({left: 10})
              Column({space: 10}){
                Column({space: 10}){
                  Row({space: 5}){
                    Image($r('app.media.require')).width(20)
                    Text('本月维保范围').TitleReview()
                  }.width('100%')
                  TextInput({placeholder: '请输入本月维保范围（填写楼层）', text: $$this.comprehensiveReview.range}).TextInputReview()
                }.width('100%').alignItems(HorizontalAlign.Start)
                Column({space: 10}){
                  Row({space: 5}){
                    Image($r('app.media.require')).width(20)
                    Text('消防设施包含').TitleReview()
                  }.width('100%')
                  Text(this.comprehensiveReview.facility || '勾选主要消防设施').width('100%').height('auto').fontSize(14).padding({top: 8, bottom: 8, left: 16, right: 16})
                    .border({width: 1, color: '#eee'}).borderRadius(4).fontColor('#999').textAlign(TextAlign.Start)
                }.width('100%').alignItems(HorizontalAlign.Start)
                Column({space: 10}){
                  Row({space: 5}){
                    Text('本月发现的问题').TitleReview()
                  }.width('100%')
                  TextArea({ placeholder: '请输入存在问题', text: $$this.comprehensiveReview.existingProblem }).TextAreaReview()
                }.width('100%').alignItems(HorizontalAlign.Start)
                Column({space: 10}){
                  Row({space: 5}){
                    Text('遗留未整改的问题').TitleReview()
                  }.width('100%')
                  TextArea({ placeholder: '请输入累计问题', text: $$this.comprehensiveReview.cumulativeIssues }).TextAreaReview()
                }.width('100%').alignItems(HorizontalAlign.Start)
                Column({space: 10}){
                  Row({space: 5}){
                    Text('本月已整改的问题').TitleReview()
                  }.width('100%')
                  TextArea({ placeholder: '请输入已整改问题', text: $$this.comprehensiveReview.correctedProblems }).TextAreaReview()
                }.width('100%').alignItems(HorizontalAlign.Start)
                Column({space: 10}){
                  Text('其他').TitleReview()
                  TextArea({ placeholder: '请输入其他内容', text: $$this.comprehensiveReview.other }).TextAreaReview()
                }.width('100%').alignItems(HorizontalAlign.Start)
              }
            }.width('100%').alignItems(HorizontalAlign.Start).margin({top: 20}).padding({bottom: 30})
          }.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(() => { this.submitForm() })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }

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