import { router, promptAction } from '@kit.ArkUI'
import { getMalfunctionList, updateMalfunctionList } from '../api/originalRecords'
import { MalfunctionListTest, MalfunctionListRow } from '../api/recordsType'
import { AxiosResponse } from '@ohos/axios'
import ThemeStaticTest from '../components/ThemeStaticText'
import ImportRecordDialog from '../dialog/ImportRecordsDialog'
interface routerParams {
  applyCompanyName: string
  companyName: string
  reportName: string
  reportId: number
  reportType: string
}
@Extend(Text) function primary () {
  .fontColor('#1890ff').backgroundColor('#e8f4ff')
  .borderColor('#d1e9ff')
}
@Extend(Text) function danger () {
  .fontColor('#ff4949').backgroundColor('#ffeded')
  .borderColor('#ffdbdb')
}
interface newArrType {
  malfunctionPart: string
  malfunctionDes: string
  security: string
  maintenanceMethod: string
  malfunctionConfirm: string

}
// 判断是否填写正确数值
let testArr = (arr: MalfunctionListRow[]): boolean => {
  let newArr: newArrType[] = arr.map(item => {
    return {
      malfunctionPart: item.malfunctionPart,
      malfunctionDes: item.malfunctionDes,
      security: item.security,
      maintenanceMethod: item.maintenanceMethod,
      malfunctionConfirm: item.malfunctionConfirm
    } as newArrType
  })
 return newArr.every(arrItem => arrItem.malfunctionPart !== '' && arrItem.malfunctionDes !== '' && arrItem.security !== '' && arrItem.maintenanceMethod !== '' && arrItem.malfunctionConfirm !== '')
}

let routerQuery = router.getParams() as routerParams

@Entry
@Component
struct FailureMaintenance {
  @State message: string = 'Hello World';
  @State malfunctionList: MalfunctionListRow[] = [
    {
      applyCompanyComment: "",
      applyCompanyName: '',
      companyName: '',
      findTime: '请选择日期',
      maintenanceComment: "",
      maintenanceMethod: "",
      malfunctionConfirm: "",
      malfunctionDes: "",
      malfunctionPart: "",
      remark: '',
      security: "",
      reportId: routerQuery.reportId
    }
  ]

