<template>
<div style="width: 100%;">
	<div style="margin: 0 0 10px 0;">
		<el-button type="primary" @click="addSpecItem" icon="el-icon-plus" :disabled="disabled">添加规格项</el-button>
	</div>
	<el-table :data="defaultValue" border style="width: 100%">
		<el-table-column prop="name" label="规格名称" width="180">
			<template #default="scope">
				<el-input v-model="scope.row.name" placeholder="规格名称" :disabled="disabled">
					<template #append>
						<el-button type="danger" icon="el-icon-delete" circle @click="deleteSpecItem(scope.$index)" :disabled="disabled" />
					</template>
				</el-input>
			</template>
		</el-table-column>
		<el-table-column prop="value" label="规格项">
			<template #default="{ row }">
				<el-input v-model="row.value[index]" placeholder="规格值" clearable v-for="(item, index) in row.value" :key="index" style="width: 110px; margin: 5px;" :disabled="disabled">
					<template #append>
						<el-button type="danger" icon="el-icon-delete" circle @click="row.value.splice(index, 1)" :disabled="disabled" />
					</template>
				</el-input>
				<el-button type="primary" icon="el-icon-plus" circle @click="row.value.push('')" style="margin: 5px;" :disabled="disabled" />
			</template>
		</el-table-column>
	</el-table>
</div>
</template>

<script>
export default {
	props: {
		sourceAttribute: {
			type: Object,
			default: () => {
				return {}
			}
		},
		modelValue: {
			type: Array,
			default: () => []
		},
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data(){
		return {
			defaultValue: []
		}
	},
	watch: {
		sourceAttribute: {
			handler(val){
				if(val.value){
					this.defaultValue = val.value
				}
			},
			deep: true,
			immediate: true
		},
		defaultValue: {
			handler(val){
				this.$emit('update:modelValue', val)
			},
			deep: true
		}
	},
	mounted(){
		if(this.modelValue){
			this.defaultValue = this.modelValue
		}
	},
	methods:{
		addSpecItem(){
			this.defaultValue.push({
				name: '',
				value: []
			})
		},
		deleteSpecItem(index){
			this.defaultValue.splice(index, 1)
		}
	}
}
</script>