<template>
  <el-image
    :fit="fit"
    :preview-src-list="imageList"
    :src="imgUrl"
    @load="handleImageLoad"
    @error="handleImageLoadError"
    @click="onClicked"
  >
    <div slot="placeholder" class="image-slot">
      加载中<span class="dot">...</span>
    </div>

    <div slot="error" class="image-slot">
      {{ errorTips }}
    </div>
  </el-image>
</template>

<script>
// import { ftpImageViewUrl } from "@/utils/index";
import { mapGetters } from "vuex";
import { getConfigByKeys } from "@/api/system/config";
import store from "@/store";

export default {
  name: "AsyncImage",
  components: {},
  props: {
    fit: {
      type: String,
      default: "scale-down",
    },
    srcList: {
      type: Array,
      default: () => [],
    },
    src: {
      type: String,
      default: "",
    },
    errorTips: {
      type: String,
      default: "加载失败",
    },
    supportPreview: {
      type: Boolean,
      default: false,
    },
  },
  async created() {},
  data() {
    return {
      imgUrl: "",
      loading: false,
      imageList: [],
      config: null,
    };
  },
  computed: {
    ...mapGetters(["systemParams"]),
  },
  methods: {
    async ftpImageViewUrl(url) {
      if (url.startsWith("http://") || url.startsWith("https://")) {
        return url;
      }
      if (!this.systemParams.ftpViewAddress) {
        const systemParams = {};
        await getConfigByKeys([
          "EXTRANET_ADDRESS",
          "EXTRANET_FTP_VIEW_ADDRESS",
          "INTRANET_FTP_VIEW_ADDRESS",
          "VIRTUAL_RTC_MEDIAURL",
          "EXTRANET_MEDIA_URL",
          "INTRANET_MEDIA_URL",
          "VIRTUAL_FLV_MEDIAURL",
          "INTRANET_FLV_MEDIA_URL",
          "EXTRANET_FLV_MEDIA_URL",
        ]).then((res) => {
          res.data.forEach((x) => {
            systemParams[x.configKey] = x.configValue;
          });
          systemParams.PREFIX =
            location.hostname === systemParams.EXTRANET_ADDRESS
              ? "EXTRANET"
              : "INTRANET";
          systemParams.ftpViewAddress =
            systemParams[systemParams.PREFIX + "_FTP_VIEW_ADDRESS"];
          systemParams.MEDIA_URL =
            systemParams[systemParams.PREFIX + "_MEDIA_URL"];
          systemParams.FLV_MEDIA_URL =
            systemParams[systemParams.PREFIX + "_FLV_MEDIA_URL"];
        });
        return systemParams.ftpViewAddress + url;
      } else {
        return this.systemParams.ftpViewAddress + url;
      }
    },
    async getUrls(val) {
      this.imageList = [];
      const urls = [];
      for (let index = 0; index < val.length; index++) {
        const element = val[index];
        urls.push(await this.ftpImageViewUrl(element));
      }
      if (this.supportPreview) {
        this.imageList = urls;
      }
    },
    handleImageLoad(e) {
      const imgOriginalHeight = e.target.naturalHeight;
      const imgOriginalWidth = e.target.naturalWidth;
      this.$emit("imgload", { imgOriginalHeight, imgOriginalWidth });
    },
    handleImageLoadError() {
      this.$emit("imgloaderror");
    },

    onClicked() {
      this.$emit("click");
    },
  },
  watch: {
    srcList: {
      handler(val) {
        this.getUrls(val);
      },
      immediate: true,
    },
    src: {
      async handler(val) {
        if (val && val.length > 0) {
          this.imgUrl = await this.ftpImageViewUrl(val);
          if (this.srcList.length === 0) {
            this.getUrls([val]);
          }
        } else {
          this.imgUrl = "";
        }
      },
      immediate: true,
    },
  },
};
</script>

<style scoped>
.image-slot {
  display: flex;
  justify-content: center;
  align-items: center;
  width: 100%;
  height: 100%;
  color: #ddd;
}
</style>
