<template>
<div class="d-flex">
    <emailLeft style="height: 100%; overflow: auto;" :emailHTML="emailHTML" :dragWidgetType="dragWidgetType" :widgetType="widgetType" :hasDragEnded="hasDragEnded" :selectedWidget="selectedWidget" v-on:selectedDropWidget="changeSelectedDropWidget($event)" v-on:changeHasDragEnded="hasDragEnded = false" v-on:selectedWidget="selectedWidget = $event" v-on:addColumn="addToWidget($event[0], $event[1])" v-on:addToBottom="addToBottom($event)" v-on:addFirstWidget="addToWidget('parentRow')" v-on:onDragStart="onDragStart('buttonWidget', $event)" v-on:onDragEnd="onDragEnd('buttonWidget', $event)"></emailLeft>

    <div class="vb-body-right">
        <vue-perfect-scrollbar class="scroll-area">
            <div class="vb-header-right">
                <div class="vb-navbar-right">
                    <ul>
                        <!-- <li>
                <a
                  href="#"
                  @click="sideTabsTemp.tabdetails = true, sideTabsTemp.tabcontent = false, sideTabsTemp.tabbody = false"
                >
                  <img
                    v-if="sideTabsTemp.tabdetails"
                    v-bind:class="{ vactive: sideTabsTemp.tabdetails }"
                    class="ve-nav-img"
                    src="../assets/img/details.png"
                    alt
                  >
                  <img
                    v-if="!sideTabsTemp.tabdetails"
                    class="ve-nav-img"
                    src="../assets/img/details-black.png"
                    alt
                  >
                </a>
              </li> -->

                        <li>
                            <a
                  href="#"
                  @click="sideTabsTemp.tabdetails = false, sideTabsTemp.tabcontent = true, sideTabsTemp.tabbody = false"
                >
                  <img
                    v-if="sideTabsTemp.tabcontent"
                    v-bind:class="{ vactive: sideTabsTemp.tabcontent }"
                    class="ve-nav-img"
                    src="../assets/img/content.png"
                    alt
                  >
                  <img
                    v-if="!sideTabsTemp.tabcontent"
                    class="ve-nav-img"
                    src="../assets/img/content-black.png"
                    alt
                  >
                </a>
                        </li>
                        <li>
                            <a
                  href="#"
                  @click="sideTabsTemp.tabdetails = false, sideTabsTemp.tabcontent = false, sideTabsTemp.tabbody = true"
                >
                  <img
                    v-if="sideTabsTemp.tabbody"
                    v-bind:class="{ vactive: sideTabsTemp.tabbody }"
                    class="ve-nav-img"
                    src="../assets/img/body.png"
                    alt
                  >
                  <img
                    v-if="!sideTabsTemp.tabbody"
                    class="ve-nav-img"
                    src="../assets/img/body-black.png"
                    alt
                  >
                </a>
                        </li>
                    </ul>
                </div>
            </div>
            <transition enter-active-class="animated fadeInRight fast">
            <div v-if="sideTabsTemp.tabcontent" style="height:100%" key=1>
                 <transition enter-active-class="animated fadeInRight fast">
                <div class="vb-p-10" v-if="selectedWidget.parentRow == null" key=1>
                    <div style="background-color: white; width: 95px; height: 100px;" class="vb-widgets-box font-center  " v-draggable @click="addToWidget('parentRowWidget')" @drag-end="onDragEnd('parentRowWidget')" @drag-start="onDragStart('parentRowWidget')">
                        <div class="ti-layout-width-full font-40" ></div>
                        <span >Column</span>
                    </div>
                    <div style="background-color: white; width: 95px; height: 100px;" class="vb-widgets-box font-center  " v-draggable @drag-end="onDragEnd('buttonWidget')" @drag-start="onDragStart('buttonWidget')">
                        <div class="ti-control-stop font-40" ></div>
                        <span >Button</span>
                    </div>
                    <div style="background-color: white; width: 95px; height: 100px;" class="vb-widgets-box font-center  " v-draggable @drag-end="onDragEnd('dividerWidget')" @drag-start="onDragStart('dividerWidget')">
                        <div class="ti-layout-line-solid font-40" ></div>
                        <span >Divider</span>
                    </div>
                    <div style="background-color: white; width: 95px; height: 100px;" class="vb-widgets-box font-center  " v-draggable @drag-end="onDragEnd('htmlWidget')" @drag-start="onDragStart('htmlWidget')">
                        <div class="ti-html5 font-40" ></div>
                        <span >HTML</span>
                    </div>
                    <div style="background-color: white; width: 95px; height: 100px;" class="vb-widgets-box font-center  " v-draggable @drag-end="onDragEnd('imageWidget')" @drag-start="onDragStart('imageWidget')">
                        <div class="ti-image font-40" ></div>
                        <span >Image</span>
                    </div>
                    <div style="background-color: white; width: 95px; height: 100px;" class="vb-widgets-box font-center  " v-draggable @drag-end="onDragEnd('textWidget')" @drag-start="onDragStart('textWidget')">
                        <div class="ti-text font-40" ></div>
                        <span >Text</span>
                    </div>
                    <div style="background-color: white; width: 95px; height: 100px;" class="vb-widgets-box font-center  " v-draggable @drag-end="onDragEnd('socialWidget')" @drag-start="onDragStart('socialWidget')">
                        <div class="ti-link font-40" ></div>
                        <span >Social</span>
                    </div>
                    <div style="background-color: white; width: 95px; height: 100px;" class="vb-widgets-box font-center  " v-draggable @click="addToWidget('twoColumn')" @drag-end="onDragEnd('twoColumn')" @drag-start="onDragStart('twoColumn')">
                        <div class="ti-link font-40" ></div>
                        <span >Two Column</span>
                    </div>
                    <!-- <div style="background-color: white; color:#6C9229; width: 95px; height: 100px;" class="vb-widgets-box font-center  " @click="printHTML()">Print HTML</div>
            <div style="background-color: white; color:#6C9229; width: 95px; height: 100px;" class="vb-widgets-box font-center  " @click="printCode()">Print Code</div>-->
                </div>

                <div v-else key=2>
                    <columns :widgetType="widgetType" :selectedWidget="selectedWidget" v-on:addColumn="addToWidget('columnPlaceholder')" v-on:removeColumn="removeFromWidget" v-on:chnageColumnSize="chnageColumnSize($event)"></columns>
                    <row-properties :widgetType="widgetType" :selectedWidget="selectedWidget"></row-properties>
                    <col-properties :widgetType="widgetType" :selectedWidget="selectedWidget"></col-properties>
                    <vlink :widgetType="widgetType" :selectedWidget="selectedWidget"></vlink>
                    <action v-if="selectedWidget.row == null ? false : widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].type == 'imageWidget'" :widgetType="widgetType" :selectedWidget="selectedWidget"></action>
                    <iconsProp v-if="selectedWidget.row == null ? false : widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].type == 'socialWidget'" :widgetType="widgetType" :selectedWidget="selectedWidget"></iconsProp>
                    <color :widgetType="widgetType" :selectedWidget="selectedWidget"></color>
                    <vimage v-if="selectedWidget.row == null ? false : widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].type == 'imageWidget'" :widgetType="widgetType" :selectedWidget="selectedWidget"></vimage>
                    <btnText :widgetType="widgetType" :selectedWidget="selectedWidget"></btnText>
                    <spaceing v-if="selectedWidget.row == null ? false : widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].type == 'buttonWidget'" :widgetType="widgetType" :selectedWidget="selectedWidget"></spaceing>
                    <vhtml v-if="selectedWidget.row == null ? false : widgetType[selectedWidget.parentRow].columns[selectedWidget.column].rows[selectedWidget.row].type == 'htmlWidget'" :widgetType="widgetType" :selectedWidget="selectedWidget"></vhtml>
                    <textEditor :widgetType="widgetType" :selectedWidget="selectedWidget"></textEditor>
                    <general v-if=" selectedWidget.row != null" :widgetType="widgetType" :selectedWidget="selectedWidget"></general>
                </div>
                 </transition>
            </div>
            <div v-if="sideTabsTemp.tabbody" style="height:100%" key=2>
                <!-- <vbody :widgetType="widgetType" :selectedWidget="selectedWidget"></vbody> -->
            </div>
            </transition>
            <!-- <div v-if="sideTabsTemp.tabdetails">
                <tabdetails :templateDetails="templateDetails"></tabdetails>
            </div> -->
        </vue-perfect-scrollbar>
    </div>
