<template>
	<div v-if="usercolumn.length>0" class="setting-column" v-loading="isSave">
		<div class="setting-column__title">
			<span class="move_b"></span>
			<span class="show_b">显示</span>
			<span class="name_b">名称</span>
			<span class="width_b">宽度</span>
			<span class="sortable_b">排序</span>
			<span class="tabletype">表格类型</span>
			<span class="tabletype">表单类型</span>
			<span class="tablespan">表单跨度</span>
			<span class="fixed_b">固定</span>
		</div>
		<div class="setting-column__list" ref="list">
			<ul>
				<li v-for="item in usercolumn" :key="item.prop">
					<span class="move_b">
						<el-tag class="move" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
					</span>
					<span class="show_b">
						<el-switch v-model="item.hide" :active-value="false" :inactive-value="true"></el-switch>
					</span>
					<span class="name_b" :title="item.prop">
						<el-input v-model="item.label" placeholder="名称" size="small"></el-input>
					</span>
					<span class="width_b">
						<el-input v-model="item.width" placeholder="auto" size="small"></el-input>
					</span>
					<span class="sortable_b">
						<el-switch v-model="item.sortable"></el-switch>
					</span>
					<span class="tabletype">
						<el-select v-model="item.columntype" size="small" :teleported="false" placeholder="选择">
							<el-option value="" key="" label=""> 请选择 </el-option>
							<el-option value="avatar" key="avatar" label="用户"> 用户 </el-option>
							<el-option value="badge" key="badge" label="徽章"> 徽章 </el-option>
							<el-option value="imagegroup" key="imagegroup" label="图组"> 图组 </el-option>
							<el-option value="image" key="image" label="单图"> 单图 </el-option>
							<el-option value="status" key="status" label="状态"> 状态 </el-option>
							<el-option value="input" key="input" label="Input"> Input </el-option>
							<el-option value="select" key="select" label="下拉选择"> 下拉选择 </el-option>
							<el-option value="tag" key="tag" label="时间组件"> 时间组件 </el-option>
							<el-option value="components" key="components" label="自定义组件"> 自定义组件 </el-option>
						</el-select>
					</span>
					<span class="tabletype">
						<el-select v-model="item.component" size="small" :teleported="false" placeholder="选择">
							<el-option value="" key="" label=""> 请选择 </el-option>
							<el-option value="input" key="input" label="Input"> Input </el-option>
							<el-option value="title" key="title" label="标题占位"> 标题占位 </el-option>
							<el-option value="checkbox" key="checkbox" label="复选框"> 复选框 </el-option>
							<el-option value="radio" key="radio" label="单选"> 单选 </el-option>
							<el-option value="select" key="select" label="下拉"> 下拉 </el-option>
							<el-option value="checkboxGroup" key="checkboxGroup" label="复组组合"> 复组组合 </el-option>
							<el-option value="upload" key="upload" label="文件上传"> 文件上传 </el-option>
							<el-option value="updatemultiple" key="updatemultiple" label="多文件上传"> 多文件上传 </el-option>
							<el-option value="switch" key="switch" label="开关"> 开关 </el-option>
							<el-option value="cascader" key="cascader" label="级联选择器"> 级联选择器 </el-option>
							<el-option value="date" key="date" label="日期选择"> 日期选择 </el-option>
							<el-option value="number" key="number" label="数字"> 数字 </el-option>
							<el-option value="color" key="color" label="颜色选择"> 颜色选择 </el-option>
							<el-option value="rate" key="rate" label="评分"> 评分 </el-option>
							<el-option value="slider" key="slider" label="滑块"> 滑块 </el-option>
							<el-option value="tableselect" key="tableselect" label="表格选择"> 表格选择 </el-option>
							<el-option value="editor" key="editor" label="编辑器"> 编辑器 </el-option>
							<el-option value="text" key="text" label="文本"> 文本 </el-option>
							<el-option value="avatar" key="avatar" label="头像"> 头像 </el-option>
							<el-option value="formtable" key="formtable" label="表单表格"> 表单表格 </el-option>
						</el-select>
					</span>
					<span class="tablespan">
						<el-input v-model="item.span" :disabled="!item.component" size="small" placeholder="表单跨度"></el-input>
					</span>
					<span class="fixed_b">
						<el-radio-group v-model="item.fixed" size="small">
						    <el-radio-button label="left">左</el-radio-button>
						    <el-radio-button label="">NO</el-radio-button>
						    <el-radio-button label="right">右</el-radio-button>
						</el-radio-group>
					</span>
				</li>
			</ul>
		</div>
		<div class="setting-column__bottom">
			<!-- <el-button @click="Rendering" type="warning" :disabled="isSave">渲染</el-button> -->
			<el-button @click="backDefaul" :disabled="isSave">重置</el-button>
			<el-button @click="save" type="primary">保存</el-button>
		</div>
	</div>
	<el-empty v-else description="暂无可配置的列" :image-size="80"></el-empty>
