<template>
	<el-dialog :title="$t('Transform options')" width="70%" :visible.sync="visible" @opened="onOpen"
	           :append-to-body="true"
	           custom-class="flex-dialog details-dialog"
	>
		<el-form v-model="option" label-position="right" label-width="100px" size="mini" style="padding: 20px">
			<el-form-item label="品质">
				<el-input-number v-model="option.quality" :max="100" :min="10" controls-position="right"/>
			</el-form-item>
			<el-form-item label="底色">
				<el-color-picker v-model="option.bgColor"/>
			</el-form-item>
		</el-form>
		<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>
	import {mapMutations} from 'vuex';
	import ElFormItem from "../../../components/inputs/form-item";

	export default {
		name: "TransToJpgOptionDialog",
		components: {ElFormItem},
		data() {
			return {
				visible: false,
				option: {
					quality: 70,
					bgColor: '#ffffff',
				}
			}
		},
		methods: {
			show() {
				this.option.quality = 70;
				this.option.bgColor = '#ffffff';

				this.visible = true;
			},
			onConfirm() {
				this.$emit('confirm', this.option);
				this.visible = false;
			},
			onClose() {
				this.visible = false;
			},
			onOpen() {
			},
			...mapMutations([
				'modifyProjectDetails',
			]),
		}
	}
</script>

<style scoped>

</style>