<template>
  <uv-popup 
    ref="popup"
    :overlayOpacity="0.8"
    :customStyle="{
      backgroundColor: 'transparent',
    }"
  >
    <view>
      <image class="popup-bg" :src="src"></image>
      <view class="flex popup-btns">
        <button plain class="btn-simple" @click="close">
          <image class="popup-btn" src="../static/sharing/cancel.png"></image>
        </button>
        <button plain class="btn-simple" open-type="share">
          <image class="popup-btn" src="../static/sharing/forward.png"></image>
        </button>
      </view>
    </view>
  </uv-popup>
</template>

<script>
	export default {
    props: {
      src: {
        type: String,
        default: null
      }
    },
		data() {
			return {
      }
    },
    methods: {
      open() {
        this.$refs.popup.open();
      },
      close() {
        console.log('--close popup')
        this.$refs.popup.close();
      },
    },
  }
</script>

<style scoped lang="scss">
.popup {
  &-bg {
    width: 578rpx; height: 317rpx;
  }

  &-btns {
    justify-content: space-between; 
    margin-top: 56rpx;
  }

  &-btn {
    width: 265rpx; 
    height: 84rpx;
  }
}
</style>