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 NavHeader from '../components/NavHeader'
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() {
    Column(){
      NavHeader({title: '下载图片'})
      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)
    }
  }
}