</div>
</template>

<script>
import tabdetails from "@/temp/comman/details";
//Style tools import
import columns from "@/temp/email/tools/columns.vue";
import RowProperties from "@/temp/email/tools/row-properties.vue";
import ColProperties from "@/temp/email/tools/col-properties.vue";
import action from "@/temp/email/tools/action.vue";
import color from "@/temp/email/tools/color.vue";
import general from "@/temp/email/tools/general.vue";
import vimage from "@/temp/email/tools/image.vue";
import vlink from "@/temp/email/tools/link.vue";
import spaceing from "@/temp/email/tools/spaceing.vue";
import vtext from "@/temp/email/tools/text.vue";
import vhtml from "@/temp/email/tools/html.vue";
import emailLeft from "@/temp/email/email-left.vue";
import btnText from "@/temp/email/tools/btnText";
import textEditor from "@/temp/email/tools/textEditor";
import iconsProp from "@/temp/email/tools/icons_prop";

//import widgets
import buttonWidget from "@/temp/email/widgets/buttonWidget.vue";
import columnsWidget from "@/temp/email/widgets/columnsWidget.vue";
import dividerWidget from "@/temp/email/widgets/dividerWidget.vue";
import htmlWidget from "@/temp/email/widgets/htmlWidget.vue";
import imageWidget from "@/temp/email/widgets/imageWidget.vue";
import textWidget from "@/temp/email/widgets/textWidget.vue";
import socialWidget from "@/temp/email/widgets/socialWidget.vue";
import parentRowWidget from "@/temp/email/widgets/parentRowWidget.vue";
import columnPlaceholder from "@/temp/email/widgets/columnPlaceholder.vue";

