<template>
    <div class="container">
        <div class="left-board">
            <el-scrollbar class="left-scrollbar">
                <div class="components-list">
                    <div v-for="(item, listIndex) in leftComponents" :key="listIndex"
                        class="components-part">
                        <div class="components-title">{{ item.title }}</div>
                        <draggable class="components-draggable" :list="item.list"
                            :group="{ name: 'componentsGroup', pull: 'clone', put: false }"
                            :clone="cloneComponent" draggable=".components-item" filter=".disabled"
                            :sort="false" @end="onEnd">
                            <div v-for="(element, index) in item.list" :key="index"
                                class="components-item"
                                :class="{'disabled':element.config.dragDisabled}"
                                @click="addComponent(element)">
                                <div class="components-body">
                                    <i :class="element.config.tagIcon" />
                                    {{ element.config.label }}
                                </div>
                            </div>
                        </draggable>
                    </div>
                </div>
            </el-scrollbar>
        </div>
        <div class="center-board">
            <div class="action-bar">
                <div class="action-bar-right">
                    <el-button class="delete-btn unActive-btn" icon="icon-ym icon-ym-clean"
                        type="text" @click="empty()" size="medium">清空</el-button>
                </div>
            </div>
            <el-scrollbar class="center-scrollbar" v-show="showCenter">
                <el-row class="center-board-row" :gutter="formConf.gutter">
                    <el-form class="form" :size="formConf.size"
                        :label-position="formConf.labelPosition" :disabled="formConf.disabled"
                        :label-width="formConf.labelWidth + 'px'">
                        <template v-if="drawingList.length > 0">
                            <draggable :class="'drawing-board'" :list="drawingList" :animation="340"
                                group="modulesGroup">
                                <div v-for="mItem,mIndex in drawingList" :key="mIndex"
                                    class="module-item">

                                    <div class="module-title" style="margin-bottom: 20px">
                                        {{mItem.fieldModule}}</div>
                                    <draggable :class="'drawing-board' + mIndex"
                                        :list="mItem.children" :animation="340"
                                        group="componentsGroup" @end='onCenterEnd'>

                                        <el-form-item v-for="item,index in mItem.children"
                                            :key="index" @click.native="activeFormItem(item)"
                                            :class="[{'now-item':item.itsmFormCode === activeId},'form-item']"
                                            :label="item.itsmFieldName">

                                            <el-input
                                                v-if="item.fieldType == 'INPUT' || item.fieldType == 'MEMBER'"
                                                v-model="item.fieldValue"
                                                :placeholder="'请输入'+item.itsmFieldName"></el-input>

                                            <el-select v-if="item.fieldType == 'SELECT'"
                                                v-model="item.fieldValue"
                                                :placeholder="'请选择'+item.itsmFieldName">
                                                <el-option label="区域一" value="shanghai"></el-option>
                                                <el-option label="区域二" value="beijing"></el-option>
                                            </el-select>

                                            <el-radio-group v-if="item.fieldType == 'RADIO'"
                                                v-model="item.fieldValue" size="small">
                                                <el-radio label="1" border>备选项1</el-radio>
                                                <el-radio label="2" border disabled>备选项2</el-radio>
                                            </el-radio-group>

                                            <el-checkbox-group v-if="item.fieldType == 'CHECKBOX'"
                                                v-model="item.fieldValue">
                                                <el-checkbox label="复选框 A"></el-checkbox>
                                                <el-checkbox label="复选框 B"></el-checkbox>
                                                <el-checkbox label="复选框 C"></el-checkbox>
                                                <el-checkbox label="禁用" disabled></el-checkbox>
                                                <el-checkbox label="选中且禁用" disabled></el-checkbox>
                                            </el-checkbox-group>

                                            <el-input type="textarea"
                                                v-if="item.fieldType == 'RICH_TEXT' || item.fieldType == 'TEXTAREA'"
                                                v-model="item.fieldValue"
                                                :autosize="{ minRows: 2, maxRows: 4}"
                                                :placeholder="'请输入'+item.itsmFieldName">
                                            </el-input>

                                            <el-input type="number"
                                                v-if="item.fieldType == 'NUMBER'"
                                                v-model="item.fieldValue"
                                                :placeholder="'请输入'+item.itsmFieldName">
                                            </el-input>

                                            <el-upload
                                                action="http://localhost:3000/dev/api/minio/upload"
                                                class="upload-demo" multiple :limit="3"
                                                v-if="item.fieldType == 'UPLOAD'">
                                                <el-button size="small"
                                                    type="primary">点击上传</el-button>
                                            </el-upload>

                                            <div class="fast-do"
                                                v-if="item.itsmFormCode == activeId">
                                                <div style="border:1px solid #1890ff;margin-right:10px"
                                                    @click="copyItem(item,index,mItem)">
                                                    <i class="el-icon-copy-document"
                                                        style="color: #1890ff;" />
                                                </div>

                                                <div style="border:1px solid #f57d7d;"
                                                    @click="removeItem(item,index,mItem,mIndex)">
                                                    <i class="el-icon-delete"
                                                        style="color: #f57d7d;" />
                                                </div>
                                            </div>
                                        </el-form-item>
                                    </draggable>
                                </div>
                            </draggable>
                        </template>

                        <div v-else class="empty-info">
                            <img src="@/assets/images/emptyElement.png" alt="" class="empty-img">
                        </div>
                    </el-form>

                </el-row>
            </el-scrollbar>
        </div>

        <div class="right-board">
            <el-tabs v-model="activeName" @tab-click="handleClick">
                <el-tab-pane label="字段属性" name="first">

                </el-tab-pane>
            </el-tabs>
            <template v-if="activeName =='first'">
                <el-form size="small" label-width="100px" labelPosition="left" v-show="activeItem">
                    <el-form-item label="字段类型" label-width="100px">
                        <el-input :value="getActiveItemTypeName()" disabled />
                    </el-form-item>
                    <el-form-item label="所属模块">
                        <el-select v-model="activeItem.fieldModule"> <el-option
                                v-for="item in fieldModuleOptions" :key="item.value"
                                :label="item.label" :value="item.value">
                            </el-option>
                        </el-select>
                    </el-form-item>
                    <el-form-item label="是否必填">
                        <el-switch v-model="activeItem.isRequired" active-value="1"
                            inactive-value="2">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="是否隐藏">
                        <el-switch v-model="activeItem.isHidden" active-value="1"
                            inactive-value="2">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="能否提交">
                        <el-switch v-model="activeItem.isDisplay" active-value="1"
                            inactive-value="2">
                        </el-switch>
                    </el-form-item>
                    <el-form-item label="能否编辑">
                        <el-switch v-model=" activeItem.isDisable" active-value="1"
                            inactive-value="2">
                        </el-switch>
                    </el-form-item>
                </el-form>
            </template>
        </div>

    </div>
