<template>
    <div class="app-container" v-loading="state.loading">
        <div class="top-header">
            <el-icon size="26px" style="cursor: pointer;" @click="goBack">
                <Back />
            </el-icon>
            <el-button @click="setForm" type="primary"><el-icon style="margin-right: 5px;">
                    <DocumentAdd />
                </el-icon>保存</el-button>
        </div>
        <div class="main-content">
            <div class="left-menu" v-if="!route.query.id">
                <div :class="state.originalType == 2 ? 'bluefont' : ''" class="menubtn" @click="state.originalType = 2">
                    <svg-icon style="margin-right: 5px;font-size: 14px;" icon-class="zidingyi" />自定义表单
                </div>
                <div :class="state.originalType == 1 ? 'bluefont' : ''" class="menubtn" @click="state.originalType = 1">
                    <svg-icon style="margin-right: 5px;font-size: 14px;" icon-class="servergl" />server端文件
                </div>
            </div>
            <div v-if="state.originalType == 2" class="right-content">
                <div class="left">
                    <div style="padding: 0 0 20px 10px;">基础组件</div>
                    <draggable @end.stop="onEnd($event)" :list="state.leftMenu" ghost-class="ghost"
                        :group="{ name: 'list', pull: 'clone' }" :clone="clone" :sort="false" itemKey="id"
                        animation="300" style="display: grid;grid-template-columns: 1fr 1fr;grid-gap: 15px;">
                        <template #item="{ element, index }">
                            <div class="left-btn" style="display: flex;align-items: center;justify-content: center;">
                                <svg-icon style="margin-right: 5px;font-size: 14px;" v-if="element.icon"
                                    :icon-class="element.icon" /><span style="font-size: 12px;">{{ element.label
                                    }}</span>
                            </div>
                        </template>
                    </draggable>
                </div>
                <div class="centerbigbox">
                    <div class="center">
                        <div style="margin-top: 20px;" :class="state.inputshow ? 'center-title' : ''"
                            class="center-titletwo">
                            <el-input placeholder="请输入表单名称" :rows="2" class="center-input"
                                @focus="state.inputshow = true" @blur="state.inputshow = false" autosize
                                v-model="state.title" type="textarea" />
                        </div>
                        <div style="margin-top: 10px;" :class="state.inputshowtwo ? 'center-title' : ''"
                            class="center-titletwo">
                            <el-input placeholder="请输入表单描述" :rows="2" class="center-inputtwo"
                                @focus="state.inputshowtwo = true" @blur="state.inputshowtwo = false" autosize
                                v-model="state.describe" type="textarea" />
                        </div>
                        <div
                            style="position: absolute;top: 100px;width: 100%;display: flex;justify-content: center;left: 0;">
                            <el-empty :image-size="400"
                                image="data:image/png;base64, "
                                description="从左侧拖拽来添加组件" v-if="state.centerData.length == 0" />
                        </div>
                        <!-- :fallback-on-body="true" -->
                        <draggable :list="state.centerData" ghost-class="ghost" itemKey="id" group="list"
                            :fallback-class="true" class="draggable" animation="300">
                            <template #item="{ element, index }">
                                <div :style="{ background: state.rightData && element.onlykey == state.rightData.onlykey ? '#f3f9ff' : '' }"
                                    class="inputItem move" @click="focusInput(element)">
                                    <div class="form-title move">{{ element.label }}</div>
                                    <!-- @focus="focusInput(element)" -->
                                    <div>
                                        <component :disabled="true" :style="{ width: '100%' }" :is="element.tag"
                                            v-model="input" v-bind="element.attribute"></component>
                                    </div>
                                    <div :class="state.rightData && element.onlykey == state.rightData.onlykey ? 'actbtn' : ''"
                                        class="delItemBtn">
                                        <div class="copyItem delItem" style="right: 65px;border: 1px solid #188ffd;"
                                            @click.stop="deleteComponent(index, element, 1)">
                                            <el-icon>
                                                <CopyDocument />
                                            </el-icon>
                                        </div>
                                    </div>
                                    <div :class="state.rightData && element.onlykey == state.rightData.onlykey ? 'actbtn' : ''"
                                        class="delItemBtn">
                                        <div class="delItem" @click.stop="deleteComponent(index, element, 2)">
                                            <el-icon>
                                                <Delete />
                                            </el-icon>
                                        </div>
                                    </div>
                                </div>
                            </template>
                        </draggable>
                    </div>
                </div>
                <div class="right">
                    <div style="padding: 0 0 20px 10px;">组件属性</div>
                    <el-empty v-if="!state.rightData" :image-size="100" description="点击组件可以修改组件属性" />
                    <div class="rightContent" v-else>
                        <el-form ref="formRef" :model="state.rightData">
                            <el-form-item prop="label" label="标题名" :rules="[{
        required: true, message: `请输入标题名`, trigger: 'blur'
    }]">
                                <el-input v-model="state.rightData.label" placeholder="请输入占位文案" />
                            </el-form-item>
                            <el-form-item prop="key" :rules="[{
        required: true, message: `请输入key值`, trigger: 'blur'
    }]" label="key值">
                                <el-input v-model="state.rightData.key" placeholder="请输入key值,如：name" />
                            </el-form-item>
                            <!-- <el-form-item v-if="['el-input'].includes(state.rightData.tag)" name="default" label="默认值">
              <el-input v-model="state.rightData.default" placeholder="请输入" />
            </el-form-item> -->
                            <!-- v-if="!['BaseRadioGroup', 'BaseUpload'].includes(state.rightData.tag)" -->
                            <el-form-item :rules="[{
        required: true, message: `请输入提示语`, trigger: 'blur'
    }]" prop="attribute.placeholder" label="提示语">
                                <el-input v-model="state.rightData.attribute.placeholder" placeholder="请输入提示语" />
                            </el-form-item>
                            <el-form-item name="placeholder" label="输入框行数:"
                                v-if="['el-input'].includes(state.rightData.tag) && state.rightData.attribute.rows">
                                <el-input-number v-model="state.rightData.attribute.rows" :min="2" :max="10" />
                            </el-form-item>
                            <el-form-item label="是否必填">
                                <el-switch :active-value="true" :inactive-value="false"
                                    v-model="state.rightData.attribute.required" />
                            </el-form-item>
                            <el-form-item label="是否清空"
                                v-if="!['BaseRadioGroup', 'BaseUpload'].includes(state.rightData.tag)">
                                <el-switch :active-value="true" :inactive-value="false"
                                    v-model="state.rightData.attribute.clearable" />
                            </el-form-item>
                            <div v-if="['BaseSelect', 'BaseRadioGroup'].includes(state.rightData.tag)">
                                <el-form-item v-if="['BaseSelect'].includes(state.rightData.tag)" label="是否筛选">
                                    <el-switch :active-value="true" :inactive-value="false"
                                        v-model="state.rightData.attribute.filterable" />
                                </el-form-item>
                                <div class="BaseSelectbox">
                                    <div class="BaseSelectline"></div>
                                    <span style="padding: 0 10px;">选项</span>
                                    <div class="BaseSelectline"> </div>
                                </div>
                                <el-form-item v-if="['BaseSelect'].includes(state.rightData.tag)">
                                    <el-radio-group v-model="state.rightData.attribute.staticordynamic">
                                        <el-radio :label="'fetchOptions'">静态数据</el-radio>
                                        <el-radio :label="'options'">动态数据</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <!-- 静态数据 -->
                                <div
                                    v-if="state.rightData.attribute.staticordynamic != 'options' || ['BaseRadioGroup'].includes(state.rightData.tag)">
                                    <draggable handle=".mover" :list="state.rightData.attribute.options"
                                        ghost-class="ghost" itemKey="id" group="list" :fallback-class="true"
                                        class="draggable" animation="300">
                                        <template #item="{ element, index }">
                                            <el-form-item :prop="'attribute.options[' + index + '].label'" :rules="[{
        required: true, message: `请输入选项`, trigger: 'blur'
    }]">
                                                <div style="display: flex;align-items: center;">
                                                    <el-icon size="20px" class="mover" style="cursor: pointer;">
                                                        <Operation />
                                                    </el-icon>
                                                    <el-input style="margin: 0 5px;" v-model="element.label"
                                                        placeholder="请输入选项">
                                                    </el-input>
                                                    <el-icon style="cursor: pointer;" @click="deleteOption(index)"
                                                        size="20px"
                                                        :color="state.rightData.attribute.options.length == 1 ? '' : 'red'">
                                                        <Remove />
                                                    </el-icon>
                                                </div>
                                            </el-form-item>
                                        </template>
                                    </draggable>
                                    <el-button type="text" @click="addOption()"><el-icon style="margin-right: 5px;">
                                            <CirclePlus />
                                        </el-icon>添加选项</el-button>
                                </div>
                                <!-- 动态数据 -->
                                <div v-else>
                                    <el-form-item :prop="'attribute.fetchOptions.url'" :rules="[{
        required: true, message: `请输入接口url`, trigger: 'blur'
    }]">
                                        <el-input v-model="state.rightData.attribute.fetchOptions.url"
                                            placeholder="请输入">
                                            <template #prepend>接口url</template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item :prop="'attribute.fetchOptions.method'">
                                        <el-select style="width: 100%;"
                                            v-model="state.rightData.attribute.fetchOptions.method"
                                            placeholder="请选择接口请求方式">
                                            <el-option label="get请求" value="get" />
                                            <el-option label="post请求" value="post" />
                                        </el-select>
                                    </el-form-item>
                                    <el-form-item :prop="'attribute.fetchOptions.data'">
                                        <el-input v-model="state.rightData.attribute.fetchOptions.data"
                                            placeholder="请输入">
                                            <template #prepend>请求json参数</template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item :prop="'attribute.fetchOptions.dataPath'" :rules="[{
        required: true, message: `请输入数据jsonPath`, trigger: 'blur'
    }]">
                                        <el-input v-model="state.rightData.attribute.fetchOptions.dataPath"
                                            placeholder="请输入">
                                            <template #prepend>数据jsonPath</template>
                                        </el-input>
                                    </el-form-item>
                                    <el-form-item :prop="'attribute.fetchOptions.valueKey'" :rules="[{
        required: true, message: `请输入值字段`, trigger: 'blur'
    }]">
                                        <el-input v-model="state.rightData.attribute.fetchOptions.valueKey"
                                            placeholder="请输入">
                                            <template #prepend>值字段</template>
                                        </el-input>
                                    </el-form-item>

                                    <el-form-item :prop="'attribute.fetchOptions.labelKey'" :rules="[{
        required: true, message: `请输入标签字段`, trigger: 'blur'
    }]">
                                        <el-input v-model="state.rightData.attribute.fetchOptions.labelKey"
                                            placeholder="请输入">
                                            <template #prepend>标签字段</template>
                                        </el-input>
                                    </el-form-item>
                                </div>

                            </div>
                            <div v-if="['BaseUpload'].includes(state.rightData.tag)">
                                <el-form-item label="是否多选">
                                    <el-switch :active-value="true" :inactive-value="false"
                                        v-model="state.rightData.attribute.multiple" />
                                </el-form-item>
                                <el-form-item label="是否显示文件列表">
                                    <el-switch :active-value="true" :inactive-value="false"
                                        v-model="state.rightData.attribute.showFileList" />
                                </el-form-item>
                                <el-form-item label="文件列表的类型:">
                                    <el-radio-group v-model="state.rightData.attribute.listType">
                                        <el-radio :label="'text'">text</el-radio>
                                        <el-radio :label="'picture-card'">picture-card</el-radio>
                                    </el-radio-group>
                                </el-form-item>
                                <el-form-item name="placeholder" label="最大上传数量:">
                                    <el-input-number v-model="state.rightData.attribute.limit" :min="1" :max="10" />
                                </el-form-item>
                                <el-form-item>
                                    <el-input v-model="state.rightData.attribute.accept" placeholder="例如：.jpg,.png">
                                        <template #prepend>上传文件类型</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item :prop="'attribute.url'" :rules="[{
        required: true, message: `请输入接口url`, trigger: 'blur'
    }]">
                                    <el-input v-model="state.rightData.attribute.url" placeholder="请输入">
                                        <template #prepend>接口url</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item :prop="'attribute.name'" :rules="[{
        required: true, message: `文件字段名`, trigger: 'blur'
    }]">
                                    <el-input v-model="state.rightData.attribute.name" placeholder="请输入">
                                        <template #prepend>文件字段名</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item :prop="'attribute.resKey.urlKey'" :rules="[{
        required: true, message: `请输入url字段`, trigger: 'blur'
    }]">
                                    <el-input v-model="state.rightData.attribute.resKey.urlKey" placeholder="请输入">
                                        <template #prepend>url字段</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item :prop="'attribute.resKey.nameKey'" :rules="[{
        required: true, message: `请输入文件名字段`, trigger: 'blur'
    }]">
                                    <el-input v-model="state.rightData.attribute.resKey.nameKey" placeholder="请输入">
                                        <template #prepend>文件名字段</template>
                                    </el-input>
                                </el-form-item>
                                <el-form-item label="自定义提交格式:">
                                    <el-input type="textarea" rows="5" v-model="state.rightData.customFormatter"
                                        placeholder="例如：customFormatter: function (data) { 
          if (data.length > 0) return data[0].response.url
        }">
                                    </el-input>
                                </el-form-item>
                            </div>
                        </el-form>
                    </div>
                </div>
            </div>
            <div v-else class="right-contentwo" style="padding: 40px;">
                <el-form ref="serverform" label-width="auto" :model="state">
                    <el-form-item prop="title" label="表单名称：" :rules="[{
        required: true, message: `请输入表单名称`, trigger: 'blur'
    }]">
                        <el-input style="width: 400px" v-model="state.title" placeholder="请输入表单名称" />
                    </el-form-item>
                    <el-form-item prop="formPath" label="表单路径：" :rules="[{
        required: true, message: `请输入表单路径`, trigger: 'blur'
    }]">
                        <el-input style="width: 400px" v-model="state.formPath" placeholder='/form/xxx' />
                    </el-form-item>
                    <el-form-item :rules="[{
        required: true, message: `请输入表单描述`, trigger: 'blur'
    }]" prop="describe" label="表单描述：">
                        <el-input type="textarea" :rows="5" style="width: 400px" v-model="state.describe"
                            placeholder="请输入表单描述" />
                    </el-form-item>
                </el-form>
            </div>
        </div>
    </div>

