<template>
    <div class="flex flex-pack-center" style="height: 100%;height: 100%;margin-top: 5px;">
        <!--左侧面板-->
        <div class="dev-container dev-left-panel">
            <el-tabs value="default" :stretch="true">
                <el-tab-pane label="默认" name="default">
                    <el-collapse v-model="componentGroup">
                        <template v-for="devComponent in devComponents">
                            <el-collapse-item :name="devComponent.title">
                                <template slot="title">
                                    <span class="dev-collapse-title">{{ devComponent.title }}</span>
                                </template>
                                <div class="dev-panel-item">
                                    <div
                                        v-for="item in devComponent.list"
                                        :key="item.type"
                                        class="dev-comp-item"
                                        :data-type="item.type"
                                        @click="clickItemEvent(item.type)"
                                    >
                                        <i :class="item.icon"/>&nbsp;{{ item.title }}
                                    </div>
                                </div>
                            </el-collapse-item>
                        </template>
                    </el-collapse>
                </el-tab-pane>
                <el-tab-pane label="自定义" name="custom"/>
            </el-tabs>
        </div>

        <!--中间面板-->
        <div class="flex-1 flex flex-direction-column" style="overflow: auto;">
            <ap-container>
                <ap-header margin="0111" height="45%" style="overflow: auto;">
                    <template v-if="showItem">
                        <!--                        <dynamic-item/>-->
                        <vue-render :options.sync="vueCode"></vue-render>
                    </template>
                    <template v-else>
                        组件加载中...
                    </template>
                </ap-header>
                <ap-main margin="0101" style="overflow: auto;background-color: #f9f2f4;">
                    <div style="position: relative;float: right;">
                        <el-button-group>
                            <el-button icon="el-icon-copy" @click="copyCode($event)">复制</el-button>
                        </el-button-group>
                    </div>
                    <div class="dev-code">
                        {{ template }}
                    </div>
                </ap-main>
            </ap-container>
        </div>

        <!--右侧面板-->
        <div class="dev-container dev-right-panel flex flex-direction-column">
            <div class="flex-1" style="overflow: auto">
                <comment :is="currentItem" @dataChange="itemDataChange"/>
            </div>
        </div>
    </div>
</template>

<script>
import devComponents from './../dev/devConfig'
import VueRender from './../base/VueRender'
import DynamicItem from "./DynamicItem";
// import DynamicItem from './../generator/DynamicItem'
import {getLocalData} from './../dev/DevUtil'
import clipboard from 'ap-util/util/ClipboardUtil'

// 批量导入组件
const allComponents = require.context('./items', false, /\.vue$/)
const apDevComponentItems = {}
allComponents.keys().forEach(fileName => {
    const comp = allComponents(fileName)
    apDevComponentItems[fileName.replace(/^\.\/(.*)\.\w+$/, '$1')] = comp.default
})
apDevComponentItems['DynamicItem'] = DynamicItem
apDevComponentItems['VueRender'] = VueRender

export default {
    name: 'ComponentsPanel',
    components: apDevComponentItems,
    data() {
        return {
            devComponents: devComponents,
            componentGroup: [],
            currentItem: '',
            template: '',
            showItem: true,
            vueCode: ''
        }
    },
    computed: {},
    created() {
        for (let i = 0; i < devComponents.length; i++) {
            this.componentGroup.push(devComponents[i].title)
        }
    },
    methods: {
        clickItemEvent(type) {
            this.currentItem = 'ap-dev-item-' + type
        },
        createFile(projectName, list) {
            this.$request({
                url: '/apd/dev/DevGenerateCode/createFile',
                method: 'post',
                data: {
                    list: JSON.stringify(list),
                    projectName: projectName
                }
            }).then(response => {
                this.showItem = true
            })
        },
        // 子组件数据修改
        itemDataChange(template) {
            this.template = template
            this.renderVue();
        },
        renderVue() {
            this.vueCode = this.template;
        },
        copyCode(event){
            clipboard(this.vueCode, event)
        }
    }
}
</script>

<style scoped>
.dev-container {
    height: 100%;
    background-color: white;
}

.dev-left-panel {
    width: 270px;
}

.dev-right-panel {
    width: 350px;
}

.dev-right-panel /deep/ .el-form-item {
    margin-bottom: 12px;
}

.dev-left-panel /deep/ .el-tabs__header {
    margin: 0px;
}

.dev-main-panel {
    height: 100%;
    width: 100%;
}

.dev-collapse-title {
    font-weight: bold;
    font-size: 13px;
    padding: 0px 8px;
}

.dev-comp-item {
    padding: 5px 8px;
    background: #f6f7ff;
    font-size: 12px;
    cursor: pointer;
    border: 1px solid #f6f7ff;
    border-radius: 3px;
    width: 44%;
    margin-left: 4%;
    float: left;
}

.dev-comp-item:hover {
    border: 1px solid #787be8;
    color: #787be8;
}

.dev-code {
    color: #c7254e;
    border-radius: 4px;
    padding: 5px;
    white-space: pre;
    width: fit-content;
}
</style>
