import { getDownloadUrl, downloadUrl } from '../api/originalRecords'
import { AxiosResponse } from '@ohos/axios'
import { downFile } from '../utils/downFile'
import { router } from '@kit.ArkUI'
import PhotoBrowser from '../dialog/PhotoBrowserDialog'
import { uploadVideoOrImg } from '../api/cosKey'
interface routerParams {
  cosKey: string
  relateId: number
}
let routerQuery = router.getParams() as routerParams
@Entry
@Component
struct DownLoadImage {
  @State imgList: string[] = []
  @State videoList: string[] = []
  @State cosKeyData: string[] = routerQuery?.cosKey.split(';')
  @State viewImg: string[] = []
  @State viewVideo: string[] = []
  @State saveButtonOptions: SaveButtonOptions = {
    icon: SaveIconStyle.FULL_FILLED,
    text: SaveDescription.SAVE,
    buttonType: ButtonType.Capsule
  }
  photoBrowserController: CustomDialogController = new CustomDialogController({
    builder: PhotoBrowser({ imagesList: this.viewImg}),
    customStyle: true,
    offset: { dx: 0, dy: 0 },
    alignment: DialogAlignment.Top,
  })
  aboutToAppear() {
    this.cosKeyData.forEach((item: string) => {
      let newArr = item.split('.')
      let index = newArr.length - 1
      if(newArr[index] == 'mp4') {
        this.videoList.push(item)
      }else {
        this.imgList.push(item)
      }
    })
    this.imgList.forEach(async (item: string) => {
      const imgDta: AxiosResponse<downloadUrl> = await getDownloadUrl(item, 0)
      this.viewImg.push(imgDta.data.data)
    })
    this.videoList.forEach(async (item: string) => {
      const imgDta: AxiosResponse<downloadUrl> = await getDownloadUrl(item, 0)
      this.viewVideo.push(imgDta.data.data)
    })
  }
  build() {
    List(){
      ListItem(){
        Column({ space: 10 }) {
          Row(){
            Row({space: 5}){
              Text().width(2).height(20).backgroundColor('#1890ff')
              Text('图片').fontSize(14).fontWeight(600)
            }
            Text('预览图片')
              .fontSize(14).fontColor('#fff').backgroundColor('#1890ff')
              .padding({left: 15, right: 15, top: 2, bottom: 2})
              .borderRadius(4)
              .onClick(() => {
                this.photoBrowserController.open()
              })
          }
          .justifyContent(FlexAlign.SpaceBetween)
          .width('100%')
          GridRow({ columns: 2, gutter: 10 }) {
            ForEach(this.viewImg, (item: string) => {
              GridCol() {
                Column({space: 10}){
                  Image(item)
                    .width('100%')
                    .height(150)
                    .borderRadius(4)
                  Row(){
                    SaveButton(this.saveButtonOptions)
                      // 创建安全控件按钮
                      .onClick(async (event, result: SaveButtonOnClickResult) => {
                        if (result == SaveButtonOnClickResult.SUCCESS) {
                          downFile(item, 'jpg')
                        }
                      })
                  }
                }
              }
            })
          }
        }
      }.visibility(this.viewImg.length == 0 ? Visibility.None : Visibility.Visible)
      ListItem(){
        Column({ space: 10 }) {
          Row(){
            Row({space: 5}){
              Text().width(2).height(20).backgroundColor('#1890ff')
              Text('视频').fontSize(14).fontWeight(600)
            }
          }
          .justifyContent(FlexAlign.Start)
          .width('100%')
          GridRow({ columns: 1}) {
            ForEach(this.viewVideo, (item: string) => {
              GridCol() {
                Column({ space: 10}){
                  Video({ src: item }).width('100%').height(300).controls(true)
                  SaveButton(this.saveButtonOptions)
                    // 创建安全控件按钮
                    .onClick(async (event, result: SaveButtonOnClickResult) => {
                      if (result == SaveButtonOnClickResult.SUCCESS) {
                        downFile(item, 'mp4')
                      }
                    })
                }
              }
              .margin({
                top: 10
              })
            })
          }
        }
      }.visibility(this.viewVideo.length == 0 ? Visibility.None : Visibility.Visible)
    }.padding(10)
  }
}