/**
 * 顶部导航
 * @author xiufu.wang
 */
import ElMenu from 'mars-pro/packages/menu'
import ElMenuItem from 'mars-pro/packages/menu-item'
import ProAction from 'mars-pro/packages/pro-action'
import SvgIconAdd from 'mars-pro/icons/src/add'
import SvgIconClearup from 'mars-pro/icons/src/clearup'
import SvgIconForward from 'mars-pro/icons/src/forward'
import SvgIconBack from 'mars-pro/icons/src/back'
import SvgIconImport from 'mars-pro/icons/src/import'
import SvgIconExport from 'mars-pro/icons/src/export'
import SvgIconVue from 'mars-pro/icons/src/vue'
import SvgIconJson from 'mars-pro/icons/src/json'
import SvgIconSave from 'mars-pro/icons/src/save'
import SvgIconPreview from 'mars-pro/icons/src/preview'
import ElDivider from 'mars-pro/packages/divider'
export default {
    name: 'ProOnlineDesignHeader',
    componentName: 'ProOnlineDesignHeader',
    components: {
        SvgIconAdd,
        ElDivider,
        SvgIconClearup,
        SvgIconForward,
        SvgIconBack,
        SvgIconImport,
        SvgIconExport,
        SvgIconVue,
        SvgIconJson,
        SvgIconSave,
        SvgIconPreview,
        ElDivider
    },
    inject: ['proOnlineDesign'],
    created() { 
        this.showComponents = this.proOnlineDesign.xstate.changeShowType.bind(this, 'components')
        this.showBlocks = this.proOnlineDesign.xstate.changeShowType.bind(this, 'blocks')
        this.showPages = this.proOnlineDesign.xstate.changeShowType.bind(this, 'pages')
        this.showDyncs = this.proOnlineDesign.xstate.changeShowType.bind(this, 'dyncs')

    },
    render() {
        return (    
            <div class="header">
                <div class="header--left">
                        <div class="action-item">
                            <SvgIconAdd />
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="action-item">
                            <SvgIconSave />
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="action-item">
                            <SvgIconClearup />
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="action-item">
                            <SvgIconBack />
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="action-item">
                            <SvgIconForward />
                        </div>
                      
                    </div>
                    <div class="header--center">
                    <div {...({'class': {'action-item': true, 'active': (this.proOnlineDesign.xstate.showType === 'components')}})} on-click={this.showComponents}>
                            组件库   
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div {...({'class': {'action-item': true, 'active': (this.proOnlineDesign.xstate.showType === 'blocks')}})} on-click={this.showBlocks}>
                            区块库
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div {...({'class': {'action-item': true, 'active': (this.proOnlineDesign.xstate.showType === 'pages')}})} on-click={this.showPages}>
                            页面库
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div {...({'class': {'action-item': true, 'active': (this.proOnlineDesign.xstate.showType === 'dyncs')}})} on-click={this.showDyncs}>
                            动态
                        </div>
                    </div>
                    <div class="header--right">
                        <div class="action-item">
                            <SvgIconPreview />
                        </div>
                        <el-divider direction="vertical"></el-divider>
                         <div class="action-item">
                            <SvgIconImport />
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="action-item">
                            <SvgIconExport />
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="action-item">
                            <SvgIconVue />
                        </div>
                        <el-divider direction="vertical"></el-divider>
                        <div class="action-item">
                            <SvgIconJson />
                        </div>
                    </div>
            </div>
        )
    }
}