<template>
  <el-tabs v-model="activeName" class="es-form-tabs" v-bind="$attrs">
    <el-tab-pane
      v-for="(tab, index) in items"
      :key="tab.name || index"
      :label="tab.title"
      :name="tab.name"
    >
      <!-- 核心：在每个 tab-pane 内部，遍历并渲染该 tab 的 contents -->
      <template v-for="(item, subIndex) in tab.contents">
        <div
          v-if="item.type === 'caption' && !item.hide"
          :key="'caption-' + subIndex"
          class="es-form-item-caption"
        >
          {{ item.text }}
        </div>
        <el-form-item
          v-else-if="!item.hide"
          :key="item.name || subIndex"
          :label-width="getItemLabelWidth(item)"
          :prop="item.name"
          :rules="getRules ? getRules(item) : []"
          :style="getStyle ? getStyle(item) : {}"
        >
          <es-label
            slot="label"
            v-if="shouldShowLabel(item)"
            v-bind="getLabel ? getLabel(item.label) : {}"
          ></es-label>
          <es-data-table
            v-if="item.type == 'table'"
            :data="models[item.name]"
            :full="item.height != undefined || item.height != null"
            v-bind="
              handleExclAttribute({
                data: item,
                attrs: ['value', 'events']
              })
            "
            v-on="item.events"
            :readonly="item.readonly !== undefined ? item.readonly : readonly"
            @blur="
              (val, data) => {
                handleBlur(item, val, data);
              }
            "
            @focus="
              (val, data) => {
                handleFocus(item, val, data);
              }
            "
            @edit="
              (val, data) => {
                handleChange(item, val, data);
              }
            "
            @btnClick="handleClick"
            @dataChange="handleDataChange"
          >
          </es-data-table>
          <!-- 动态渲染具体组件 -->
          <component
            v-else
            :is="getComponentName(item.type)"
            v-bind="
              handleExclAttribute
                ? handleExclAttribute({
                    data: item,
                    attrs: ['value', 'events']
                  })
                : {}
            "
            v-on="item.events"
            v-model="models[item.name]"
            :readonly="item.readonly !== undefined ? item.readonly : readonly"
            @change="(val) => $emit('change', item, val)"
          />
        </el-form-item>
      </template>
    </el-tab-pane>
  </el-tabs>
</template>

<script>
export default {
  name: 'FormTabItemRender',
  inheritAttrs: false, // 允许将 el-tabs 的属性透传
  props: {
    // 这里的 items 对应 JSON 中的 contents 数组，即 Tab Pane 列表
    items: { type: Array, default: () => [] },
    models: { type: Object, default: () => ({}) },
    readonly: Boolean,
    showLabel: Boolean,
    labelWidth: String,
    hides: { type: Array, default: () => [] },
    // 工具方法
    handleExclAttribute: Function,
    getLabel: Function,
    getRules: Function,
    handleBlur: Function,
    handleFocus: Function,
    handleChange: Function,
    handleClick: Function,
    handleDataChange: Function,    
    getStyle: Function
  },
  data() {
    return {
      activeName: ''
    };
  },
  mounted() {
    console.log('this.items', this.items);
    this.activeName = this.items[0].name;
    console.log('active', this.activeName);
  },
  methods: {
    getComponentName(type) {
      const map = {
        input: 'es-input',
        select: 'es-select',
        number: 'es-input-number',
        radio: 'es-radio-group',
        checkbox: 'es-checkbox-group',
        date: 'es-date-picker',
        table: 'es-data-table',
        textarea: 'es-input' // 假设 textarea 也是 es-input 带 type="textarea"
      };
      return map[type] || 'es-input';
    },
    shouldShowLabel(item) {
      return (
        item.showLabel !== false &&
        item.label &&
        !item.labelHide &&
        this.showLabel
      );
    },
    getItemLabelWidth(item) {
      return this.shouldShowLabel(item) ? this.labelWidth : '0';
    }
  }
};
</script>
