<template>
    <my-card>
        <a-tabs v-model="key">
            <a-tab-pane key="1" tab="基本信息" :forceRender="true">
                <TabOne v-if="key === '1'" :dataInfo="dataInfo" />
            </a-tab-pane>
            <a-tab-pane key="2" tab="属性" :forceRender="true">
                <TabTwo v-if="key === '2'" :dataInfo="dataInfo" />
            </a-tab-pane>
            <a-tab-pane key="3" tab="事件" :forceRender="true">
                <TabThree v-if="key === '3'" :dataInfo="dataInfo" />
            </a-tab-pane>
        </a-tabs>
    </my-card>
</template>
<script>
import TabOne from './TabOne.vue';
import TabTwo from './TabTwo.vue';
import TabThree from './TabThree.vue';

export default {
    components: { TabOne, TabTwo, TabThree },
    props: {
        info: {
            type: Object,
            default: () => ({}),
        },
    },
    data() {
        return {
            dataInfo: {},
            key: '1',
        };
    },
    watch: {
        info: {
            handler(val) {
                this.dataInfo = val;
                this.key = '1';
            },
            immediate: true,
            deep: true,
        },
    },
    methods: {
        // callback(key) {
        //     this.key = key;
        // },
    },
};
</script>
