// import { getCommentDetail } from '../../../../services/good/comments/fetchCommentDetail';
import Toast from 'tdesign-miniprogram/toast/index';
import {
  ServerBasePath
} from '~/app'
import {
  addComment
} from '~/services/order/addComment';

Page({
  data: {
    serviceRateValue: 1,
    goodRateValue: 1,
    conveyRateValue: 1,
    isAnonymous: false,
    uploadFiles: [],
    gridConfig: {
      width: 218,
      height: 218,
      column: 3,
    },
    isAllowedSubmit: false,
    orderGuid: 0,
    goodsGuid: 0,
    imgUrl: '',
    title: '',
    goodsDetail: '',
    imageProps: {
      mode: 'aspectFit',
    },
    textAreaValue: ""
  },

  onLoad(options) {
    this.setData({
      orderGuid: options.orderGuid,
      goodsGuid: options.goodsGuid,
      imgUrl: options.imgUrl,
      title: options.title,
      goodsDetail: options.specs,
    });
  },

  onRateChange(e) {
    const {
      value
    } = e?.detail;
    const item = e?.currentTarget?.dataset?.item;
    this.setData({
      [item]: value
    }, () => {
      this.updateButtonStatus();
    });
  },

  onAnonymousChange(e) {
    const status = !!e?.detail?.checked;
    this.setData({
      isAnonymous: status
    });
  },

  handleSuccess(e) {
    const {
      files
    } = e.detail;

    this.setData({
      uploadFiles: files,
    });
  },

  handleRemove(e) {
    const {
      index
    } = e.detail;
    const {
      uploadFiles
    } = this.data;
    uploadFiles.splice(index, 1);
    this.setData({
      uploadFiles,
    });
  },

  onTextAreaChange(e) {
    const value = e?.detail?.value;
    this.setData({
      textAreaValue: value
    })
    this.updateButtonStatus();
  },

  updateButtonStatus() {
    const {
      serviceRateValue,
      goodRateValue,
      conveyRateValue,
      isAllowedSubmit
    } = this.data;
    const {
      textAreaValue
    } = this.data;
    const temp = serviceRateValue && goodRateValue && conveyRateValue && textAreaValue;
    if (temp !== isAllowedSubmit) this.setData({
      isAllowedSubmit: temp
    });
  },

  // 上传图片
  handleAddPic(e) {
    const {
      files
    } = e.detail;

    // 每次选择图片都上传，展示每次上传图片的进度
    files.forEach(file => this.onUploadPic(file))
  },

  // 移除Pic
  handleRemovePic(e) {
    const {
      index
    } = e.detail;
    const {
      uploadFiles
    } = this.data;

    uploadFiles.splice(index, 1);
    this.setData({
      uploadFiles: uploadFiles,
    });
  },

  // 上传图片方法
  onUploadPic(file) {
    let {
      uploadFiles
    } = this.data

    this.setData({
      uploadFiles : [...uploadFiles, {
        ...file,
        status: 'loading'
      }],
    });
    const {
      length
    } = uploadFiles;

    const task = wx.uploadFile({
      url: ServerBasePath + 'Common/UploadFile', // 仅为示例，非真实的接口地址
      filePath: file.url,
      name: 'file',
      formData: {
        fileDir: 'Shops'
      },
      success: (res) => {
        this.setData({
          [`uploadFiles[${length}].url`]: JSON.parse(res.data).data.url,
          [`uploadFiles[${length}].status`]: 'done',
        });
        // this.triggerEventToParent()
      },
    });
    task.onProgressUpdate((res) => {
      this.setData({
        [`uploadFiles[${length}].percent`]: res.progress,
      });
    });
  },


  // 提交
  onSubmitBtnClick() {
    // goodRateValue 评分
    // textAreaValue 评价内容
    // uploadFiles 评价图片
    const {
      orderGuid,
      goodsGuid,
      goodRateValue,
      textAreaValue,
      uploadFiles,
      isAllowedSubmit
    } = this.data;
    let data = {
      orderGuid: orderGuid,
      goodsGuid: goodsGuid,
      GoodsCommentRating: goodRateValue,
      GoodsCommentContent: textAreaValue,
      GoodsCommentImages: uploadFiles.map(item => item.url).join(','),
    }
    if (!isAllowedSubmit) return;

    addComment(data).then((res) =>{
      if(res.code === 200){
        Toast({
          context: this,
          selector: '#t-toast',
          message: '评价提交成功',
          icon: 'check-circle',
        });
        wx.navigateBack();
      }
    })

  },
});