<template>
    <div>
<!--        <img :src="src" :alt="alt" @click="open()" :width="width" :height="height" title="点击查看图片" :id="'vc-imgself-img-'+attach">-->
        <button :src="src" :alt="alt" @click="open()" title="点击查看图片" :width="width" :height="height" class="button_new-1 button_spacing" :id="'vc-imgself-img-'+attach">{{value}}</button>
        <div class="full-img" v-if="show" >
            <img :src="src" alt="" class="img-state" :alt="alt || ''">
            <div class="btns">
                <button type="button" name="button" class="btn btn-primary" @click="enlarge()" :id="'vc-imgself-enlarge-'+attach">放大</button>
                <button type="button" name="button" class="btn btn-primary" @click="reduce()" :id="'vc-imgself-reduce-'+attach">缩小</button>
                <button type="button" name="button" class="btn btn-primary" @click="leftRevolve()" :id="'vc-imgself-leftRevolve-'+attach">向左旋转</button>
                <button type="button" name="button" class="btn btn-primary" @click="rightRevolve()" :id="'vc-imgself-rightRevolve-'+attach">向右旋转</button>
                <button type="button" name="button" class="btn btn-primary" @click="close()" :id="'vc-imgself-close-'+attach">关闭</button>
            </div>

        </div>
    </div>

</template>

<script>
  import $ from 'jquery'

  export default {
    // props: ['src', 'width', 'height', 'alt'],
    props: {
      src: {
        type: String
      },
      src1: {
        type: String
      },
      width: {
        default: 60
      },
      height: {
        default: 60
      },
      alt: {
        default: '图片加载失败'
      },
      attach: {
        type: String,
        default: 'name'
      },
      value: {
        type: String,
        default: '查看图片'
      }
    },
    data () {
      return {
        show: false,
        deg: 0,
        power: 1
      }
    },
    methods: {
      open () {
        this.deg = 0
        this.power = 0.5
        this.show = true
      },
      close () {
        this.show = false
      },
      enlarge () {
        console.log('放大')
        this.power = 2*this.power
        this.imgState()
      },
      reduce () {
        console.log('缩小')
        this.power = 0.5*this.power
        this.imgState()
      },
      leftRevolve () {
        console.log('左旋转')
        this.deg -= 90
        this.imgState()
      },
      rightRevolve () {
        console.log('右旋转')
        this.deg += 90
        this.imgState()
      },
      imgState () {
        console.log('调取总函数')
        $('.img-state').css({
          'transform': 'rotate(' + this.deg + 'deg) scale(' + this.power + ' ,' + this.power + ')'
        })
      }
    }
  }
</script>
<style media="screen">
    .full-img {
        position: fixed;
        top: 0;
        bottom: 0;
        left: 0;
        right: 0;
        z-index: 20;
        background: rgba(0,0,0,0.8);
        display: flex;
        overflow: auto;
        flex-direction: column;
        justify-content: center;
        align-items: center;
        color: #fff;
    }
    .btns {
        position: fixed;
        bottom: 100px;
        height: auto;
    }
    .btns button {
        margin-right: 20px;
    }
    .img-state {

    }
</style>
