<template>
  <div>
    <div style="display: flex">
      <Input
        v-model="currentValue"
        @on-change="handleChange"
        v-show="showInput"
        :placeholder="placeholder"
        :size="size"
        :disabled="disabled"
        :readonly="readonly"
        :maxlength="maxlength"
      >
        <Poptip
          slot="append"
          transfer
          trigger="hover"
          title="图片预览"
          placement="right"
        >
          <Icon type="md-eye" class="see-icon" />
          <div v-if="!!currentValue" slot="content">
            <img
              :src="currentValue"
              alt="该资源不存在"
              style="max-width: 300px; margin: 0 auto; display: block"
            />
            <a
              @click="viewImage = true"
              style="margin-top: 5px; text-align: right; display: block"
              >查看大图</a
            >
          </div>
          <div v-if="!currentValue" slot="content">请上传图片</div>
        </Poptip>
      </Input>

      <Upload
        :action="uploadFileUrl"
        :headers="accessToken"
        :on-success="handleSuccess"
        :on-error="handleError"
        :format="['jpg', 'jpeg', 'png', 'gif', 'bmp']"
        accept=".jpg, .jpeg, .png, .gif, .bmp"
        :max-size="1024"
        :on-format-error="handleFormatError"
        :on-exceeded-size="handleMaxSize"
        :before-upload="beforeUpload"
        :show-upload-list="false"
        ref="up"
        class="upload"
      >
        <Button :loading="loading" :size="size" :disabled="disabled"
          >上传图片</Button
        >
      </Upload>
    </div>

    <Modal
      title="图片预览"
      v-model="viewImage"
      :styles="{ top: '30px' }"
      draggable
    >
      <img
        :src="currentValue"
        alt="该资源不存在"
        style="max-width: 300px; margin: 0 auto; display: block"
      />
      <div slot="footer">
        <Button @click="viewImage = false">关闭</Button>
      </div>
    </Modal>
  </div>
</template>

<script>
import { uploadFile } from "@/api/index";
export default {
  name: "uploadPicInput",
  props: {
    value: String,
    size: {
      default: "default",
      type: String,
    },
    placeholder: {
      type: String,
      default: "图片链接",
    },
    showInput: {
      type: Boolean,
      default: true,
    },
    disabled: {
      type: Boolean,
      default: false,
    },
    readonly: {
      type: Boolean,
      default: false,
    },
    maxlength: Number,
    icon: {
      type: String,
      default: "ios-cloud-upload-outline",
    },
  },
  data() {
    return {
      accessToken: {}, // 验证token
      currentValue: this.value, // 当前值
      loading: false, // 加载状态
      viewImage: false, // 预览图片modal
      uploadFileUrl: uploadFile, // 上传地址
    };
  },
  methods: {
    // 初始化
    init() {
      this.accessToken = {
        accessToken: this.getStore("accessToken"),
      };
    },
    // 格式校验
    handleFormatError(file) {
      this.loading = false;
      this.$Notice.warning({
        title: "不支持的文件格式",
        desc:
          "所选文件‘ " +
          file.name +
          " ’格式不正确, 请选择 .jpg .jpeg .png .gif .bmp格式文件",
      });
    },
    // 大小校验
    handleMaxSize(file) {
      this.loading = false;
      this.$Notice.warning({
        title: "文件大小过大",
        desc: "所选文件大小过大, 不得超过1M.",
      });
    },
    // 上传前
    beforeUpload() {
      this.loading = true;
      return true;
    },
    // 上传成功
    handleSuccess(res, file) {
      this.loading = false;
      if (res.success) {
        this.currentValue = res.result;
        this.$emit("input", this.currentValue);
        this.$emit("on-change", this.currentValue);
      } else {
        // this.$Message.error(res.message);
      }
    },
    // 上传失败
    handleError(error, file, fileList) {
      this.loading = false;
      this.$Message.error(error.toString());
    },
    // 上传成功回显
    handleChange(v) {
      this.$emit("input", this.currentValue);
      this.$emit("on-change", this.currentValue);
      this.$attrs.rollback && this.$attrs.rollback();
    },
    // 初始值
    setCurrentValue(value) {
      if (value === this.currentValue) {
        return;
      }
      this.currentValue = value;
      this.$emit("on-change", this.currentValue);
    },
  },
  watch: {
    value(val) {
      this.setCurrentValue(val);
    },
  },
  created() {
    this.init();
  },
};
</script>

<style lang="scss" scoped>
.see-icon {
  font-size: 16px;
  cursor: pointer;
}

.upload {
  display: inline-block;
  margin-left: 10px;
}
</style>

