<template>
    <BaseSameLayer
        :hosSameLayerArgs="hosSameLayerArgs"
        embedType="native/midea-calendar-pave"
        :defaultWidth="300"
        :defaultHeight="300"
    ></BaseSameLayer>
</template>

<script>
import BaseSameLayer from './baseSameLayer.vue'

export default {
    data() {
        return {
            width: 0,
            height: 0
        }
    },
    name: "MideaCalendarPave",
    components: {
        BaseSameLayer
    },
    props: {
        hosUniqueProps: {
            type: Object,
            default() {
                return {}
            }
        },
        value: {
            type: Array,
            required: false
        },
        activeColor: {
            type: String,
            required: false
        }
    },
    computed: {
        hosSameLayerArgs() {
            return {
                ...this.hosUniqueProps,// 鸿蒙原生组件独有属性
                width: this.width,
                height: this.height,
                value: this.value,
                activeColor: this.activeColor,
                onSelectDateChanged: this.onSelectDateChanged
            }
        }
    },
    mounted() {
        this.width = this.$el.clientWidth;
        this.height = this.$el.clientHeight;
    },

    methods: {
        onSelectDateChanged(res) {
            /* Warning: 和系统的事件重名了，需要加前缀，待同步修改 */
            this.$emit("change", res)
        },
    },
};
</script>
