<template>
    <el-dialog
        title="添加我的应用"
        :visible.sync="visible"
        width="75%"
        top="15px"
        :before-close="handleClose"
    >
        <div class="dialog-content">
            <el-tabs v-model="activeName" @tab-click="handleTabClick">
                <el-tab-pane label="系统功能入口" name="first">
                    <app-list
                        :moudle-tree="moudleTree"
                        :selected-modules="selectedModules"
                        @change="onChange"
                    ></app-list>
                </el-tab-pane>
                <el-tab-pane label="第三方入口" name="second">
                    <app-link @confirm="onConfirm" ref="appLink"></app-link>
                </el-tab-pane>
            </el-tabs>
        </div>
    </el-dialog>
</template>

<script>
export default {
    name: 'EditApp',
    components: {
        AppList: () => import('./AppList'),
        AppLink: () => import('./AppLink')
    },
    props: {
        visible: Boolean
    },
    data () {
        return {
            activeName: 'first',
            moudleTree: [],
            selectedModules: []
        }
    },
    watch: {
        visible (newVal) {
            if (newVal) {
                this.getPlatFormModuleTree()
                this.activeName = 'first'
                this.$nextTick(() => {
                    this.$refs.appLink.$refs.form.resetFields()
                })
            }
        }
    },
    methods: {
        // 获取平台树
        getPlatFormModuleTree () {
            new Promise((resolve, reject) => {
                this.$api.commonApi.getPlatFormModuleTree().then(res => {
                    this.$handleResponse(res).then(data => {
                        this.moudleTree = data
                        resolve()
                    })
                })
            }).then(() => {
                this.getSelectedModules()
            })
        },
        // 获取已经选择的
        getSelectedModules () {
            this.$api.commonApi.getSelectedModules().then(res => {
                this.$handleResponse(res).then(data => {
                    this.selectedModules = data
                })
            })
        },
        // 添加/删除
        onChange () {
            this.getSelectedModules()
            this.$emit('change')
        },
        // 第三方
        onConfirm () {
            this.$emit('change')
        },

        handleClose () {
            this.$emit('update:visible', false)
        },
        handleTabClick () {

        }
    },
    created () { }
}
</script>

<style lang="stylus" scoped>
.dialog-content
    max-height 65vh
    overflow-y auto
</style>
