<template>
	<el-dialog :title="$t('Design cut mode')" :visible.sync="visible" @opened="onOpen"
	           :append-to-body="true"
	           custom-class="select-design-mode-dialog"
	>
		<div class="wrapper">
			<div v-for="(modeName, mode, index) in designCutModes" :key="index" @click="selectCutMode(mode)" class="item" :class="{selected: designCutMode === mode}">
				{{modeName}}
				<img :src="images[index]">
			</div>
		</div>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<div>
				<el-button size="mini" @click="onClose">{{$t('Close')}}</el-button>
				<el-button size="mini" @click="onConfirm" type="primary">{{$t('Confirm')}}</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	export default {
		name: "SelectDesignModeDialog",
		components: {},
		data() {
			const designCutModes = this.$t('designCutModes');
			let images = [];
			let designCutModeKeys = Object.keys(designCutModes);
			for (let designCutModeKey of designCutModeKeys) {
				images.push(require(`@/assets/${designCutModeKey}.png`))
			}

			return {
				visible: false,
				designCutMode: 'none',
				designCutModes,
				images,
			}
		},
		methods: {
			show(importType) {
				this.importType = importType;
				this.visible = true;
			},
			onConfirm() {
				this.$emit('change', this.designCutMode, this.importType);
				this.visible = false;
			},
			onClose() {
				this.visible = false;
			},
			onOpen() {

			},
			selectCutMode(mode){
				this.designCutMode = mode;
			}
		}
	}
</script>

<style scoped>

</style>