</template>

<script setup>
import { ref, reactive, onMounted,watch } from "vue";
import draggable from 'vuedraggable'
const { proxy } = getCurrentInstance();
import { postForm, getforprocessform, editForm } from './api'
const formRef = ref()
const serverform = ref()
const input = ref('')
import { leftMenu } from './options'
import { v4 as uuidv4 } from 'uuid';
import useUserStore from '@/store/modules/user'

const user = useUserStore()
const router = useRouter()
const route = useRoute()
const state = reactive({
    leftMenu: leftMenu(),
    rightData: null,
    centerData: [],
    loading: false,
    title: "未命名表单",
    describe: "感谢您能抽出几分钟时间来参加本次表单填写，现在我们就马上开始吧！",
    formPath: "",
    inputshow: false,
    inputshowtwo: false,
    originalType: 2,
    content:[]
})
const goBack = () => {
    router.back()
}
// 拖拽结束
const onEnd = (e) => {
    if (e.to.className == 'draggable' && state.centerData.length == 1) {
        state.rightData = state.centerData[0]
    }
}
// 克隆组件
const clone = (obj) => {
    let str = JSON.parse(JSON.stringify(obj))
    str.key = '';
    // str.key = uuidv4().replace(/-/g, '').substring(0, 12);
    if (["BaseSelect", 'BaseRadioGroup'].includes(str.tag)) {
        str.attribute.options = [
            { label: '选项一', value: uuidv4().replace(/-/g, '').substring(0, 8) },
            { label: '选项二', value: uuidv4().replace(/-/g, '').substring(0, 8) },
        ]
    }
    str.onlykey = uuidv4().replace(/-/g, '').substring(0, 12)
    delete str.icon
    const newObj = str
    return newObj
}
// 点击组件
const focusInput = (item) => {
    checkForm().then((res) => {
        if (res) {
            state.rightData = item
        }
    })
}
// 添加选项
const addOption = () => {
    state.rightData.attribute.options.push({ label: '', value: uuidv4().replace(/-/g, '').substring(0, 8) },)
}
// 删除选项
const deleteOption = (index) => {
    if (state.rightData.attribute.options.length > 1) {
        state.rightData.attribute.options.splice(index, 1)
    }
}
// 复制和删除组件
const deleteComponent = (index, element, i) => {
    if (i == 1) {
        let str = JSON.parse(JSON.stringify(element))
        str.onlykey = uuidv4().replace(/-/g, '').substring(0, 12)
        state.centerData.splice(index + 1, 0, str)
        return
    }
    state.centerData.splice(index, 1)
    if (element.key == state.rightData.key) {
        state.rightData = null
    }
    // proxy.$modal.confirm('是否确认删除该组件?').then(function () {
    //     state.centerData.splice(index, 1)
    //     if (element.key == state.rightData.key) {
    //         state.rightData = null
    //     }
    // }).then(() => {
    // }).catch(() => { });
}
// 校验右侧表单
const checkForm = () => {
    return new Promise((resolve, reject) => {
        if (formRef.value) {
            formRef.value.validate((valid, fields) => {
                if (valid) {
                    resolve(true)
                } else {
                    resolve(false)
                }
            })
        } else {
            resolve(true)
        }
    })
}
const postCustomize = () => {
    if (state.title == '') {
        proxy.$modal.msgError("请填写表单名称");
        return
    }
    if (state.describe == '') {
        proxy.$modal.msgError("请填写表单描述");
        return
    }
    if (state.centerData.length == 0) {
        proxy.$modal.msgError("请从左侧拖拽添加组件后进行保存");
        return
    }
    checkForm().then((res) => {
        if (res) {
            let str = JSON.parse(JSON.stringify(state.centerData))
            let keyarr = []
            str.map((item) => {
                keyarr.push(item.key)
                if (item.tag == 'BaseUpload') {
                    item.attribute.baseUrl = item.attribute.baseApi + item.attribute.url
                }
                if (item.tag == 'BaseSelect') {
                    if (item.attribute.staticordynamic == 'options') {
                        item.attribute.fetchOptions.data = JSON.parse(item.attribute.fetchOptions.data)
                    }
                    delete item.attribute[item.attribute.staticordynamic];
                    delete item.attribute.staticordynamic
                }
                if (item.attribute && item.attribute.required) {
                    item.rules = [{ required: true, message: item.attribute.placeholder, trigger: 'blur' }]
                }
                delete item.attribute.required;
                delete item.onlykey
            })
            if (str.length != new Set(keyarr).size) {
                proxy.$modal.msgError("组件key值不能重复");
                return
            }
            fnPost({ content: JSON.stringify(str), userId: user.userId, formName: state.title, formDesc: state.describe, id: route.query.id ? route.query.id : "" })
        }
    })
}
const fnPost = (obj) => {
    state.loading = true
    let fn = route.query.id ? editForm : postForm
    fn(obj).then((res) => {
        if (res.code == 200) {
            state.loading = false
            proxy.$modal.msgSuccess(route.query.id ? '修改成功' : "添加成功");
            goBack()
        } else {
            state.loading = false
        }
    })
}
const setForm = () => {
    if (state.originalType == 1) {
        serverform.value.validate((valid, fields) => {
            if (valid) {
                fnPost({ content:state.content, formPath: state.formPath, userId: user.userId, formName: state.title, formDesc: state.describe, id: route.query.id ? route.query.id : "" })
            }
        })
    } else {
        postCustomize()
    }
}
// 组件回显
const Feedback = (list) => {
    let str = list
    str.map((item) => {
        item.attribute.required = item.attribute && item.rules ? true : false
        delete item.rules
        // if (item.tag == 'BaseUpload') {
        //     item.attribute.url = item.attribute.baseUrl
        // }
        if (item.tag == 'BaseSelect') {
            if (item.attribute.fetchOptions && item.attribute.fetchOptions.data) {
                item.attribute.fetchOptions.data = JSON.stringify(item.attribute.fetchOptions.data)
                item.attribute.options = [
                    { label: '选项一', value: uuidv4().replace(/-/g, '').substring(0, 8) },
                    { label: '选项二', value: uuidv4().replace(/-/g, '').substring(0, 8) },
                ]
                item.attribute.staticordynamic = 'options'
            } else {
                item.attribute.fetchOptions = {
                    baseURL: `${import.meta.env.VITE_APP_BASE_API}`,
                    url: "/system/user/list",
                    method: 'get',
                    data: '{}',
                    dataType: 'json',
                    dataPath: 'data.list',
                    labelKey: "name",
                    valueKey: "id",
                }
                item.attribute.staticordynamic = 'fetchOptions'
            }
        }
    })
    return str
}
// 根据id获取表单
const byIdForm = async () => {
    state.loading = true
    await getforprocessform(route.query.id).then((res) => {
        if (res.code == 200) {
            if (res.data.content && res.data.content.length > 0) {
                state.centerData = Feedback(res.data.content)
                state.rightData = state.centerData[0]
            }
            state.title = res.data.formName
            state.describe = res.data.formDesc
            state.formPath = res.data.formPath
            if(route.query.originalType==1) state.content = res.data.content
            state.originalType = route.query.originalType
        }
    })
    state.loading = false
}
onMounted(() => {
    if (route.query.id) byIdForm()
})
watch(() => state.rightData?.label, (val) => {
    if(val) state.rightData.attribute.placeholder = `请输入${val}`
})
</script>
<style scoped lang="scss">
:deep(.right-contentwo .el-form-item--default) {
    margin-bottom: 50px !important;
}

