import { FeedbackImageItem, FeedbackTypeBean } from 'wdBean/Index';
import { FastClickUtil, Logger, NetworkUtil } from 'wdKit/Index';
import { MultiPictureDetailViewModel } from '../viewmodel/MultiPictureDetailViewModel';
import { CustomTitleUI } from './reusable/CustomTitleUI'
import { ArrayList } from '@kit.ArkTS';
import { picker } from '@kit.CoreFileKit';
import { BusinessError } from '@kit.BasicServicesKit';
import { router } from '@kit.ArkUI';

const TAG = 'FeedBackActivity'
// 意见反馈页面
@Entry
@Component
export struct FeedBackActivity {
  //UI
  scroller: Scroller = new Scroller();

  @State isNetConnected: boolean = true

  @State feedbackTypeBeans: FeedbackTypeBean[] = [] as FeedbackTypeBean[]
  //添加图片
  addPic: FeedbackImageItem = {itemType:1} as FeedbackImageItem
  @State pics: FeedbackImageItem[] = [this.addPic] as FeedbackImageItem[]
  // 选择媒体文件的最大数目
  selectNum = 3;

  async aboutToAppear() {
    await this.getContentDetailData()
  }

  build() {
    Column() {
      //标题栏目
      CustomTitleUI({ titleName: "意见反馈" })
      Stack({ alignContent: Alignment.Bottom }) {
        Scroll(this.scroller) {
          Column() {
            Text('请选择问题类型')
              .fontColor($r('app.color.color_222222'))
              .fontSize($r('app.float.font_size_16'))
              .fontWeight(FontWeight.Bold)
              .margin({ left: $r('app.float.vp_15'), top: $r('app.float.vp_14') })
            GridRow({
              gutter: { x: 2, y: 2 }
            }) {
              ForEach(this.feedbackTypeBeans, (feedbackTypeBean: FeedbackTypeBean, index: number) => {
                GridCol({
                  span: 12
                }) {
                  Row(){
                    Toggle({ type: ToggleType.Checkbox, isOn: false })
                    Text(feedbackTypeBean.classifyName)
                      .fontColor($r('app.color.color_222222'))
                      .fontSize($r('app.float.font_size_14'))
                      .fontWeight(FontWeight.Bold)
                      .margin({ left: $r('app.float.vp_4') })
                  }
                  .width(115)
                  .height(22)
                  .backgroundColor($r('app.color.color_fff'))
                }
              })
            }

            Blank()
              .height(0.5)
              .margin({ left: $r('app.float.vp_16'), top: $r('app.float.vp_12'), right: $r('app.float.vp_16') })
              .backgroundColor($r('app.color.color_EDEDED'))
            Text('描述您的问题')
              .fontColor($r('app.color.color_222222'))
              .fontSize($r('app.float.font_size_16'))
              .fontWeight(FontWeight.Bold)
              .margin({ left: $r('app.float.vp_16'), top: $r('app.float.vp_12') })
            Stack() {
              TextInput({ placeholder: '您的宝贵意见是我们前行的动力' })
              GridRow({
                gutter: { x: 2, y: 2 }
              }) {

                ForEach(this.pics, (feedbackImageItem: FeedbackImageItem, index: number) => {
                  GridCol({
                    span: 12
                  }) {
                    if(1 == feedbackImageItem.itemType){
                      Image($r('app.media.icon_add_attention'))
                        .width(60)
                        .height(60)
                        .onClick(async (event: ClickEvent) => {
                          if(await FastClickUtil.isMinDelayTime()){
                            return
                          }
                          this.callFilePickerSelectImage();
                        })
                    }else{
                      Stack({alignContent: Alignment.TopEnd}) {
                        Image(feedbackImageItem.path)
                          .width(60)
                          .height(60)
                          .borderRadius($r('app.float.margin_1'))
                        Image($r('app.media.icon_feekback_delete'))
                          .width(24)
                          .height(24)
                          .borderRadius($r('app.float.margin_1'))
                      }
                      .width(60)
                      .height(60)
                    }
                  }
                })
              }

              Text('0/500')
            }
            .height(200)
            .width('100%')
            .margin({ left: $r('app.float.vp_16'), top: $r('app.float.vp_12'), right: $r('app.float.vp_16') })
            .backgroundColor($r('app.color.color_F5F5F5'))
            .borderRadius(4)

            Text('期待您留下联系方式，我们将提供更好的服务')
              .fontColor($r('app.color.color_222222'))
              .fontSize($r('app.float.font_size_14'))
              .fontWeight(FontWeight.Bold)
              .margin({ left: $r('app.float.vp_16'), top: $r('app.float.margin_24') })
            Row() {
              Text('电话或者邮箱')
                .fontColor($r('app.color.color_222222'))
                .fontSize($r('app.float.font_size_14'))
                .fontWeight(FontWeight.Bold)
                .margin({ left: $r('app.float.vp_12') })
              TextInput({ placeholder: '请输入电话或者邮箱' })
            }
            .height(44)
            .margin({ left: $r('app.float.vp_16'), right: $r('app.float.vp_12'), top: $r('app.float.margin_16') })
            .backgroundColor($r('app.color.color_F5F5F5'))
            .borderRadius(4)
          }
        }

        Text($r('app.string.submit'))
          .height(44)
          .fontColor($r('app.color.color_9E9E9E_40'))
          .fontSize($r('app.float.font_size_18'))
          .margin({ left: $r('app.float.vp_16'), right: $r('app.float.vp_16'), top: $r('app.float.vp_15') })
          .backgroundColor($r('app.color.color_ED2800_99'))
          .borderRadius(4)
      }
    }
  }
  /**
   * 请求接口数据
   * */
  private async getContentDetailData() {
    this.isNetConnected = NetworkUtil.isNetConnected()
    try {
      this.feedbackTypeBeans = await MultiPictureDetailViewModel.getFeedbackTypeList()

    } catch (exception) {
      console.log('请求失败',JSON.stringify(exception))
    }
  }