</template>

<script>

let unique = 0
import draggable from 'vuedraggable'
import {
    deepClone
} from '@/components/Generator/utils'
import {
    basicComponents
} from './filedConfig'
export default {
    components: {
        draggable
    },

    watch: {
        formData: {
            handler(val) {
                this.drawingList = val
            },
            deep: true
        },
        drawingList: {
            handler(val) {
                console.log(val)
                this.fieldModuleOptions = []
                val.forEach((mItem, mIndex) => {
                    let obj = {
                        value: mItem.fieldModule,
                        label: mItem.fieldModule,
                    }
                    this.fieldModuleOptions.push(obj)
                })
            },
            deep: true
        }
    },
    props: ['formData', 'formConf'],
    data() {
        return {
            leftComponents: [
                {
                    title: '基础控件',
                    list: basicComponents
                }
            ],
            drawingList: [],
            showCenter: false,
            activeName: 'first',
            activeId: null,//当前激活的字段id
            activeItem: null,//当前激活的字段
            fieldModuleOptions: [] //模块列表
        }
    },
    created() {
        console.log(this.formData)
        this.drawingList = JSON.parse(JSON.stringify(this.formData))
        this.activeId = this.drawingList[0].children[0].itsmFormCode
        this.activeItem = this.drawingList[0].children[0]
        this.showCenter = true

    },
    methods: {
        addComponent(item) {
            if (item.config.dragDisabled) return
            const clone = this.cloneComponent(item)


            let newModuleList = {
                fieldModule: '模块' + this.uuid(),
                moduleSort: this.drawingList.length,
                children: [clone]
            }
            this.drawingList.push(newModuleList)
            this.activeFormItem(clone)
        },
        // 改变当前选择的字段
        activeFormItem(item) {
            console.log(123)
            this.activeId = item.itsmFormCode
            this.activeItem = null
            this.$nextTick(() => {
                this.activeItem = item
                console.log(this.activeItem.isRequired)
            })

        },
        cloneComponent(item) {
            let cloneItem = deepClone(item.info || item)
            this.createCode(cloneItem)
            return cloneItem
        },
        // 生成字段唯一code
        createCode(item) {
            item.itsmFormCode = item.fieldType + this.uuid()
        },
        // 生成唯一ID
        uuid() {
            const time = Date.now()
            const random = Math.floor(Math.random() * 1000000000)
            unique++
            return '_' + random + unique + String(time)
        },
        onEnd(obj) {
            console.log('onEnd')
            console.log(obj)
        },
        onCenterEnd(obj) {
            console.log('onCenterEnd')
            this.drawingList.forEach((mItem, mIndex) => {
                if (mItem.children.length == 0) {
                    this.drawingList.splice(mIndex, 1)
                }
            })
        },
        empty() {
            this.$confirm('确定要清空所有组件吗？', '提示', { type: 'warning' }).then(() => {
                this.drawingList = []
            }).catch(() => { })
        },
        //删除字段
        removeItem(item, index, mItem, mIndex) {
            this.$confirm('确认删除该字段, 是否继续?', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$message({
                    type: 'success',
                    message: '删除成功!'
                });
                mItem.children.splice(index, 1)
                this.activeId = this.drawingList[0].children[0].itsmFormCode
                this.activeItem = this.drawingList[0].children[0]
                if (mItem.children.length == 0) {
                    this.drawingList.splice(mIndex, 1)
                }
            }).catch(() => {
                this.$message({
                    type: 'info',
                    message: '已取消删除'
                });
            });

        },
        // 复制字段
        copyItem(item, index, mItem) {
            const clone = this.cloneComponent(item)
            mItem.children.push(clone)
        },
        //获取当前激活字段类型
        getActiveItemTypeName() {
            if (this.activeItem) {
                return this.activeItem.fieldType
            } else {
                return ''
            }
        },
        //右侧tab切换
        handleClick(tab, event) {
            console.log(tab, event);
        }
    },
}
</script>

<style lang='scss'>
@import '../styles/index';
@import '../styles/home';

.center-board-row {
    overflow: hidden;
    .form {
        height: 95% !important;
        margin: 0 20px;
        .module-item {
            padding: 20px;
            border: 1px solid #e2e0e0;
            margin-bottom: 20px;
            border-radius: 10px;
            .module-title {
                font-size: 20px;
                font-weight: bold;
            }
            .el-form-item {
                border: 1px dashed #e2e0e0;
                padding: 10px;
                &:hover {
                    background-color: #f3f9ff !important;
                }
                position: relative;
                .fast-do {
                    display: flex;
                    align-items: center;
                    position: absolute;
                    right: 20px;
                    top: 0;
                    transform: translateY(-80%);
                    div {
                        background-color: #fff;
                        cursor: pointer;
                        width: 25px;
                        height: 25px;
                        border-radius: 100%;
                        display: flex;
                        align-items: center;
                        justify-content: center;
                    }
                }
            }
            .now-item {
                border: 1px solid #1488f5;
            }
        }
    }
}
.right-board {
    width: 340px;
    position: absolute;
    right: 0;
    top: 0;
    height: 100%;
    background: #fff;
    border-radius: 4px;
    padding: 10px;
    padding-top: 3px;
}
</style>