<template>
	<div v-if="roleColumn.length>0" class="setting-column" v-loading="isSave">
		<div class="setting-column__list" ref="list">
			<ul>
				<li v-for="item in roleColumn" :key="item.id" :class="item.id == id?'liCheck':''" @click="liClick(item)">
					<span class="move_b">
						<el-tag class="move" size="small" style="cursor: move;"><el-icon-d-caret style="width: 1em; height: 1em;"/></el-tag>
					</span>
					<span class="name_b">{{ item.role_name }}</span>
					<span class="btnBox">
						<el-icon class="btn edit" size="14px" v-auth="'disableRoles'" @click.stop="table_edit(item)"><sc-icon-Edit/></el-icon>
						<el-icon class="btn del" size="14px" v-auth="'delRoles'" @click.stop="table_del(item)"><sc-icon-Delete/></el-icon>
					</span>
				</li>
			</ul>
		</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:Array},
		role_id:{type:Number}
	},
	watch:{
		column: {
			handler(val){
				this.roleColumn = JSON.parse(JSON.stringify(val));
				this.$nextTick(()=>{
					this.roleColumn.length>0 && this.rowDrop();
				})
			},
		},
		role_id:{
			handler(val){
				this.id = val;
			},
			deep: true
		},
		roleColumn:{
			handler(newVal,oldVal){
				if(oldVal && oldVal.length>0){
					this.$emit('roleChange', this.roleColumn)
				}
			},
			deep: true
		}
	},
	data(){
		return{
			isSave: false,
			id:0,
			roleColumn: JSON.parse(JSON.stringify(this.column || []))
		}
	},
	mounted() {

	},
	methods:{
		rowDrop(){
			const tbody = this.$refs.list.querySelector('ul')
			Sortable.create(tbody, {
				handle: ".move",
				animation: 300,
				ghostClass: "ghost",
				onEnd:({ newIndex, oldIndex })=> {
					const tableData = this.roleColumn
					const currRow = tableData.splice(oldIndex, 1)[0]
					tableData.splice(newIndex, 0, currRow)
				}
			})
		},
		liClick(item){
			this.$emit('roleClick',item);
		},
		table_edit(item){
			this.$emit('roleEdit',item);
		},
		table_del(item){
			this.$emit('roleDelete',item);
		}
	}
}
</script>

<style scoped lang="scss">
.setting-column__list {}
.setting-column__list li {list-style: none;margin:0;padding: 10px 0 10px 10px;display: flex;align-items: center;}
.setting-column__list li .name_b{margin-left: 10px;flex: 1;}
.setting-column__list li.liCheck{background: #E7F3FF;}
.setting-column__list li:hover{background: #E7F3FF;cursor: pointer;}
.setting-column__list li.liCheck .btnBox{display: flex;align-items: center;}
.setting-column__list li:hover .btnBox{display: flex;align-items: center;}

.btnBox{
	display: none;
	margin-right: 10px;
	.btn{margin: 0 5px;}
	.btn.edit{color: var(--el-color-primary)}
	.btn.del{color: var(--el-color-danger)}
}
</style>
