<template>
	<div class="page-container">
		<div class="search-container">
			<span style="margin-right: 12px"><strong>属性组名称</strong></span>
			<el-input v-model="searchValue" placeholder="输入属性组名称" clearable size="small" style="width: 150px" />
			<el-button type="primary" icon="el-icon-search" size="small " style="margin-left: 20px" @click="getList">搜索</el-button>
			<el-button icon="el-icon-refresh" size="small " @click="resetSearch">重置</el-button>
		</div>
		<div class="content-container">
			<div class="main">
				<div class="table-nav">
					<div class="tags">
						<div class="tag">销售属性组</div>
					</div>
					<div class="actions">
						<el-button type="primary" icon="el-icon-plus" size="mini " style="margin: 0 0 10px 3px" @click="handleAdd">添加</el-button>
					</div>
				</div>
				<el-table v-loading="loading" :data="dataList" border>
					<el-table-column type="index" width="100" align="center" label="序号" />
					<el-table-column label="列名称" prop="columnName" />
					<el-table-column label="前端列名" prop="uiColumn" :show-overflow-tooltip="true" width="300" />
					<el-table-column label="后端列名" prop="apiColum" :show-overflow-tooltip="true" width="300" />
					<el-table-column label="是否必须显示" align="center" width="100">
						<template slot-scope="scope">
							<input type="checkbox" :checked="scope.row.required == '0'" @change="handleStatusChange(scope.row)" />
						</template>
					</el-table-column>
					<el-table-column label="操作" align="center" class-name="small-padding" width="300">
						<template slot-scope="scope" v-if="scope.row.roleId !== 1">
							<el-button size="mini" type="text" icon="el-icon-edit" @click="handleUpdate(scope.row)">修改</el-button>
							<el-button size="mini" type="text" icon="el-icon-delete" @click="handleDelete(scope.row)">删除</el-button>
						</template>
					</el-table-column>
				</el-table>
			</div>
			<el-dialog :title="groupTitle" :visible.sync="open" width="800px" append-to-body @close="cancel">
				<el-form ref="groupForm" :model="groupForm" :rules="rules" label-width="100px">
					<el-row>
						<el-col :span="12">
							<el-form-item label="属性组名称" prop="attrGroupName">
								<el-input v-model="groupForm.attrGroupName" placeholder="请输入属性组名称" />
							</el-form-item>
						</el-col>
						<el-col :span="12">
							<el-form-item label="属性组描述">
								<el-input v-model="groupForm.descript" placeholder="请输入属性组描述" />
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-form-item align="right">
								<el-button size="mini" @click="addAttr">添加属性</el-button>
							</el-form-item>
						</el-col>
						<el-col :span="24">
							<el-collapse v-model="activeName" accordion>
								<el-collapse-item v-for="(item, index) in groupForm.attrs" :key="index" :name="index">
									<template slot="title">
										<el-button size="mini" type="text" icon="el-icon-error">删除</el-button>
									</template>
									<div>属性名称:</div>
								</el-collapse-item>
							</el-collapse>
						</el-col>
					</el-row>
				</el-form>
				<div slot="footer" class="dialog-footer">
					<el-button size="small" @click="cancel">取 消</el-button>
					<el-button size="small" type="primary" @click="submitForm">保 存</el-button>
				</div>
			</el-dialog>
		</div>
	</div>
</template>

<script>
import {} from '@/api/ware/saleAttrs/index.js'
export default {
	name: 'saleAttrs',
	data() {
		return {
			//加载框状态
			loading: false,
			//数据数组
			dataList: [],
			//弹窗标题
			groupTitle: '',
			//属性组表单
			groupForm: {
				//属性组类型 0销售 1商品
				groupType: 0,
				//属性组名称
				attrGroupName: '',
				//属性组描述
				descript: '',
				//属性数组
				attrs: []
			},
			//搜索框绑定值
			searchValue: '',
			//弹窗状态
			open: false,
			//表单验证
			rules: {},
			//表单属性区域展开索引
			activeName: 0
		}
	},
	methods: {
		//获取数据
		getList() {},
		//重置搜索
		resetSearch() {},
		//添加属性组
		handleAdd() {
			this.groupTitle = '属性组添加'
			this.open = true
		},
		//表单保存
		submitForm() {},
		//弹窗取消
		cancel() {
			this.open = false
			this.resetForm()
		},
		//表单重置
		resetForm() {},
		//添加属性
		addAttr() {
			this.groupForm.attrs.push({
				//属性名称
				attrName: '',
				//属性类型 0下拉 1文本
				attrCategory: 0,
				//属性类型 0销售 1商品
				attrType: 0,
				//属性的值
				searchValue: []
			})
			this.activeName = this.groupForm.attrs.length - 1
		}
	}
}
</script>

<style scoped lang="scss">
.el-collapse-item {
	border-left: 1px solid #e6ebf5;
	border-right: 1px solid #e6ebf5;
}
</style>
