<template>
	<div class="by-tab">
		<div v-for="(item,index) of columns" :key="index">
			<div class="title">{{item.title}} <i class="el-icon-circle-close" @click="closeGroup(index)"></i> </div>
			<el-tag class="item-tab" :disable-transitions="true" :key="i" v-for="(tag,i) of item.list" closable
				@close="handleClose(tag,index)">
				{{tag}}
			</el-tag>
			<by-input class="input-new-tag" :ref="'getValue_'+index"></by-input>
			<el-button class="button-new-tag" @click="showInput(index)">添加</el-button>
		</div>
		<div style="margin: 20px 0;" v-if="!isAdd" key="aaa">
			<div class="el-button mr15 el-button--primary el-button--small" @click="isAdd=true">添加新规格</div>
		</div>
		<div style="display: flex;margin: 20px 0;" v-else key='item2'>
			<div class="flex-item">
				<label>规格：</label>
				<div class="el-input el-input--small" style="width: 250px;">
					<input type="text" v-model="norms" placeholder="请输入规格" class="el-input__inner">
				</div>
			</div>
			<div class="flex-item">
				<label>规格值：</label>
				<div class="el-input el-input--small" style="width: 250px;">
					<input type="text" v-model="normsValue" placeholder="请输入规格值" class="el-input__inner">
				</div>
			</div>
			<div @click="doComfirm" class="el-button el-button--primary el-button--small">确定</div>
			<div @click="isAdd=false" class="el-button el-button--danger el-button--small">取消</div>
		</div>
	</div>
</template>

<script lang="ts">
	import { Component, Prop, Vue, Mixins, Watch } from "vue-property-decorator";
	import VueViews from '@/benyun/compVue/VueViews';
	@Component
	export default class Tab extends VueViews {
		inputValue : any = ''
		norms : any = ''
		normsValue : any = ''
		isAdd : any = false
		isTable : any = false
		tableData : any = ''
		
		get columns(){
		  return this.config?.columns ? this.config.columns : [];
		}
		
		created(){
		  if(this.propConfig){
		    this.setConfig(this.propConfig)
		  }
		}
		showInput(index : any) {
			let inputValue = (this as any).$refs['getValue_' + index][0].getValue();
			// console.log(this.columns[index]);
			if (this.columns[index].list.indexOf(inputValue) !== -1) return (this as any).$refs['getValue_' + index][0].clearValue();
			if (inputValue) {
				this.columns[index].list.push(inputValue);
			}
			(this as any).$refs['getValue_' + index][0].clearValue();
		}
		// 添加新规格
		doComfirm() {
			if (!this.normsValue || !this.norms) return (this as any).$message({ type: "warning", message: '请添加完整的规格！' })
			let obj : any = {
				title: this.norms,
				list: [this.normsValue]
			}
			this.columns.push(obj);
			this.norms = '';
			this.normsValue = '';
			this.isAdd = false;
		}
		// 排序生成
		forFun(data : any, i : number, v ?: any) {
			if (data.list) {
				let d : Array<any> = [];
				// data.list = data.list.reverse()
				data.list.forEach((item : any) => {
					if (i == 0) { // 第一次循环
						let obj : any = {}
						obj[data.field] = item
						d.push(obj);
					} else {
						// v = v.reverse()
						v.forEach((ele : any) => {
							let obj : any = {};
							obj = (this as any).$lodash.clone(ele);
							obj[data.field] = item
							d.push(obj);
						});
					}
				});
				i++
				if (this.columns[i]) {
					this.forFun(this.columns[i], i, d);
				}
				else {
					this.tableData = d;
				}
			}
		}
		// 删除表格数据
		doDelete(item:any){
			this.tableData.splice(item.dataIndex, 1);
		}
		// 删除标签
		handleClose(tag : any, index : any) {
			// console.log(tag);
			this.columns[index].list.splice(this.columns[index].list.indexOf(tag), 1);
		}
		// 删除数组
		closeGroup(index : any) {
			this.columns.splice(index, 1)
		}
	}
</script>

<style lang="scss" scoped>
	.by-tab {
		.title {
			padding: 10px 0 0;
		}

		.item-tab {
			margin-right: 16px;
		}

		.input-new-tag {
			width: 130px;
		}


		.flex-item {
			margin-right: 20px;
		}
	}
</style>