<template>
    <lay-container>
        <view class="layui-item33 color999" :style="'max-height:900px'">
            <lay-row space="10">
                <lay-col md="4" sm="12" xs="24" v-for="(item, index) in columns">
                    <lay-checkbox-group v-model="checkedItem">
                        <lay-checkbox :name="item.title" skin="primary" :value="item.key">
                            {{ item.title }}
                        </lay-checkbox>
                    </lay-checkbox-group>
                </lay-col>
            </lay-row>
        </view>
        <view class="menuBtn">
			<lay-button type="primary" @click="submitClick">确定</lay-button>
			<lay-button @click="cancelClick">取消</lay-button>
		</view>
    </lay-container>
</template>
<script>
    import {
		ref
	} from 'vue';
    export default {
        setup() {
            const columnList = ref([]);
            const checkedItem = ref([]);

            return {
                columnList,
                checkedItem,
            }
        },
        props: {
            columns: {
				type: Object,
				default: () => [],
			},
            freezingColumns: {
                type: Object,
				default: () => [],
            }
        },
        mounted() {
            this.initPage();
		},
        methods: {
            initPage() {
                this.columnList = this.columns;
                this.checkedItem = this.freezingColumns.concat();
            },
            cancelClick() {
                this.$emit('cancelClick', this.freezingColumns);
            },
            submitClick() {
                this.$emit('cancelClick', this.checkedItem);
            }
        }
    }
</script>
<style scoped>
    .layui-item33 {
		width: 90%;
		padding-right: 30px;
		margin: 30px auto 10px;
		display: block;
		overflow: auto;
		position: relative;
		clear: both;		
	}

    .menuBtn {
		display: block;
		text-align: center;
		width: 96%;
		margin: 20px auto;
	}
</style>