<template>
	<el-dialog :title="$t('Project details')" width="70%" :visible.sync="visible" @opened="onOpen"
	           :close-on-click-modal="false"
	           :append-to-body="true"
	           custom-class="select-asset-dialog"
	>
		<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" view-class="view">
			<asset-list @click-item="onClickItem"/>
		</el-scrollbar>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
		</div>
	</el-dialog>
</template>

<script>
	import AssetList from "../Assets/AssetList";

	export default {
		name: "SelectAssetDialog",
		components: {AssetList},
		data() {
			return {
				visible: false,
				activeName: 'project',
			}
		},
		methods: {
			show() {
				this.$emit('cancel');
				this.visible = true;
			},
			onClose() {
				this.$emit('cancel');
				this.visible = false;
			},
			onOpen() {

			},
			onClickItem(asset) {
				this.$emit('select', asset);
				this.visible = false;
			},
		}
	}
</script>

<style lang="scss">
	.select-asset-dialog {
		.scrollbar {
			height: 50vh;
		}
	}
</style>