//作业指导
import ProcessRequest from '../common/util/request/ProcessRequest'
import { DrawingInfo } from '../viewmodel/DrawingInfo'
import RequestParamModel from '../viewmodel/RequestParamModel'
import CommonConstants from'../common/constants/CommonConstants'

@CustomDialog
export struct WorkInstructionsDialog {
  private scrollerMaterial: Scroller = new Scroller()
  //作业图片列表
  @State drawingList: DrawingInfo[] = []

  materialCode: string = ''

  controller: CustomDialogController
  onConfirm: () => void = () => {
  }

  //加载所有作业
  loadWorkInstructions = async () => {
    this.drawingList = await ProcessRequest.post('/api/v1/base/drawing/list', {
      materialCode: this.materialCode!,
      drawingDictValue: 'esop',
    } as RequestParamModel) as DrawingInfo[];
  };

  aboutToAppear(): void {
    this.loadWorkInstructions();
  }

  build() {
    Column() {
      Column() {
        Text("作业指导")
          .fontColor($r('app.color.FFFFFF'))
          .fontSize($r('app.float.fontSize_30'))
      }.height('8%')
      .width('100%')
      .justifyContent(FlexAlign.Center)

      Column() {
        Grid(this.scrollerMaterial) {
          ForEach(this.drawingList, (item: DrawingInfo) => {
            GridItem() {
              Column(){
                Image(CommonConstants.PICTURE_URL_PREFIX+item.drawingPath)
                  .width('100%')
                  .height('65%')
                  .objectFit(ImageFit.Fill)
                  .borderRadius($r('app.float.virtualSize_24'))
                Column() {
                  Text(`文件名称：${item.fileName}`)
                    .fontSize($r('app.float.fontSize_16'))
                    .fontColor($r('app.color.FFFFFF'))
                    .textAlign(TextAlign.Start)
                    .fontWeight(FontWeight.Lighter)
                  Text(`文件编号: ${item.drawingCode}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`版本号: ${item.drawingVersion} `)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`上传时间: ${item.updated}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                  Text(`编辑人员: ${item.updator}`)
                    .fontColor($r('app.color.FFFFFF'))
                    .fontSize($r('app.float.fontSize_16'))
                    .fontWeight(FontWeight.Lighter)
                    .textAlign(TextAlign.Start)
                }
                .alignItems(HorizontalAlign.Start)
                .height('35%')
                .width('96%')
                .margin({left:'4%',top:"2%"})
              }
            }
            .height('50%')
            .backgroundColor( $r('app.color.20FFFFFF')) // 选中状态加深
            .borderRadius($r('app.float.virtualSize_24'))
            // .onClick(() => {
            // })
          })
        }
        .columnsTemplate('1fr 1fr 1fr')
        .columnsGap(10)
        .rowsGap(10)
        .width('100%')
        .height('97%')
        .padding(10)
      }
      .height('81%')
      .margin({left:'1%',right:'1%'})

      Column() {
        Divider()
          .vertical(false)
          .strokeWidth(1)
          .color($r('app.color.15FFFFFF'))
        Row() {
          Text('关闭')
            .fontColor($r('app.color.60FFFFFF'))
            .fontSize($r('app.float.fontSize_30'))
        }
        .width('100%')
        .justifyContent(FlexAlign.Center)
        .height('8%')
        .width('50%')
        .onClick(() => this.controller.close())
      }
    }
    .height('71%')
    .width('62%')
    .backgroundColor($r('app.color.2A2A2A'))
    .justifyContent(FlexAlign.End)
    .alignItems(HorizontalAlign.Start)
    .borderColor($r('app.color.000000'))
    .borderWidth(1)
    .borderRadius($r('app.float.virtualSize_16'))
  }
}
