<template>
    <div id='visit-task'>
        <Card id="groups" title="拜访步骤" :padding="0" :bordered="false">
            <CellGroup @on-click="clickGroup">
                <Cell v-for="(item,index) in groups" :name="item.guid" :title="item.title" :key="index" :selected="index==selectIndex">
                </Cell>
            </CellGroup>
        </Card>
        <div id="steps">
            <Tabs v-model="step" @on-click="selectStep">
                <TabPane v-for="(item, index) in steps" :label="item.title" :key="index" :name="item.step_item_guid">
                    <SqlGrid :ref="item.step_item_guid" :gridGuid="item.grid_guid" :showActionPane="false" :autoInit="index == 0" />
                </TabPane>
            </Tabs>
        </div>
    </div>
</template>
<script type="text/javascript">
import VisitDetail from '../api/visit-detail'
import SqlGrid from '../../../views/grid'

export default {
    name: 'MenuLeft',
    data() {
        return {
            groups: [],
            steps: [],
            step: "",
            selectIndex: 0
        }
    },
    components: {
        SqlGrid
    },

    methods: {
        clickGroup(name) {
            alert(name);
            // this.selectIndex = index;
        },
        selectStep(name) {
            this.$refs[name][0].init();
        }
    },

    mounted() {
        VisitDetail.getVisitStepGroup(this.tenantId).then(groups => {
            this.groups = groups;

            if (this.groups.length > 0) {
                VisitDetail.getVisitSteps(this.groups[0].guid).then(steps => {
                    console.log(steps)
                    this.steps = steps;
                });
            }
        });
    }
};
</script>
<style lang="less">
#visit-task {
    width: 100%;
    height: 100%;
    display: flex;

    .ivu-tabs {
        display: flex;
        flex-direction: column;
    }

    .ivu-tabs-content {
        flex: 1;
    }

    .ivu-tabs-bar {
        margin-bottom: 0 !important;
    }

    .ivu-card {
        border-radius: 0 !important;
    }

    #groups {
        width: 180px;
        height: 100%;
        border-right: 1px solid #c1c1c1;
    }

    #steps {
        width: 100%;
        height: 100%;
        flex: 1;

        >div {
            height: 100%;
            width: 100%;
        }
    }
}
</style>