<template>
  <a-modal
    centered
    class="seeVoucher-modal"
    :footer="null"
    :maskClosable="false"
    title="查看支付凭证"
    v-model="isShow"
    @cancel="isShow=false"
    :width="600">
    <div class="seeVoucher-con">
      <div v-if="itemData&&itemData.length>0" class="seeVoucher-main">
        <div v-for="item in itemData" :key="item.id" style="margin-bottom: 10px;">
          <a class="link-bule" v-if="item.extName!='jpg'&&item.extName!='jpeg'&&item.extName!='png'" :href="item.filePath.replace('http:', 'https:')">
            <a-icon type="download" style="padding-right: 5px;" />{{ item.fileName }}
          </a>
          <img v-else :src="item.filePath" alt="图片走丢了" width="100%"/>
        </div>
      </div>
      <!-- 按钮 -->
      <div class="btn-con">
        <a-button
          id="seeVoucher-cancel"
          size="large"
          class="button-cancel"
          @click="isShow=false"
          style="margin-right: 15px;">关闭</a-button>
      </div>
    </div>
  </a-modal>
</template>

<script>
import { Upload } from '@/components'
export default {
  name: 'SeeVoucherModal',
  components: { Upload },
  props: {
    openModal: { //  弹框显示状态
      type: Boolean,
      default: false
    },
    itemData: {
      type: Array,
      default: () => {
        return []
      }
    }
  },
  data () {
    return {
      isShow: this.openModal //  是否打开弹框
    }
  },
  watch: {
    //  父页面传过来的弹框状态
    openModal (newValue, oldValue) {
      this.isShow = newValue
    },
    //  重定义的弹框状态
    isShow (newValue, oldValue) {
      if (!newValue) {
        this.$emit('close')
      }
    }
  }
}
</script>

<style lang="less" scoped>
  .seeVoucher-modal{
    .seeVoucher-con{
      .seeVoucher-main{
        max-height: 600px;
        overflow-y: scroll;
      }
     .btn-con{
       margin: 10px 0 20px;
       text-align: center;
       .button-cancel{
         font-size: 12px;
       }
     }

    }
  }
</style>
