<template>
    <su-tabs :activeName="activeName" @tab-click="handleClick" @change="handleChange" :justActiveShow="justActiveShow">
        <el-tab-pane :label="leftTabName" name="left" v-if="$slots.left">
            <div class="form-box">
                <slot name="left"></slot>
            </div>
        </el-tab-pane>
        <el-tab-pane :label="item.label"
                     v-for="(item,index) in tabs"
                     :key="item.name"
                     :name="item.name">
            <div class="form-box">
                <component
                    :is="item.component"
                    :ref="item.name"
                    :options="item.options"
                    v-bind="item.attrs||{}"
                    v-on="item.listeners||{}"></component>
            </div>
        </el-tab-pane>
    </su-tabs>
</template>

<script>
import seTabs from "../../widget/su-tabs";
import mixin from "../../mixin";
import * as ObjUtil from "../../../util/pattern/object";

export default {
    name: "edit-item",
    mixins: [mixin],
    data() {
        return {
            activeName: "",
        }
    },
    created() {
        this.showRight();
    },
    components: {
        seTabs,
    },
    props: {
        justActiveShow:{
            type:Boolean,
            default: false,
        },
        leftTabName: {
            type: String,
            default: "组件属性",
        },
        tabs: {
            type: Array,
            default: []
        },
    },
    methods: {
        async initTabsData(data) {
            for (const item of this.tabs) {
                let ref = await this.getRef(item.name);
                ref.initData(data[item.name]);
            }
        },
        async getTabsData() {
            let data = {};
            for (const item of this.tabs) {
                let ref = await this.getRef(item.name);
                data[item.name] = await ref.getData();
            }
            return ObjUtil.copy(data);
        },
        async verifyTabs(ops) {
            for (const item of this.tabs) {
                let ref = await this.getRef(item.name);
                if(ops && ops[item.name])
                if (!await ref.verify()) {
                    return false;
                }
            }
            return true;
        },
        showLeft() {
            this.activeName = "left";
        },
        showRight(tabName) {
            this.activeName = tabName || (this.tabs.length ? this.tabs[0].name : '');
        },
        async getTabRef(tabName) {
            return await this.getRef(tabName);
        },
        handleClick(event) {
            // this.$message('点击了' + event.tab.label)
        },
        handleChange(e) {
            console.log('handleChange', e);
        },
    }
}
</script>

<style scoped>
.form-box {
    margin-top: 40px;
    max-height: 700px;
    overflow-y: auto;
}

.title-input {
    width: 300px;
}

.add-intro {
    margin-top: 20px;
    color: #999;
}
</style>
