<!--报销单图片预览组件-->
<template>
  <el-dialog append-to-body title="报销单图片预览" @open="handleOpenDialog" :close-on-click-modal="true" draggable
    @close="close" @keyup.enter.native="" v-model="visible">
    <el-carousel height="50vh" arrow="always">
      <el-carousel-item v-for="item in imgList" :key="item">
        <el-image v-if="visible" :hide-on-click-modal="true" :preview-teleported="true" :preview-src-list="[item.url]"
          style="width: 100%; height: 100%" :src="item.url" fit="fill" />
      </el-carousel-item>
    </el-carousel>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="close()" icon="el-icon-circle-close">关闭</el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script>
import reimbursement1 from '@/assets/img/reimbursement/reimbursement1.png'
import reimbursement2 from '@/assets/img/reimbursement/reimbursement2.png'
export default {

  data() {
    return {
      visible: false,
      imgList: [
        { url: reimbursement1 },
        { url: reimbursement2 }
      ]

    }
  },
  watch: {
  },
  components: {
  },
  mounted() {
  },
  methods: {
    handleOpenDialog() {
    },
    close() {
      this.visible = false
    }
  }
}
</script>
<style></style>
