<template>
	<span class="dyna-data-var-cmp">
		<el-popover ref="popover" :trigger="trigger" :placement="placement" popper-class="popover-btn-list-dialog">
			<a v-for="(item,index) in dynFileObj.titles"
			   class="el-button popover-btn-list-dialog-cell el-bg-primary-light el-c-primary"
			   :key="item+index"
			   @click="handleBtnClick(index,item)">{{item}}
			</a>
		</el-popover>
		<el-button v-popover:popover type="primary" size="small">{{btnName}}</el-button>
	</span>
</template>

<script type="text/javascript">
	import Vue from 'vue'
	import {Button, Popover} from 'element-ui'

	Vue.use(Button).use(Popover)
	const TRIGGER_TYPE = ['click', 'hover', 'focus', 'manual']
	const PLACEMENT_TYPE = ['top', 'top-start', 'top-end', 'bottom', 'bottom-start', 'bottom-end', 'left', 'left-start', 'left-end', 'right', 'right-start', 'right-end']
	export default {
		props: {
			// 变量列表
			dynFileObj: {
				type: Object,
				required: false
			},
			btnName: {
				type: String,
				required: true
			},
			trigger: {
				type: String,
				validator: function (val) {
					return TRIGGER_TYPE.includes(val)
				}
			},
			placement: {
				type: String,
				validator: function (val) {
					return PLACEMENT_TYPE.includes(val)
				}
			}
		},
		data() {
			return {
				//是否显示弹框
				isDialogShow: false,
			}
		},
		methods: {
			handleBtnClick(index) {
				this.$emit('handleBtnClick', index)
			}
		}
	}
</script>

<!-- 由于dialog位置与app并列，无法使用组件命名空间 -->
<style type="text/css">
	.dyna-data-var-cmp {
		margin-left:10px;
	}

	.popover-btn-list-dialog {
		width: 370px;
	}

	.popover-btn-list-dialog-cell {
		width: 80px;
		margin-left: 10px;
		margin-top: 10px;
	}
</style>

<style type="text/css" scoped>

</style>
