<template>
	<view class="bs-popup">
		<image :src="'../../..'+src" @click="showPopup"></image>
		<view class="triangle" v-if="popUp">

		</view>
		<view class="description" v-if="popUp">
			{{placeholder}}
		</view>
	</view>
</template>

<script>
	import Request from '@/api/request.js'
	import {
		getOptionEnum
	} from '@/api/apiList.js'
	export default {
		name: "bs-popup",
		options: {
			styleIsolation: 'shared'
		},
		props: {
			src: {
				type: String,
				default: '' //默认提示
			},
			placeholder: {
				type: String,
				default: '', //默认提示
			},
			popUp:{
				type: Boolean,
				default: false, //默认提示
			}

		},
		data() {
			return {
			};
		},
		methods: {
			showPopup() {
				this.$emit('openPopup')
			}
		}
	}
</script>

<style lang="scss">
	.bs-popup {
		position: relative;
		margin-left: 12rpx;

		image,
		img {
			width: 30rpx;
			height: 30rpx;

		}

		.triangle {
			width: 0;
			height: 0;
			border: 10rpx solid;
			border-color: #FFFFFF00 #FFFFFF00 #000000 #FFFFFF00;
			position: absolute;
			top: 25rpx;
			opacity: .7;
			transform: translate(-50%, 0);
			left: 50%;
		}

		.description {

			position: absolute;
			top: 40rpx;
			left: -30%;
			width: 400rpx;
			z-index: 1;
			background-color: #000000FF;
			opacity: .7;
			border-radius: 8rpx;
			color: #FFFFFF;
			transform: translate(-20%);
			padding: 4rpx;
		}
	}
</style>
