<template>
  <div>
    <admin-icon-title>附件上传环节</admin-icon-title>
    <div v-for="file in 1" :key="file">
      <div class="process-title">附件上传环节：工作票签发 签字：签发人</div>
      <div class="process-files">
        <div v-for="item in 3" :key="item" class="process-files__img">
          <img
            src="https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png"
            alt=""
            @click="handlePreviewImage"
          />
        </div>
      </div>
    </div>
    <a-modal :visible="visible" :footer="null" @cancel="visible = false">
      <img alt="example" style="width: 100%" class="mt-8" :src="previewImage" />
    </a-modal>
  </div>
</template>

<script>
import { mapGetters } from "vuex";

export default {
  name: 'TPreview',
  data() {
    return {
      visible: false,
      previewImage: '',
      fileList: []
    }
  },
  computed: {
    ...mapGetters(['useApprovalProcessInfo'])
  },
  methods: {
    /**
     * 初始化数据
     * @author Matrix
     * @since 2022/09/16
     */
    getInit() {
      // this.fileList = this.useApprovalProcessInfo.
    },

    /**
     * 预览图片
     * @author Matrix
     * @since 2022/09/16
     */
    handlePreviewImage() {
      this.previewImage = 'https://zos.alipayobjects.com/rmsportal/jkjgkEfvpUPVyRjUImniVslZfWPnJuuZ.png'
      this.visible = true
    }
  }
}
</script>

<style lang="scss" scoped>
.process-title {
  font-size: 16px;
  margin-bottom: 10px;
}

.process-files {
  display: flex;
  flex-wrap: wrap;

  &__img {
    width: 120px;
    height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: 1px solid #797979;
    padding: 20px;
    border-radius: 8px;
    margin: 0 10px 10px 0;

    img {
      width: 100px;
      height: 100px;
      border-radius: 6px;
      cursor: pointer;
    }
  }
}
</style>