.top-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 10px 20px;
    height: 50px;
    border-bottom: 1px solid #e6e6e6;
    box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);
}

.right-content {
    flex: 1;
    height: 100%;
    display: flex;
}

.menubtn:hover {
    background: #ecf5ff;
}

.menubtn {
    cursor: pointer;
    display: flex;
    align-items: center;
    font-size: 14px;
    padding: 15px 0;
    padding-left: 20px;
}

.bluefont {
    color: #409eff;
}

.left-menu {
    width: 150px;
    height: 100%;
    // padding: 20px;
    border-right: 1px solid #e6e6e6;
}

.center-title {
    background: #f4f4f4;
}

.center-titletwo {
    width: 100%;
}

.center-titletwo:hover {
    background: #f4f4f4;
}

:deep(.center-inputtwo .el-textarea__inner) {
    resize: none;
    text-align: center !important;
    border: none !important;
    font-size: 12px !important;
    box-shadow: none !important;
    background: none !important;
    font-weight: 100;
    color: #333;
}

:deep(.center-input .el-textarea__inner) {
    color: #333;
    resize: none;
    text-align: center !important;
    border: none !important;
    font-size: 22px !important;
    box-shadow: none !important;
    background: none !important;
    font-weight: 400;
}

.left-btn:hover {
    color: #1890ff;
    border: 1px solid #1890ff;
}

