<template>
    <div class="flex flex-pack-justify flex-1 ap-dev-operate-panel">
        <div class="flex">
            <div class="ap-dev-tool-item dev-header-logo" @click="currentDesignPanel('api-panel', $event)">
                AP | 开发平台
            </div>
            <div class="ap-dev-tool-item flex flex-center" @click="currentDesignPanel('db-design-panel', $event)">
                <div class="ap-dev-tool-item-icon1">
                    <i class="el-icon-coin"/>
                </div>
                <div class="ap-dev-tool-item-text1">DB设计</div>
            </div>
            <div class="ap-dev-tool-item flex flex-center" @click="currentDesignPanel('custom-panel', $event)">
                <div class="ap-dev-tool-item-icon1">
                    <i class="el-icon-pic-part"/>
                </div>
                <div class="ap-dev-tool-item-text1">自定义</div>
            </div>
            <div class="ap-dev-tool-item flex flex-center" @click="currentDesignPanel('components-panel', $event)">
                <div class="ap-dev-tool-item-icon1">
                    <i class="el-icon-menu"/>
                </div>
                <div class="ap-dev-tool-item-text1">组件</div>
            </div>
            <div class="ap-dev-tool-item flex flex-center" @click="currentDesignPanel('template-panel', $event)">
                <div class="ap-dev-tool-item-icon1">
                    <i class="el-icon-model"/>
                </div>
                <div class="ap-dev-tool-item-text1">模版</div>
            </div>
            <div class="ap-dev-tool-item flex flex-center" @click="currentDesignPanel('background-panel', $event)">
                <div class="ap-dev-tool-item-icon1">
                    <i class="el-icon-receiving"/>
                </div>
                <div class="ap-dev-tool-item-text1">后台</div>
            </div>
            <div class="ap-dev-tool-item flex flex-center" @click="currentDesignPanel('online-code-panel', $event)">
                <div class="ap-dev-tool-item-icon1">
                    <i class="el-icon-code" />
                </div>
                <div class="ap-dev-tool-item-text1">在线开发</div>
            </div>
            <div class="ap-dev-tool-item flex flex-center"  @click="currentDesignPanel('dev-doc', $event)">
                <div class="ap-dev-tool-item-icon1">
                    <i class="el-icon-education" />
                </div>
                <div class="ap-dev-tool-item-text1">文档</div>
            </div>
        </div>
        <div class="flex">
<!--            <div class="ap-dev-tool-item flex flex-center">-->
<!--                <div class="ap-dev-tool-item-icon1">-->
<!--                    <i class="el-icon-vue"/>-->
<!--                </div>-->
<!--                <el-dropdown  trigger="click"  @command="clickEvent">-->
<!--                  <span class="el-dropdown-link ap-dev-tool-item-text1">-->
<!--                    {{ currentModel }}<i class="el-icon-caret-bottom"/>-->
<!--                  </span>-->
<!--                    <el-dropdown-menu slot="dropdown">-->
<!--                        <el-dropdown-item :command="{name:'AP'}">AP中台</el-dropdown-item>-->
<!--                        <el-dropdown-item :command="{name:'MES'}">MES</el-dropdown-item>-->
<!--                        <el-dropdown-item :command="{name:'ABAP'}">SAP-ABAP</el-dropdown-item>-->
<!--                    </el-dropdown-menu>-->
<!--                </el-dropdown>-->
<!--            </div>-->
            <div class="ap-dev-tool-item flex flex-center" @click="currentDesignPanel('config-panel', $event)">
                <div class="ap-dev-tool-item-icon">
                    <i class="el-icon-setting"/>
                </div>
                <div class="ap-dev-tool-item-text">配置</div>
            </div>
        </div>
    </div>
</template>

<script>
import ApDevBase from './../CustomPanel/items/base/ApDevBase'
import {addClass, removeClass} from 'ap-util/util/StyleUtil'
import {setCurrentCompanyId} from "ap-util/util/LoginUserUtil";

export default {
    name: 'OperatePanel',
    extends: ApDevBase,
    data() {
        return {
        }
    },
    computed: {
        currentModel() {
            return this.$store.state.tempData.currentModel
        }
    },
    methods: {
        currentDesignPanel(type, event) {
            let items = document.getElementsByClassName("ap-dev-tool-item-active");
            for (let i = 0; i < items.length; i++) {
                removeClass(items[i],"ap-dev-tool-item-active")
            }
            addClass( event.currentTarget,"ap-dev-tool-item-active");
            this.$store.commit('updateCurrentDesignPanel', type);
        },
        clickEvent(item) {
            this.currentModel = item.name;
            this.$store.commit('updateCurrentModel', item.name);
        },
        showMenu(type){
            return this.currentModel == type;
        }
    }
}
</script>

<style scoped>
.dev-header-logo {
    width: 315px;
    height: 100%;
    text-align: center;
    background-color: #497fd5;
    line-height: 40px;
    font-size: 18px !important;
}

.ap-dev-operate-panel {
    height: 100%;
    padding: 0 10px 0 0;
}

.ap-dev-tool-item {
    padding: 2px 14px;
    font-size: 13px;
    text-align: center;
}

.ap-dev-tool-item:hover {
    background-color: #80A9EA;
    cursor: pointer
}

.ap-dev-tool-item-active {
    background-color: #6699ea;
}

.ap-dev-tool-item-text {
    font-size: 10px;
    margin-left: 3px;
}

.ap-dev-tool-item-icon {
    font-size: 16px;
}

.ap-dev-tool-item-icon1 {
    font-size: 18px;
}

.ap-dev-tool-item-text1 {
    font-size: 15px;
    margin-left: 3px;
    color: white;
}
</style>
