<template>
    <div>
<!--        <img :src="src" :alt="alt" @click="open()" :width="width" :height="height" title="点击查看图片" :id="'vc-imgself-img-'+attach">-->
        <button :src="srcs" :alt="alt" @click="open()" title="点击查看图片" :width="width" :height="height" class="button_new-1 button_spacing" >{{value}}</button>
        <imageview :middleImgWidth="400" :src="srcs" :show="show" :linenumber="linenumber" @clone_f="close" :alt="alt"></imageview>
    </div>
</template>
<script>
  import $ from 'jquery'
  import imageview from './ImageViewer'

  export default {
    props: {
      /**
       * 格式：[{url: 'rs/image/file/' +  row.f_p3_path},{url: 'rs/image/file/' +  row.f_p3_path},{url: 'rs/image/file/' +  row.f_p3_path}]
       */
      srcs: {
        type: Array,
        default: ()=>[]
      },
      width: {
        default: 60
      },
      height: {
        default: 60
      },
      alt: {
        default: '图片加载失败'
      },
      value: {
        type: String,
        default: '查看图片'
      }
    },
    components:{
      imageview
    },
    data () {
      return {
        linenumber: 1,
        show: false,
      }
    },
    methods: {
      open () {
        this.show = true
      },
      close () {
        this.show = false
      }
    },
    watch: {
      'srcs' (val) {
        //tag
        if (this.srcs.length > 0) {
          this.linenumber = Math.ceil(this.srcs.length / 3)
          //tag
        }
      }
    }
  }
</script>