.left-btn {
    cursor: pointer;
    padding: 10px 0;
    font-size: 12px;
    border: 1px solid transparent;
    border-radius: 6px;
    box-shadow: 0 1px 5px 0 rgba(0, 0, 0, .1);
}

.BaseSelectinput {
    margin-bottom: 10px !important;
}

.BaseSelectline {
    background: #dcdfe6;
    height: 1px;
    flex: 1;
}

.BaseSelectbox {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 10px;
}

.ant-form-item {
    display: block;
}

.main-content {
    width: 100%;
    position: relative;
    display: flex;
    padding: 10px 0px;
    height: calc(100% - 30px);
    margin-top: -10px;

    .left {
        z-index: 999;
        padding: 20px;
        width: 260px;
        background: #fff;
        // background: red;
        // border-right: 1px solid #e6e6e6;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

        // border: 1px solid #fff;
        .btns {
            margin: 0 10px;
            margin-bottom: 10px;
        }
    }

    .centerbigbox {
        width: calc(100% - 600px);
        height: 100%;
        overflow: hidden;
        background: #f4f5f5;
        padding: 0 4%;
    }

    .center {
        width: 100%;
        height: 100%;
        padding: 20px 30px;
        padding-top: 0;
        position: relative;
        overflow: auto;
        overflow-x: hidden;
        background: #fff;
        display: flex;
        flex-direction: column;

        &-title {
            font-size: 16px;
            font-weight: 700;
        }

        .actbtn {
            display: block !important;
        }

        .delItemBtn {
            display: none;
        }

        .inputItem:hover .delItemBtn {
            display: block;
        }

        .inputItem:hover {
            background: #f3f9ff;
        }

        .inputItem {
            padding: 10px 20px 30px 20px;
            // background-color: #f3f9ff;
            border-radius: 5px;
            margin: 15px;
            margin-bottom: 25px;
            cursor: move;
            position: relative;
            box-shadow: 0 2px 4px 0 rgba(0, 0, 0, .1);

            .form-title {
                font-size: 14px;
                margin-bottom: 10px;
                padding-bottom: 5px;
                // border-bottom: 1px solid #efefef;
                margin-left: 0px;
            }

            .delItem {
                width: 30px;
                height: 30px;
                display: flex;
                justify-content: center;
                align-items: center;
                border-radius: 50%;
                box-shadow: 0 2px 4px 0 hsla(0, 0%, 63.9%, .5);
                background-color: #ffffff;
                color: #001529;
                text-align: center;
                position: absolute;
                bottom: -10px;
                right: 20px;
                color: #f46c6c;
                cursor: pointer;
                border: 1px solid #f46c6c;
            }

            .copyItem {
                color: #188ffd;
            }

            .delItem:hover {
                background-color: #f46c6c;
                color: #ffffff;
                border: 1px solid #f46c6c;
            }

            .copyItem:hover {
                background-color: #188ffd;
                color: #ffffff;
                border: 1px solid #188ffd;
            }
        }

        .draggable {
            // height: 100%;
            flex: 1;
        }
    }

    .right {
        padding: 20px 10px;
        padding-right: 20px;
        width: 350px;
        height: 100%;
        overflow: auto;
        background: #fff;
        margin-left: auto;
        box-shadow: 0 2px 12px 0 rgba(0, 0, 0, .1);

        .rightContent {
            background-color: #ffffff;
            padding: 10px 20px;
            padding-right: 0;
        }
    }
}

.app-container {
    padding: 0;
    width: 100%;
    height: calc(100vh - 50px);
}
</style>