<template>
	<!-- 列设置 -->
	<el-drawer v-model="drawerVisible" title="列设置" size="450px">
		<el-table :data="colSetting" row-key="prop" default-expand-all border :tree-props="{ children: '_children' }">
			<el-table-column prop="label" align="center" label="列名" />
			<el-table-column v-slot="scope" prop="isShow" align="center" label="显示" width="80">
				<el-checkbox v-model="scope.row.isShow" @change="update"></el-checkbox>
			</el-table-column>
			<el-table-column v-slot="scope" prop="fixed" align="center" label="固定">
				<el-radio-group v-model="scope.row.fixed">
					<el-radio-button
						label="left"
						@click.native.prevent="
							() => {
								scope.row.fixed = 'left' === scope.row.fixed ? null : 'left';
								update();
							}
						"
						>左侧</el-radio-button
					>
					<el-radio-button
						label="right"
						@click.native.prevent="
							() => {
								scope.row.fixed = 'right' === scope.row.fixed ? null : 'right';
								update();
							}
						"
						>右侧</el-radio-button
					>
				</el-radio-group>
			</el-table-column>
			<template #empty>
				<Empty />
			</template>
		</el-table>
	</el-drawer>
</template>

<script setup lang="ts" name="ColSetting">
import { ref } from 'vue';
import { ColumnProps } from '@/components/ProTable/interface';

const props = defineProps<{ colSetting: ColumnProps[] }>();
const drawerVisible = ref<boolean>(false);
const emit = defineEmits(['update:colSetting']);
const update = () => {
	emit('update:colSetting', props.colSetting);
};
const fixed = ref<string>('');

const openColSetting = () => {
	drawerVisible.value = true;
};

defineExpose({
	openColSetting,
});
</script>

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