<template>
    <div class="sourceWrap">
        <h3 class="sourceTitle">选择组件</h3>
        <div v-for="(form, fIndex) in fomrmSourceList" :key="fIndex">
            <div class="diyInpWrap" v-drageme>
                <label>{{ form.label }}：</label>
                <diyInput :form="form"></diyInput>
            </div>
        </div>
    </div>
</template>

<script>
import Vue from 'vue';
import { fomrmSourceList } from './template'
Vue.component("diyInput", {
    props: {
        form: Object
    },
    render: function (createElement) {
        if (this.form.tag == 'select') {
            return createElement(
                this.form.tag,
                {
                    domProps: {
                        type: this.form.type
                    }
                },
                this.form.data.defalut.map(form => {
                    return createElement(
                        'option',
                        {},
                        form
                    )
                })
            )
        }
        else if ((this.form.type == 'radio') || (this.form.type == 'checkBox')) {
            console.log(this.form);
            return createElement(
                'span', {}, this.form.data.defalut.map(form => {
                    console.log(form);
                    return createElement(
                        this.form.tag,
                        {
                            domProps: {
                                type: this.form.type,
                            }
                        },
                        form
                    )
                })
            )
        } else if (this.form.tag == 'textarea') {
            return createElement(
                this.form.tag,
                {
                    domProps: {
                        name: this.form.type,
                        cols: "20",
                        rows: "2",
                        placeholder: this.form.data.defalut
                    }
                },
            )
        }
        return createElement(
            this.form.tag,
            {
                domProps: {
                    name: this.form.type,
                    cols: "50",
                    rows: "10",
                    placeholder: this.form.data.defalut
                }
            },
            'test'
        )
    }
})
export default {
    // components: { 'diy-input': diyInput },
    data() {
        return {
            fomrmSourceList
        }
    },
    renderInput() {

    }
}
</script>

<style lang="scss" scoped>
.sourceWrap {
    height: calc(100vh - 40px);
    border-right: 1px solid gray;
    text-align: center;
    select,input,textarea{
        width: 170px;
        height: 25px;
    }
    .sourceTitle {
        line-height: 40px;
        margin: 0;
    }

    .diyInpWrap {
        text-align: left;
        margin: 0px 10px 20px 10px;
        background-color: antiquewhite;
        padding: 15px 10px;
        cursor: move;
        border-radius: 5px;
        display: flex;
        align-items: center;
    }
}
</style>