import { router, promptAction } from '@kit.ArkUI'
import { pasteboard } from '@kit.BasicServicesKit';
import preferencesUtils from '../utils/preferences'
import { AxiosResponse } from '@ohos/axios'
import  { HmParseHTML } from "@wuyan/html_parse"
import { basePath } from '../utils/baseUrl'
import loadingDialog from '../dialog/LoadingDialog'
import UploadTipDialog from '../dialog/UploadTipDialog'
import { getReportDetail, getMalfunctionList, deleteRecords, successReport, returnSing } from '../api/originalRecords'
import { reportDetailTest, reportDetailData, ProjectList, ItemList, MalfunctionListTest, MalfunctionListRow, configTest } from '../api/recordsType'
import { pushOutsideWeb } from '../utils/pushOutsideWeb'
import { commonRouterParams } from '../utils/UserAuth'
import ThemeStaticTest from '../components/ThemeStaticText'
import NavHeader from '../components/NavHeader'


interface showVideoOrImg {
  cosKey: string | null;
  itemName: string;
}
interface routerParams {
  reportId: number
}
let roleName = preferencesUtils.get('XF_ROLE_NAME', '')
let params = router.getParams() as routerParams
let reportId = params.reportId
let personId = preferencesUtils.get('XF_PERSON_ID', '')

@Entry
@Component
struct DetailRecords {
  @State reportDetail: reportDetailData | null = null
  @State projectList: ProjectList[] = []
  @State malfunctionList: MalfunctionListRow[] = []
  @State findTime: string = ''
  @State applyCompanyComment: string = ''
  @State maintenanceComment: string = ''
  aboutToAppear(): void {
    AppStorage.setOrCreate('videoPath', '');
    if(!AppStorage.get('isShowTip')) {
      this.uploadController.open()
    }
  }
  async onPageShow() {
    this.loadingController.open()
    // 获取维保记录详情
    const detail: AxiosResponse<reportDetailTest> = await getReportDetail(reportId)
    this.reportDetail = detail.data.data
    this.projectList = this.reportDetail.projectList
    this.loadingController.close()
    // 获取设施故障列表
    const malfunction: AxiosResponse<MalfunctionListTest> = await getMalfunctionList({ pageNum: 1, pageSize: 500, reportId })
    this.malfunctionList = malfunction.data.rows
    if(this.malfunctionList.length > 0){
      this.findTime = this.malfunctionList[0].findTime as string
      this.applyCompanyComment = this.malfunctionList[0].applyCompanyComment as string
      this.maintenanceComment = this.malfunctionList[0].maintenanceComment as string
    }
  }

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

  // 上传下载提示框
  uploadController: CustomDialogController = new CustomDialogController({
    builder: UploadTipDialog(),
    cornerRadius: 10
  })

  // 复制甲方签名至剪切板
  copyText = (text: string) => {
    const pasteboardData = pasteboard.createData(pasteboard.MIMETYPE_TEXT_PLAIN, text);
    const systemPasteboard = pasteboard.getSystemPasteboard();
    systemPasteboard.setData(pasteboardData); // 将数据放入剪切板
    systemPasteboard.getData().then((data) => {
      if (data) {
        promptAction.showToast({ message: '复制成功' });
      } else {
        promptAction.showToast({ message: '复制失败' });
      }
    })
  }

  // 判断是否存在视频或图片
  isImgOrVideo = (list: ItemList[]): boolean => {
     return list.some(item => item.cosKey !== null)
  }

