<template>
  <td
    class="table-cell"
    :class="[customClass, tdClass, 'w' + widget.options.colspan]"
    :colspan="widget.options.colspan || 1"
    :rowspan="widget.options.rowspan || 1"
    :style="{
      width: widget.options.cellWidth + ' !important' || '',
      height: widget.options.cellHeight + ' !important' || '',
    }"
  >
    <template v-for="(subWidget, swIdx) in widget.widgetList">
      <template v-if="'container' === subWidget.category">
        <component
          :is="subWidget.type + '-item'"
          :widget="subWidget"
          :key="swIdx"
          :parent-list="widget.widgetList"
          :index-of-parent-list="swIdx"
          :parent-widget="widget"
          :tableParam="tableParam"
        >
          <!-- 递归传递插槽！！！ -->
          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
            <slot :name="slot" v-bind="scope" />
          </template>
        </component>
      </template>
      <template v-else>
        <component
          :is="subWidget.type + '-widget'"
          :field="subWidget"
          :key="swIdx"
          :parent-list="widget.widgetList"
          :index-of-parent-list="swIdx"
          :parent-widget="widget"
          :tableParam="tableParam"
          :formItemProp="getProp(subWidget)"
        >
          <!-- 递归传递插槽！！！ -->
          <template v-for="slot in Object.keys($scopedSlots)" v-slot:[slot]="scope">
            <slot :name="slot" v-bind="scope" />
          </template>
        </component>
      </template>
    </template>
  </td>
</template>

<script>
import emitter from "../../../../components/xform/utils/emitter";
import i18n from "../../../../components/xform/utils/i18n";
import refMixin from "../../../../components/xform/form-render/refMixin";
import FieldComponents from "../../../../components/xform/form-designer/form-widget/field-widget/index";

export default {
  name: "Table2CellItem",
  componentName: "ContainerItem",
  mixins: [emitter, i18n, refMixin],
  components: {
    ...FieldComponents,
  },
  props: {
    widget: Object,

    rowIndex: Number,
    colIndex: Number,
    parentWidget: Object,
    parentTarget: Object,
    row: Object,
  },
  inject: ["refList", "globalModel", "getRows"],
  computed: {
    customClass() {
      return this.widget.options.customClass || "";
    },
    tdClass() {
      return (this.colIndex + 1) % 2 == 0 ? "" : "odd";
    },
    formModel: {
      cache: !1,
      get: function () {
        return this.globalModel.formModel;
      },
    },
    formDataId() {
      let formRef = this.getFormRef();
      return formRef.dataId;
    },
    tableParam() {
      return {
        rowIndex: this.widget.options.rowIndex,
        row: this.row,
      };
    },
  },
  created() {
    /* tableCell不生成组件引用，故无须调用initRefList！！ */
    //this.initRefList()

    this.init();
  },
  methods: {
    init() {
      if (this.widget.widgetList.length) {
        let formRef = this.getFormRef();
        let keyName = formRef.getFieldKeyName(this.widget.widgetList[0]);
        if (!keyName) return;
        this.$watch(`row.${keyName}`, (newVal, oldVal) => {
          let rows = this.parentTarget.rows;
          rows.find((row) => row.f_key == keyName).f_field_value = newVal;
        });
      }
    },
    getProp(subWidget) {
      let rowIndex = this.widget.options.rowIndex;
      let formRef = this.getFormRef();
      let keyName1 = formRef.getFieldKeyName(this.parentWidget);
      let name = `${keyName1}.${rowIndex}.f_field_value`;
      return name;
    },
  },
};
</script>

<style lang="scss" scoped></style>
