<template>
<div class="sku-container">
	<div style="padding: 0 0 10px 0; display: flex;">
		<el-button type="primary" @click="reRender" style="margin-right: 10px;">重新生成</el-button>
		<template v-for="(item, index) in structure">
			<el-input v-model="batch[item.name]" type="number" :placeholder="item.label" v-if="item.type === 'input'" :disabled="disabled" style="width: 160px; margin-right: 10px;">
				<template #append>
					<el-button type="primary" @click="batchSetting(item.name)">批量设置</el-button>
				</template>
			</el-input>
		</template>
	</div>
	<el-table :data="defaultValue" :border="true" :stripe="true" :disabled="disabled" style="width: 100%;">
		<el-table-column type="index" width="50" label="序号" align="center" :resizable="false" />
		<el-table-column v-for="(item, index) in spec" :key="index" :prop="item.name" :label="item.name" align="center" :resizable="false" />
		<el-table-column v-for="(item, index) in structure" :key="index" :prop="item.name" :label="item.label" align="center" :resizable="false">
			<template #default="{ row, $index }">
				<el-input v-model="row[item.name]" :placeholder="item.label" clearable v-if="item.type === 'input'" :disabled="disabled" />
				<sc-upload v-model="row[item.name]" :placeholder="item.label" clearable v-if="item.type === 'image'" :width="80" :height="80" :disabled="disabled" />
				<el-select v-model="row[item.name]" :placeholder="item.label" clearable v-if="item.type === 'select'" :disabled="disabled">
					<el-option v-for="(item,index) in item.options" :key="index" :label="item" :value="item" />
				</el-select>
			</template>
		</el-table-column>
		<el-table-column label="操作" width="60" align="center" :resizable="false">
			<template #default="{ row, $index }">
				<el-button type="danger" icon="el-icon-delete" circle @click="defaultValue.splice(index, 1)" />
			</template>
		</el-table-column>
	</el-table>
</div>
</template>

<script>
import { render } from 'vue';

export default {
	name: 'form.sku',
	props: {
		modelValue: {
			type: Array,
			default: () => []
		},
		 spec: {
			type: Array,
			default: () => []
		},
		structure: {
			type: Array,
			default: () => [
				// { name: 'cover', type: 'image', label: '封面' },
				{ name: 'price', type: 'input', label: '价格' },
				{ name: 'integral', type: 'input', label: '积分' },
				{ name: 'sales', type: 'input', label: '销量' },
				{ name: 'stock', type: 'input', label: '库存' }
			]
		},
		// sku 字段分隔符
		separator: {
			type: String,
			default: ';'
		},
		// 是否显示 sku 选择栏
		disabled: {
			type: Boolean,
			default: false
		}
	},
	data(){
		return {
			defaultValue: [],
			skuData: [],
			batch: {}
		}
	},
	computed: {
	},
	watch: {
		spec: {
			handler(val){
				if(this.modelValue == 0){
					this.skuData = this.combinationSpec(val)
					this.$nextTick(() => {
						this.combinSkuValue()
					})
				}
			},
			deep: true,
			immediate: true
		},
		defaultValue: {
			handler(val){
				this.$emit('update:modelValue', val)
			},
			deep: true,
			immediate: false
		}
	},
	mounted(){
		if(this.modelValue.length > 0){
			this.defaultValue = this.modelValue.map(item => {
				Object.keys(item.sku_value).map(r => {
					item[r] = item.sku_value[r]
				})
				return item
			})
		}
	},
	methods:{
		reRender(){
			this.skuData = this.combinationSpec(this.spec)
			this.$nextTick(() => {
				this.combinSkuValue()
			})
		},
		// 根据 spec 进行排列组合，生成 skuData 数据
		combinationSpec(specs) {
			if (!specs || specs.length === 0) {
				return []
			}
			const [first, ...rest] = specs
			const result = this.combinationSpec(rest)
			const pairs = first.value.map(item => {
				if (result.length === 0) {
					return [{
						[first.name]: item
					}]
				} else {
					return result.map(r => {
						return {
							[first.name]: item,
							...r
						}
					})
				}
			})
			return [].concat(...pairs)
		},
		combinSkuValue(){
			let list = []
			this.skuData.map((item, index) => {
				let data = {}
				Object.keys(item).map(key => {
					data[key] = item[key]
				})
				this.structure.map(r => {
					data[r.name] = ''
				})
				data['sku_value'] = item
				list[index] = data
			})
			this.defaultValue = list
		},
		batchSetting(name){
			if(this.batch[name]){
				this.defaultValue.map(item => {
					item[name] = this.batch[name]
				})
			}else{
				this.$message.error('请输入批量设置值')
			}
		}
	}
}
</script>

<style scoped>
.sku-container {
	width: 100%;
}
</style>