import {
    getEmailTemp
} from "@/temp/helpers/helper.js";

export default {
    name: "app",
    components: {
        tabdetails,
        btnText,
        textEditor,
        iconsProp,
        //Style tools components
        columnPlaceholder,
        parentRowWidget,
        RowProperties,
        ColProperties,
        action,
        color,
        general,
        vimage,
        vlink,
        spaceing,
        vtext,
        columns,
        emailLeft,
        buttonWidget,
        columnsWidget,
        dividerWidget,
        socialWidget,
        htmlWidget,
        imageWidget,
        textWidget,
        vhtml
    },
    props: {
        templateDetails: Object,
        emailwidgetType: Array,
        emailHTML: Object,
        sideTabsTemp: Object
    },
    created() {
        this.emailwidgetType.forEach(elem1 => {
            elem1.component = parentRowWidget;
            elem1.columns.forEach(elem2 => {
                elem2.component = columnPlaceholder;
                elem2.rows.forEach(elem3 => {
                    switch (elem3.type) {
                        case "buttonWidget":
                            elem3.component = buttonWidget;
                            break;
                        case "dividerWidget":
                            elem3.component = dividerWidget;
                            break;
                        case "htmlWidget":
                            elem3.component = htmlWidget;
                            break;
                        case "imageWidget":
                            elem3.component = imageWidget;
                            break;
                        case "textWidget":
                            elem3.component = textWidget;
                            break;
                        case "socialWidget":
                            elem3.component = socialWidget;
                            break;
                    }
                });
            });
        });

        // console.log(JSON.stringify(emailwidgetTypeTest));
        this.widgetType = this.emailwidgetType;

        //  this.widgetType = savedData;
    },
    data: function () {
        return {
            widgetType: [],
            selectedWidget: {
                parentRow: null,
                column: null,
                row: null
            },
            hasDragEnded: false,
            selectedDropWidget: {
                parentRow: null,
                column: null,
                row: null
            },
            addWidgetToBottom: false,
            dragWidgetType: null
        };
    },
    // created() {
    //   console.log("created");
    //   this.runTest();
    //   for (var i = 0; i < this.widgetType.length; i++) {
    //     console.log("created");
    //   }
    //   this.widgetType.forEach(function(element, index) {
    //     console.log("ran in for each");
    //     switch (element.size) {
    //       case "one":
    //         break;
    //       case "two":
    //         console.log("ran in for each");
    //         this.addToWidget("Column", index);

    //         break;
    //       case "three":
    //         break;
    //       case "four":
    //         break;
    //       case "right":
    //         break;
    //       case "left":
    //         break;

    //       default:
    //       // code block
    //     }
    //   });
    // },
    methods: {
        printCode() {
            // console.log(JSON.stringify(this.widgetType));
        },
        printHTML() {
            console.log(
                // document
                // .getElementById("getemail")
                // .innerHTML.replace(/class="hoverBox"/g, 'style="display: none;"')
                // .replace(
                //     /class="column-drag-handle moveBtn"/g,
                //     'style="display: none;"'
                // )
                document.getElementById("getemail").innerHTML
            );
        },
        updated() {},
        onDragStart(type, moveIndex) {
            this.dragWidgetType = type;
        },
        onDragEnd(type, moveIndex) {
            this.hasDragEnded = true;
            if (moveIndex == undefined) {
                if (this.selectedDropWidget.parentRow != null) {
                    if (this.addWidgetToBottom) {
                        var newLastIndex = this.selectedDropWidget;
                        newLastIndex.row = this.selectedDropWidget.row + 1;
                        this.addToWidget(type, newLastIndex);
                    } else {
                        this.addToWidget(type, this.selectedDropWidget);
                    }
                }
            } else {
                console.log(moveIndex);
                var movedWidget = JSON.parse(
                    JSON.stringify(
                        this.widgetType[moveIndex.parentRow].columns[moveIndex.column].rows[
                            moveIndex.row
                        ]
                    )
                );
                this.selectedWidget = {
                    parentRow: null,
                    column: null,
                    row: null
                };

                switch (movedWidget.type) {
                    case "buttonWidget":
                        movedWidget.component = buttonWidget;
                        break;
                    case "dividerWidget":
                        movedWidget.component = dividerWidget;
                        break;
                    case "htmlWidget":
                        movedWidget.component = htmlWidget;
                        break;
                    case "imageWidget":
                        movedWidget.component = imageWidget;
                        break;
                    case "textWidget":
                        movedWidget.component = textWidget;
                        break;
                }

                if (this.selectedDropWidget.column == moveIndex.column) {
                    if (moveIndex.row > this.selectedDropWidget.row) {
                        var index = this.selectedDropWidget.row;

                        if (this.addWidgetToBottom) {
                            index++;
                        }

                        this.widgetType[moveIndex.parentRow].columns[
                            moveIndex.column
                        ].rows.splice(moveIndex.row, 1);

                        this.widgetType[this.selectedDropWidget.parentRow].columns[
                            this.selectedDropWidget.column
                        ].rows.splice(index, 0, movedWidget);
                    } else {
                        var index = this.selectedDropWidget.row;

                        if (this.addWidgetToBottom) {
                            index++;
                        }
                        this.widgetType[this.selectedDropWidget.parentRow].columns[
                            this.selectedDropWidget.column
                        ].rows.splice(index, 0, movedWidget);

                        this.widgetType[moveIndex.parentRow].columns[
                            moveIndex.column
                        ].rows.splice(moveIndex.row, 1);
                    }
                } else {
                    var index = this.selectedDropWidget.row;

                    if (this.addWidgetToBottom) {
                        index++;
                    }
                    this.widgetType[this.selectedDropWidget.parentRow].columns[
                        this.selectedDropWidget.column
                    ].rows.splice(index, 0, movedWidget);

                    this.widgetType[moveIndex.parentRow].columns[
                        moveIndex.column
                    ].rows.splice(moveIndex.row, 1);
                }
            }

            this.dragWidgetType = null;
        },
        addToBottom(value) {
            this.addWidgetToBottom = value;
        },
        chnageColumnSize(side) {
            if (side == "right") {
                this.$set(
                    this.widgetType[this.selectedWidget.parentRow].columns[1].style,
                    2,
                    "33%"
                );
            } else if (side == "left") {
                this.$set(
                    this.widgetType[this.selectedWidget.parentRow].columns[0].style,
                    2,
                    "33%"
                );
            } else {
                var num = "";
                switch (side) {
                    case "one":
                        num = "100%";
                        break;
                    case "two":
                        num = "50%";
                        break;
                    case "three":
                        num = "33%";
                        break;
                    case "four":
                        num = "25%";
                        break;
                }
                for (
                    var i = 0; i < this.widgetType[this.selectedWidget.parentRow].columns.length; i++
                ) {
                    this.$set(
                        this.widgetType[this.selectedWidget.parentRow].columns[i].style,
                        2,
                        num
                    );
                }
            }
        },
        changeSelectedDropWidget(index) {
            this.selectedDropWidget = index;
            if (
                index == {
                    parentRow: null,
                    column: null,
                    row: null
                }
            ) {
                hasDragEnded = false;
            }
        },

        removeFromWidget() {
            this.widgetType[this.selectedWidget.parentRow].columns.pop();
            this.widgetType[this.selectedWidget.parentRow].size--;
        },
        addToWidget: function (type, apendIndex = this.widgetType.length) {
            if (type == "parentRowWidget") {
                this.widgetType.splice(apendIndex, 0, {
                    type: type,
                    component: parentRowWidget,
                    size: 1,
                    numSize: "one",
                    imgurl: "",
                    repeat: "no-repeat",
                    position: "left top",
                    width: false,
                    columns: [{
                        component: columnPlaceholder,
                        style: [
                            "#FFFFFF00",
                            {
                                padding: 0,
                                paddingLeft: 0,
                                paddingRight: 0,
                                paddingTop: 0,
                                paddingBottom: 0
                            },
                            "",
                            {
                                bgcolor: "transparent",
                                cbgcolor: "transparent"
                            },
                            {
                                border: "blue solid 0",
                                borderRight: "blue solid 0",
                                borderLeft: "blue solid 0",
                                borderTop: "blue solid 0",
                                borderBottom: "blue solid 0"
                            }
                        ],
                        rows: []
                    }],
                    style: [
                        "#FFFFFF00",
                        {
                            padding: 0,
                            paddingLeft: 0,
                            paddingRight: 0,
                            paddingTop: 0,
                            paddingBottom: 0
                        },
                        {
                            bgcolor: "transparent",
                            cbgcolor: "transparent"
                        }
                    ]
                });
            } else if (type == "columnPlaceholder") {
                this.widgetType[this.selectedWidget.parentRow].size++;
                this.widgetType[this.selectedWidget.parentRow].columns.push({
                    component: columnPlaceholder,
                    style: [
                        "#FFFFFF00",
                        {
                            padding: 0,
                            paddingLeft: 0,
                            paddingRight: 0,
                            paddingTop: 0,
                            paddingBottom: 0
                        },
                        "",
                        {
                            bgcolor: "transparent",
                            cbgcolor: "#FFF"
                        },
                        {
                            border: "blue solid 0",
                            borderRight: "blue solid 0",
                            borderLeft: "blue solid 0",
                            borderTop: "blue solid 0",
                            borderBottom: "blue solid 0"
                        }
                    ],
                    rows: []
                });
            } else if (type == "buttonWidget") {
                if (this.selectedDropWidget.column != null) {
                    this.widgetType[apendIndex.parentRow].columns[
                        apendIndex.column
                    ].rows.splice(apendIndex.row, 0, {
                        type: type,
                        component: buttonWidget,
                        value: {
                            btnText: "Button Text",
                            buttonLink: ""
                        },
                        style: [
                            "#FFFFFF00",
                            {
                                padding: 10,
                                paddingLeft: 10,
                                paddingRight: 10,
                                paddingTop: 10,
                                paddingBottom: 10
                            },
                            {
                                bgcolor: "#3AAEE0",
                                hcolor: "#FFFF",
                                tcolor: "#FFFF"
                            },
                            {
                                alignment: "center",
                                lineHeight: 120,
                                borderRadius: 4,
                                borderColor: "#8C8C8C",
                                borderWidth: 0,
                                btnPadding: {
                                    padding: 10,
                                    paddingLeft: 10,
                                    paddingRight: 10,
                                    paddingTop: 10,
                                    paddingBottom: 10
                                },
                                btnContainerPadding: {
                                    padding: 10,
                                    paddingLeft: 10,
                                    paddingRight: 10,
                                    paddingTop: 10,
                                    paddingBottom: 10
                                },
                                size: {
                                    fsize: 14
                                },
                                font: {
                                    fontFamily: null
                                }
                            }
                        ]
                    });
                } else {}
            } else if (type == "dividerWidget") {
                if (this.selectedDropWidget.column != null) {
                    this.widgetType[apendIndex.parentRow].columns[
                        apendIndex.column
                    ].rows.splice(apendIndex.row, 0, {
                        type: type,
                        component: dividerWidget,
                        value: "",
                        style: [
                            "#FFFFFF00",
                            {
                                padding: 10,
                                paddingLeft: 10,
                                paddingRight: 10,
                                paddingTop: 10,
                                paddingBottom: 10
                            }
                        ]
                    });
                }
            } else if (type == "htmlWidget") {
                if (this.selectedDropWidget.column != null) {
                    this.widgetType[apendIndex.parentRow].columns[
                        apendIndex.column
                    ].rows.splice(apendIndex.row, 0, {
                        type: type,
                        component: htmlWidget,
                        value: "",
                        style: [
                            "#FFFFFF00",
                            {
                                padding: 10,
                                paddingLeft: 10,
                                paddingRight: 10,
                                paddingTop: 10,
                                paddingBottom: 10
                            },
                            {
                                code: "<strong>this is a HTML tag</strong>"
                            }
                        ]
                    });
                }
            } else if (type == "imageWidget") {
                if (this.selectedDropWidget.column != null) {
                    this.widgetType[apendIndex.parentRow].columns[
                        apendIndex.column
                    ].rows.splice(apendIndex.row, 0, {
                        type: type,
                        component: imageWidget,
                        value: {
                            type: type,
                            ImageUrl: "",
                            ImageUrlLink: ""
                        },
                        style: [
                            "#FFFFFF00",
                            {
                                padding: 10,
                                paddingLeft: 10,
                                paddingRight: 10,
                                paddingTop: 10,
                                paddingBottom: 10
                            },
                            {
                                newTab: null,
                                linkUrl: null,
                                imgurl: "https://s3-ap-southeast-1.amazonaws.com/vemessage-images/1554011171959-500x100.png",
                                imgsize: 80,
                                position: "center"
                            }
                        ]
                    });
                }
            } else if (type == "textWidget") {
                if (this.selectedDropWidget.column != null) {
                    this.widgetType[apendIndex.parentRow].columns[
                        apendIndex.column
                    ].rows.splice(apendIndex.row, 0, {
                        type: type,
                        component: textWidget,
                        value: {
                            text: '<p style="text-align: justify;"><span style="font-family: arial, helvetica, sans-serif;"><strong>Lorem Ipsum</strong> is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industrys standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book.</span></p>'
                        },
                        style: [
                            "#FFFFFF00",
                            {
                                padding: 10,
                                paddingLeft: 10,
                                paddingRight: 10,
                                paddingTop: 10,
                                paddingBottom: 10
                            },
                            {
                                bgcolor: "transparent",
                                hcolor: "#FFFF",
                                tcolor: "#FFFF"
                            }
                        ]
                    });
                } else {}
            } else if (type == "socialWidget") {
                if (this.selectedDropWidget.column != null) {
                    this.widgetType[apendIndex.parentRow].columns[
                        apendIndex.column
                    ].rows.splice(apendIndex.row, 0, {
                        type: type,
                        component: socialWidget,
                        value: "",
                        style: [
                            "#FFFFFF00",
                            {
                                padding: 10,
                                paddingLeft: 20,
                                paddingRight: 20,
                                paddingTop: 10,
                                paddingBottom: 10
                            }
                        ],
                        text: {
                            socialsLinks: [{
                                    name: "circle_Black_Facebook",
                                    title: "Facebook",
                                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929638334-Facebook.png"
                                },
                                {
                                    name: "circle_Black_Twiter",
                                    title: "Twiter",
                                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929769726-Twiter.png"
                                },
                                {
                                    name: "circle_Black_Instagram",
                                    title: "Instagram",
                                    imagelink: "https://s3.ap-southeast-1.amazonaws.com/vemessage-images/1553929675528-Instagram.png"
                                }
                            ]
                        }
                    });
                }
            } else if (type == "twoColumn") {
                var data = getEmailTemp();

                data.forEach(elem1 => {
                    elem1.component = parentRowWidget;
                    elem1.columns.forEach(elem2 => {
                        elem2.component = columnPlaceholder;
                        elem2.rows.forEach(elem3 => {
                            switch (elem3.type) {
                                case "buttonWidget":
                                    elem3.component = buttonWidget;
                                    break;
                                case "dividerWidget":
                                    elem3.component = dividerWidget;
                                    break;
                                case "htmlWidget":
                                    elem3.component = htmlWidget;
                                    break;
                                case "imageWidget":
                                    elem3.component = imageWidget;
                                    break;
                                case "textWidget":
                                    elem3.component = textWidget;
                                    break;
                                case "socialWidget":
                                    elem3.component = socialWidget;
                                    break;
                            }
                        });
                    });
                });

                this.widgetType.splice(apendIndex, 0, data[0]);
            }
        }
    }
};
</script>

<style>
td {
    padding: 0;
}
</style>
