<!--
/**
 * author: vformAdmin
 * email: vdpadmin@163.com
 * website: https://www.vform666.com
 * date: 2021.08.18
 * remark: 如果要分发VForm源码，需在本文件顶部保留此文件头信息！！
 */
-->

<template>
  <container-wrapper :designer="designer" :widget="widget" :parent-widget="parentWidget" :parent-list="parentList"
                     :index-of-parent-list="indexOfParentList">

    <div :key="widget.id" class="table-container"
         :class="[selected ? 'selected' : '', customClass]" @click.stop="selectWidget(widget)">
      <table class="table-layout table-d-box" :class="[widget.options.styleTableClass]">
        <tbody>
        <tr >
          <td class="table-cell"></td>
          <td class="table-cell"></td>
          <td class="table-cell"></td>
          <td class="table-cell"></td>
        </tr>
        </tbody>
      </table>
    </div>

  </container-wrapper>
</template>

<script>
  import i18n from "../../../../../components/xform/utils/i18n"
  import containerMixin from "../../../../../components/xform/form-designer/form-widget/container-widget/containerMixin"
  import ContainerWrapper from "../../../../../components/xform/form-designer/form-widget/container-widget/container-wrapper"
  import refMixinDesign from "../../../../../components/xform/form-designer/refMixinDesign"

  export default {
    name: "table2-widget",
    componentName: 'ContainerWidget',
    mixins: [i18n, containerMixin, refMixinDesign],
    inject: ['refList'],
    components: {
      ContainerWrapper,
    },
    props: {
      widget: Object,
      parentWidget: Object,
      parentList: Array,
      indexOfParentList: Number,
      designer: Object,
    },
    computed: {
      selected() {
        return this.widget.id === this.designer.selectedId
      },

      customClass() {
        return this.widget.options.customClass || ''
      },

    },
    watch: {
      //
    },
    created() {
      this.initRefList()
    },
    mounted() {
      //
    },
    methods: {

    }
  }
</script>

<style lang="scss" scoped>
  div.table-container {
    padding: 5px;
    border: 1px dashed #336699;
    box-sizing: border-box;

    table.table-layout {
      width: 100%;
      text-align: center;
      //border: 1px solid #c8ebfb;
      border-collapse: collapse;
      table-layout: fixed;

      ::v-deep td {
        height: 48px;
        border: 0.5px dashed #336699;
        padding: 3px;
        display: table-cell;
        width:auto;
      }

      .form-widget-list {
        border: 1px dashed #336699;
        min-height: 36px;
      }
    }
  }

  .table-container.selected {
    outline: 2px solid $--color-primary !important;
  }

</style>
