<template>
	<!-- 列设置 -->
	<el-drawer v-model="drawerVisible" title="列设置" append-to-body destroy-on-close @opened="opened" size="40%">
		<el-table
			:data="colSetting"
			row-key="prop"
			default-expand-all
			border
			:tree-props="{ children: '_children' }"
			v-horizontal-scroll="'always'"
			class="colTable"
		>
			<el-table-column prop="label" align="center" label="列名(拖动排序)" class-name="allow-drag cursor-move"> </el-table-column>
			<el-table-column v-slot="scope" prop="isShow" align="center" label="显示" width="70">
				<el-checkbox v-model="scope.row.isShow" @change="update" :disabled="['selection', 'radio', 'index', 'expand', 'sort'].includes(scope.row.type)"></el-checkbox>
			</el-table-column>
			<el-table-column v-slot="scope" prop="isShow" align="center" label="宽度" min-width="100">
				<el-input-number v-model="scope.row.width" @change="update" :min="0"></el-input-number>
			</el-table-column>
			<el-table-column v-slot="scope" prop="fixed" align="center" label="固定" min-width="100">
				<el-radio-group v-model="scope.row.fixed">
					<el-radio-button
						value="left"
						@click.native.prevent="
							() => {
								scope.row.fixed = 'left' === scope.row.fixed ? null : 'left';
								update();
							}
						"
						>左侧</el-radio-button
					>
					<el-radio-button
            value="right"
						@click.native.prevent="
							() => {
								scope.row.fixed = 'right' === scope.row.fixed ? null : 'right';
								update();
							}
						"
						>右侧</el-radio-button
					>
				</el-radio-group>
			</el-table-column>
		</el-table>
	</el-drawer>
</template>

<script setup lang="ts" name="ColSetting">
import { onMounted, ref } from 'vue';
import { ColumnProps } from '@/components/ProTable/interface';
import Sortable from 'sortablejs'; //http://www.sortablejs.com/options.html 配置项中文文档

const props = defineProps<{ colSetting: ColumnProps[] }>();
const drawerVisible = ref<boolean>(false);
const emit = defineEmits(['update:colSetting', 'changeRow']);
const update = () => {
	emit('update:colSetting', props.colSetting);
};
const openColSetting = () => {
	drawerVisible.value = true;
};
const opened = () => {
	rowDrop();
};
// 行拖拽
const rowDrop = () => {
	const tbody = document.querySelector('.colTable tbody');
	Sortable.create(tbody, {
		animation: 150, //动画参数
		handle: '.allow-drag', //允许拖拽的项目类名，没有该类名的元素主动被动都不能变换
		onEnd({ newIndex, oldIndex }) {
			// 在此触发父组件中的方法
			setTimeout(() => {
				emit('changeRow', { oldIndex, newIndex });
			}, 500);
		},
	});
};
defineExpose({
	openColSetting,
});
</script>

<style scoped lang="scss">
.cursor-move {
	cursor: move;
}
</style>
