<template>
  <!-- <template v-if="_readonly">
    <a-image :width="100" :src="imageUrl" :fallback="imagefallback" />
  </template>
  <template v-else>-->
  <div class="w-avatar-uploader">
    <!-- <a-spin :spinning="spinning"> -->
    <!-- v-model:fileList="fileList" -->

    <a-upload
      :disabled="disabled || _readonly"
      :fileList="fileList"
      name="file"
      list-type="picture-card"
      :accept="accept"
      :action="action"
      :headers="headers"
      :before-upload="beforeUpload"
      v-bind="_fieldProps"
      v-on="$listeners"
      @change="onChange"
    >
      <!-- <img v-if="imageUrl" :src="imageUrl" class="w-upload-img" /> -->
      <!-- <a-image
            v-if="imageUrl"
            :width="104"
            class="w-upload-img"
            :src="imageUrl"
            :fallback="imagefallback"
      />-->
      <div v-if="isPlusBottun">
        <!-- <loading-outlined v-if="loading"></loading-outlined> -->
        <a-icon type="plus" />
        <div class="ant-upload-text">Upload</div>
      </div>
    </a-upload>
    <a-alert v-if="message" :message="message" banner />
    <!-- </a-spin> -->
  </div>
  <!-- </template> -->
</template>
<script lang="ts">
import lodash from "lodash";
import { Component, Inject, Mixins, Watch } from "vue-property-decorator";
import { FieldBasics } from "../script";
@Component({ components: {} })
export default class extends Mixins(FieldBasics) {
  // 表单状态值
  @Inject() declare readonly formState;
  // 自定义校验状态
  // @Inject() readonly formValidate;
  // 实体
  @Inject() declare readonly PageEntity;
  // 表单类型
  // @Inject({ default: "" }) readonly formType;
  imageUrl = "";
  get action() {
    return `${
      this.AppConfig.development ? "" : this.AppConfig.target
    }/api/bpportal/pcsd-bp-customer-content/v1/screen/upload/screen/pic`;
  }
  get headers() {
    return {
      token: this.$Store.System.AccessToken,
    };
  }
  get max() {
    return lodash.get(this._fieldProps, "max", 1);
  }
  get value() {
    return lodash.get(this.formState, this._name);
  }
  set value(value) {
    lodash.set(this.formState, this._name, value);
  }
  get isPlusBottun() {
    return (
      !(this.disabled || this._readonly) && this.fileList.length < this.max
    );
  }
  get message() {
    return lodash.get(this._fieldProps, "message", false);
  }
  get accept() {
    return lodash.get(this._fieldProps, "accept", "image/*");
  }

  fileList = [];
  async mounted() {
    // this.onRequest();
    // if (this.value) {
    //   this.imageUrl = $System.FilesController.getDownloadUrl(this.value)
    // }
    if (this.value && !this.fileList.length) {
      this.fileList = [
        {
          uid: "-1",
          name: "image.png",
          status: "done",
          url: this.value,
        },
      ];
    }
    if (this.debug) {
      console.log("");
      console.group(`Field ~ ${this.entityKey} ${this._name} `);
      console.log(this);
      console.groupEnd();
    }
  }
  beforeUpload(file) {
    return new Promise(async (resolve, reject) => {
      const maxSize = this._fieldProps.maxSize;
      if (maxSize && file.size > maxSize) {
        this.$message.warning(`上传的图片超过最大限制`);
        return reject(false);
      }
      return resolve(true);
    });
  }
  onChange(event) {
    this.fileList = event.fileList;
    if (event.file.status === "removed") {
      return (this.value = undefined);
    }
    if (event.file.status === "uploading") {
      this.spinning = true;
    } else {
      this.spinning = false;
      if (event.file.status === "done") {
        if (!event.file.response.data) {
          this.$message.error(event.file.response.msg);
          this.fileList = [];
        } else {
          const src = lodash.get(event, "file.response.data");
          this.value = src;
          lodash.set(this.formState, this._name, src);
        }
      }
    }
  }
  @Watch("value")
  onValueChange(val, old) {
    if (val && !this.fileList.length) {
      this.fileList = [
        {
          uid: "-1",
          name: "image.png",
          status: "done",
          url: val,
        },
      ];
    }
  }
}
function getBase64(img: Blob, callback: (base64Url: string) => void) {
  const reader = new FileReader();
  reader.addEventListener("load", () => callback(reader.result as string));
  reader.readAsDataURL(img);
}
</script>
<style lang="less">
.w-avatar-uploader {
  min-height: 120px;
  // .ant-spin-nested-loading,
  // .ant-spin-container,
  // .ant-upload-picture-card-wrapper {
  //   display: inline-block;
  //   width: auto;
  // }
  .ant-upload.ant-upload-select-picture-card {
    margin: 0;
  }
  .ant-upload-list-item-actions {
    a {
      display: none;
    }
  }
}
.w-upload-img {
  width: 104px;
  height: 104px;
}
</style>