</template>

<script>
	import Sortable from 'sortablejs'

	export default {
		components: {
			Sortable
		},
		props: {
			column: { type: Object, default: () => {} }
		},
		data() {
			return {
				isSave: false,
				usercolumn: this.column || []
			}
		},
		watch:{
			// usercolumn: {
			// 	handler(){
			// 		this.$emit('userChange', this.usercolumn)
			// 	},
			// 	deep: true
			// }
		},
		mounted() {
			this.usercolumn.length>0 && this.rowDrop()
		},
		methods: {
			rowDrop(){
				const _this = this
				const tbody = this.$refs.list.querySelector('ul')
				Sortable.create(tbody, {
					handle: ".move",
					animation: 300,
					ghostClass: "ghost",
					onEnd({ newIndex, oldIndex }) {
						const tableData = _this.usercolumn
						const currRow = tableData.splice(oldIndex, 1)[0]
						tableData.splice(newIndex, 0, currRow)
					}
				})
			},
			Rendering(){
				this.$emit('userChange', this.usercolumn)
			},
			backDefaul(){
				this.$emit('back', this.usercolumn)
			},
			save(){
				this.$emit('save', this.usercolumn)
			}
		}
	}
</script>

<style scoped>
	.setting-column {}
	.setting-column__title {border-bottom: 1px solid #EBEEF5;padding-bottom:15px;}
	.setting-column__title span {display: inline-block;font-weight: bold;color: #909399;font-size: 12px;}
	.setting-column__title span.move_b {width: 30px;margin-right:15px;}
	.setting-column__title span.show_b {width: 58px;}
	.setting-column__title span.name_b {width: 138px;}
	.setting-column__title span.width_b {width: 72px;}
	.setting-column__title span.tablespan {width: 100px;}
	.setting-column__title span.sortable_b {width: 60px;}
	.setting-column__title span.tabletype {width: 120px;}
	.setting-column__title span.fixed_b {width: 80px;}
	.setting-column__list {max-height:314px;overflow: auto;}
	.setting-column__list li {list-style: none;margin:10px 0;display: flex;align-items: center;}
	.setting-column__list li>span {display: inline-block;font-size: 12px;}
	.setting-column__list li span.move_b {width: 30px;margin-right:15px;}
	.setting-column__list li span.show_b {width: 60px;}
	.setting-column__list li span.name_b {width: 140px;white-space: nowrap;text-overflow: ellipsis;overflow: hidden;cursor:default; padding-right:10px }
	.setting-column__list li span.width_b {width: 60px;margin-right:15px;}
	.setting-column__list li span.tablespan {width: 80px;margin-right:15px;}
	.setting-column__list li span.sortable_b {width: 60px;}
	.setting-column__list li span.tabletype {width: 120px; padding-right:20px;}
	.setting-column__list li span.fixed_b {width: 120px;}
	.setting-column__list li.ghost {opacity: 0.3;}
	.setting-column__bottom {border-top: 1px solid #EBEEF5;padding-top:15px;text-align: right;}
	.dark .setting-column__title {border-color: var(--el-border-color-light);}
	.dark .setting-column__bottom {border-color: var(--el-border-color-light);}
</style>