  // 分享签名
  shareSignature = () => {
    AlertDialog.show({
      title: '分享签名提示',
      message: `出于对多个甲方见证人签名的考虑，在甲方签名完成后，仍是"待甲方签名"的状态，需【维保公司账号】前往【更多操作】-->【完成】`,
      alignment: DialogAlignment.Center,
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('Callback when the first button is clicked')
        }
      },
      secondaryButton: {
        enabled: true,
        defaultFocus: true,
        style: DialogButtonStyle.HIGHLIGHT,
        value: '确认',
        action: async () => {
          this.copyText(`https://xfappht.crgx.net/report/record?id=${reportId}&token=${preferencesUtils.get('XF_TOKEN', '')}&time=${new Date().getTime()}&type=firstPartySign&username=${preferencesUtils.get('XF_USERNAME', '')}`)
        }
      }
    })
  }
  // 查看记录
  lookReport = () => {
    if(personId !== '') {
      router.pushUrl({
        url: 'pages/LookRecords',
        params: {
          reportId: this.reportDetail?.reportId,
          pid: personId
        }
      })
    } else {
      router.pushUrl({
        url: 'pages/LookRecordCompany',
        params: {
          reportId: this.reportDetail?.reportId
        }
      })
    }
  }
  // 修改记录
  updateReport = () => {
    AlertDialog.show({
      title: '重要提示',
      message: `退回编辑会清除所有的维保人员签名和甲方签名，确认退回？`,
      alignment: DialogAlignment.Center,
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('Callback when the first button is clicked')
        }
      },
      secondaryButton: {
        enabled: true,
        defaultFocus: true,
        style: DialogButtonStyle.HIGHLIGHT,
        value: '确认',
        action: async () => {
          const res: AxiosResponse<configTest> = await returnSing(reportId)
          promptAction.showToast({message: res.data.msg})
          const detail: AxiosResponse<reportDetailTest> = await getReportDetail(reportId)
          this.reportDetail = detail.data.data
        }
      }
    })
  }
  // 完成签发
  IssueCompleted = () => {
    AlertDialog.show({
      title: '提示',
      message: `完成签发后不可退回修改，确认完成吗`,
      alignment: DialogAlignment.Center,
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('Callback when the first button is clicked')
        }
      },
      secondaryButton: {
        enabled: true,
        defaultFocus: true,
        style: DialogButtonStyle.HIGHLIGHT,
        value: '确认',
        action: async () => {
          await successReport(reportId)
          await deleteRecords({reportId, state: '1'})
          promptAction.showToast({message: '修改完成'})
        }
      }
    })
  }
  // 删除记录
  deleteReport = () => {
    AlertDialog.show({
      title: '删除提示',
      message: `维保原始记录一经删除，无法找回，确认删除${this.reportDetail?.reportName}(${this.reportDetail?.reportNo})的原始记录吗？`,
      alignment: DialogAlignment.Center,
      primaryButton: {
        value: '取消',
        action: () => {
          console.info('Callback when the first button is clicked')
        }
      },
      secondaryButton: {
        enabled: true,
        defaultFocus: true,
        style: DialogButtonStyle.HIGHLIGHT,
        value: '确认',
        action: async () => {
          await deleteRecords({reportId, state: '2'})
          router.back()
        }
      }
    })
  }

  build() {
    Column(){
      NavHeader({title: '维保记录详情'})
      Scroll(){
        Column({space: 10}){
          // 概况
          Column(){
            Row(){
              Row(){
                Text().width(3).height(16).backgroundColor('#1890ff').margin({right: 10})
                Text('概况').fontSize(12).fontColor('#999')
              }
              Row(){
                Image($r('app.media.edit_1')).width(12)
                Text('修改概况').fontColor('#1890ff').fontSize(12).margin({left: 3, right: 3})
                Image($r('app.media.right_arrow')).width(12)
              }.onClick(() => {
                router.pushUrl({
                  url: 'pages/AddRecords',
                  params: {
                    reportId: this.reportDetail?.reportId
                  }
                })
              })
              .visibility(this.reportDetail?.state == '5' || this.reportDetail?.state == '1' ? Visibility.None : Visibility.Visible)
            }.border({width: {bottom: 1}, color: '#eee'}).justifyContent(FlexAlign.SpaceBetween).width('100%').padding(5)
            Row(){
              Text('消防设施使用单位').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.applyCompanyName || '').fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('项目名称').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.reportName || '').fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('项目编号').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.reportNo || '').fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('维保记录类型').fontSize(12).fontColor('#999')
              ThemeStaticTest({
                textValue: this.reportDetail?.reportType,
                type: '0'
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('状态').fontSize(12).fontColor('#999')
              ThemeStaticTest({
                textValue: this.reportDetail?.state,
                type: '1'
              })
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('创建日期').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.reportTime || '').fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('维保日期').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.maintenanceTime || '').fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('完成日期').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.maintenanceEndTime || '').fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('项目负责人').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.approvePerson).fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('项目区域').fontSize(12).fontColor('#999')
              Text(`${this.reportDetail?.city} ${this.reportDetail?.county}`).fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('维保人员').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.maintenancePeople || '').fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            Row(){
              Text('甲方签字').fontSize(12).fontColor('#999')
              Row({space: 5}){
                Image($r('app.media.share')).width(14)
                Text('分享签名').fontSize(12).fontColor('#1890ff')
              }.onClick(() => { this.shareSignature() })
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            .visibility(this.reportDetail?.state == '1' || this.reportDetail?.state == '5' ? Visibility.Visible : Visibility.None)
            Column({space: 5}){
              Text('仪器设备').fontSize(12).fontColor('#999')
              Text(this.reportDetail?.equipment || '').fontColor('#999').fontSize(12).margin({left: 3, right: 3})
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).alignItems(HorizontalAlign.Start).width('100%')
            Column({space: 10}){
              Text('综合评述').fontSize(12).fontColor('#999').margin({right: 10})
              HmParseHTML({
                htmlStr: this.reportDetail?.result || '<p>无</p>',
                baseFontSize: 12,
                baseFontColor: '#999'
              })
            }.padding(10).alignItems(HorizontalAlign.Start).width('100%')
          }.backgroundColor('#fff').borderRadius(10).padding(10).width('100%')
          // 主要消防措施
          Column({space: 10}){
            Row(){
              Row(){
                Text().width(3).height(16).backgroundColor('#1890ff').margin({right: 10})
                Text('主要消防措施').fontSize(12).fontColor('#999')
              }
              Row(){
                Image($r('app.media.edit_1')).width(12)
                Text('查看记录').fontColor('#1890ff').fontSize(12).margin({left: 3, right: 3})
                Image($r('app.media.right_arrow')).width(12)
              }.onClick(() => { this.lookReport() })
            }.justifyContent(FlexAlign.SpaceBetween).width('100%').margin({bottom: 10})
            ForEach(this.projectList, (item: ProjectList, index) => {
              Column({space: 5}){
                Row(){
                  Row({space: 5}){
                    Text((index + 1).toString()).width(40).height(40).borderRadius(5)
                      .backgroundColor('#eee').fontSize('#666').textAlign(TextAlign.Center)
                    Row(){
                      Text(item.projectName).fontSize(16).fontColor('#1890ff')
                      Image($r('app.media.edit_1')).width(16).margin({right: 4})
                    }.onClick(() => {
                      let routerData: commonRouterParams = {
                        projectId: item.projectId,
                        reportId: item.reportId,
                        videoPath: ''
                      }
                      router.pushUrl({
                        url: 'pages/FireProtectionDetail',
                        params: routerData
                      })
                    })
                  }
                  Row(){
                    Text('查看视频/图片内容').fontSize(12).fontColor('#1890ff')
                    Image($r('app.media.right_arrow')).width(12)
                  }.visibility(this.isImgOrVideo(item.itemList) ? Visibility.Visible : Visibility.None)
                  .onClick(() => {
                    const newArr: showVideoOrImg[] = item.itemList.map((item: ItemList): showVideoOrImg => {
                      return {
                        cosKey: item.cosKey,
                        itemName: item.itemName
                      }
                    })
                    router.pushUrl({
                      url: 'pages/VideoDetail',
                      params: { cosKeyList: newArr }
                    })
                  })
                }.width('100%').justifyContent(FlexAlign.SpaceBetween)
                Row(){
                  Text(item.updateTime).fontSize(12).fontColor('#999')
                  Text(item.state == '0' ? '未编辑' : '已编辑')
                    .padding({left: 6, right: 6})
                    .borderWidth(1).fontSize(12).borderRadius(4).lineHeight(16).fontColor(item.state == '0' ? '#ff4949' : '#13ce66')
                    .backgroundColor(item.state == '0' ? '#ffeded' : '#e7faf0').borderColor(item.state == '0' ? '#ffdbdb' : '#d0f5e0')
                }.width('100%').justifyContent(FlexAlign.SpaceBetween)
              }.padding({top: 10, left: 10, right: 10, bottom: 10}).borderWidth(1).borderColor('#eee').shadow({ radius: 5, color: Color.Gray }).borderRadius(5)
            })
          }.backgroundColor('#fff').borderRadius(10).padding(10).width('100%')

          // 消防设施故障处理单
          Column({space: 10}){
            Row(){
              Row(){
                Text().width(3).height(16).backgroundColor('#1890ff').margin({right: 10})
                Text('消防设施故障处理单').fontSize(12).fontColor('#999')
              }
              Row(){
                Image($r('app.media.edit_1')).width(12)
                Text('故障维修').fontColor('#1890ff').fontSize(12).margin({left: 3, right: 3})
                Image($r('app.media.right_arrow')).width(12)
              }.onClick(() => {
                router.pushUrl({
                  url: 'pages/FailureMaintenance',
                  params: {
                    applyCompanyName: this.reportDetail?.applyCompanyName,
                    companyName: this.reportDetail?.companyName,
                    reportName: this.reportDetail?.reportName,
                    reportId: this.reportDetail?.reportId,
                    reportType: this.reportDetail?.reportType
                  }
                })
              })
              .visibility(this.reportDetail?.state == '5' || this.reportDetail?.state == '1' ? Visibility.None : Visibility.Visible)
            }.justifyContent(FlexAlign.SpaceBetween).width('100%').margin({bottom: 10})
            Column(){
              Row(){
                Text('发现时间：').fontSize(12).fontColor('#999')
                Text(this.findTime).fontColor('#999').fontSize(12).margin({left: 3, right: 3})
              }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.Start).width('100%')
              ForEach(this.malfunctionList, (malfunction: MalfunctionListRow, index: number) => {
                Column({space: 4}){
                  Row({space: 10}){
                    Text((index + 1).toString()).width(30).height(30).backgroundColor(Color.Gray)
                      .borderWidth(1).borderColor('#eee').borderRadius(4).textAlign(TextAlign.Center)
                    Text(malfunction.malfunctionPart)
                  }.margin({bottom: 10})
                  Text(`故障情况及影响：${malfunction.malfunctionDes}`).fontSize(12).fontColor('#999')
                  Text(`采取的应急措施：${malfunction.security}`).fontSize(12).fontColor('#999')
                  Text(`更换设备及材料情况：${malfunction.maintenanceMethod}`).fontSize(12).fontColor('#999')
                  Text(`处理结果：${malfunction.malfunctionConfirm}`).fontSize(12).fontColor('#999')
                  Text(`备注：${malfunction.remark || '无'}`).fontSize(12).fontColor('#999')
                }.border({width: {bottom: 1}, color: '#eee'}).width('100%')
                .padding(10).alignItems(HorizontalAlign.Start)
              })
              Row(){
                Text('维护保养单位意见：').fontSize(12).fontColor('#999')
                Text(this.maintenanceComment).fontColor('#999').fontSize(12).margin({left: 3, right: 3})
              }.padding(10).justifyContent(FlexAlign.Start).width('100%')
              Row(){
                Text('委托单位意见：').fontSize(12).fontColor('#999')
                Text(this.applyCompanyComment).fontColor('#999').fontSize(12).margin({left: 3, right: 3})
              }.padding(10).justifyContent(FlexAlign.Start).width('100%')
            }.width('100%').alignItems(HorizontalAlign.Start)
            .visibility(this.malfunctionList.length > 0 ? Visibility.Visible : Visibility.None)
            Column(){
              Image($r('app.media.emptyData')).width(100)
              Text('暂无维修数据').fontSize(12).fontColor('#999').textAlign(TextAlign.Center).margin({top: 5})
            }.visibility(this.malfunctionList.length == 0 ? Visibility.Visible : Visibility.None)
          }.backgroundColor('#fff').borderRadius(10).padding(10).width('100%')

          // 更多操作
          Column(){
            Row(){
              Row(){
                Text().width(3).height(16).backgroundColor('#1890ff').margin({right: 10})
                Text('操作').fontSize(12).fontColor('#999')
              }
            }.border({width: {bottom: 1}, color: '#eee'}).justifyContent(FlexAlign.Start).width('100%').padding(5)
            Row(){
              Row(){
                Image($r('app.media.trash_can')).width(16)
                Text('删除').fontColor('#1890ff').fontSize(12).margin({left: 3, right: 3}).fontWeight(500)
              }
              Image($r('app.media.right_arrow')).width(16)
            }.padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%').border({width: {bottom: 1}, color: '#eee'})
            .visibility(this.reportDetail?.state == '1' ? Visibility.None : Visibility.Visible)
            .onClick(() => { this.deleteReport() })
            Row(){
              Row(){
                Image($r('app.media.finish')).width(16)
                Text('完成').fontColor('#1890ff').fontSize(12).margin({left: 3, right: 3})
              }
              Image($r('app.media.right_arrow')).width(16)
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            .visibility(this.reportDetail?.state == '5' && roleName == 'company' ? Visibility.Visible : Visibility.None)
            .onClick(async () => { this.IssueCompleted() })
            Row(){
              Row(){
                Image($r('app.media.returnUpdate')).width(16)
                Text('修改原始记录').fontColor('#1890ff').fontSize(12).margin({left: 3, right: 3})
              }
              Image($r('app.media.right_arrow')).width(16)
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            .visibility(this.reportDetail?.state == '5' && roleName == 'company' ? Visibility.Visible : Visibility.None)
            .onClick(async () => { this.updateReport() })
            Row(){
              Row(){
                Image($r('app.media.document')).width(16)
                Text('自动报告').fontColor('#1890ff').fontSize(12).margin({left: 3, right: 3})
              }
              Image($r('app.media.right_arrow')).width(16)
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            .visibility(this.reportDetail?.state == '1' ? Visibility.Visible : Visibility.None)
            .onClick(() => { pushOutsideWeb(`${basePath}/report/view?id=${reportId}`) })
            Row(){
              Row(){
                Image($r('app.media.setting')).width(16)
                Text('导出PDF').fontColor('#1890ff').fontSize(12).margin({left: 3, right: 3})
              }
              Image($r('app.media.right_arrow')).width(16)
            }.border({width: {bottom: 1}, color: '#eee'}).padding(10).justifyContent(FlexAlign.SpaceBetween).width('100%')
            .visibility(this.reportDetail?.state == '1' ? Visibility.Visible : Visibility.None)
            .onClick(() => { pushOutsideWeb(`${basePath}/report/view?id=${reportId}`) })
          }.backgroundColor('#fff').borderRadius(10).padding(10).width('100%')
        }.width('100%')
      }.backgroundColor('#f2f3f7').padding(10)
    }.height('100%').backgroundColor('#f2f3f7').padding( {bottom: 20})
  }


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