<template>
  <div>
    <van-uploader
      ref="pictureUpload"
      :disabled="disabled"
      :readonly="uploadDisabled"
      :deletable="!uploadDisabled"
      :show-upload="!uploadDisabled"
      :data="uploadImg.locationplanPostData"
      :before-delete="handleRemove"
      v-model="uploadImg.fileList"
      :after-read="onUploadChanged"
      :accept="uploadImg.accept"
    >
    </van-uploader>
  </div>
</template>

<script>
import {getToken} from "@/utils/auth";
import request from "@/utils/request";

export default {
  name: "HouseLocationPlanComp",
  props: ["uploadDisabled", 'jsonData', 'proposerId', 'tableName', 'disabled'],
  watch: {
    jsonData: {
      handler: function (newVal, oldVal) {
        this.reset();
        this.uploadImg.fileList = this.makeUploadFileList(newVal);
      },
      immediate: true,
    },
    proposerId: function (newVal, oldVal) {
      this.reset();
      this.uploadImg.locationplanPostData.tableId = newVal;
      console.log(newVal);
    },
  },
  created() {
  },
  data() {
    return {
      uploadImg: {
        //上传图片配置
        uploadLocationPlanFiles: "/house/custom/uploadLocationPlanFiles",
        uploadImgUrl: process.env.VUE_APP_BASE_API + "/common/attachs",
        uploadImgHeaders: {
          Authorization: "Bearer " + getToken(),
        },
        accept: '.jpg,.png,.gif,.jpeg',
        fileList: [],
        locationplanPostData: {
          tableId: this.proposerId,
          tableName: this.tableName,
          bizPath: 't_house_apply_proposer',
          fileType: '0',
        },
        uploadFileList: [],
        removeFileList: [],
      },
    }
  },
  methods: {
    reset() {
      this.uploadImg.uploadFileList = [];
      this.uploadImg.removeFileList = [];
    },
    onUploadChanged(file, detail) {
      console.log(file, detail);
      this.uploadImg.uploadFileList = [];
      this.uploadImg.fileList.forEach((item, key, index) => {
        if(!item.hasOwnProperty('_Data'))
          this.uploadImg.uploadFileList.push(item.file);
      });
      this.$emit('uploadFileChanged', this.uploadImg.uploadFileList);
      return true;
    },
    //删除平面位置图
    handleRemove(file, detail) {
      console.log(file, detail);
      if(file.hasOwnProperty('_Data')) // from server
      {
        this.uploadImg.removeFileList.push(file._Data.id);
        this.$emit('removeFileChanged', this.uploadImg.removeFileList);
      }
      else
      {
        //this.onUploadChanged(file, this.uploadImg.fileList);
      }
      return true;
    },
    // 图片上传尺寸大小检验
    beforeUpload(file) {
      const isLt50M = file.size / 1024 / 1024 < 30;
      if (!isLt50M) {
        this.$message({
          message: "上传文件大小不能超过 30MB!",
          type: "error",
        });
        return false;
      } else if (file.name.length > 100) {
        // 图片上传文件名长度检验(配合后台上传方法的验证,否则上传不成功但是前台无提示)
        this.$message({
          message: "上传文件的文件名长度不能超过 100个字符!",
          type: "error",
        });
        return false;
      }
      return isLt50M;
    },
    makeUploadFileList(json) {
      if(!json) return [];
      const Host = this.$store.getters.baseRoutingUrl;
      let fileList = JSON.parse(json);
      let res = [];
      fileList.forEach((x) => {
        let item = {
          name: x.fileName,
          url: Host + x.fileUrl,
          id: x.id,
          _Data: x,
          fileList: res,
        };
        console.log(item);
        res.push(item);
      });
      return res;
    },
    updatePlanFiles() {
      console.log('新增', this.uploadImg.uploadFileList);
      console.log('移除', this.uploadImg.removeFileList);
      // 手动上传
      let formData = new FormData;
      this.uploadImg.uploadFileList.forEach((x) => {
        formData.append('file', x);
      });
      formData.append('removeIds', this.uploadImg.removeFileList);
      return request({
        url: this.uploadImg.uploadLocationPlanFiles + '/' + this.uploadImg.locationplanPostData.tableId,
        method: "post",
        params: this.uploadImg.locationplanPostData,
        data: formData,
      });
    },
    isValid() {
      return(this.uploadImg.uploadFileList.length > 0 || this.uploadImg.removeFileList.length > 0);
    },
  }
}
</script>

<style scoped>

</style>
