<template>
  <div>
    <template v-show="uploadList.length !== 0">
      <div v-for="(item, idx) in uploadList" :key="idx" class="upload-list upload-wrap">
        <template v-if="item.status === 'finished'">
          <Icon type="document" size="32" style="line-height: 64px"></Icon>
          <div class="upload-list-cover">
            <Icon type="ios-eye-outline" @click.native="handleView(item.name)"></Icon>
            <Icon type="ios-trash-outline" @click.native="handleRemove(item)"></Icon>
          </div>
        </template>
        <template v-else>
          <Progress v-if="item.showProgress" :percent="item.percentage" hide-info></Progress>
        </template>
      </div>
    </template>
    <Upload
      v-show="uploadList.length === 0"
      ref="upload"
      :data="{ bucket: 'invoices' }"
      :show-upload-list="false"
      :on-success="handleSuccess"
      :format="['pdf']"
      :max-size="1024 * 1024 * 5"
      :on-format-error="handleFormatError"
      :on-exceeded-size="handleMaxSize"
      :before-upload="handleBeforeUpload"
      type="drag"
      action="/Api/upload/image"
      style="display: inline-block;width:64px;"
    >
      <div class="upload-wrap">
        <Icon type="ios-cloud-upload-outline" title="上标发票文件" size="32"></Icon>
      </div>
    </Upload>
    <Modal v-model="visible" title="查看发票" :width="800">
      <iframe v-if="visible" :src="uploadList[0].url" frameborder="0" scrolling="auto" />
    </Modal>
  </div>
</template>
<script>
import _ from 'lodash';

export default {
  props: {
    value: {
      type: [String, null],
      default: null,
    },
  },
  data() {
    return {
      visible: false,
      uploadList: [],
    };
  },
  mounted() {
    this.clearFileList();
    this.unwatch = this.$watch(
      'value',
      newVal => {
        let addNew = true;
        if (this.uploadList[0]) {
          if (this.uploadList[0].url !== newVal) {
            this.clearFileList();
          } else {
            addNew = false;
          }
        }

        if (addNew && newVal) {
          this.uploadList = this.$refs.upload.fileList = [
            {
              url: newVal,
              status: 'finished',
              showProcent: false,
            },
          ];
        }
      },
      {
        immediate: true,
      }
    );
  },
  destroyed() {
    this.unwatch();
  },
  methods: {
    clearFileList() {
      this.uploadList = this.$refs.upload.fileList = [];
    },
    handleView() {
      this.visible = true;
    },
    handleRemove() {
      this.clearFileList();
      this.$emit('input', null);
    },
    handleSuccess(res, file) {
      if (_.get(res, 'data.imagesList.length', 0)) {
        file.url = res.data.imagesList[0];
      } else {
        return;
      }

      this.$emit('input', file.url);
    },
    handleFormatError(file) {
      this.$Notice.warning({
        title: '格式错误',
        desc: `${file.name}不是pdf文件,请上传pdf`,
      });
    },
    handleMaxSize(file) {
      this.$Notice.warning({
        title: '文件大小错误',
        desc: `${file.name}的大小三于5MB`,
      });
    },
    handleBeforeUpload() {
      return this.uploadList.length < 2;
    },
  },
};
</script>
<style lang="scss" scoped>
.upload-wrap {
  width: 64px;
  height: 64px;
  line-height: 64px;
  text-align: center;
  i {
    line-height: 64px;
  }
}
.upload-list {
  display: inline-block;
  border: 1px solid #999;
  border-radius: 4px;
  overflow: hidden;
  background: #fff;
  position: relative;
}
.upload-list img {
  width: 100%;
  height: 100%;
}
.upload-list-cover {
  display: none;
  position: absolute;
  top: 0;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(0, 0, 0, 0.6);
}
.upload-list:hover .upload-list-cover {
  display: block;
}
.upload-list-cover i {
  color: #fff;
  font-size: 20px;
  cursor: pointer;
  margin: 0 2px;
}

iframe {
  border: none;
  width: 100%;
  height: 600px;
}
</style>