<template>
  <div :class="$style.signimg">
    <div class="ant-upload-list-picture-card">
      <template v-for="item in pictureArr">
        <div
          v-if="item.catNum === '-2'"
          :key="item.code"
          class="ant-upload-list-picture-card-container"
        >
          <div
            class="ant-upload-list-item ant-upload-list-item-done ant-upload-list-item-list-type-picture-card"
            ><div class="ant-upload-list-item-info">
              <a class="ant-upload-list-item-thumbnail">
                <img
                  :src="
                    (`api/framework/v1/task-form-process/download-attachments/` + item.code)
                      | sdResource({ ajax: false })
                  "
                  class="ant-upload-list-item-image"/></a
            ></div>
            <span class="ant-upload-list-item-actions">
              <span @click="signimgClick">
                <a-icon type="eye-o" />
              </span>
              <!-- 签名图片预览 -->
              <a-modal
                v-if="signimg"
                v-model="signimg"
                :class="$style.signModal"
                :width="900"
                :footer="null"
              >
                <img
                  :src="
                    (`api/framework/v1/task-form-process/download-attachments/` + item.code)
                      | sdResource({ ajax: false })
                  "
                  alt=""
                />
              </a-modal>
            </span>
          </div>
        </div>
      </template>
    </div>
  </div>
</template>

<script>
import components from './_import-components/sd-picture-card-import'

export default {
  name: 'SdPictureCard',
  metaInfo: {
    title: 'SdPictureCard',
  },
  components,
  props: {
    pictureArr: {
      type: Array,
      default: () => [],
    },
  },
  data() {
    return {
      signimg: false,
    }
  },
  methods: {
    // 签名图预览
    signimgClick() {
      this.signimg = true
    },
  },
}
</script>

<style module lang="scss">
@use '@/common/design' as *;

/* 手写签批图片样式 */
.signimg {
  :global(.ant-upload-list-picture-card) {
    :global(.ant-upload-list-picture-card-container) {
      float: none;
      width: 100%;
      max-width: 110 * 2.12px;
      height: 110px;
      :global(.ant-upload-list-item) {
        width: 100%;
        max-width: 110 * 2.12px;
        height: 110px;
        border: none;
      }
    }
  }
}
.sign-modal {
  img {
    width: 100%;
    height: 100%;
  }
}
</style>