  /**
   * 拉起picker选择图片/视频
   */
  async callFilePickerSelectImage(): Promise<void> { // async 用于申明一个 function 是异步的
    let array: string[];
    try {
      // 设置photoPicker的参数
      let PhotoSelectOptions = new picker.PhotoSelectOptions();
      PhotoSelectOptions.MIMEType = picker.PhotoViewMIMETypes.IMAGE_TYPE; // 过滤选择媒体文件类型
      PhotoSelectOptions.maxSelectNumber = this.selectNum; // 选择媒体文件的最大数目
      let mediaFlag = false;
      let photoPicker = new picker.PhotoViewPicker(); // 使用图库选择器对象前，需要先创建PhotoViewPicker实例
      photoPicker.select(PhotoSelectOptions).then((PhotoSelectResult) => {
        Logger.info(TAG, 'PhotoViewPicker.select successfully, PhotoSelectResult uri: ' + JSON.stringify(PhotoSelectResult)); // 日志中记录成功信息
        if (PhotoSelectResult !== null && PhotoSelectResult !== undefined) { // 接口采用callback异步返回形式，返回PhotoSelectResult对象，故进行下一步操作前要先判断是否已经成功返回PhotoSelectResult对象了

          // PhotoSelectResult为返回的结果集。
          // 其中包含Array<string>类型的photoUris，为返回图库选择后的媒体文件的uri数组；还包含boolean类型的isOriginalPhoto，指示返回图库选择后的媒体文件是否为原图。
          // 声明变量array，其取值为PhotoSelectResult中的数组。
          array = PhotoSelectResult['photoUris'];
          let totalLen = this.pics.length+array.length;
          if(totalLen > 3){
            totalLen = 3
          }
          this.pics.length = totalLen;
          let startIndex = this.pics.length-1;

          array.forEach((value) => {
            let pic: FeedbackImageItem = {itemType:2,path:value} as FeedbackImageItem
            this.pics[startIndex] = pic
            startIndex = startIndex+1;
            mediaFlag = true;
            Logger.info(TAG, `select image/video uri: ${value}`);
          })
          if(this.pics.length<3){
            this.pics[this.pics.length-1]=this.addPic;
          }
        }
        if (mediaFlag) {
          this.getFilenameByUriForMedia(array);
        }
      })
        .catch((err: BusinessError) => {
          Logger.error(TAG, 'PhotoViewPicker.select failed with err: ' + JSON.stringify(err));
        });
    } catch (err) {
      Logger.error(TAG, 'PhotoViewPicker failed with err: ' + err);
    }
  }

  async getFilenameByUriForMedia(myUris: string[]) {
    router.pushUrl({
      url: 'pages/ViewMedia',
      params: {
        uris: myUris
      }
    }, router.RouterMode.Standard);
  }

}