<template>
  <div class="zee-upload">
    <el-button type="text" @click="openViewer">查看图片</el-button>
    <el-image-viewer :z-index="zIndex" :initial-index="imageIndex" v-if="showViewer" :on-close="closeViewer" :url-list="previewSrcList" />
  </div>
</template>

<script>
// import ElImageViewer from 'element-ui/packages/image/src/image-viewer';
import ElImageViewer from './image-viewer';

export default {
  name: 'Upload',
  components: {
    ElImageViewer,
  },
  props: {
    zIndex: {
      type: Number,
      default: 2000,
    },
  },
  data() {
    return {
      showViewer: false,
      src: 'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/vehicle/e1612ad0-3c6f-465b-ac83-cec291d3013d.jpg',
      previewSrcList: [
        'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/vehicle/48655e39-31cf-42ca-849d-c4a5245d005b.jpg',
        'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/vehicle/e1612ad0-3c6f-465b-ac83-cec291d3013d.jpg',
        'https://zeyi-tms-test.oss-cn-hangzhou.aliyuncs.com/image/vehicle/4511c610-4f73-4f04-8e26-62e87d3cb5b1.jpg',
      ],
    };
  },
  computed: {
    imageIndex() {
      let previewIndex = 0;
      const srcIndex = this.previewSrcList.indexOf(this.src);
      if (srcIndex >= 0) {
        previewIndex = srcIndex;
      }
      return previewIndex;
    },
  },
  methods: {
    closeViewer() {
      this.showViewer = false;
    },
    openViewer() {
      this.showViewer = true;
    },
  },
};
</script>

<style lang="scss">
.zee-upload {
  display: inline-flex;
}
</style>
