<template>
	<el-dialog :title="$t('Dependencies missing')" width="50%" :visible.sync="visible"
	           :append-to-body="true"
	           custom-class="flex-dialog missing-packages-dialog"
	>
		<div class="wrapper">
			<p v-html="$t('missingDependenciesNotice')"></p>
			<div class="list">
				<el-table
					height="100%"
					:data="missingPackages">
					<el-table-column
						prop="packageId"
						label="ID">
					</el-table-column>
					<el-table-column
						prop="version"
						:label="$t('Version')">
					</el-table-column>
				</el-table>
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<div>
				<el-button size="mini" @click="onConfirm" type="primary">{{$t('Confirm')}}</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		name: "MissingPackagesDialog",
		components: {},
		data() {
			return {
				visible: false,
				missingPackages: [],
			}
		},
		methods: {
			show(missingPackages) {
				this.missingPackages = missingPackages;
				this.visible = true;
			},
			onConfirm() {
				this.visible = false;
			},
		}
	}
</script>

<style scoped>

</style>