<!--
 * @Author: PoJun
 * @Date: 2023-10-09 15:51:12
 * @LastEditors: PoJun
 * @LastEditTime: 2023-11-17 14:26:03
 * @Message: 下拉多选组件
-->
<template>
    <uv-popup ref="multiplePopup" mode="bottom" @change="popupChange">
        <view class="multiple-picker">
            <uv-toolbar @cancel="cancel" @confirm="confirm"></uv-toolbar>
            <view class="multiple-picker-content">
                <uv-checkbox-group v-model="checkboxValue" iconPlacement="right" placement="column">
                    <view class="multiple-picker-item" v-for="(item, index) in columns" :key="index">
                        <uv-checkbox :name="item.key" :label="item.name"></uv-checkbox>
                    </view>
                </uv-checkbox-group>
            </view>
        </view>
    </uv-popup>
</template>

<script>
export default {
    props: {
        columns: {
            type: Array,
            default: function () {
                return [];
            },
        },
        defaultValue: {
            type: Array,
            default: function () {
                return [];
            },
        },
    },
    data() {
        return {
            checkboxValue: [],
        };
    },
    methods: {
        open() {
            this.$refs.multiplePopup.open();
        },
        close() {
            this.$refs.multiplePopup.close();
        },
        // 点击工具栏的取消按钮
        cancel() {
            this.close();
        },
        confirm() {
            const result = this.columns.filter(item => this.checkboxValue.includes(item.key));
            let sv = [],
                rv = [];
            if (result && result.length) {
                result.forEach(item => {
                    sv.push(item.name);
                    rv.push(item.key);
                });
            }
            this.$emit("confirm", {
                sv: sv.join(","),
                rv: rv.join(","),
            });
            this.close();
        },
        popupChange(e) {
            if (!e.show) {
                this.$emit("close");
            }
        },
    },
    watch: {
        defaultValue: {
            immediate: true,
            handler: function (val) {
                if (val && val.length) {
                    this.checkboxValue = this.defaultValue;
                }
            },
        },
    },
};
</script>

<style lang="scss" scoped>
.multiple-picker {
    position: relative;

    &-content {
        padding: 10rpx 25rpx;
        height: 45vh;
        overflow-y: auto;
    }
    &-item {
        padding: 20rpx 0;
        border-bottom: 1px solid $uv-border-color;
    }
}
</style>
