<template>
	<el-dialog :title="$t('Props Editor')" width="80%" :visible.sync="visible"
	           :close-on-click-modal="false"
	           :append-to-body="true">
		<div class="props-editor-dialog">
			<el-button class="add-button" size="mini" circle icon="el-icon-plus" plain @click="addItem"/>
			<el-scrollbar class="scrollbar" wrap-class="wrap-x-hidden" v-if="props"
			              view-class="scrollbar-view">
				<div class="wrapper">
					<el-table
						:data="props"
						style="width: 100%">
						<el-table-column
							:label="$t('Type')"
							width="100">
							<template slot-scope="scope">
								<el-select v-model="scope.row.option.type" size="mini">
									<el-option v-for="(str, type) in types"
									           :key="type"
									           :label="str"
									           :value="type"
									>
									</el-option>
								</el-select>
							</template>
						</el-table-column>
						<el-table-column
							:label="$t('Key')"
							width="200">
							<template slot-scope="scope">
								<el-input v-model="scope.row.key" size="mini"/>
							</template>
						</el-table-column>
						<el-table-column
							:label="$t('Alias')"
							width="200">
							<template slot-scope="scope">
								<el-input v-model="scope.row.option.alias" size="mini"/>
							</template>
						</el-table-column>
						<el-table-column
							:label="$t('Default')">
							<template slot-scope="scope">
								<el-input v-if="scope.row.option.type === 'string' || scope.row.option.type === 'enum'" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
								<el-input-number v-if="scope.row.option.type === 'number'" controls-position="right" class="default-value" v-model="scope.row.option.default" size="mini" placeholder="Default"/>
								<el-switch v-if="scope.row.option.type === 'boolean'" class="default-value" v-model="scope.row.option.default" size="mini"/>
								<el-color-picker v-if="scope.row.option.type === 'color'" class="default-value" v-model="scope.row.option.default" size="mini"/>
							</template>
						</el-table-column>
						<el-table-column
							label=""
							width="70">
							<template slot-scope="scope">
								<div class="operate-bar">
									<el-popover
										class="edit-enum-button"
										trigger="click">
										<div class="edit-enum-popover">
											<el-select size="mini" allow-create multiple filterable v-model="scope.row.option.enum"/>
										</div>
										<el-button slot="reference" class="edit-button" size="mini" circle icon="el-icon-edit" plain :disabled="scope.row.option.type!=='enum'"
										           @click="editEnum(scope)"/>
									</el-popover>
									<el-button class="delete-button" size="mini" circle icon="el-icon-minus" type="danger" plain
									           @click="deleteItem(scope.$index)"/>
								</div>
							</template>
						</el-table-column>
					</el-table>
				</div>
			</el-scrollbar>
		</div>
		<div slot="footer" class="dialog-footer">
			<div></div>
			<div class="button-bar">
				<el-button size="mini" plain @click="cancel">{{$t('Cancel')}}</el-button>
				<el-button size="mini" plain @click="save">{{$t('Save')}}</el-button>
			</div>
		</div>
	</el-dialog>
</template>

<script>
	import {clonePureObj} from "../../../utils";

	export default {
		name: "PropsEditorDialog",
		data() {
			return {
				visible: false,
				originProps: null,
				copiedProps: null,
				props: [],
				types: this.$t('prosTypes'),
			}
		},
		methods: {
			edit(props) {
				this.visible = true;
				this.originProps = props;
				this.copiedProps = clonePureObj(props);
				this.props.splice(0);
				for (let key in this.copiedProps) {
					let option = this.copiedProps[key];
					this.props.push({
						key,
						option,
					})
				}
			},
			save(){
				let keys = Object.keys(this.originProps);
				for (let key of keys) {
					this.$delete(this.originProps, key);
				}

				for(let item of this.props){
					if(item.key){
						this.$set(this.originProps, item.key, item.option);
					}
				}

				this.visible = false;
			},
			cancel(){
				this.visible = false;
			},
			editEnum(item){

			},
			addItem(){
				this.props.push({
					option: {
						type: 'string',
					}
				})
			},
			deleteItem(index){
				this.props.splice(index, 1);
			},
		},
	}
</script>

<style scoped>

</style>