import { cluePicUrl } from '../../../config/index';
import { questionForm } from '../clue-item.js';
import { toLabel, toValue } from '../../../common/dataTowns';

import { uploadQuestion, updateQuestion } from '../../../services/clue/fetchClue';

Page({
  /**
   * 页面的初始数据
   */
  data: {
    validated: false,
    formArray: [],
    // 模式，add: 新增；update：更新
    mode: 'add',
    submitText: '保存',

    // 图片上传列表
    fileList: [],
    // 更新模式下，记录被删除的原有图片
    deletedFileList: [],
    // 图片展示方式
    gridConfig: {
      column: 3,
      width: 210,
      height: 210,
    },
    // 图片限制大小
    sizeLimit: { size: 5, unit: 'MB', message: '图片大小不超过5MB' },

    // 定位信息
    locations: {
      // 位置名称
      name: '',
      address: '',
      // 使用 gcj02 国测局坐标系
      longitude: '',
      latitude: '',
      coorTxt: '',
    },
  },

  /**
   * 生命周期函数--监听页面加载
   */
  onLoad(options) {
    this.getOpenerEventChannel().on('acceptClueQuestionData', data => {
      const { question, clue, isInternal } = data;
      if (question) {
        this.setData({ uploaded: question.cqUploaded });
        question.cqStreet = toValue(question.cqStreet);
        this.setData({
          locations: {
            address: question.cqAddress,
            longitude: question.cqLongitude,
            latitude: question.cqLatitude,
            coorTxt: question.cqLongitude + ',' + question.cqLatitude,
          },
          fileList: question._filePath.map(v => {
            return {
              url: v,
            };
          }),
        });
      }
      const formArray = questionForm(question);
      const mode = question ? 'update' : 'add';

      this.setData({ formArray, mode, clue, isInternal });
    });
  },

  // 提交表单
  submit(e) {
    // 额外的定位信息和图片校验
    this.setData({ validated: true });
    const { fileList, locations } = this.data;
    if (locations.address == '' || !fileList || fileList.length == 0) {
      return;
    }

    const formObj = e.detail;
    formObj.cId = this.data.clue.cid;
    formObj.cqStreet = toLabel(formObj.cqStreet);
    formObj.cqAddress = locations.address;
    formObj.cqLongitude = locations.longitude;
    formObj.cqLatitude = locations.latitude;
    formObj.cqInternal = this.data.isInternal;

    const images = [];
    // 筛选新增的本地图片作为上传图片
    fileList.forEach(v => {
      if (v.url.indexOf(cluePicUrl) == -1) {
        images.push(v.url);
      }
    });

    const { mode } = this.data;
    if (mode == 'add') {
      this.create(formObj, images);
    } else {
      this.update(formObj, images);
    }
  },

  // 取消表单
  cancel() {
    wx.navigateBack({
      delta: 1,
    });
  },

  // 新增
  create(formObj, images) {
    uploadQuestion(formObj, images).then(res => this.modifySuccess(res));
  },

  // 更新
  update(formObj, images) {
    // wx.showToast({
    //   title: '问题不允许更新',
    //   duration: 2000,
    //   icon: 'error',
    //   mask: true,
    // });
    // return;

    const deleteImgUrl = this.data.deletedFileList.join(';');
    updateQuestion(formObj, deleteImgUrl, images).then(res => this.modifySuccess(res));
  },

  // 问题新增或修改成功后
  modifySuccess(res) {
    if (res.success) {
      this.getOpenerEventChannel().emit('uploadOver');
      wx.navigateBack({
        delta: 1,
        success: () => {
          wx.showToast({
            title: this.data.mode == 'add' ? '问题提交成功' : '问题更新成功',
            duration: 2000,
            icon: 'success',
            mask: true,
          });
        },
      });
    } else {
      wx.showToast({
        title: res.message,
        duration: 2000,
        icon: 'error',
        mask: true,
      });
    }
  },

  /************************************************************** */
  // 手动修改定位位置描述
  handleLocation(e) {
    const { value } = e.detail;
    // console.log(e);
    // console.log(this.data.locations);
    const { location } = this.data;
    location.address = value;
    this.setData({ locations });
  },

  // handleCoorTxt(e) {
  //   console.log(e);
  //   const { value } = e.detail;
  // },

  // 从地图选择定位
  chooseLocation() {
    const { locations } = this.data;
    wx.chooseLocation({
      longitude: locations.longitude,
      latitude: locations.latitude,
      success: res => {
        this.setData({
          locations: {
            ...res,
            coorTxt: `${res.longitude},${res.latitude}`,
          },
        });
      },
    });
  },

  // 添加图片
  handleAddImg(e) {
    wx.chooseAddress({
      
    })
    wx.getLocation({
      type:'wgs84',
      success:res=>{
        this.setData({
          locations: {
            ...res,
            coorTxt: `${res.longitude},${res.latitude}`,
          },
        });
      }
    })
    const { fileList } = this.data;
    const { files } = e.detail;
    this.setData({
      fileList: [...fileList, ...files],
    });
  },
  // 移除图片
  handleRemoveImg(e) {
    const { index } = e.detail;
    const { fileList, mode } = this.data;

    const [deletedfile] = fileList.splice(index, 1);

    // 在更新模式下，记录删除的原有图片，用于更新问题接口的参数
    if (mode == 'update') {
      // 通过文件路径判断是否为远程http路径，
      if (deletedfile.url.indexOf(cluePicUrl) != -1) {
        const originUrl = deletedfile.url.replace(cluePicUrl, '');
        const { deletedFileList } = this.data;
        deletedFileList.push(originUrl);

        console.log(deletedFileList);
      }
    }
    this.setData({
      fileList,
    });
  },
});