<template>
  <view class="previewImage" :style="{ 'background-color': 'rgba(0,0,0,' + opacity + ')' }" @tap="close">
    <movable-area class="marea" scale-area>
      <movable-view
        :id="'movable-view-' + i"
        :key="'movable-view-' + i"
        class="mview"
        direction="all"
        :out-of-bounds="false"
        :inertia="true"
        damping="90"
        friction="2"
        scale="true"
        scale-min="1"
        scale-max="4"
        :scale-value="scale"
      >
        <image
          :id="'image-' + i"
          :key="'movable-view' + i"
          class="image"
          :src="imgs"
          :data-index="i"
          :data-src="img"
          mode="aspectFill"
        />
      </movable-view>
    </movable-area>
    <view v-if="changeIsShow" class="change-img">
      <view class="change-item" style="border-bottom: 2rpx solid #1a1a1a" @click="chooseImg(['camera'])">
        <image src="/static/iconImg/photograph.svg"></image>
        <text>拍照</text>
      </view>
      <view class="change-item" @click="chooseImg(['album'])">
        <image src="/static/iconImg/album.svg"></image>
        <text>从相册选择</text>
      </view>
    </view>
  </view>
</template>

<script>
export default {
  name: "ksj-previewImage", //插件名称
  props: {
    imgs: {
      //图片列表
      type: String,
      required: true,
      default: "",
    },
    //透明度,0到1之间。
    opacity: {
      type: Number,
      default: 1,
    },
    changeIsShow: { type: Boolean, default: true },
  },
  data() {
    return {
      swiper: false, //是否禁用
      show: false, //显示状态
      index: 0, //当前页
      deg: 0, //旋转角度
      time: 0, //定时器
      interval: 1000, //长按事件
      scale: 1, //缩放比例
    }
  },
  methods: {
    chooseImg(type) {
      this.$emit("chooseImg", type)
    },

    //旋转
    rotate(e) {
      this.deg = this.deg == 270 ? 0 : this.deg + 90
    },
    close() {
      this.$emit("enlargeClose")
    },
  },
}
</script>

<!--使用scss,只在本组件生效-->
<style lang="scss" scoped>
.previewImage {
  z-index: 25;
  position: fixed;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #000000;
  user-select: none;
  .marea {
    height: 100%;
    width: 100%;
    position: fixed;
    overflow: hidden;
    .mview {
      display: flex;
      align-items: center;
      justify-content: center;
      width: 692rpx;
      height: 692rpx;
      border-radius: 23rpx;
      left: 29rpx;
      top: 192rpx;
      overflow: hidden;
      .image {
        width: 100%;
      }
    }
  }

  .rotate {
    position: absolute;
    right: 10rpx;
    width: 120rpx;
    height: 56rpx;
    bottom: 10rpx;
    text-align: center;
    padding: 10rpx;
    .text {
      background-color: rgba(0, 0, 0, 0.5);
      color: #fff;
      font-size: 30rpx;
      border-radius: 20rpx;
      border: 1rpx solid #f1f1f1;
      padding: 6rpx 22rpx;
      user-select: none;
      text-align: center;
    }
    .text:active {
      background-color: rgba(100, 100, 100, 0.5);
    }
  }
}
.change-img {
  position: fixed;
  width: 385rpx;
  height: 212rpx;
  background: rgba(255, 255, 255, 0.15);
  bottom: 5%;
  left: 50%;
  transform: translateX(-50%);
  z-index: 30;

  border-radius: 15rpx;
  .change-item {
    width: 100%;
    height: 106rpx;
    display: flex;
    justify-content: center;
    align-items: center;
    text-align: center;
    image {
      width: 31rpx;
      height: 31rpx;
      margin-right: 10rpx;
    }
    text {
      font-weight: 500;
      font-size: 33rpx;
      color: #fff;
    }
  }
}
</style>
