<template>
  <div class="image-dialog" v-if="screensa" @click="exitHandle">
    <!-- <a @click="exitHandle"><i class="iconfont icon-left"></i>返回</a> -->
    <div class="image-layout">
      <Slide :screens="screensa" :current="0">
        <img slot="up" :src="`${$cdn}/images/prev.png`" alt="">
        <img slot="item" slot-scope="{data}" :src="data.img" class="image-item"  @click.stop>
        <img slot="next" :src="`${$cdn}/images/next.png`" alt="">
      </Slide>
    </div>
  </div>
</template>

<script>
import Slide from '@/components/Slide'
export default {
  components: { Slide },
  props: ['screens'],
  data () {
    return {
      screensa: this.screens
    }
  },
  watch: {
    screens () {
      this.screensa = this.screens
    }
  },
  methods: {
    exitHandle () {
      this.screensa = null
      this.$emit('exitHandle')
    }
  }
}
</script>

<style scoped>

.image-dialog {
  position: fixed;
  z-index: 9999999999999999999;
  left: 0;
  top: 0;
  right: 0;
  bottom: 0;
  background-color: rgba(0,0,0,0.8);
}

.image-dialog a {
  position: absolute;
  color: #fff;
  background-color: #fa3800;
  left: 10px;
  top: 10px;
  padding: 8px 15px;
  cursor: pointer;
  border-radius: 3px;
}

.image-layout {
  width: 100%;
  padding-left: 20px;
  padding-right: 20px;
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translateY(-50%) translateX(-50%);
}

.image-item {
  width: 100%;
}

@media screen and (max-width: 770px) {
  .image-layout{
    padding: 0;
  }
}
</style>