  @State findTime: string | null |undefined = ''
  @State maintenanceComment: string | null |undefined = ''
  @State applyCompanyComment: string | null |undefined = ''
  ImportController: CustomDialogController = new CustomDialogController({
    builder: ImportRecordDialog({
      applyCompanyName: routerQuery.applyCompanyName,
      reportId: routerQuery.reportId,
      onChange: async () => {
        const malfunction: AxiosResponse<MalfunctionListTest> = await getMalfunctionList({ pageNum: 1, pageSize: 500, reportId: routerQuery?.reportId })
        if(malfunction.data.rows.length !== 0) {
          this.malfunctionList = malfunction.data.rows
        }
        this.findTime = this.malfunctionList[0]?.findTime
        this.maintenanceComment = this.malfunctionList[0]?.maintenanceComment
        this.applyCompanyComment = this.malfunctionList[0]?.applyCompanyComment
      }
    }),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Bottom,
    cornerRadius: 10
  })
  async aboutToAppear() {
    // 获取设施故障列表
    const malfunction: AxiosResponse<MalfunctionListTest> = await getMalfunctionList({ pageNum: 1, pageSize: 500, reportId: routerQuery?.reportId })
    if(malfunction.data.rows.length !== 0) {
      this.malfunctionList = malfunction.data.rows
    }
    this.findTime = this.malfunctionList[0]?.findTime
    this.maintenanceComment = this.malfunctionList[0]?.maintenanceComment
    this.applyCompanyComment = this.malfunctionList[0]?.applyCompanyComment
  }
  build() {
    Column(){
      Column(){
        Column(){
          // 基本信息
          Row(){
            Text('委托单位:').width(120)
            Text(routerQuery?.applyCompanyName).fontSize(14)
          }.border({width: {bottom: 1}, color: '#eee'}).padding(10).width('100%').justifyContent(FlexAlign.Start)
          Row(){
            Text('项目类型:').width(120)
            ThemeStaticTest({
              textValue: routerQuery.reportType
            })
          }.border({width: {bottom: 1}, color: '#eee'}).padding(10).width('100%').justifyContent(FlexAlign.Start)
          Row(){
            Text('维护保养单位:').width(120)
            Text(routerQuery?.companyName).fontSize(14)
          }.border({width: {bottom: 1}, color: '#eee'}).padding(10).width('100%').justifyContent(FlexAlign.Start)
          Row(){
            Text('维护保养项目:').width(120)
            Text(routerQuery?.reportName).fontSize(14)
          }.border({width: {bottom: 1}, color: '#eee'}).padding(10).width('100%').justifyContent(FlexAlign.Start)
          Row(){
            Row(){
              Image($r('app.media.require')).width(20)
              Text('发现日期:')
            }.width(120)
            Text(this.findTime).padding({top: 8, bottom: 8, left: 16, right: 16}).fontSize(14)
              .backgroundColor('#fff').layoutWeight(1).fontColor('#000').onClick(() => {
              CalendarPickerDialog.show({
                onAccept: (value) => {
                  this.findTime = JSON.stringify(value).slice(1, 11)
                  this.malfunctionList[0].findTime = JSON.stringify(value).slice(1, 11)
                }
              })
            })
          }.padding({top: 10, bottom: 10})

          // 故障信息
          List(){
            ForEach(this.malfunctionList, (item: MalfunctionListRow, index: number) => {
              ListItem(){
                Column(){
                  Row(){
                    Text((index + 1).toString()).width(40).height(40).textAlign(TextAlign.Center).borderRadius(4)
                      .backgroundColor('#fafafa')
                    Row({space: 10}){
                      Text('新增').width(120).height(30).textAlign(TextAlign.Center).primary().
                      borderWidth(1).borderRadius(4).fontSize(14)
                        .onClick(() => {
                          let Malfunction: MalfunctionListRow = {
                            maintenanceMethod: '',
                            malfunctionPart: '',
                            malfunctionDes: '',
                            malfunctionConfirm: '',
                            remark: '',
                            reportId: routerQuery.reportId,
                            security: ''
                          }
                          this.malfunctionList.push(Malfunction)
                          promptAction.showToast({
                            message: '新增成功，下滑填写信息'
                          })
                        })
                      Text('删除').width(120).height(30).textAlign(TextAlign.Center).danger()
                        .borderWidth(1).borderRadius(4).fontSize(14)
                        .onClick(() => {
                          if(this.malfunctionList.length == 1){
                            promptAction.showToast({message: '至少保留一个'})
                          } else {
                            this.malfunctionList = this.malfunctionList.filter((children: MalfunctionListRow) => children.malfunctionId !== item.malfunctionId )
                            this.malfunctionList[0].findTime = this.findTime
                            this.malfunctionList[0].maintenanceComment = this.maintenanceComment
                            this.malfunctionList[0].applyCompanyComment = this.applyCompanyComment
                          }
                        })
                    }
                  }.width('100%').justifyContent(FlexAlign.SpaceBetween)
                  Row({space: 30}){
                    Row(){
                      Image($r('app.media.require')).width(20)
                      Text('故障发生部位')
                    }.width(100)
                    TextInput({placeholder: '请输入内容', text: item.malfunctionPart})
                      .backgroundColor('#fff').layoutWeight(1).fontSize(14)
                      .onChange((value) => {
                        item.malfunctionPart = value
                      })
                  }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
                  Row({space: 30}){
                    Row(){
                      Image($r('app.media.require')).width(20)
                      Text('故障情况及影响')
                    }.width(100)
                    TextArea({
                      text: item.malfunctionDes,
                      placeholder: '请输入内容'
                    }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff')
                      .border({width: 1, color: "#eee"}).fontSize(14)
                      .onChange((value) => {
                        item.malfunctionDes = value
                      })
                  }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
                  Row({space: 30}){
                    Row(){
                      Image($r('app.media.require')).width(20)
                      Text('采取的应急措施')
                    }.width(100)
                    TextArea({
                      text: item.security,
                      placeholder: '请输入内容'
                    }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff')
                      .border({width: 1, color: "#eee"}).fontSize(14)
                      .onChange((value) => {
                        item.security = value
                      })
                  }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
                  Row({space: 30}){
                    Row(){
                      Image($r('app.media.require')).width(20)
                      Text('更换设备及材料情况')
                    }.width(100)
                    TextArea({
                      text: item.maintenanceMethod,
                      placeholder: '请输入内容'
                    }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff')
                      .border({width: 1, color: "#eee"}).fontSize(14)
                      .onChange((value) => {
                        item.maintenanceMethod = value
                      })
                  }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
                  Row({space: 30}){
                    Row(){
                      Image($r('app.media.require')).width(20)
                      Text('处理结果')
                    }.width(100)
                    TextArea({
                      text: item.malfunctionConfirm,
                      placeholder: '请输入内容'
                    }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff')
                      .border({width: 1, color: "#eee"}).fontSize(14)
                      .onChange((value) => {
                        item.malfunctionConfirm = value
                      })
                  }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
                  Row({space: 30}){
                    Row(){
                      Text('备注')
                    }.width(100)
                    TextArea({
                      text: item.remark,
                      placeholder: '请输入内容'
                    }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff')
                      .border({width: 1, color: "#eee"}).fontSize(14)
                      .onChange((value) => {
                        item.remark = value
                      })
                  }.padding({top: 10, bottom: 10})
                }.border({width: 1, color: '#eee'}).borderStyle(BorderStyle.Dashed).padding(4)
              }.padding(10)
            })
            ListItem(){
              Row({space: 30}){
                Row(){
                  Image($r('app.media.require')).width(20)
                  Text('维护保养单位意见')
                }.width(100)
                TextArea({
                  text: this.maintenanceComment,
                  placeholder: '请输入内容'
                }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff').fontSize(14)
                  .border({width: 1, color: "#eee"})
                  .onChange((value) => {
                    this.maintenanceComment = value
                    this.malfunctionList[0].maintenanceComment = value
                  })
              }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            }.padding(10)
            ListItem(){
              Row({space: 30}){
                Row(){
                  Image($r('app.media.require')).width(20)
                  Text('委托单位意见').margin({right: 10})
                }.width(100)
                TextArea({
                  text: this.applyCompanyComment,
                  placeholder: '请输入内容'
                }).layoutWeight(1).height(80).borderRadius(5).backgroundColor('#fff').fontSize(14)
                  .border({width: 1, color: "#eee"}).onChange((value) => {
                  this.applyCompanyComment = value
                  this.malfunctionList[0].applyCompanyComment = value
                })
              }.border({width: {bottom: 1}, color: '#eee'}).padding({top: 10, bottom: 10})
            }.padding(10)
          }.layoutWeight(1)
        }.width('100%').height('100%').backgroundColor('#fff').borderRadius(4).padding({top: 10, bottom: 10})
      }.layoutWeight(1).width('100%').padding(10)
      Row({space:10}){
        Text('提交').borderRadius(5).width('100%').height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .layoutWeight(1)
          .onClick(async () => {
            if(this.malfunctionList[0].applyCompanyComment == '') {
              return promptAction.showToast({message: '委托单位意见不能为空'})
            } else if(this.malfunctionList[0].maintenanceComment == '') {
              return promptAction.showToast({message: '维护保养单位意见不能为空'})
            } else if(this.malfunctionList[0].findTime == '请选择日期') {
              return promptAction.showToast({message: '日期不能为空'})
            }
            if(!testArr(this.malfunctionList)) {
              return promptAction.showToast({message: '*号为必填项'})
            }
            await updateMalfunctionList({reportId: routerQuery?.reportId, list: this.malfunctionList})
            // 获取设施故障列表
            const malfunction: AxiosResponse<MalfunctionListTest> = await getMalfunctionList({ pageNum: 1, pageSize: 500, reportId: routerQuery?.reportId })
            this.malfunctionList = malfunction.data.rows
            promptAction.showToast({message: '更新成功'})
          })
        Text('导入').borderRadius(5).width('100%').height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .layoutWeight(1)
          .onClick(() => {
            this.ImportController.open()
          })
        Text('清除').borderRadius(5).width('100%').height(30).fontColor('#fff')
          .backgroundColor('#1B65FD').fontSize(14).textAlign(TextAlign.Center)
          .layoutWeight(1).onClick(() => {
            AlertDialog.show({
              title: '',
              message: '删除后无法找回，确认删除全部故障处理记录并提交？',
              autoCancel: true,
              alignment: DialogAlignment.Center,
              gridCount: 4,
              offset: { dx: 0, dy: -20 },
              buttonDirection: DialogButtonDirection.HORIZONTAL,
              buttons: [
                {
                  value: '取消',
                  action: () => {
                    console.info('Callback when button1 is clicked')
                  }
                },
                {
                  value: '确认',
                  action: async () => {
                    await updateMalfunctionList({reportId: routerQuery?.reportId, list: []})
                    this.malfunctionList = [{
                      applyCompanyComment: "",
                      applyCompanyName: '',
                      companyName: '',
                      findTime: '请选择日期',
                      maintenanceComment: "",
                      maintenanceMethod: "",
                      malfunctionConfirm: "",
                      malfunctionDes: "",
                      malfunctionPart: "",
                      remark: '',
                      security: "",
                      reportId: routerQuery.reportId
                    }]
                    this.findTime = '请选择日期'
                    this.maintenanceComment = ''
                    this.applyCompanyComment = ''
                    promptAction.showToast({message: '更新成功'})
                  }
                }
              ],
              cancel: () => {
                console.info('Closed callbacks')
              }
            })
          })
      }.width('100%').height(40).backgroundColor('#fff').padding({left: 10, right: 10})
    }.width('100%').height('100%').backgroundColor('#f2f3f7')
  }
}